ASP.NET CRUD模态框服务端验证未在弹窗内渲染问题求助

修复步骤 #

• 第一步：修正Index视图的编辑按钮路径
  你写的Url.Action参数顺序完全错误，正确写法如下：

  <button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#Edit" data-url="@Url.Action("Edit", "Airmen", new { id = item.MobileID })">
      Edit
  </button>
  

• 第二步：修改Edit视图的提交按钮
  原来的普通submit按钮会触发表单默认同步提交，加上你JS监听的data-save="modal"属性，改为button类型：

  <div class="form-group">
      <button type="button" data-save="modal" class="btn btn-primary">保存</button>
  </div>
  

  同时删掉Edit视图里的@section Scripts包裹，直接把验证脚本写在视图最底部（PartialView无法渲染父视图的节定义）：

  @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
  

• 第三步：调整Controller的Edit Post方法返回值
  AJAX请求无法处理服务端的重定向响应，验证通过时返回JSON标识成功即可：

  [HttpPost]
  [ValidateAntiForgeryToken]
  public async Task<IActionResult> Edit(string id, [Bind("MobileID,Pin")] Airmen airmen)
  {
      SuperModel amn = new SuperModel();
      
      if (id != airmen.MobileID)
      {
          return NotFound();
      }
  
      if (ModelState.IsValid)
      {
          try
          {
              _context.Update(airmen);
              await _context.SaveChangesAsync();
          }
          catch (DbUpdateConcurrencyException)
          {
              if (!AirmenExists(airmen.MobileID))
              {
                  return NotFound();
              }
              else
              {
                  throw;
              }
          }
          // 验证通过返回成功标识
          return Json(new { success = true });
      }
      amn.airmen = airmen;
      // 验证失败返回带错误的分部视图
      return PartialView(amn);
  }
  

• 第四步：修正JS提交逻辑
  原来的逻辑不管服务端返回什么都直接隐藏模态框刷新，需要加返回值判断：

  $(function () {
      var EditPlaceHolderElement = $('#EditPlaceHolder');
      $('button[data-toggle="ajax-modal"]').click(function (event) {
          var url = $(this).data('url');
          var decodedUrl = decodeURIComponent(url);
          $.get(decodedUrl).done(function (data) {
              EditPlaceHolderElement.html(data);
              EditPlaceHolderElement.find('.modal').modal('show');
              // 新加载的表单需要重新激活客户端验证
              $.validator.unobtrusive.parse(EditPlaceHolderElement.find('form'));
          })
      })
  
      EditPlaceHolderElement.on('click', '[data-save="modal"]', function (event) {
          var form = $(this).parents('.modal').find('form');
          var actionUrl = form.attr('action');
          var sendData = form.serialize();
          $.post(actionUrl, sendData).done(function (data) {
              if (data.success) {
                  // 保存成功才隐藏模态框刷新页面
                  EditPlaceHolderElement.find('.modal').modal('hide');
                  location.reload(true);
              } else {
                  // 验证失败替换新的带错误的分部视图，重新显示模态框
                  EditPlaceHolderElement.html(data);
                  EditPlaceHolderElement.find('.modal').modal('show');
                  $.validator.unobtrusive.parse(EditPlaceHolderElement.find('form'));
              }
          })
      })
  })
  

  另外你写的创建模态框的JS逻辑同理，按上面的规则调整即可，同时注意两个模态框的触发按钮data-toggle属性不要重复绑定冲突。

内容的提问来源于stack exchange，提问作者tachidow