Question

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

将模态html放在＆＃34;索引＆＃34;中是不错的做法？负责显示所有人的视图？例如，我有一张列出所有人的表格。表格中的每个人都有一个＆＃34;查看/编辑＆＃34;按钮，当我点击它时，我想显示模态。这个模态代码可以驻留在＆＃34;索引＆＃34;查看，并由＆＃34;查看/编辑＆＃34;按钮，还是应该在控制器中调用相应的操作以某种方式返回模态？

这是我目前的代码，如果你需要看看到目前为止我做了什么。模态代码下方位于＆＃34;索引＆＃34;图。

<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

我认为没有理由不在该视图中为该视图添加标记。将它放在一个单独的视图中并动态调用它可能在某些情况下有好处，但我不认为这是其中之一。

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

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

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

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

1 个答案: