在视图中放置模态代码的好习惯？

Question

我正在开发一个网站，但遇到了一个绊脚石。我正在尝试遵循正确的 MVC 设计模式。

将模式 html 放置在负责显示所有人的 "Index" 视图中是否是一种好的做法？例如，我有一个 table 列出所有人。 table 中的每个人条目都有一个 "View/Edit" 按钮，当我单击它时，我想显示模式。这个模态代码可以驻留在 "Index" 视图中，并由 "View/Edit" 按钮触发，还是我应该在控制器中调用适当的操作以某种方式 return 模态？

如果您需要查看我到目前为止所做的工作，这是我当前的代码。模态代码下方位于 "Index" 视图中。

<div class="row">
    <div class="col-sm-12">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>@Html.ActionLink("Name", "PersonList", new { sortOrder = ViewBag.NameSort, currentFilter = ViewBag.CurrentFilter })</th>
                    <th>@Html.ActionLink("Date Of Birth", "PersonList", new { sortOrder = ViewBag.DOBSort, currentFilter = ViewBag.CurrentFilter })</th>
                    <th>@Html.ActionLink("Last Reg Date", "PersonList", new { sortOrder = ViewBag.LARDSort, currentFilter = ViewBag.CurrentFilter })</th>
                    <th>@Html.ActionLink("Last Reg Number", "PersonList", new { sortOrder = ViewBag.LARNSort, currentFilter = ViewBag.CurrentFilter })</th>
                    <th>@Html.ActionLink("Reg Count", "PersonList", new { sortOrder = ViewBag.RegCountSort, currentFilter = ViewBag.CurrentFilter })</th>
                    <th>@Html.ActionLink("Gender", "PersonList", new { sortOrder = ViewBag.GenderSort, currentFilter = ViewBag.CurrentFilter })</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="updatedContent">
                @foreach (var person in Model)
                {
                    <tr>
                        <td>@person.Name  @person.Surname</td>
                        <td>@person.BirthDate</td>
                        <td>@person.LastActiveRegistrationDate_Description</td>
                        <td>@person.LastActiveRegistrationNo_Description</td>
                        <td>@person.ActiveRegistrationCount_Description</td>
                        <td>@person.Gender_Description</td>
                        <td>@Html.ActionLink("View/Edit", "", "", null, new { @class = "btn btn-info btn-md", data_toggle = "modal", data_target = "#myModal" })</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

@Html.PagedListPager(Model, page => Url.Action("PersonList",
    new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))

@* Modal code here for editing the Person *@
@* Called upon the Click of Edit/View *@
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">View/Edit Person</h4>
            </div>
            <div class="modal-body">
                <p>Here we will be able to View/Edit the Person object.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
            </div>
        </div>

    </div>
</div>

Answer 1

我看不出您为什么不将该视图的标记放置在该视图中。将它放在一个单独的视图中并动态调用它在某些情况下可能会有好处，但我认为这不是其中之一。

通常，如果 "modal" 组件需要获取更多数据，您会这样做。因为在那种情况下，这是在多个 HTTP 请求中获取少量数据与在初始请求中将 all 数据放在页面上之间的权衡。如果用户可能只会与少量记录进行交互，则您不会希望将所有数据都放在那里。

但是，如果所需的所有数据无论如何都已经在页面上，那么就没有理由将此标记放在单独的 HTTP 请求中。因为那样的话，每次有人编辑记录时，您都会重复该请求以获得 相同的标记 。不妨在页面加载时发送一次。

如果每条记录有很多不同的数据，请考虑使用 AJAX 请求。如果它只是标记中隐藏的编辑表单，请将其保留在相同的标记中。它是 "modal" 的事实是一个 UI 问题，而不是一个单独的请求问题。

在视图中放置模态代码的好习惯？

Good practice to place Modal code in View?

c#

asp.net-mvc

visual-studio

twitter-bootstrap

bootstrap-modal