Question

我一直在寻找解决方案，但我尝试过的每件事都没有用，虽然看起来很容易。我相信你们中的一些人会知道我该怎么做。

我使用的是ASP.NET MVC4（razor）。我有一个侧面菜单，我想要的是将呈现另一个局部视图（取决于被点击的菜单项）。我的页面上有一个div应该包含这个局部视图。命令：

 @Html.Partial("_TitleDescription")

工作正常，但它静态渲染局部视图（在编译时）。我希望它能够使用用户在菜单中单击的每个按钮动态呈现它。

我试过了：

 @Ajax.ActionLink("Location", "Location", "Product",  new { id = @Model.ID }, new AjaxOptions() { UpdateTargetId = "result", InsertionMode = InsertionMode.Replace, HttpMethod = "GET"})

我试过了：

 <script type="text/javascript">
        function getView() {
            $('#detailsDiv').load("@Url.Action("Location" , "Product" )");
        }
 </script>
 <a href='javascript:getView();'>Get Partial View</a>
 <div id="detailsDiv"></div>

也是这样的：

 <div id="detailsDiv">
     @{ Html.RenderPartial("_TitleDescription", null); }
 </div>

但对我没什么用。

编辑：

我尝试了两个答案，但没有它们有效...所以这是我的控制器：

 public ActionResult Location(int id = 0)
    {

        Product product = unitOfWork.ProductRepository.GetById(id);

        return PartialView("Location.cshtml", product);
    }

我放了一个断点，我每次都打它，但在视图中仍然没有改变...... :(

这是我再次尝试的：

 <div id="detailsDiv"></div>
 <a href="#" onclick="loadLocation()">Location</a>

 <script type="text/javascript">
      function loadLocation() {
            $.get('@Url.Action("Location","Product", new { id = 15 } )',
                 function (data) {
                     $('#detailsDiv').load(data);
                 });
        }
 </script>

我也试过这个：

 <div id="detailsDiv"></div>
 @Html.ActionLink("Pages","Location","Product",new {id = 15},new {@class="menu"})

 <script type="text/javascript">
        $(function () {

            $(".menu").click(function (e) {

                e.preventDefault();
                $("#detailsDiv").load($(this).attr("href"))
            });


        });
    </script>

Answer 1

试试这个

@Html.ActionLink("Pages","Pages","Home",new {@is=Model.ID},new {@class="menu"})
@Html.ActionLink("Posts","Posts","Home",new {@is=Model.ID},new {@class="menu"})
<div id="detailView"></div>

并且有一些javascript来监听这些链接上的click事件，并使用jQuery load方法从操作方法加载结果。

<script type="text/javascript">
  $(function(){

    $("a.menu").click(function(e){

      e.preventDefault();
      $("#detailView").load($(this).attr("href"))

    });

  });
</script>

假设您的HomeController中有Action方法，它返回相关的视图/局部视图。

Answer 2

试试这个

   $.get( '@Url.Action("Location","Location", new { id = Model.ID } )',
 function(data) {
        $('#detailsDiv').html(data);
    });

Answer 3

如果您想为不同（部分）视图设置不同的侧边菜单，您是否考虑过使用主布局中的部分？这是对这类问题进行排序的方法之一。

例如，主_Layout.cshtml（例如，在共享文件夹中，如下所示：

@{
    string result = null;
    if (IsSectionDefined("Navigation"))
    {
        result = RenderSection("Navigation", false).ToHtmlString();
    }
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/StyleSheet.css" rel="stylesheet" type="text/css" />
    <title>@ViewBag.Title</title>
</head>
<body>
    @if (IsSectionDefined("Title"))
    {
        <header id="top">
            <h1>@RenderSection("Title")</h1>
        </header>
    }
    @if (IsSectionDefined("Navigation"))
    {
        <nav>
            @Html.Raw(result)
        </nav>
    }
    <section>
        <table>
            <tr>
                @if (IsSectionDefined("SideMenu"))
                {
                    <td>
                        <aside>
                            @RenderSection("SideMenu")
                        </aside>
                    </td>
                }
                <td>
                    <section>
                        @RenderBody()
                    </section>
                </td>
                @if (IsSectionDefined("SideMenu2"))
                {
                    <td>
                        <aside>
                            @RenderSection("SideMenu2")
                        </aside>
                    </td>
                }
            </tr>
        </table>
    </section>
    @if (IsSectionDefined("Navigation"))
    {
        <nav>
            @Html.Raw(result)
        </nav>
    }
    <footer>
        <h4>The footer of the main Layout</h4>
    </footer>
</body>
</html>

然后三个不同的视图可以定义部分：

视图1的示例：

@{
    ViewBag.Title = "Cieties";
}

@section Title
{
    Main cities around the World
}

@section Navigation
{
    Home | City 1 | City 2 | City 3  
}

@section SideMenu
{
    <ul>
        <li>Population</li>
        <li>Area</li>
        <li>History</li>
        <li>For turists</li>
    </ul>
}

@section SideMenu2
{
    <ul>
        <li>Additional link 1</li>
        <li>Additional link 2</li>
        <li>Additional link 3</li>
    </ul>
}

<div>
    Here goes everything about particular city
</div>

View2示例：

@{
    ViewBag.Title = "Cars";
}

@section Title
{
    All about good cars
}

@section Navigation
{
    Home | BMW | VW | Nissan  
}

@section SideMenu
{
    <ul>
        <li>Fuel consumption</li>
        <li>Comfort</li>
        <li>Technical details</li>
        <li>Engine</li>
    </ul>
}

<div>
    Here goes everything about particular Cars
</div>

View3示例：

@{
    ViewBag.Title = "Food";
}

@section Title
{
    Tasty food for all occasions
}

@section navigation
{
    Home | Non-vegetarians | Vegetarians | In 30 mins | Spanish Tapas  
}

@section SideMenu2
{
    <ul>
        <li>Spanish cusine</li>
        <li>Italian cusine</li>
        <li>American fast food</li>
    </ul>
}

<div>
    Here goes everything about particular food
</div>

有几个部分是可选的，这就是我将false作为@RenderSection()的第二个参数的原因。您需要为此制定CSS，并且可能需要<nav>，<section>，<aside>，因为HTML5的一部分需要更改为<div>标签，但这是次要的更改。

请注意：您需要调用@Layout = ~/Shared/_Layout.cshtml以便MVC 4为所有视图调用此布局。

用户点击后如何渲染局部视图（使用剃刀）？

3 个答案: