如何仅重新加载内容页面(不重新加载树菜单) [英] How to reaload only content page (without reloading treemenu)
问题描述
我在ASP MVC中还很陌生，我想知道是否可以重新加载内容页面，而无需重新加载树形菜单(位于页面左侧). 我的_layout.cshatml文件看起来就是这样
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>
我希望能够在用户单击树上的节点后仅重新加载内容div.有可能这样做吗?我知道有一个jQuery函数可以将数据注入div.但是我不知道如何从树的局部视图中引用div"divResult".有可能实现此功能吗?
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 ?
推荐答案
加载内容的javascript代码应位于主布局视图中，而不应位于要加载的局部视图中.
The javascript code that loads the content should be in your main layout view, not in partial view that you want to load in.
因此，具有JavaScript代码的主布局:
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>
这篇关于如何仅重新加载内容页面(不重新加载树菜单)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
