ASP.NET MVC5 Bootstrap 3 Modal Form 不验证客户端并回发到页面

客户端

# 使用ASP.NET MVC5和Bootstrap 3创建不验证客户端的Modal表单

在ASP.NET MVC5中，与Bootstrap 3结合使用可以轻松创建漂亮的模态框（Modal），用于实现各种交互式功能，例如表单输入。然而，有时候我们希望在提交表单时不进行客户端验证，而是将表单数据回发到服务器，并在服务器端进行处理。本文将介绍如何实现这一目标，并提供相应的案例代码。

## 案例背景

假设我们有一个简单的用户注册表单，通过模态框显示。我们想要在用户点击“注册”按钮时，将表单数据发送到服务器，而不进行客户端验证，以便在服务器端执行自定义验证逻辑。

## 创建模态框

首先，我们需要创建一个包含用户注册表单的模态框。在视图文件中，可以使用Bootstrap的Modal组件轻松实现：

html
<!-- 模态框触发按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开注册模态框
</button>
<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">用户注册</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 用户注册表单 -->
        @using (Html.BeginForm("Register", "Account", FormMethod.Post, new { id = "registrationForm" }))
        {
          <!-- 表单字段 -->
          <div class="form-group">
            @Html.LabelFor(model => model.UserName)
            @Html.TextBoxFor(model => model.UserName, new { @class = "form-control" })
          </div>
          <!-- 其他表单字段 -->
          <button type="submit" class="btn btn-primary">注册</button>
        }
      </div>
    </div>
  </div>
</div>

在上面的代码中，我们创建了一个触发按钮，点击该按钮将打开包含用户注册表单的模态框。

## 不进行客户端验证

为了在提交表单时不进行客户端验证，我们需要将表单提交到服务器，并在服务器端执行验证。在控制器中的Register动作方法中，我们可以添加自定义的服务器端验证逻辑：

csharp
public class AccountController : Controller
{
    [HttpPost]
    public ActionResult Register(UserModel model)
    {
        // 服务器端验证逻辑
        if (ModelState.IsValid)
        {
            // 执行注册逻辑
            // ...
            // 注册成功后，关闭模态框
            return Content("<script>$('#myModal').modal('hide');</script>");
        }
        // 如果验证失败，返回模态框并显示验证错误信息
        return PartialView("_RegisterForm", model);
    }
}

在上述代码中，我们首先检查ModelState.IsValid，以确保服务器端验证通过。如果验证通过，我们可以执行注册逻辑；如果验证失败，我们将重新渲染包含验证错误信息的注册模态框。

##

通过以上步骤，我们成功创建了一个包含用户注册表单的Bootstrap 3模态框，并实现了在提交表单时不进行客户端验证的效果。通过在服务器端执行验证逻辑，我们可以更灵活地处理各种自定义验证需求。希望这个简单的例子对于理解如何处理不进行客户端验证的Modal表单有所帮助。