How to prevent the Exception "A potentially dangerous Request.Form value was detected from the clientside" when Template column is used.
Problem
Exception will be thrown while trying to save the record with template column. Refer the below screenshot for the error
Cause
Template column is not properly initialized or template column is validated by master page while updating a record.
Solution
“A Potential dangerous Request” exception error can be over come by defining the validateRequest property of Pages as false and requestValidationMode as “2.0” (of httpRunTime) in the WebConfig file. Refer the below code
<system.web>
<httpRuntime requestValidationMode="2.0" />
<pages validateRequest="false"/>
</system.web>
Please refer to the below online links where this query has been discussed.
Or you can define the ID of the script tag in the Template property of Column instead of directly defining the html elements in it. Refer the below codes
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" AllowSorting="True" OnServerBatchEditRow="OrdersGrid_ServerBatchEditRow">
<ClientSideEvents ActionComplete="complete" EndAdd="endAdd" EndDelete="endDelete" EndEdit="endEdit"
RecordDoubleClick="doubleClick" />
<Columns>
<ej:Column HeaderText="Employee Image" Template="#columnTemplate" TextAlign="Center" Width="110" />
<ej:Column Field="EmployeeID" HeaderText=" Employee ID" IsIdentity="true" IsPrimaryKey="True" TextAlign="Right" Width="75">
<ValidationRule>
<ej:KeyValue Key="required" Value="true" />
<ej:KeyValue Key="number" Value="true" />
</ValidationRule>
</ej:Column>
<ej:Column Field="FirstName" HeaderText="First Name" TextAlign="Right" Width="80" >
<ValidationRule>
<ej:KeyValue Key="required" Value="true" />
<ej:KeyValue Key="number" Value="true" />
</ValidationRule>
</ej:Column>
<ej:Column Field="LastName" HeaderText="LastName" TextAlign="Right" Width="90">
<ValidationRule>
<ej:KeyValue Key="required" Value="true" />
</ValidationRule>
</ej:Column>
<ej:Column Field="City" HeaderText="City" Width="75">
<ValidationRule>
<ej:KeyValue Key="required" Value="true" />
</ValidationRule>
</ej:Column>
<ej:Column Field="Country" HeaderText="Country" Width="80" EditType="Dropdown">
</ej:Column>
</Columns>
<EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="Batch"></EditSettings>
<ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
</ej:Grid>
<asp:SqlDataSource ID="SqlData" runat="server" ConnectionString="<%$ ConnectionStrings:SQLConnectionString %>"
SelectCommand="SELECT * FROM [Employees]"></asp:SqlDataSource>
</div>
<script type="text/x-jsrender" id="columnTemplate">
<img style="width: 75px; height: 70px" src="../Content/images/Employees/{{:EmployeeID}}.png" alt="{{ : EmployeeID }}" />
</script>
This is not a valid solution! Data should be handled in an other way, it should not activate the request validation. It's not a recommended solution to turn off request validation. This is a bug!