如何仅重新加载内容页面（不重新加载树形菜单）答案

【问题标题】：How to reaload only content page (without reloading treemenu)如何仅重新加载内容页面（不重新加载树形菜单）
【发布时间】：2012-02-20 14:22:02
【问题描述】：

我是 ASP MVC 的新手，我想知道是否可以重新加载内容页面，而无需重新加载树形菜单（位于页面左侧）。我的 _layout.cshatml 文件看起来是这样的

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>

    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                 @{ Html.RenderAction("TopMenu", "Menu"); }
            </nav>
        </header>

          <div id="categories">
        @{Html.RenderAction("TreeMenu", "Tree");}
    </div>
    <div id="content">
        @RenderBody()
    </div>
    </div>
</body>
</html>

主页面（负责渲染主体）是这样的

@{
    ViewBag.Title = "Home Page";
}
<a href='javascript:getView();'>Get Partial View</a>
 <script type="text/javascript">
     function getView() {
         $('#divResult').load("@Url.Action("GridViewPartial", "Home")");
     }
 </script>
 <div id='divResult'>
 </div>

我希望能够在用户单击树上的节点后仅重新加载内容 div。有可能这样做吗？我知道有一个 jQuery 函数加载可以将数据注入 div。但是我不知道如何从树的部分视图中引用 div“divResult”。有没有可能实现这个功能？

【问题讨论】：

标签： jquery asp.net-mvc model-view-controller reload

【解决方案1】：

加载内容的 javascript 代码应该在您的主布局视图中，而不是在您要加载的部分视图中。

那么，带有 JavaScript 代码的主布局：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>

    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                 @{ Html.RenderAction("TopMenu", "Menu"); }
            </nav>
        </header>

          <div id="categories">
        @{Html.RenderAction("TreeMenu", "Tree");}
    </div>
        <div id="content">
            @RenderBody()
        </div>
    </div>
    <script type="text/javascript">
        $(doument).ready(function(){
            $('nav').click(function(){ // click on navigation, you should narrow it down to some id
                $('#content').load("@Url.Action("GridViewPartial", "Home")"); // replaces content div's inner html with loaded partial
            });
        });
    </script>
</body>
</html>

【讨论】：