如何在ASP .NET MVC Web应用程序中创建可折叠/下拉/可展开的局部视图
在PersonController Details操作中，我想显示有关Person对象的所有信息。
最初我只想显示一些关于Person信息，其余部分将被折叠，然后我想点击一个按钮/箭头/其他信息将会扩展。
在点击按钮/箭头/所有数据加载但只是隐藏之前。 如果我没有，我不想使用AJAX（我不熟悉它）。
图纸显示了我的意思。
点击之前
点击后
现在Details视图看起来像这样：
@model WebApplication2.Models.Person @{ ViewBag.Title = "Details"; } Details
Person
- @Html.DisplayNameFor(model => model.FirstName)
- @Html.DisplayFor(model => model.FirstName)
- @Html.DisplayNameFor(model => model.LastName)
- @Html.DisplayFor(model => model.LastName)
- @Html.DisplayNameFor(model => model.CellNumber)
- @Html.DisplayFor(model => model.CellNumber)
- @Html.DisplayNameFor(model => model.SecondaryPhoneNumber)
- @Html.DisplayFor(model => model.SecondaryPhoneNumber)
- @Html.DisplayNameFor(model => model.Address)
- @Html.DisplayFor(model => model.Address)
- @Html.DisplayNameFor(model => model.BirthDate)
- @Html.DisplayFor(model => model.BirthDate)
- @Html.DisplayNameFor(model => model.Pesel)
- @Html.DisplayFor(model => model.Pesel)
- @Html.DisplayNameFor(model => model.Notes)
- @Html.DisplayFor(model => model.Notes)
编辑： Pragnesh Khalas的原始解决方案工作得很好，但我想将整个Person对象传递给局部视图。 所以我修改了脚本替换：
data: { parentEls: '@Model.FirstName' }
同
data: { person: '@Model' }
在控制器中：
[HttpPost] public ActionResult Test(Person person) { System.Diagnostics.Debug.WriteLine("PASSED: " + person); return PartialView(person); }
但是Test操作中的人员是null除了一切正常。 为什么它（模型）没有通过？
完整代码：
脚本：
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"); }
视图：
控制者的行动：
[HttpPost] public ActionResult Test(Person person) { // ViewBag.Chk = parentEls; System.Diagnostics.Debug.WriteLine("PASSED: "); System.Diagnostics.Debug.WriteLine(person.FirstName); return PartialView(person); } }
局部视图：
@model WebApplication2.Models.Person
Survey 1
@Html.DisplayNameFor(model => model.Notes) @Html.DisplayFor(model => model.Notes)
如果你需要在主视图中显示局部视图，那么在这种情况下更好的选择是使用ajax。
使用ajax，您将能够调用操作方法并返回partialview，并且在部分视图操作中，您将能够从主视图传递任何您想要的值。
检查下面的例子它会对你有所帮助。
//==Your Code in main View============ @Html.DisplayFor(model => model.Notes) //==Your Code============ //============Added
//============Added
当你点击按钮展开时，调用javascript函数BtnOnclick并在该函数中设置divpopup div中的局部视图。
如下脚本： –
在ajax调用之上，您将能够将任何值传递给Test操作。 在上面的示例中，传递模型属性的FirstName。
局部视图（控制器端）： –
[HttpPost] public ActionResult Test(string parentEls) { ViewBag.Chk = parentEls; return PartialView(); }
局部视图（查看侧）：
Partial View
@ViewBag.Chk
不幸的是，您必须使用Javascript执行此操作。 然而，它可以相对容易地实现。 在我的例子中，我使用了jQuery，它比简单的Javascript强大得多。 如果您打算使用Web项目，我强烈建议您选择它。
确保使用id渲染div中的partial，例如：
在你看来：
@Html.RenderPartial("_DetailsDropDown", personModel)
在您的Javascript部分/文件中：
$("div#details").click(function() { if ($("div#details").hasClass("hidden")) { $("div#details").removeClass("hidden"); } else { $("div#details").addClass("hidden"); } });
这利用了一个’隐藏’类，可以在你的CSS中定义，如下所示：
div.hidden { display: none; }
请注意，您可以将click事件附加到您想要的任何内容，例如按钮或链接，或者div本身（就像我在示例中所做的那样）。
然后在Views / Shared /中添加PartialView并将其命名为_PersonDropDown.cshtml，并将详细信息视图中的注释替换为：
@Html.RenderPartial("_PersonDropDown", yourModel)
或者如果它是一个Action方法，它返回一个部分html结果，你使用：
@Html.RenderAction("methodNameThatRendersPartialView")
但是你仍然需要在局部视图中自己完成可折叠内容。 祝好运！