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多个东西，那么它将大大降低性能。因此，不建议使用子操作，除非实际上是原因，就像您需要向数据库发出查询以获取与视图完全无关的内容。一个很好的例子就像博客上最近的帖子小部件。主视图可能显示单个博客帖子，然后您可以利用子操作查询最近的帖子以填充该小部件区域。但是，如果您要做的只是返回静态数据，那么它就是浪费，而部分更适合。

即便如此，请注意＆＃34;无关＆＃34;在上面。在博客示例中，渲染的主要动作（显示单个博客文章）也必须获取最近的帖子集合以填充一些小部件，可能在布局中。这就是为什么使用儿童行动是有道理的。但是，在您的示例中，您的操作的全部内容是显示有关人员的信息，因此利用子操作实际为这些人逐个获取信息是没有意义的。相反，您应该查询所有这些信息并将其作为一个模型的一部分返回给您的视图。

在模态中显示部分视图而不拉动数据

1 个答案: