So führen Sie eine Ajax-Formularüberprüfung in der MVC+Bootstrap-Schnittstelle durch

Dieses Mal zeige ich Ihnen, wie Sie eine Ajax-Formularüberprüfung auf der MVC+Bootstrap-Schnittstelle durchführen. Was sind die Vorsichtsmaßnahmen für die Durchführung einer Ajax-Formularüberprüfung auf der MVC + Bootstrap-Schnittstelle? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Nach der Verwendung von Bootstrap weist es einen eigenen Stil auf. Wenn Sie normalerweise jquery.validate verwenden, können Sie nur einen eigenen Stil verwenden Modellverifizierung ist bequemer. 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 können Sie verwenden EditorFür die Zukunft Dann wird der für Bootstrap erforderliche HTML-Code direkt ausgegeben, 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.

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

hinzu

Ansicht Sie können Folgendes hinzufügen:

    <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 sein kann, Ajax.BeginForm von MVC zu verwenden, aber ich persönlich Ich habe das Gefühl, dass dieses Ding nicht sehr flexibel ist. Verwenden Sie also 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 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);

Ungefähre Wirkung:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP-Chinesisch Webseite!

Empfohlene Lektüre:

Wie man Vorwärts-, Rückwärts- und Aktualisierungsvorgänge auf der Ajax-Seite realisiert

Umfassendes Verständnis von Ajax XHR-Objekt

So implementieren Sie eine AJAX-Warteschlangenanforderung (mit Code)

Ajax durchläuft jSon, um Daten zu ändern und zu löschen

Das obige ist der detaillierte Inhalt vonSo führen Sie eine Ajax-Formularüberprüfung in der MVC+Bootstrap-Schnittstelle durch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!