以模态显示部分视图而不拉取数据

Question

当用户将鼠标悬停在视图中的人名上时，我正在尝试显示带有在部分视图中呈现的数据的模式。我可以显示模式，但没有数据，并且由于要在视图中显示的名称是由 linq 语句生成的，因此 div 都具有相同的类名称。这会导致页面上的所有名称在鼠标悬停时显示一个模型。我不确定如何解决这些问题。

这是我目前所拥有的......

JQuery 创建和填充模式

$(document).ready(function (data) {
    $('accountNumber').hover(function () {
        var id = $(this).data("personID")
        $(".modal").dialog({
            autoOpen: true,
            position: { my: "center", at: "center", of: parent },
            width: 300,
            resizable: false,
            title: 'Accounts Information',
            modal: true,
            open: function () {
                $(this).load('@Url.Action("_AccountNumberModal", "ICMS", ' + id + ')');
            },
            buttons: {
                Ok: function () {
                    $(this).dialog("close");
                }
            }
        });
        return false;
    });
});

局部视图的控制器动作

public ActionResult _AccountNumberModal(SearchViewModel viewModel, string id)
        {
            tblPeople people = db.tblPeoples.FirstOrDefault(x => x.PeopleCounterID.ToString() == id);
            {
                viewModel.FirstName = people.FirstName;
                viewModel.LastName = people.LastName;
                viewModel.AccountNumber = people.AccountNumber;
                viewModel.AccountNumber2 = people.AccountNumber2;
                viewModel.AccountNumber3 = people.AccountNumber3;
                viewModel.AccountNumber4 = people.AccountNumber4;
                viewModel.AccountClosed = people.AccountClosed;
                viewModel.AccountClosed2 = people.AccountClosed2;
                viewModel.AccountClosed3 = people.AccountClosed3;
                viewModel.AccountClosed4 = people.AccountClosed4;
                viewModel.AccountClosedDate1 = people.AccountClosedDate1;
                viewModel.AccountClosedDate2 = people.AccountClosedDate2;
                viewModel.AccountClosedDate3 = people.AccountClosedDate3;
                viewModel.AccountClosedDate4 = people.AccountClosedDate4;
                viewModel.TypeofAccount1 = people.TypeofAccount1;
                viewModel.TypeofAccount2 = people.TypeofAccount2;
                viewModel.TypeofAccount3 = people.TypeofAccount3;
                viewModel.TypeofAccount4 = people.TypeofAccount4;
            }
            return View(viewModel);
        }

部分视图

@model FHN.EIR.Web.Models.SearchViewModel

