twitter-bootstrap MVC 4 Bootstrap 模态编辑\详细信息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13699068/
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
MVC 4 Bootstrap Modal Edit \ Detail
提问by The Drummer
Hoping someone might be able to help me with something I am experimenting with in MVC 4 using bootstrap.
希望有人能够帮助我解决我正在使用引导程序在 MVC 4 中试验的东西。
I have a strongly-typed index view which displays items in a table along with edit and delete action icons in each line.
我有一个强类型索引视图，它显示表中的项目以及每行中的编辑和删除操作图标。
@model IEnumerable<Models.EquipmentClass>
....
@foreach (var item in Model)
{
<tbody>
<tr>
<td>
@item.ClassId
</td>
<td>
@item.ClassName
</td>
<td>
<a [email protected]("Edit", "EquipmentClass", new { id = item.ClassId })>
<i class="icon-edit"></i>
</a>
<a [email protected]("Delete", "EquipmentClass", new { id = item.ClassId })>
<i class="icon-trash"></i>
</a>
</td>
</tr>
</tbody>
} <!-- foreach -->
The EquipmentClass controller returns the Edit view for the selected item based on the id. All great and as expected at this point
EquipmentClass 控制器根据 id 返回所选项目的编辑视图。在这一点上一切都很好，正如预期的那样
public ViewResult Edit(int id)
{
return View(equipmentclassRepository.Find(id));
}
What I would like to know is how to open the edit form in a bootstrap modal dialog.
我想知道的是如何在引导模式对话框中打开编辑表单。
I could try and substitute the edit action in the table with the following and then have a modal div at the bottom of the view but how do I pass in the ID of the selected item and which html helper should I use in the modal section?
我可以尝试用以下内容替换表中的编辑操作，然后在视图底部有一个模态 div，但如何传入所选项目的 ID 以及我应该在模态部分使用哪个 html 助手？
<!-- replaced table action -->
<a class="btn pull-right" data-toggle="modal" href="#myModal" >Details</a>
....
<!-- modal div -->
<div class="modal hide fade in" id="myModal" )>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
@Html.Partial("Edit")
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
I'd greatly appreciate any advice, many thanks
我非常感谢任何建议，非常感谢
回答by Przemo
I think that I have a solution to your problem. To make your MVC application work as you want it to you should make some changes to the code you provided:
我想我有办法解决你的问题。为了让您的 MVC 应用程序按照您的意愿工作，您应该对您提供的代码进行一些更改：
1.Add a divrepresenting a modal for editing an item at the bottom of your layout page:
1.在布局页面底部添加一个表示用于编辑项目的模式的div：
<div id="editModalContainerID" class="modal hide fade" data-url='@Url.Action("Edit", "EquipmentClass")'>
<div id="editModalBodyID"></div>
</div>
Notice that this modal is strictly connected to the controller action responsible for editing an EquipmentClassitem.
请注意，此模式与负责编辑EquipmentClass项目的控制器操作严格相关。
2.Add a jQueryfunction to your custom javaScript:
2.向您的自定义 javaScript添加一个jQuery函数：
function showModal(modalContainerId, modalBodyId, id) {
var url = $(modalContainerId).data('url');
$.get(url, { id: id }, function (data) {
$(modalBodyId).html(data);
$(modalContainerId).modal('show');
});
}
As you can see this function takes idas one of its parameters. In general its purpose is to replace the empty modal body with what we will put in a separate partial view and than display whole container as a modal page.
如您所见，此函数将id作为其参数之一。一般来说，它的目的是用我们将放在单独的部分视图中的内容替换空的模态主体，而不是将整个容器显示为模态页面。
3.Put your modal div in a separate partial view, and call it Edit(has to be the same as your controller action name). You will have to change your Editpartial name to sth else, for example EditBody.
3.将您的模态 div 放在单独的局部视图中，并将其命名为Edit（必须与您的控制器操作名称相同）。您必须将Edit部分名称更改为 sth else，例如EditBody。
The Editpartial view should now look sth like this:
在编辑局部视图现在应该是某事像这样：
@model EquipmentClass
<!-- modal div -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
@Html.Partial("EditBody", Model)
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
4.Change the controller action so that it returns the partial view created in the previous step:
4.更改控制器动作，使其返回上一步创建的局部视图：
public PartialViewResult Edit(int id)
{
return PartialView(equipmentclassRepository.Find(id));
}
5.Change the edit'a' anchor so that it calls created jQueryfunction:
5.更改编辑'a' 锚点，使其调用创建的jQuery函数：
@model IEnumerable<Models.EquipmentClass>
....
@foreach (var item in Model)
{
<tbody>
<tr>
<td>
@item.ClassId
</td>
<td>
@item.ClassName
</td>
<td>
<a data-toggle="modal" onclick="showModal('#editModalContainerID', '#editModalBodyID', @item.ClassId)">
<i class="icon-edit"></i>
</a>
<a [email protected]("Delete", "EquipmentClass", new { id = item.ClassId })>
<i class="icon-trash"></i>
</a>
</td>
</tr>
</tbody>
} <!-- foreach -->
This way each time an 'a' anchor with edit icon is clicked the showModal function (with related id being passed) is fired and a bootstrap modal with related data is displayed.
这样，每次单击带有编辑图标的“a”锚点时，都会触发 showModal 函数（传递相关 id）并显示带有相关数据的引导模式。
I'm sure there is a better way to do it, but this way worked for me just fine :)
我确信有更好的方法可以做到，但这种方法对我来说很好用 :)
Hope this helps you a bit :)
希望这对你有所帮助:)
回答by Jeffery Wunady
Przemo answer worked for me, however do note that I only managed to get it to work when I changed the first block of code from
Przemo 的答案对我有用，但是请注意，当我更改第一个代码块时，我才设法让它工作
<div id="editModalContainerID" class="modal hide fade" data-url='@Url.Action("Edit", "EquipmentClass")'>
<div id="editModalBodyID"></div>
</div>
to
到
<div id="editModalContainerID" class="modal fade" data-url='@Url.Action("Edit", "EquipmentClass")'>
<div id="editModalBodyID"></div>
</div>
Notice that I removed the "fade" class from editModalContainerID. Otherwise the partial view does not load. Hope this helps anyone else with the same issue.
请注意，我从 editModalContainerID 中删除了“fade”类。否则不会加载局部视图。希望这可以帮助其他有同样问题的人。
