MVC3中使用ajax加载部分实体到母版页中刷新后部分视图消失
0
悬赏园豆：10
[已关闭问题]
关闭于 2012-03-08 13:45
//点击部门管理时,ajax更新div
$(function () {
$("#Department").click(function () {
$.get("/Department/Index", null, function (data) {
$("#content").html(data);
});
});
});
//点击工资项目管理时,ajax更新div
$(function () {
$("#WageProject").click(function () {
$.get("/WageProject/Index", null, function (data) {
$("#content").html(data);
});
});
});
上面是使用JQuery来局部更新的js.下面是母版页的Html
<html>
<head>
<title>宾馆管理系统</title>
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"
@RenderSection("Head", false)
<script src="@Url.Content("~/JS/HumanResources/HumanResources.js")" type="text/javascript"></script>
<link href= "@Url.Content("~/Content/HumanResources.css")"rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<div id="header">
人力资源管理
</div>
<div id="menu">
<div id="Department">
部门管理</div>
<div id="WageProject">
工资项目管理</div>
</div>
<div id="mainContent">
<div id="sidebar">
This is the sidebar
</div>
<div id="content">
@RenderBody()
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
导航功能在母版页中。在管理人力资源时有一个初始页，控制器为HumanResourcesController，该控制器的一个Index方法返回使用了上面母版页的视图。在这个Index视图中，我希望点击WageProject的Div时使用ajax将工资项目设置的部分视图加载到contexnt的Div中。
下面是ajax访问的WageProject控制器的Index动作：
private IEnumerable<WageProjectModel> GetWageProjectModel()
{
return from post in wageProjectRepository.GetAll().AsQueryable()
select new WageProjectModel
{
ID = post.ID,
Title = post.Title,
ComputingMethod = post.ComputingMethod,
Remark = post.Remark
};
}
//返回所有记录进行显示
[OutputCache(Duration=3600)]
public PartialViewResult Index()
{
return PartialView(GetWageProjectModel());
}
下面是Index返回的视图Index(该视图就是通过右击Index来添加的)。
@model IEnumerable<HotelManageSystem.Models.WageProjectModel>
<p>
<input id="btnCreate" type="button" value="添加新项"/>
</p>
<div id="main">
<table>
<tr>
<th>
工资项目名称
</th>
<th>
计算方法
</th>
<th>
备注
</th>
<th>
</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Title)
</td>
<td>
@Html.DisplayFor(modelItem => item.ComputingMethod)
</td>
<td>
@Html.DisplayFor(modelItem => item.Remark)
</td>
<td>
@Html.Raw("<input id='" + item.ID + "' class='Edit' type='button' value='编辑'/>")
@Html.Raw("<input id='" + item.ID + "' class='Delete' type='button' value='删除'/>")
</td>
</tr>
}
</table>
</div>
问题是点击WageProject这个div是数据的确通过ajax加载进来，但是页面刷新后加装进来的数据就消失了，请问有什么解决方法啊。
问题补充：
这是我的主页，就是HumanResources/Index。我希望点击导航菜单时将相应的部分视图加载到Content当中来，实现局部刷新。有个方法是使用一个Session，来保留用户当前访问的是那个页面，当刷新时在HuamnResources/Index中判断，进而返回当前的部分视图。
但我又有另外的问题了，比如工资方案管理这个部分视图加载到Content当中去的时候他的脚步没有一起加载进去。
@section Head {
<script type="text/javascript">
$(document).ready(function () {
$("#btnCreate").click(function () {
$.get("/WageProject/Create", null, function (data) {
$("#main").html(data);
});
});
$(".Delete").click(function () {
var msg ="您真的确认要删除吗？";
var id = $(this).attr("id");
if (confirm(msg) ==true) {
$.post("/WageProject/Delete", { id: id }, function (data) {
$("#main").html(data);
});
}
});
});
</script>
}
<p>
<input id="btnCreate" type="button" value="添加新项"/>
</p>
<div id="main">
<table>
<tr>
<th>
工资方案名称
</th>
<th>
计算方法
</th>
<th>
备注
</th>
<th>
</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Title)
</td>
<td>
@Html.DisplayFor(modelItem => item.ComputingMethod)
</td>
<td>
@Html.DisplayFor(modelItem => item.Remark)
</td>
<td>
@Html.Raw("<input id='" + item.ID + "' class='Edit' type='button' value='编辑'/>")
@Html.Raw("<input id='" + item.ID + "' class='Delete' type='button' value='删除'/>")
</td>
</tr>
}
</table>
</div>
我想用ajax加载部分视图时，我在谷歌浏览器中并没有看见脚本。这样我就不能进行触发啊。求帮忙啊。
所有回答(1)
0
刷新就是页面重新加载啊 不会执行点击事件的
$(function () {
$.get("/WageProject/Index", null, function (data) { $("#content").html(data);
});