<section id="accountNumbers" class="sectionHeadingBold">Account Information</section>
@if (!string.IsNullOrEmpty(Model.AccountNumber))
{
    <dl class="inline dl-rows">
        <dt>
            @Html.DisplayNameFor(model => model.AccountNumber)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.AccountNumber)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.TypeofAccount1)
        </dt>
        <dd class="width-275px">
            @Html.DisplayFor(model => model.TypeofAccount1)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.AccountClosed)
        </dt>
        <dd class="width-dateField">
            @if (Model.AccountClosed)
                {
                @Html.DisplayName("Closed")
            }
            else
            {
                @Html.DisplayName("Open")
            }
        </dd>
        @if (Model.AccountClosed)
        {
            <dt>
                @Html.DisplayNameFor(model => model.AccountClosedDate1)
            </dt>
                <dd>
                    @Html.DisplayFor(model => model.AccountClosedDate1)
                </dd>
        }
    </dl>
        <br />
    if (!String.IsNullOrEmpty(Model.AccountNumber2))
    {
        <dl class="inline dl-rows">
            <dt>
                @Html.DisplayNameFor(model => model.AccountNumber2)
            </dt>
            <dd>
                @Html.DisplayFor(model => model.AccountNumber2)
            </dd>
            <dt>
                @Html.DisplayNameFor(model => model.TypeofAccount2)
            </dt>
            <dd class="width-250px">
                @Html.DisplayFor(model => model.TypeofAccount2)
            </dd>
            <dt>
                @Html.DisplayNameFor(model => model.AccountClosed2)
            </dt>
            <dd class="width-dateField">
                @if (Model.AccountClosed2)
                    {
                    @Html.DisplayName("Closed")
                }
                else
                {
                    @Html.DisplayName("Open")
                }
            </dd>
            @if (Model.AccountClosed2)
            {
                <dt>
                    @Html.DisplayNameFor(model => model.AccountClosedDate2)
                </dt>
                    <dd>
                        @Html.DisplayFor(model => model.AccountClosedDate2)
                    </dd>
            }
        </dl>
            <br />
    }
    if (!String.IsNullOrEmpty(Model.AccountNumber3))
    {
        <dl class="inline dl-rows">
            <dt>
                @Html.DisplayNameFor(model => model.AccountNumber3)
            </dt>
            <dd>
                @Html.DisplayFor(model => model.AccountNumber3)
            </dd>
            <dt>
                @Html.DisplayNameFor(model => model.TypeofAccount3)
            </dt>
            <dd class="width-250px">
                @Html.DisplayFor(model => model.TypeofAccount3)
            </dd>
            <dt>
                @Html.DisplayNameFor(model => model.AccountClosed3)
            </dt>
            <dd class="width-dateField">
                @if (Model.AccountClosed3)
                    {
                    @Html.DisplayName("Closed")
                }
                else
                {
                    @Html.DisplayName("Open")
                }
            </dd>
            @if (Model.AccountClosed3)
            {
                <dt>
                    @Html.DisplayNameFor(model => model.AccountClosedDate3)
                </dt>
                    <dd>
                        @Html.DisplayFor(model => model.AccountClosedDate3)
                    </dd>
            }
        </dl>
            <br />
    }
    if (!String.IsNullOrEmpty(Model.AccountNumber4))
    {
        <dl class="inline dl-rows">
            <dt>
                @Html.DisplayNameFor(model => model.AccountNumber4)
            </dt>
            <dd>
                @Html.DisplayFor(model => model.AccountNumber4)
            </dd>
            <dt>
                @Html.DisplayNameFor(model => model.TypeofAccount4)
            </dt>
            <dd class="width-250px">
                @Html.DisplayFor(model => model.TypeofAccount4)
            </dd>
            <dt>
                @Html.DisplayNameFor(model => model.AccountClosed4)
            </dt>
            <dd class="width-dateField">
                @if (Model.AccountClosed4)
                    {
                    @Html.DisplayName("Closed")
                }
                else
                {
                    @Html.DisplayName("Open")
                }

            </dd>
            @if (Model.AccountClosed4)
            {
                <dt>
                    @Html.DisplayNameFor(model => model.AccountClosedDate4)
                </dt>
                    <dd>
                        @Html.DisplayFor(model => model.AccountClosedDate4)
                    </dd>
            }
        </dl>
    }
}
else
{
    <dl class="inline dl-rows">
        <dt>
            <span class="mar-l-15px inline-messages">There are no accounts associated with this person</span>
        </dt>
    </dl>
}

更新

我能够获取要填充的数据。只是不知道如何使只有悬停的名称打开相关的模态而不是所有名称都打开模态？

Answer 1

部分视图不使用操作来加载。它们必须直接传递一个模型。

@Html.Partial("_MyPartial", myPartialModel)

如果不传递模型，则隐式传递主视图模型。

如果您需要使用动作来呈现局部视图，那么您就是在谈论子动作。其语法是：

@Html.Action("ActionName", "ControllerName")

但是，有几点需要注意。您为此使用的操作应返回PartialView 而不是View。局部视图在用作局部视图时只是局部视图。如果您返回 View，您的局部视图将表现得像标准视图一样并利用布局。接下来，由于您的操作现在返回部分视图，因此您不太可能想要直接提供它。为了不暴露主要的路由基础设施（这样你可以通过 URL 访问），你应该用[ChildActionOnly] 装饰它。

最后，请记住，渲染子操作需要大量开销。在呈现到页面之前，它基本上像正常操作一样通过标准路由基础设施。在页面上使用一些没什么大不了的，但是如果您谈论的是 100 或其他内容，它将显着降低性能。因此，除非确实有原因，否则不建议使用子操作，例如您需要向数据库发出查询以获取与视图完全无关的内容。一个很好的例子就是博客上的最近帖子小部件。主视图可能是显示单个博客文章，然后您可以使用子操作来查询最近的文章以填充该小部件区域。但是，如果您要做的只是返回静态数据，那就太浪费了，而使用部分数据更合适。

即便如此，请注意上面的“无关”位。在博客示例中，渲染的主要操作（显示单个博客文章）还必须获取最近的文章集合来填充某些小部件（可能在布局中）是没有意义的。这就是为什么使用子动作是有意义的。但是，在您的示例中，您操作的全部目的是显示有关人员的信息，因此使用子操作实际为这些人逐一获取信息是没有意义的。相反，您应该查询所有这些信息并将其作为一个模型的一部分返回到您的视图中。