Example Analysis of ajax form Verification after MVC meets bootstrap

This article mainly introduces the example analysis of ajax form verification after MVC meets bootstrap, which has a certain reference value, and interested friends can refer to it. I hope you can learn a lot after reading this article.

After using bootstrap, he brought his own style has-error, want to use it will be more troublesome, the usual use of jquery.validate, then only use his own style, and there are models in the use of model verification is more convenient. How to solve it?

Of course, you can specifically write a jquery plug-in for this, I think it is quite troublesome, like to write a plug-in under the research.

First of all, Nuget acquires a component of MVC EditorTemplates for Bootstrap 3, and with it, there are some templates, such as a relatively simple Text:

@ model object @ Html.LabelFor (m = > m, new {@ class = "control-label"}) @ Html.TextBox ("", ViewData.TemplateInfo.FormattedModelValue, ViewBag.ClearTextField = = true? New {@ class = "form-control clear-text-field input-block-level"}: new {@ class = "form-control input-block-level"}) @ Html.ValidationMessageFor (m = > m, null, new {@ class = "help-block"})

In this way, after using EditorFor, you will directly output the html needed by bootstrap, which is more convenient.

We can see that there is already has-error processing for failed verification. Here comes the second problem. We need front-end verification, ajax verification, and custom verification.

So we continue to use the model validation that comes with MVC. There is a Validation class in the component we just obtained, in which we first add an extension method for non-strongly typed

Public static MvcHtmlString ValidationError (this HtmlHelper htmlHelper, string field, string error) {if (HasError (htmlHelper, ModelMetadata.FromString_Expression (field, htmlHelper.ViewData), field) return new MvcHtmlString (error); else return null;}

In View, you can add:

Select department @ Html.ValidationMessage ("Department", null, new {@ class = "help-block"})

Finally, I deal with ajax submission and postback in the script. I don't know if it's more convenient to use MVC's Ajax.BeginForm, but I don't think it's very flexible, so I continue to use ajaxSubmit and jquery.ajax:

/ / ready var $divuserform = $("# divuserform"); $divuserform.dialog ({title: 'new user', / /. ); $("# btnCreateUser") .click (function () {var nodes = zTreeObjleft.getSelectedNodes (); if (nodes.length > 0) {CreateUserForm ($divuserform);}}) function CreateUserForm (form) {var $divuserform = form; $.ajax ({url: "CreateUser", success: function (html) {CreateUserFormSuccessCallback (html, $divuserform) }});} function InitSelectDepartmentWhenCreateUser () {$("# btnSelectDepartment"). DepartmentSelection ({onSelected: function (name, id) {$("# deptname") .text (name); $("# DepartmentId") .val (id);}});} function CreateUserFormSuccessCallback (html, form) {var $divuserform = form $divuserform.children (). Children (). Html (html); $("# divuserform"). Dialog ("open"); var $form = $divuserform.find ("form") InitSelectDepartmentWhenCreateUser (); $form.submit (function () {$form.ajaxSubmit (function (data) {if (data = = "success") {$("# divuserform"). Dialog ("close") $("# divuserform"). ClearForm ();} else {CreateUserFormSuccessCallback (data, form);}}); event.preventDefault ();});}

We can add custom verification to it in the background Action method:

If (! DepartmentId.HasValue) {ModelState.AddModelError ("Department", "must select department");} if (ModelState.IsValid) {user.Id = Guid.NewGuid (); user.CreateTime = DateTime.Now; if (DepartmentId.HasValue) {var dept = new DeptUserRole (); dept.DepartmentId = DepartmentId.Value; dept.IsMain = true Dept.RoleId = RoleId.Value; user.DeptUserRoles.Add (dept);} db.Users.Add (user); await db.SaveChangesAsync (); return Content ("success");} return View (user)

General effect:

Thank you for reading this article carefully. I hope the article "sample Analysis of ajax form validation after MVC meets bootstrap" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!