Question

我有一个带有菜单的页面，其目的是根据点击的导航栏项目以及其中一个部分视图作为默认页面，使用部分视图呈现内容。谁知道我怎么能做到这一点？

    @using Opdracht_1.Models;
    @model List<Guestmodel>
    @{
        Layout = "~/Views/_BasicLayout.cshtml";
    }

    <!DOCTYPE html>

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>GuestList</title>
    </head>
    <body>
            <div class="col-sm-3 col-md-2 sidebar">
                <ul class="nav nav-sidebar">
                    <li class="active">
                    <li><a href="">Alle<span class="sr-only">(current)</span></a></li>
                    <li><a href="">Reacties<span class="sr-only">(current)</span></a></li>
                    <li><a href="">Aanmeldingen<span class="sr-only">(current)</span></a></li>
                    <li><a href="">Afmeldingen<span class="sr-only">(current)</span></a></li>
                    </li>
                </ul>
            </div>

            @Html.Partial("_AllPage")

    </body>
    <script>
    </script>
    </html>

Answer 1

您可以使用Ajax或整页加载实现此目的：

Ajax方式：使用div包装部分内容区域，并使用Ajax 要求在菜单点击事件上加载内容
整页加载方式：将所有页面内容移至_layout，使用此方法部分中的_layout，不再是局部的，而是整页，并使用菜单中的链接在视图之间切换。

整页示例（我会用这个）：

_yourLayout.cshtml

@using Opdracht_1.Models;
@model List<Guestmodel>

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>GuestList</title>
</head>
<body>
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="active">
                <li><a href=**@Url.Action("OneAction")**>Alle<span class="sr-only">(current)</span></a></li>
                <li><a href="@Url.Action("OtherAction")">Reacties<span class="sr-only">(current)</span></a></li>
                <li><a href="">Aanmeldingen<span class="sr-only">(current)</span></a></li>
                <li><a href="">Afmeldingen<span class="sr-only">(current)</span></a></li>
                </li>
            </ul>
        </div>

        @RenderBody()

</body>
<script>
</script>
</html>

OneAction.cshtml

@{
    Layout = "~/Views/Shared/_yourLayout.cshtml";
}
<div>
    Your partial content here
</doc>

Answer 2

cshtml页面：

替换@Html.Partial("_AllPage") 与

<div id="divDetailView"></div>

为所有Tab创建不同的AJAX调用单击或创建常见的AJAX方法（如果视图很常见）。并在点击事件上调用函数。

function LoadDetailPartialView()
    {
        $.ajax({
            url: '@Url.Action("Detail", "Pantry")',
            type: 'GET',
            cache: false,
            data: { Data Which you want to pass to method }
        }).done(function(result) {
            if (result.redirectTo)                  
                    $('#divDetailView').html(result);                 
        }).fail(function (jqXHR, exception) {
            showError(jqXHR);
        });
    }

您的控制器必须与以下相同。

 [HttpGet]        
        public ActionResult Detail(int Id)
        {            
            var model = new PantryModel();
            return PartialView(model);
        }

当我们返回Partialview时，它将为您提供部分视图的Html。

在导航菜单上单击切换局部视图

2 个答案: