jquery - 如何在 ASP .NET MVC Web 应用程序中创建可折叠/下拉/可展开的部分 View

Question

在 PersonController 的 Details 操作中，我想显示有关 Person 对象的所有信息。

最初我只想显示有关人的一些信息，其余信息将折叠，然后我想单击按钮/箭头/其他内容，其余信息将展开。

在单击按钮/箭头/任何内容之前，所有数据均已加载但只是隐藏。如果不是必须我不想使用AJAX(我不熟悉它)。

附图说明了我的意思。

<小时/>

点击之前

<小时/>

点击后

现在详细信息 View 看起来像这样:

@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 对象传递给部分 View 。所以我修改了脚本替换:

  data: {
                parentEls: '@Model.FirstName'
            }

与

data: {
                person: '@Model'
            }

在 Controller 中:

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

但是 Test 操作中的 Person 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>

查看:

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

</div>

Controller 的操作:

        [HttpPost]
        public ActionResult Test(Person person) {
           // ViewBag.Chk = parentEls;
            System.Diagnostics.Debug.WriteLine("PASSED: ");
            System.Diagnostics.Debug.WriteLine(person.FirstName);
            return PartialView(person);
        }
    }

部分 View :

@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 />

Answer 1

如果您需要在主视图中显示部分 View ，那么在这种情况下更好的选择是使用 ajax。

使用ajax，您将能够调用操作方法并返回部分 View ，并且在部分 View 操作中，您将能够从主视图传递您想要的任何值。

查看下面的示例，它会对您有所帮助。

//==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 中的部分 View 。

像下面的脚本:-

<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 调用之上，您将能够将任何值传递给测试操作。在上面的示例中传递模型属性的 FirstName。

部分 View ( Controller 端):-

[HttpPost]
    public ActionResult Test(string parentEls)
    {
        ViewBag.Chk = parentEls;
        return PartialView();
    }

部分 View ( View 侧):

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