Category / Section
How to do server side validation for Grid in ASP.NET MVC application?
6 mins read
You can perform the server-side validation by using the “actionBegin” event of the Grid component. Inside the event handler with “save” requestType, you can prevent the default save action by setting the “args.cancel” property as true and perform the server-side validation. Based on the validation result, you can save the values or hold the Grid on edit state.
The following code example shows how to perform server-side validation in the Grid component.
- Render the Grid component with the “actionBegin” event.
Razor
<div>
@Html.EJS().Grid("InlineEditing").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor").InsertUrl("/Home/Insert").UpdateUrl("/Home/Update").RemoveUrl("/Home/Remove"); }).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("140").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").EditType("dropdownedit").Add();
}).ActionBegin("actionBegin").AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
</div>
- Inside the “actionBegin” event handler, cancel the default save action and the perform the server-side validation. Inside the Successhandler, we have called the “endEdit” method to continue the save action based on the result.
JS
var doValidation = true;
function actionBegin(e) {
var grid = document.getElementById("InlineEditing").ej2_instances[0];
if (e.requestType === 'save') {
if (doValidation) { // Flag to allow validation, initial value is true
e.cancel = true; // Cancel the default "save" action
// Perform the server validation
var ajax = new ej.base.Ajax({
url: "/Home/Data",
type: "POST",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ value: e.data["CustomerID"] }),
successHandler: function (data) {
// Display the message when value has duplicate
if (JSON.parse(data).result) {
alert("Entered value contains Duplicate CustomerID");
} else {
doValidation = false;
grid.endEdit();
}
}
});
ajax.send();
} else {
doValidation = true;
}
}
}
- In the server-side, validate the passed value from client-side and then return the result.
C#
public ActionResult Data(string value)
{
var data = orddata.ToList();
var matchingvalues = data.Where(p => p.CustomerID == value); // Checking duplicate values from list
bool duplicate = false;
if (matchingvalues.Count() > 0)
duplicate = true; // Return true if duplicate values
return Json(new { result = duplicate });
}
Output
|
Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Server_sidevalidation83808243
