在菜单选择上渲染部分视图

Posted 2021-05-06

我有一个标签菜单，我想用它来显示不同的部分视图，具体取决于菜单项选择。这是它的样子：

类似于：如果所选项目为1，则渲染视图“无论如何”......

我想点击第一个菜单项并渲染Tab1的局部视图，第二个菜单项并渲染Tab2的局部视图等...

编辑 - 我一直在努力

风景：

<div class="tabs">
    <ul>
        <li><a class="tab" id="tab1" href="#">Personal Data</a></li>
        <li><a class="tab" id="tab2" href="#">User Image</a></li>
        <li><a class="tab" id="tab3" href="#">Regional Definitions</a></li>
        <li><a class="tab" id="tab4" href="#">Colors and Themes</a></li>
        <li><a class="tab" id="tab5" href='#'>Personal Area</a></li>
    </ul>
</div>

<div id="div-for-partial">

</div>

    ...

<script type="text/javascript">

    $(function () {
        $('.tab').click(function () {
            var id = this.id;

            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetPartialView", "ConfigController")',
                data: { 'id': id },
                dataType: "html",
                success: function (data) {
                    $('#div-for-partial').html(data);
                }
            });
        });
    });

</script>

控制器：

public ActionResult Index()
{
     return View();
}

[HttpPost]
public ActionResult GetPartialView(string id)
{
    switch (id)
    {
        case "tab1":
            return PartialView("_PersonalData");
        case "tab2":
            return PartialView("_UserImage");
    }
    return RedirectToAction("Index");
}

答案

实现Ajax并不复杂。首先为每个选项卡分配一个唯一的ID和一个公共类。

<div class="tabs">
    <ul>
        <li><a href="#" class="tab" id="tab1">Tab 1</a></li>
        <li><a href="#" class="tab" id="tab2">Tab 2</a></li>
        <li><a href="#" class="tab" id="tab3">Tab 3</a></li>
    </ul>
</div>

然后，创建要发布到的控制器操作。

public ActionResult GetPartialView(string id)
{
    switch(id)
    {
        case "tab1":
            return PartialView("_PartialForTab1");
        case "tab2":
            return PartialView("_PartialForTab2");
        case "tab3":
            return PartialView("_PartialForTab3");
    }

    return RedirectToAction("YourHomePage");
}

为标签添加点击事件处理程序：

<script type="text/javascript">
$(function () {
    $('.tab').click(function() {
        var id = this.id;

        $.get('@Url.Content("GetPartialView")', { 'id': id },  function (data) { 
            $('#div-for-partial').html(data); 
        });
    });
});
</script>