Question

希望有人能够帮助我使用bootstrap在MVC 4中进行实验。

我有一个强类型的索引视图，它在每个行中显示项目以及编辑和删除操作图标。

@model IEnumerable<Models.EquipmentClass>

....

@foreach (var item in Model)
{
<tbody>
    <tr>
        <td>
            @item.ClassId
        </td>
        <td>
            @item.ClassName
        </td>
        <td>
            <a href=@Url.Action("Edit", "EquipmentClass", new { id = item.ClassId })>
                <i class="icon-edit"></i>
            </a>
            <a href=@Url.Action("Delete", "EquipmentClass", new { id = item.ClassId })>
                <i class="icon-trash"></i>
            </a>
        </td>
    </tr>
</tbody>
} <!-- foreach -->

EquipmentClass控制器根据id返回所选项目的编辑视图。一切都很棒，而且正如预期的那样

public ViewResult Edit(int id)
{
    return View(equipmentclassRepository.Find(id));
}

我想知道的是如何在bootstrap模式对话框中打开编辑表单。

我可以尝试用下面的代码替换表格中的编辑操作，然后在视图的底部有一个模态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>

我非常感谢任何建议，非常感谢

Answer 1

我认为我有解决方案。要使MVC应用程序按您的意愿工作，您应该对您提供的代码进行一些更改：

1。添加 div ，表示用于编辑布局页面底部项目的模式：

<div id="editModalContainerID" class="modal hide fade" data-url='@Url.Action("Edit", "EquipmentClass")'> 
<div id="editModalBodyID"></div> 
</div>

请注意，此模式严格连接到负责编辑 EquipmentClass 项目的控制器操作。

2. 将 jQuery 函数添加到自定义javaScript中：

function showModal(modalContainerId, modalBodyId, id) {
    var url = $(modalContainerId).data('url');

    $.get(url, { id: id }, function (data) {
        $(modalBodyId).html(data);
        $(modalContainerId).modal('show');
    });
}

正如您所看到的，此函数将 id 作为其参数之一。一般来说，它的目的是用一个单独的局部视图替换空模态体，而不是将整个容器显示为模态页面。

3。将您的模态div放在单独的局部视图中，并将其命名为编辑（必须与您的控制器操作名称相同）。您必须将编辑部分名称更改为其他名称，例如 EditBody 。

编辑部分视图现在看起来应该是这样的：

@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. 更改控制器操作，使其返回上一步中创建的局部视图：

public PartialViewResult Edit(int id)
{
    return PartialView(equipmentclassRepository.Find(id));
}

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 href=@Url.Action("Delete", "EquipmentClass", new { id = item.ClassId })>
                <i class="icon-trash"></i>
            </a>
        </td>
    </tr>
</tbody>
} <!-- foreach -->

这种方式每次单击带有编辑图标的'a'锚时，都会触发showModal函数（传递相关的id），并显示带有相关数据的引导模式。

我确信有更好的方法可以做到这一点，但这种方式对我很有用：）

希望这对你有所帮助:)。

Answer 2

Przemo的答案对我有用，但请注意，当我从

更改第一个代码块时，我才设法让它工作

<div id="editModalContainerID" class="modal hide fade" data-url='@Url.Action("Edit", "EquipmentClass")'> 
<div id="editModalBodyID"></div> 
</div>

到

<div id="editModalContainerID" class="modal fade" data-url='@Url.Action("Edit", "EquipmentClass")'> 
<div id="editModalBodyID"></div> 
</div>

请注意，我从editModalContainerID中删除了“淡入淡出”类。否则，部分视图不会加载。希望这可以帮助其他人解决同样的问题。

MVC 4 Bootstrap Modal Edit \ Detail

2 个答案: