Validation du formulaire Ajax après que MVC rencontre le bootstrap-js tutoriel-php.cn

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

亚连

Libérer： 2018-05-23 11:19:56

original

2392 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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: &#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();
      });
    }

Copier après la connexion

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

Copier après la connexion

Effet approximatif :

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