Validation du formulaire Ajax après que MVC rencontre le bootstrap

Cet article présente principalement en détail la vérification du formulaire ajax après que MVC rencontre bootstrap. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Après avoir utilisé bootstrap, il peut le faire lui-même. erreur, il sera plus difficile de l'utiliser. Si vous utilisez habituellement jquery.validate, vous ne pouvez utiliser que son propre style, et il est plus pratique d'utiliser la vérification du modèle lorsqu'il existe un modèle. Comment le résoudre ?

Bien sûr, vous pouvez écrire un plug-in jquery spécifiquement pour cela, je pense que c'est assez gênant. Si vous aimez écrire des plug-ins, faites quelques recherches.

First Nuget obtient un composant de MVC EditorTemplates pour Bootstrap 3. Avec lui, il y aura quelques modèles, comme un texte relativement simple :

@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>

De cette façon, vous pouvez utiliser EditorFor à l'avenir Ensuite, le code HTML requis par bootstrap sera directement affiché, ce qui est plus pratique.

Nous voyons qu'il existe déjà un gestionnaire d'erreurs pour l'échec de la vérification. La deuxième question se pose. Nous avons besoin d'une vérification frontale qui est également acceptable.

Nous continuons donc à utiliser la vérification de modèle fournie avec MVC. Il y a une classe Validation dans le composant que nous venons d'obtenir. Nous y ajoutons d'abord une méthode d'extension pour les

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

non fortement typés.

View Vous pouvez ajouter :

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

Enfin, gérez la soumission ajax et le traitement de la publication dans le script. Je ne sais pas s'il peut être plus pratique d'utiliser Ajax.BeginForm de MVC, mais personnellement. J'ai l'impression que cette chose n'est pas très flexible. Alors continuez à utiliser ajaxSubmit et 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();
      });
    }

Dans la méthode Action en arrière-plan, nous pouvons y ajouter une vérification personnalisée :

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

Effet approximatif :

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Implémentation de la file d'attente de requêtes AJAX

Un résumé de plusieurs méthodes de soumission de formulaires de manière asynchrone à l'aide d'Ajax

Comment résoudre le problème des tableaux dans les requêtes AJAX

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!