Comment effectuer une vérification de formulaire ajax dans l'interface MVC+bootstrap

Cette fois, je vais vous montrer comment effectuer une vérification de formulaire ajax sur l'interface MVC+bootstrap Quelles sont les précautions pour effectuer une vérification de formulaire ajax sur l'interface. Interface MVC+bootstrap ? Ce qui suit est un cas pratique, jetons un coup d'œil.

Après avoir utilisé bootstrap, il a son propre style has-error. Il sera plus difficile de l'utiliser si vous utilisez habituellement jquery.validate, vous ne pouvez utiliser que son propre style, et il existe des modèles en cours d'utilisation. La Vérification du modèle est plus pratique. 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 je. Je pense personnellement 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 :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le php. Site chinois !

Lecture recommandée :

Comment réaliser l'avance, le retour en arrière et l'actualisation de la page Ajax

Compréhension approfondie d'ajax Objet XHR

Comment implémenter la demande de file d'attente AJAX (avec code)

Ajax traverse jSon pour modifier et supprimer des données

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!