twitter-bootstrap 在 ASP.NET MVC 中使用引导程序创建模态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37157751/
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
Creating a modal with bootstrap in ASP.NET MVC
提问by Gerald Hughes
I'm using .NET Framework 4.5, Bootstrap v3.3.6 on a ASP.NET MVC project.
我在 ASP.NET MVC 项目上使用 .NET Framework 4.5、Bootstrap v3.3.6。
What I want to do is create a modal form
我想做的是创建一个模态表单
I tried the following:
我尝试了以下方法：
Created a modal container in the main layout
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog" style="border: 5px solid #3A87AD;"> <a href="#close" title="Close" class="modal-close-btn">x</a> <div class="modal-content" style="width:500px !important; margin: 10px auto !important;"> <div class="modal-body"></div> </div> </div>Added js to make internal Ajax call to inject content in a partial view
$(function () { $('body').on('click', 'modal-link', function (e) { e.preventDefault(); $(this).attr('data-target', '#modal-container'); $(this).attr('data-toggle', 'modal'); }); $('body').on('click', 'modal-close-btn', function() { $('modal-container').modal('hide'); }); $('#modal-container').on('hidden.bs.modal', function(){ $(this).removeData('bs.modal'); }); });Created a partial view that to load in a modal dialog
<div class=" "> <div class="modal-title" style="color: #3A87AD;"> <h3> Add Content</h3> </div> <br /> @using (Html.BeginForm("Create", "Place", FormMethod.Post)) { <div class="row-fluid"> Enter Content </div> <div class="row-fluid"> @Html.textAreaFor(m => m.Text, new { style="width:400px; height:200px;"}) </div> <div class="row-fluid"> <div class="col-md-4 col-md-offset-4"> <button type="submit" id="btnSave" class="btn btn-sm">Save</button> <button type="button" class="btn btn-sm" data-dismiss="modal">Cancel</button> </div> </div> } </div> <script type="text/javascript"> $(function () { $('#btnSave').click(function () { $('#modal-container').modal('hide'); }); }); </script>Created action to return the partial view and to process the results of the post
public ActionResult CreateModal() { return PartialView("_CreateModal"); } [HttpPost] public ActionResult CreateModal(Place model) { return RedirectToAction("Index"); }Created an action link to show the modal when clicked
@Html.ActionLink("Click me", "CreateModal", "Place", null, new { @class = "img-btn-addcontent modal-link", title = "Add Content" })`
在主布局中创建了一个模态容器
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog" style="border: 5px solid #3A87AD;"> <a href="#close" title="Close" class="modal-close-btn">x</a> <div class="modal-content" style="width:500px !important; margin: 10px auto !important;"> <div class="modal-body"></div> </div> </div>添加了 js 以进行内部 Ajax 调用以在局部视图中注入内容
$(function () { $('body').on('click', 'modal-link', function (e) { e.preventDefault(); $(this).attr('data-target', '#modal-container'); $(this).attr('data-toggle', 'modal'); }); $('body').on('click', 'modal-close-btn', function() { $('modal-container').modal('hide'); }); $('#modal-container').on('hidden.bs.modal', function(){ $(this).removeData('bs.modal'); }); });创建了一个在模态对话框中加载的局部视图
<div class=" "> <div class="modal-title" style="color: #3A87AD;"> <h3> Add Content</h3> </div> <br /> @using (Html.BeginForm("Create", "Place", FormMethod.Post)) { <div class="row-fluid"> Enter Content </div> <div class="row-fluid"> @Html.textAreaFor(m => m.Text, new { style="width:400px; height:200px;"}) </div> <div class="row-fluid"> <div class="col-md-4 col-md-offset-4"> <button type="submit" id="btnSave" class="btn btn-sm">Save</button> <button type="button" class="btn btn-sm" data-dismiss="modal">Cancel</button> </div> </div> } </div> <script type="text/javascript"> $(function () { $('#btnSave').click(function () { $('#modal-container').modal('hide'); }); }); </script>创建动作以返回局部视图并处理帖子的结果
public ActionResult CreateModal() { return PartialView("_CreateModal"); } [HttpPost] public ActionResult CreateModal(Place model) { return RedirectToAction("Index"); }创建了一个操作链接以在单击时显示模态
@Html.ActionLink("Click me", "CreateModal", "Place", null, new { @class = "img-btn-addcontent modal-link", title = "Add Content" })`
My problem is that my modal doesnt look like a modal
我的问题是我的模态看起来不像模态
回答by joint_ops
Simply add bootstrap.min.js and bootstrap.css to Your bundles for showing/hiding modal. Your modal body should look like this:
只需将 bootstrap.min.js 和 bootstrap.css 添加到您的包中即可显示/隐藏模态。你的模态体应该是这样的：
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
@Html.Partial("My partial View")
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
`
`
and then you call Your modal by:
然后你通过以下方式调用你的模态：
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
Also remember to insert Your partial View into Your modal body.
还要记住将您的部分视图插入到您的模态正文中。
