Heim > Web-Frontend > js-Tutorial > Hauptteil

Ajax-Formularvalidierung, nachdem MVC auf Bootstrap trifft

亚连
Freigeben: 2018-05-23 11:19:56
Original
2308 Leute haben es durchsucht

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>
Nach dem Login kopieren

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;
    }
Nach dem Login kopieren
<🎜 hinzu >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>
Nach dem Login kopieren

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: &#39;新建用户&#39;,//.....
      });
      $("#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();
      });
    }
Nach dem Login kopieren

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);
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!