2012-01-27 117 views
0

我是相當新的ASP MVC,我想知道是否有可能reaload內容頁面,無需重新加載樹菜單(這是在頁面的左側) 。 我_layout.cshatml文件看起來是這樣如何reaload只有內容頁面(無需重新加載treemenu)

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

我想有後到reaload只有內容DIV的能力用戶單擊樹上的節點。有可能這樣做嗎?我知道有一個jQuery函數負載可以將數據注入到div中。但是,我不知道如何從樹的部分視圖中引用div「divResult」。是否有可能實現這一功能? 。

回答

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> 
相關問題