MVC遇上bootstrap後的ajax表單模型驗證

MVC遇上bootstrap後的ajax表單驗證

使用bootstrap後他由他自帶的樣式has-error，想要使用它就會比較麻煩，往常使用jqueyr.validate的話隻有使用他自己的樣式了，而且有模型在使用模型驗證更友善點。怎麼解決呢？

當然你可以專門寫一個針對此的jquery插件，我覺得蠻麻煩的，喜歡寫插件的研究下吧。

首先Nuget擷取一個 MVC EditorTemplates for Bootstrap 3 的元件，有了他以後就有了一些模版，比如比較簡單的一個Text：

@model object

<div class="form-group@(Html.ValidationErrorFor(m => m, " has-error"))">

    @Html.LabelFor(m => m, new { @class = "control-label" })

    <div class="controls">

        @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" })

    </div>

</div>

這樣子以後在使用EditorFor後就會直接輸出bootstrap需要的html，比較友善。

我們看到裡面已經有了驗證失敗的has-error的處理，第二個問題來了，我們需要前端驗證，ajax驗證也行啊，還有自定義驗證呢？

于是乎繼續利用MVC自帶的模型驗證，剛才擷取的元件中有個Validation類，我們先在裡面添加一個擴充方法用于非強類型

        public static MvcHtmlString ValidationError(this HtmlHelper htmlHelper, string field, string error)

        {

            if (HasError(htmlHelper, ModelMetadata.FromStringExpression(field, htmlHelper.ViewData), field))

                return new MvcHtmlString(error);

            else

                return null;

        }

View中即可添加：

        <div class="form-group@(Html.ValidationError("Department", " has-error"))">

            <label class="control-label" for="DepartmentId">所在部門</label>

            <div class="controls">

                <span id="deptname"> </span><a id="btnSelectDepartment">選擇部門</a>

                <input class="form-control" data-val="true" data-val-required="部門是必需的。" id="DepartmentId" name="DepartmentId" type="hidden" value="">

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

            </div>

        </div>

最後在腳本中處理ajax送出和回發的處理，不知道用MVC的Ajax.BeginForm能不能更友善點，不過個人覺得這東西不是很靈活,是以繼續用ajaxSubmit及jquery.ajax：

//ready

            var $divuserform = $("#divuserform");

            $divuserform.dialog({

                title: '建立使用者',//.....

            });

            $("#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) {

            $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();

背景Action方法中我們便可為其補充自定義驗證：

            if (!DepartmentId.HasValue)

            {

                ModelState.AddModelError("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);

大緻效果：