MVC+bootstrap 인터페이스에서 Ajax 양식 확인을 수행하는 방법-JS 튜토리얼-php.cn

MVC+bootstrap 인터페이스에서 Ajax 양식 확인을 수행하는 방법

php中世界最好的语言

풀어 주다： 2018-04-03 10:37:32

원래의

1671명이 탐색했습니다.

이번에는 MVC+bootstrap인터페이스에서 ajax폼 검증을 수행하는 방법과 MVC+bootstrap 인터페이스에서 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: '新建用户',//.....
      });
      $("#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);

로그인 후 복사

대략적인 효과: