MVC가 부트스트랩을 만난 후 Ajax 양식 검증-JS 튜토리얼-php.cn

MVC가 부트스트랩을 만난 후 Ajax 양식 검증

亚连

풀어 주다： 2018-05-23 11:19:56

원래의

2392명이 탐색했습니다.

이 글에서는 주로 MVC가 부트스트랩을 만난 후의 Ajax 폼 검증에 대해 자세히 소개합니다. 이는 특정 참조 가치가 있으므로 관심 있는 친구들이 참고할 수 있습니다.

부트스트랩을 사용한 후에는 자체 스타일에 오류가 있으므로 사용하기가 더 번거로울 것입니다. 평소 jquery.validate를 사용한다면 자신만의 스타일만 사용할 수 있으며, 모델이 있을 때 모델 검증을 사용하는 것이 더 편리합니다. 어떻게 해결하나요?

물론 이를 위해 특별히 jquery 플러그인을 작성할 수도 있습니다. 플러그인 작성을 좋아한다면 좀 조사해 보세요.

먼저 Nuget은 Bootstrap 3용 MVC EditorTemplates의 구성 요소를 가져옵니다. 이를 통해 상대적으로 간단한 텍스트와 같은 일부 템플릿을 갖게 됩니다.

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

로그인 후 복사

이러한 방식으로 EditorFor를 사용한 후 필요한 HTML을 직접 출력합니다. 부트스트랩이 더 편리해졌습니다.

확인 실패에 대한 오류 처리기가 이미 있는 것을 확인했습니다. 두 번째 질문은 Ajax 확인이 필요하다는 것입니다.

그래서 우리는 MVC와 함께 제공되는 모델 검증을 계속 사용합니다. 방금 얻은 구성 요소에는 먼저 강력하지 않은 유형에 대한 확장 메서드를 추가합니다.

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

로그인 후 복사

View에 추가할 수 있습니다.

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

로그인 후 복사

마지막으로 스크립트에서 Ajax 제출 및 포스트백 처리를 처리합니다. MVC의 Ajax.BeginForm을 사용하는 것이 더 편리한지는 모르겠습니다. 하지만 개인적으로 이 부분은 그다지 유연하지 않다고 느껴서 계속 사용하고 있습니다. ajaxSubmit 및 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();
      });
    }

로그인 후 복사

백그라운드 작업 방법 사용자 정의 확인을 추가할 수 있습니다:

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

로그인 후 복사

대략적인 효과:

위는 모두를 위해 편집한 내용입니다. 모두에게 도움이 되기를 바랍니다. 미래에.