How to reaload only content page (without reloading treemenu)

问题

I'm quite new in ASP MVC and I was wondering if it is possible to reaload content page, without reloading tree menu (which is on the left side of the page). My _layout.cshatml file looks that way

<!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>

The main page (responsible for render body) looks like that

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

I would like to have an ability to reaload only the content div after the user click node on tree. Is it possible to do that ? I know that there is a jQuery function load which can inject data into div. However I don't konow how can I refer to div "divResult" from the partial view of tree. Is it possible to achieve this functionality ?

回答1:

The javascript code that loads the content should be in your main layout view, not in partial view that you want to load in.

So, the main layout with JavaScript code:

<!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>

来源：https://stackoverflow.com/questions/9035944/how-to-reaload-only-content-page-without-reloading-treemenu

标签

jquery

asp.net-mvc

model-view-controller

reload