MVC 4 Bootstrap Modal Edit\Detail

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返回所选项目的Edit视图.一切都很好,就像预期的那样

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放在单独的局部视图中,并将其命名为Edit(必须与控制器操作名称相同).您必须将编辑部分名称更改为其他,例如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),并显示带有相关数据的引导模式.

我确信有更好的方法可以做到这一点,但这种方式对我很有用:)

希望这对你有所帮助:)