MVC 4 Bootstrap 模态编辑\详细信息

Question

希望有人能够帮助我完成我正在使用引导程序在 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));
}

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

我可以尝试将表中的编辑操作替换为以下内容，然后在视图底部有一个模态 div，但是如何传入所选项目的 ID 以及我应该在模态部分？

<!-- 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. 为您的自定义 javaScript 添加一个 jQuery 函数：

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（必须与您的控制器操作名称相同）。您必须将您的 Edit 部分名称更改为其他名称，例如 EditBody。

Edit 部分视图现在应该是这样的：

@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. 更改 edit '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 中删除了“淡入淡出”类。否则不加载局部视图。希望这可以帮助其他有同样问题的人。