twitter-bootstrap 如何在 ASP.NET MVC 中创建一个简单的引导模式对话框
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/37730644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a simple bootstrap modal dialog in ASP.NET MVC
提问by Bohn
From my login page user clicks on a ForgotPasswordlink and goes to this page to fill up a form and request a new password
从我的登录页面,用户单击ForgotPassword链接并转到此页面填写表格并请求新密码
http://localhost:2350/Account/ForgotPassword
Now when they click Savein that page, their request has been created. So All I need is just a Bootstrap Modal dialog to pop upand say "Your Request Has Been Submitted"and a "OK" buttonon it, when they click OKit takes them back to login page.
现在,当他们在该页面中单击“保存”时,他们的请求已创建。所以,我需要的只是一个引导模式对话框弹出,说“你的请求已提交”和“确定”按钮就可以了,当他们点击确定需要他们回到登录页面。
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.
我从来没有做过这样的Ajax弹出对话框等。你能指出一些不太复杂的教程代码吗?因为我的模态真的很简单,不包含任何数据,只有一个静态文本和一个可以重定向到登录页面的 OK 按钮。
回答by Triet Doan
You can setup your Bootstrap Modallike this:
您可以像这样设置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>
And in your JavaScript code, you catch the clickevent of the OKbutton. Then, call ajax and redirect to login page.
在您的 JavaScript 代码中,您捕获按钮的click事件OK。然后,调用ajax并重定向到登录页面。
$('#submitButton').click(function() {
// Call AJAX here
$.ajax({
method: "POST",
url: "", // Your URL here
data: "" // Your data here
});
// Redirect here
});
Please check this jsfiddlefor more detail.
请查看此jsfiddle以获取更多详细信息。

