Ajax-Formularvalidierung, nachdem MVC auf Bootstrap trifft

In diesem Artikel wird hauptsächlich die Ajax-Formularüberprüfung nach MVC und Bootstrap vorgestellt. Es hat einen gewissen Referenzwert.

Nach der Verwendung von Bootstrap kann er es selbst tun. Wenn ein Fehler auftritt, ist die Verwendung schwieriger. Wenn Sie normalerweise jquery.validate verwenden, können Sie nur den eigenen Stil verwenden. Wenn ein Modell vorhanden ist, ist es bequemer, die Modellüberprüfung zu verwenden. Wie kann man es lösen?

Natürlich können Sie speziell dafür ein JQuery-Plug-In schreiben. Wenn Sie gerne Plug-Ins schreiben, sollten Sie etwas recherchieren.

Zuerst erhält Nuget eine Komponente von MVC EditorTemplates für Bootstrap 3. Damit gibt es einige Vorlagen, wie zum Beispiel einen relativ einfachen Text:

@model object
<p class="form-group@(Html.ValidationErrorFor(m => m, " has-error"))">
  @Html.LabelFor(m => m, new { @class = "control-label" })
  <p 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" })
  </p>
</p>

Auf diese Weise wird es nach der Verwendung von EditorFor Es wird Geben Sie den für Bootstrap erforderlichen HTML-Code direkt aus, was bequemer ist.

Wir sehen, dass es bereits einen Has-Error-Handler für Verifizierungsfehler gibt. Die zweite Frage ist: Wir benötigen eine Ajax-Verifizierung.

Also verwenden wir weiterhin die mit MVC gelieferte Modellüberprüfung. In der Komponente, die wir gerade erhalten haben, fügen wir zunächst eine Erweiterungsmethode für nicht stark typisierte

    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;
    }

Ansicht. Kann hinzugefügt werden:

    <p class="form-group@(Html.ValidationError("Department", " has-error"))">
      <label class="control-label" for="DepartmentId">所在部门</label>
      <p 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" })
      </p>
    </p>

Schließlich weiß ich nicht, ob es bequemer ist, Ajax.BeginForm von MVC zu verwenden, aber ich persönlich bin der Meinung, dass dies der Fall ist ist nicht sehr flexibel, daher verwende ich weiterhin ajaxSubmit und jquery.ajax:

//ready
      var $puserform = $("#puserform");
      $puserform.dialog({
        title: '新建用户',//.....
      });
      $("#btnCreateUser").click(function () {
        var nodes = zTreeObjleft.getSelectedNodes();
        if (nodes.length > 0) {
          CreateUserForm($puserform);
        }
      })
 
 
function CreateUserForm(form) {
      var $puserform = form;
      $.ajax({
        url: "CreateUser",
        success: function (html) {
          CreateUserFormSuccessCallback(html, $puserform);
        }
      });
    }
 
    function InitSelectDepartmentWhenCreateUser() {
      $("#btnSelectDepartment").departmentSelection({
        onSelected: function (name, id) {
          $("#deptname").text(name);
          $("#DepartmentId").val(id);
        }
      });
    }
 
    function CreateUserFormSuccessCallback(html, form) {
      var $puserform = form;
      $puserform.children().children().html(html);
      $("#puserform").dialog("open");
      var $form = $puserform.find("form")
      InitSelectDepartmentWhenCreateUser();
      $form.submit(function () {
        $form.ajaxSubmit(function (data) {
          if (data == "success") {
            $("#puserform").dialog("close");
            $("#puserform").clearForm();
          }
          else {
            CreateUserFormSuccessCallback(data, form);
          }
        });
        event.preventDefault();
      });
    }

In der Hintergrundaktionsmethode können wir eine benutzerdefinierte Überprüfung dafür hinzufügen:

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

Der ungefähre Effekt:

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Implementierung der AJAX-Anforderungswarteschlange

Eine Zusammenfassung mehrerer Methoden zum asynchronen Senden von Formularen mithilfe von Ajax

So lösen Sie das Problem von Arrays in AJAX-Anfragen

Das obige ist der detaillierte Inhalt vonAjax-Formularvalidierung, nachdem MVC auf Bootstrap trifft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!