如何在ASP.NET MVC中创建简单的引导模式对话框 [英] How to create a simple bootstrap modal dialog in ASP.NET MVC

问题描述

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

From my login page user clicks on a ForgotPassword link and goes to this page to fill up a form and request a new password

http://localhost:2350/Account/ForgotPassword

现在，当他们单击该页面上的保存时，他们的请求已创建. 因此，我只需要弹出一个 Bootstrap Modal对话框，然后说出您的请求已提交" 和一个确定"按钮它，当他们单击确定时，会将他们带回到登录页面.

Now when they click Save in that page, their request has been created. So All I need is just a Bootstrap Modal dialog to pop up and say "Your Request Has Been Submitted" and a "OK" button on it, when they click OK it takes them back to login page.

我从没做过Ajax，弹出对话框等.您能指出一些教程代码，这些代码不太复杂，难以遵循和重现吗?因为我的模态非常简单，不包含任何数据，只有一个静态文本和一个确定"按钮，可以重定向到该页面上的登录页面.

I have never doen Ajax,Popup dialog, etc.. like this. Can you point me to some tutorial code that is not too complex to follow and reproduce? because my modal is really simple, contains no data, just has a static text and an OK button that redirects to login page on it.

推荐答案

您可以设置 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并重定向到登录页面.

And in your JavaScript code, you catch the click event of the OK button. Then, call ajax and redirect to login page.

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

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

  // Redirect here
});

请检查 jsfiddle 以获得更多详细信息.

Please check this jsfiddle for more detail.

这篇关于如何在ASP.NET MVC中创建简单的引导模式对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！