如何在 ASP.NET MVC 中创建一个简单的引导模式对话框答案

【问题标题】：How to create a simple bootstrap modal dialog in ASP.NET MVC如何在 ASP.NET MVC 中创建一个简单的引导模式对话框
【发布时间】：2016-10-10 09:11:32
【问题描述】：

在我的登录页面中，用户点击 ForgotPassword 链接并转到此页面以填写表格并请求新密码

http://localhost:2350/Account/ForgotPassword

现在，当他们点击该页面中的保存时，他们的请求已创建。所以我只需要一个 Bootstrap Modal 对话框弹出并说 “您的请求已提交” 和一个 “确定”按钮它，当他们点击OK时，它会将他们带回登录页面。

我从来没有做过Ajax，弹出对话框等。像这样。您能否指出一些不太复杂而无法遵循和重现的教程代码？因为我的 modal 非常简单，不包含任何数据，只有一个静态文本和一个重定向到登录页面的 OK 按钮。

【问题讨论】：

您使用的引导程序版本是什么？

标签： javascript jquery ajax asp.net-mvc twitter-bootstrap

【解决方案1】：

您可以像这样设置Bootstrap Modal：

<div class="container">

  <h3>Modal Example</h3>

  <!-- Button to trigger modal -->
  <div>
    <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch Modal</a>
  </div>

  <!-- Modal -->
  <div id="myModal" class="modal hide" tabindex="-1" role="dialog">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3>Modal Example</h3>
    </div>
    <div class="modal-body">

      <p>
        This is your body
      </p>

    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
      <button id="submitButton" class="btn btn-primary">OK</button>
    </div>
  </div>

</div>

在您的 JavaScript 代码中，您可以捕获 OK 按钮的 click 事件。然后，调用ajax并重定向到登录页面。

$('#submitButton').click(function() {

  // Call AJAX here
  $.ajax({
    method: "POST",
    url: "", // Your URL here
    data: "" // Your data here
  });

  // Redirect here
});

请查看jsfiddle了解更多详情。

【讨论】：