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

이번에는 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);

대략적인 효과:

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 알고 싶으시면 PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!

추천 자료:

Ajax 페이지의 정방향, 역방향 및 새로 고침을 구현하는 방법

ajax의 XHR 객체에 대한 심층적인 이해

AJAX의 대기열 요청을 구현하는 방법(코드 포함)

Ajax 탐색 JSON은 데이터 수정 및 삭제를 수행합니다

위 내용은 MVC+bootstrap 인터페이스에서 Ajax 양식 확인을 수행하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!