8

希望有人可以帮助我解决我正在使用引导程序在 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 以及我应该在模态部分使用哪个 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>

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

4

2 回答 2

13

我认为我有解决您问题的方法。要使您的 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。

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

@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）并显示带有相关数据的引导模式。

我确信有更好的方法来做到这一点，但这种方法对我来说很好:)

希望这对您有所帮助:)

于 2013-01-12T22:34:22.770 回答
3

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

于 2014-01-05T03:23:01.760 回答