MVC 4引导模态编辑\\详细(MVC 4 Bootstrap Modal Edit \\ Deta

希望有人也许能够帮助我的东西，我在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));
}

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

我可以尝试用下面的替代编辑动作表，然后有在视图底部的模态格但我怎么传中所选项目的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.将在一个单独的局部视图您模式格，并将其命名为编辑（必须是与您的控制器动作名）。你将不得不改变你的编辑部分名称某事物一样，例如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.更改编辑 “一个”锚，使其调用创建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