ASP.NET MVC – jQuery Form Post Model Validation
Add the Following Item on web.conf to make the Validation with AJAX Effective |
<appSettings> <add key="ClientValidationEnabled" value="true" /> <add key="UnobtrusiveJavaScriptEnabled" value="true" /> </appSettings> |
JavaScript File Required for Model Vaildation |
/Scripts/jquery-1.10.2.js /Scripts/jquery.unobtrusive-ajax.js ( NuGet – microsoft.jQuery.Unobtrusive.Ajax ) /Scripts/jquery.validate.min.js ( NuGet – microsoft.jQuery.Unobtrusive.Ajax ) /Scripts/jquery.validate.unobtrusive.min.js ( NuGet – microsoft.jQuery.Unobtrusive.Ajax ) The Validation Function from jQuery / JavaScript File can be executed well from the HEAD Section or from the Page End. |
\Models\TestItem.cs – Model with Validation Annotation |
public class TestItem { [Required] public int ID { get; set; } [Required] public string Name { get; set; } [StringLength(10)] public string Desc { get; set; } } |
\Controllers\TestController.cs |
@model AJAXFormPost.Models.TestItem < style> body { font-family: Arial; font-size: 11pt; color:#000000; } #form { margin-top:20px; } .validation { margin: 4px 0px 3px 0px; display: block; } .validation, #validationsummary { color: #770000; cursor: none; font-size: 10pt; font-weight: bold; } .validation-summary-errors ul { list-style-type: none; padding-left: 0px; margin-bottom: 20px; cursor: none; margin: 7px 0px 5px 10px; display: block; } .validation-summary-errors { border: 1px solid #770000; border-radius : 4px; margin-top: 0px; margin-bottom: 12px; } #submitbtn { font-weight: bold; color: #000033; margin-top: 15px; font-size:11pt; } .form-control { line-height: 20px; height: 40px; color:#000000; margin:7px 5px 0px 0px; vertical-align:middle; } .label-cell { padding-right:7px; } </style> @using (Html.BeginForm("Form", "Test")) { @Html.AntiForgeryToken() < div id="form"> @Html.ValidationSummary(false, "", new { @id = "validationsummary" }) < table border="0" cellpadding="0" cellspacing="0" width="100%" style=""> <tr> <td valign="top" width="100" class="label-cell"> < div class="form-control"> @Html.LabelFor(model => model.ID, htmlAttributes: new { @class = "" }) </div> </td> <td valign="top"> < div class="form-control"> @Html.EditorFor(model => model.ID, new { htmlAttributes = new { @class = "" } }) </div> @Html.ValidationMessageFor(model => model.ID, "", new { @class = "validation" }) </td> </tr> <tr> <td valign="top" width="100" class="label-cell"> < div class="form-control"> @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "" }) </div> </td> <td valign="top"> < div class="form-control"> @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "" } }) </div> @Html.ValidationMessageFor(model => model.Name, "", new { @class = "validation" }) </td> </tr> <tr> <td valign="top" width="100" class="label-cell"> < div class="form-control"> @Html.LabelFor(model => model.Desc, htmlAttributes: new { @class = "" }) </div> </td> <td valign="top"> < div class="form-control"> @Html.EditorFor(model => model.Desc, new { htmlAttributes = new { @class = "" } }) </div> @Html.ValidationMessageFor(model => model.Desc, "", new { @class = "validation" }) </td> </tr> <tr> <td> <input id="submitbtn" type="submit" value="Save" /> </td> </tr> </ table> </div> } |
\Views\Form.cshtml |
public class TestController : Controller { public ActionResult Form() { return View(); } [HttpPost] public ActionResult Form(TestItem model) { if(!ModelState.IsValid) return View(); else return RedirectToAction(“Result"); } public ActionResult Result() { return View(); } } |
Remark : The Validation Summary cannot be performed from the Form Control Change with AJAX.