如何在ASP .NET MVC Web应用程序中创建可折叠/下拉/可扩展局部视图 [英] How to create collapsable/dropdown/expandable partial view in ASP .NET MVC Web Application
问题描述
在PersonController的Details动作中，我想显示有关Person对象的所有信息.
In Details action of PersonController I would like to show every information about the Person object.
最初，我只想显示有关Person的一些信息，其余的将折叠，然后单击一个按钮/箭头/任何内容，其余的信息将展开.
Initially I want only to show some info about the Person and rest will be collapsed, then I want to click a button/arrow/whatever and rest of info will expand.
在单击按钮/箭头/之前，所有已加载但只是隐藏的数据.如果不需要，我不想使用AJAX(我不熟悉).
Before clicking button/arrow/whatever all the data was loaded but just hidden. If I don't have to I don't want to use AJAX(I am not familiar with it).
图纸表明了我的意思.
单击之前
点击后
现在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>
Pragnesh Khalas的原始解决方案效果很好，但我想将整个Person对象传递给局部视图.所以我修改了脚本替换:
Pragnesh Khalas' original solution worked great but I wanted to pass whole Person object to partial view. So I modified script replacing:
data: {
parentEls: '@Model.FirstName'
}
使用
data: {
person: '@Model'
}
并在控制器中:
[HttpPost]
public ActionResult Test(Person person) {
System.Diagnostics.Debug.WriteLine("PASSED: " + person);
return PartialView(person);
}
但是Test动作中的Person person是null，除此之外，一切正常.为什么它(模型)没有通过?
but Person person in the Test action is null besides that everything works. Why it(model) hasn't been passed?
完整代码:
脚本:
<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>
查看:
<p>
<input type="button" value="Expand" id="btnExpand"
onclick="javascript:BtnOnclick();" />
</p>
<div id="divpopup" style="display:none">
</div>
控制器的动作:
[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
<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 />
推荐答案
如果您需要在主视图中显示部分视图，那么在这种情况下更好的选择是使用ajax.
If you need to display partial view in main view so in that case is better option is use ajax.
使用ajax，您将能够调用操作方法并返回partialview，并且在partial view操作中，您将能够从主视图传递所需的任何值.
Using ajax you will be able to call action method and return partialview and also in partial view action you will be able to pass the any value which you want from main view.
请查看下面的示例，它将为您提供帮助.
Check below example it will help you.
//==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
当您单击按钮Expand时，调用javascript函数BtnOnclick，然后在该函数中将divpopup div中的局部视图设置为
When you click on button Expand at that time call javascript function BtnOnclick and in that function you are set that partial view in the divpopup div.
就像下面的脚本一样:-
<script>
function BtnOnclick() {
$.ajax({
type: 'POST',
url: '@Url.Content("~/Person/Test")',
data: {
parentEls: '@Model.FirstName'
},
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>
在ajax调用之上，您将可以将任何值传递给Test操作.在上面的示例中，传递了模型属性的名字.
Above ajax call you will be able to pass any value to Test action. In above example pass the FirstName of the model properties.
局部视图(控制器端):-
[HttpPost]
public ActionResult Test(string parentEls)
{
ViewBag.Chk = parentEls;
return PartialView();
}
部分视图(查看侧):
<hr />
<h2>Partial View</h2>
@ViewBag.Chk
<input type="button" id="Coll" value="Collapse" onclick="javascript:CollapseDiv()" />
<hr />
这篇关于如何在ASP .NET MVC Web应用程序中创建可折叠/下拉/可扩展局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
