Jquery 如何在ASP.NET MVC Web应用程序中创建可折叠/下拉/可扩展的局部视图

在

Details

action of

PersonController

中，我想显示有关

Person

对象的所有信息

最初，我只想显示有关

人员的一些信息，其余部分将被折叠，然后我想单击按钮/箭头/任何内容，其余信息将展开

在单击按钮/箭头/任何内容之前，所有数据都已加载，但只是隐藏了。如果我没有必要，我也不想使用AJAX（我不熟悉它）

图纸显示了我的意思


单击之前



单击后


现在的
Details
视图如下所示：

@model WebApplication2.Models.Person

@{
    ViewBag.Title = "Details";
}

<h2>Details</h2>

<div>
    <h4>Person</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.FirstName)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.FirstName)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.LastName)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.LastName)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.CellNumber)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.CellNumber)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.SecondaryPhoneNumber)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.SecondaryPhoneNumber)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Address)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Address)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.BirthDate)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.BirthDate)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Pesel)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Pesel)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Notes)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Notes)
        </dd>
    <!-- SOMEWHERE HERE i WOULD LIKE TO INSERT THIS PARTIALL VIEW INTO EXPANDABLE COMPONENT -->
    </dl>
</div>

与

在控制器中：

 [HttpPost]
        public ActionResult Test(Person person) {
            System.Diagnostics.Debug.WriteLine("PASSED: " + person);
            return PartialView(person);
        }

但是
Test
中的
Person
操作是
null
，除此之外，一切正常。为什么它（模型）没有通过

完整代码：

脚本：

<script>
    function BtnOnclick() {
        $.ajax({
            type: 'POST',
            url: '@Url.Content("~/Person/Test")',
            data: {
                person: '@Model'
            },
            success: function (data) {
                $('#divpopup').css("display", "block");
                $('#btnExpand').css("display", "none");
                $('#divpopup')[0].innerHTML = data;
            }
        });
    }
    function CollapseDiv() {
        $('#divpopup').css("display", "none");
        $('#btnExpand').css("display", "block");
    }
</script>

局部视图：

@model WebApplication2.Models.Person
<hr />
<h2>Survey 1</h2>

<input type="button" id="Coll" value="Collapse" onclick="javascript:CollapseDiv()" />
<dt>
    @Html.DisplayNameFor(model => model.Notes)
</dt>
<dd>
    @Html.DisplayFor(model => model.Notes)
</dd>
<hr />

@model WebApplication2.Models.Person

调查1
@DisplayNameFor（model=>model.Notes）
@DisplayFor（model=>model.Notes）

然后在视图/Shared/中添加一个PartialView，并将其适当命名为_PersonDropDown.cshtml，并将详细信息视图中的注释替换为：

@Html.RenderPartial("_PersonDropDown", yourModel)

或者，如果是返回部分html结果的操作方法，则使用：

@Html.RenderAction("methodNameThatRendersPartialView")

但是你仍然需要在局部视图中自己制作可折叠的内容。祝你好运
 然后在Views/Shared/中添加一个PartialView，并将其适当命名为_PersonDropDown.cshtml，并将详细信息视图中的注释替换为：

@Html.RenderPartial("_PersonDropDown", yourModel)

或者，如果是返回部分html结果的操作方法，则使用：

@Html.RenderAction("methodNameThatRendersPartialView")

但是你仍然需要在局部视图中自己制作可折叠的内容。祝你好运
 不幸的是，您必须使用Javascript来实现这一点。然而，这可以相对容易地实现。在我的示例中，我使用了jQuery，它比简单的Javascript强大得多。如果你打算从事网络项目，我强烈建议你选择这一点

确保在具有id的div中渲染分部，例如：

在你看来：

<div id="details">
    @Html.RenderPartial("_DetailsDropDown", personModel)
</div>

这利用了一个“隐藏”类，可以在CSS中定义如下：

div.hidden {
    display: none;
}

请注意，您可以将click事件附加到您想要的任何东西，如按钮或链接，或者附加到div本身（如我在示例中所做的）。
不幸的是，您必须使用Javascript来完成这一操作。然而，这可以相对容易地实现。在我的示例中，我使用了jQuery，它比简单的Javascript强大得多。如果你打算从事网络项目，我强烈建议你选择这一点

确保在具有id的div中渲染分部，例如：

在你看来：

<div id="details">
    @Html.RenderPartial("_DetailsDropDown", personModel)
</div>

这利用了一个“隐藏”类，可以在CSS中定义如下：

div.hidden {
    display: none;
}

请注意，您可以将click事件附加到任何您想要的内容，如按钮或链接，或附加到div本身（如我在示例中所做的）。
如果您需要在主视图中显示局部视图，则最好使用ajax

使用ajax，您将能够调用action方法并返回partialview，并且在partialview action中，您将能够从主视图传递您想要的任何值

检查下面的示例，它将帮助您

//==Your Code in main View============
<dd>
   @Html.DisplayFor(model => model.Notes)
</dd>
//==Your Code============

//============Added
<p>
    <input type="button" value="Expand" id="btnExpand" 
          onclick="javascript:BtnOnclick();" />
</p>
<div id="divpopup" style="display:none">

</div>
//============Added

局部视图（视图侧）：

<hr />
<h2>Partial View</h2>
@ViewBag.Chk
<input type="button" id="Coll" value="Collapse" onclick="javascript:CollapseDiv()" />
<hr />


局部视图
@ViewBag.Chk

若您需要在主视图中显示局部视图，那个么最好使用ajax

使用ajax，您将能够调用action方法并返回partialview，并且在partialview action中，您将能够从主视图传递您想要的任何值

检查下面的示例，它将帮助您

//==Your Code in main View============
<dd>
   @Html.DisplayFor(model => model.Notes)
</dd>
//==Your Code============

//============Added
<p>
    <input type="button" value="Expand" id="btnExpand" 
          onclick="javascript:BtnOnclick();" />
</p>
<div id="divpopup" style="display:none">

</div>
//============Added

局部视图（视图侧）：

<hr />
<h2>Partial View</h2>
@ViewBag.Chk
<input type="button" id="Coll" value="Collapse" onclick="javascript:CollapseDiv()" />
<hr />


局部视图
@ViewBag.Chk

您的帮助非常全面。它工作得很好（没有错误）。问题是我想传递整个
Person
对象。我在原帖的编辑中精确地描述了一切。我将脚本中的
data:{parentEls:'@Model.FirstName'}
更改为
data:{person:'@Model'}
，但
person
未传递，请查看。谢谢你的巨大帮助。你的回答很好，我接受了。我打开了另一个话题来谈论传球模式。非常感谢。主题：您的帮助非常全面。它工作得很好（没有错误）。问题是我想传递整个
Person
对象。我在原帖的编辑中精确地描述了一切。我将脚本中的
data:{parentEls:'@Model.FirstName'}
更改为
data:{person:'@Model'}
，但
person
未传递，请查看。谢谢你的巨大帮助。你的回答很好，我接受了。我打开了另一个话题来谈论传球模式。非常感谢。主题：
<hr />
<h2>Partial View</h2>
@ViewBag.Chk
<input type="button" id="Coll" value="Collapse" onclick="javascript:CollapseDiv()" />
<hr />