ASP.NET MVC3 异步刷新
好久没写博客了，今天就讲讲如何在ASP.NET MVC3中实现异步刷新。本次实例前台采用的是Razor引擎。首先看看系统结构,如图
本系统采用N Layer开发。我们以其中的某个具体模块作为案例来讲述。
@model TeacherPlatForm.Utility.PagedList < TeacherPlatForm.Domain.Entities.Generate.TASE_Thesis_Titles >
<!DOCTYPE html >
< html >
< head >
< title >论文题目发布 </title>
< link rel ="Stylesheet" type ="text/css" href ="../../Content/Site.css" />
< script type ="text/javascript" src ="../../Scripts/jquery-1.4.4.js" > </script>
< script type ="text/javascript" src ="../../Scripts/jquery.unobtrusive-ajax.min.js" > </script>
< link rel ="Stylesheet" type ="text/css" href ="../../Scripts/jquery.autocomplete.css" />
< script type ="text/javascript" src ="../../Scripts/jquery.autocomplete.js" > </script>
< script type ="text/javascript" src ="../../Scripts/common.js" > </script>
< script type ="text/javascript" src ="../../Scripts/teacherplat/thesistitlepublish.js" > </script>
</head>
< body >
< div align ="center" >
< div align ="left" style ="width: 96%; margin-top: 20px" >
当前位置:论文题目发布
< br />
< hr align ="left" noshade ="noshade" size ="0.1" color ="#b70005" />
</div>
< input type ="hidden" id ="hfd_professional" value ="@ViewBag.professional" />
< input type ="hidden" id ="hfd_educationLevel" value ="@ViewBag.educationId" />
< input type ="hidden" id ="hfd_write_batchid" name ="hfd_write_batchid" value ="@ViewBag.writeBatchid" />
@using (Ajax.BeginForm("ThesisOperation", "ThesisTitlePublish", new AjaxOptions { OnSuccess = "opersuccess()" }))
{
Html.RenderPartial("~/Views/TeacherPlatForm/ThesisTitlePartial.cshtml");
< input type ="hidden" id ="hfd_sign" name ="hfd_sign" />
< div >
<input type="button" id="btnAdd" name="btnAdd" value="增加" class="btn" style="width: 60px"
/>
<input type="button" id="btnRemove" name="btnRemove" value="删除" class="btn" style="width: 60px"
/>
<input type="button" id="btnPublish" name="btnPublish" value="发布" class="btn" style="width: 60px"
/>
</div>
}
</div>
</body>
</html>
<!DOCTYPE html >
< html >
< head >
< title >论文题目发布 </title>
< link rel ="Stylesheet" type ="text/css" href ="../../Content/Site.css" />
< script type ="text/javascript" src ="../../Scripts/jquery-1.4.4.js" > </script>
< script type ="text/javascript" src ="../../Scripts/jquery.unobtrusive-ajax.min.js" > </script>
< link rel ="Stylesheet" type ="text/css" href ="../../Scripts/jquery.autocomplete.css" />
< script type ="text/javascript" src ="../../Scripts/jquery.autocomplete.js" > </script>
< script type ="text/javascript" src ="../../Scripts/common.js" > </script>
< script type ="text/javascript" src ="../../Scripts/teacherplat/thesistitlepublish.js" > </script>
</head>
< body >
< div align ="center" >
< div align ="left" style ="width: 96%; margin-top: 20px" >
当前位置:论文题目发布
< br />
< hr align ="left" noshade ="noshade" size ="0.1" color ="#b70005" />
</div>
< input type ="hidden" id ="hfd_professional" value ="@ViewBag.professional" />
< input type ="hidden" id ="hfd_educationLevel" value ="@ViewBag.educationId" />
< input type ="hidden" id ="hfd_write_batchid" name ="hfd_write_batchid" value ="@ViewBag.writeBatchid" />
@using (Ajax.BeginForm("ThesisOperation", "ThesisTitlePublish", new AjaxOptions { OnSuccess = "opersuccess()" }))
{
Html.RenderPartial("~/Views/TeacherPlatForm/ThesisTitlePartial.cshtml");
< input type ="hidden" id ="hfd_sign" name ="hfd_sign" />
< div >
<input type="button" id="btnAdd" name="btnAdd" value="增加" class="btn" style="width: 60px"
/>
<input type="button" id="btnRemove" name="btnRemove" value="删除" class="btn" style="width: 60px"
/>
<input type="button" id="btnPublish" name="btnPublish" value="发布" class="btn" style="width: 60px"
/>
</div>
}
</div>
</body>
</html>
在本页面我引用了一个partial页面代码如下
@model TeacherPlatForm.Utility.PagedList < TeacherPlatForm.Domain.Entities.Generate.TASE_Thesis_Titles >
< div id ="thesisTitle_tab" >
@Html.Hidden("thesisTitleIds", (Model != null ? string.Join("_", Model.DataList.Select(tt => tt.thesis_title_id)) : string.Empty))
< table class ="mytable" style ="margin-top: 15px" >
< tr >
< th >
< center >
@Html.CheckBox("chk_all", new { id = "chkall", onclick = "checkall()" })
</center>
</th>
< th >
< center >
题目 </center>
</th>
< th >
< center >
写作批次 </center>
</th>
< th >
< center >
专业名称 </center>
</th>
< th >
< center >
方向
</center>
</th>
< th >
< center >
发布状态 </center>
</th>
< th >
< center >
操作
</center>
</th>
</tr>
@if (Model != null && Model.DataList.Count > 0)
{
foreach (var thesisTitle in Model.DataList)
{
< tr onclick ="setCheck('@thesisTitle.thesis_title_id')" >
< td align ="center" >
@Html.CheckBox("chk_" + thesisTitle.thesis_title_id, new { id = "chk_" + thesisTitle.thesis_title_id, onclick = "setCheck('" + thesisTitle.thesis_title_id + "')" })
</td>
< td >
@thesisTitle.title
</td>
< td >
@(thesisTitle.TASE_Write_Batch != null ? thesisTitle.TASE_Write_Batch.write_batch_name : string.Empty)
</td>
< td >
@(thesisTitle.TASE_Thesis_Direction != null ? (thesisTitle.TASE_Thesis_Direction.TASE_Professional != null ? thesisTitle.TASE_Thesis_Direction.TASE_Professional.name : string.Empty) : string.Empty)
</td>
< td >
@(thesisTitle.TASE_Thesis_Direction != null ? thesisTitle.TASE_Thesis_Direction.direct_name : string.Empty)
</td>
< td >
@(thesisTitle.state == "1" ? "已发布" : "未发布")
</td>
< td align ="center" >
< input type ="button" id ="btnModify" name ="btnModify" class ="btn" value ="修改" style ="width:60px" onclick ="showModifyModal('@thesisTitle.thesis_title_id')" />
</td>
</tr> }
}
</table>
< div class ="divpager" >
共有 < font color ="red" >@(Model != null ? Model.TotalCount : 0) </font> 条记录 当前是第 < font color ="red" >@(Model != null ? Model.PageIndex : 0) </font>
页 共 < font color ="red" >@(Model != null ? Model.TotalPages : 0) </font>页
@if (Model!=null&&Model.HasPreviousPage)
{
@Ajax.ActionLink("首页", "Index", "ThesisTitlePublish", new { id = 1 + "_" + 10 + "_" + DateTime.Now.Ticks }, new AjaxOptions { UpdateTargetId = "thesisTitle_tab" }) < label > </label>
@Ajax.ActionLink("上一页", "Index", "ThesisTitlePublish", new { id = (Model.PageIndex - 1) + "_" + 10 + "_" + DateTime.Now.Ticks }, new AjaxOptions { UpdateTargetId = "thesisTitle_tab" }) < label > </label>
}
else
{
< a >首页 </a>
< a >上一页 </a>
}
@if (Model != null && Model.HasNextPage)
{
@Ajax.ActionLink("下一页", "Index", "ThesisTitlePublish", new { id = (Model.PageIndex + 1) + "_" + 10 + "_" + DateTime.Now.Ticks }, new AjaxOptions { UpdateTargetId = "thesisTitle_tab" }) < label > </label>
@Ajax.ActionLink("末页", "Index", "ThesisTitlePublish", new { id = Model.TotalPages + "_" + 10 + "_" + DateTime.Now.Ticks }, new AjaxOptions { UpdateTargetId = "thesisTitle_tab" })
}
else
{
< a >下一页 </a>
< a >末页 </a>
}
</div>
</div>
< div id ="thesisTitle_tab" >
@Html.Hidden("thesisTitleIds", (Model != null ? string.Join("_", Model.DataList.Select(tt => tt.thesis_title_id)) : string.Empty))
< table class ="mytable" style ="margin-top: 15px" >
< tr >
< th >
< center >
@Html.CheckBox("chk_all", new { id = "chkall", onclick = "checkall()" })
</center>
</th>
< th >
< center >
题目 </center>
</th>
< th >
< center >
写作批次 </center>
</th>
< th >
< center >
专业名称 </center>
</th>
< th >
< center >
方向
</center>
</th>
< th >
< center >
发布状态 </center>
</th>
< th >
< center >
操作
</center>
</th>
</tr>
@if (Model != null && Model.DataList.Count > 0)
{
foreach (var thesisTitle in Model.DataList)
{
< tr onclick ="setCheck('@thesisTitle.thesis_title_id')" >
< td align ="center" >
@Html.CheckBox("chk_" + thesisTitle.thesis_title_id, new { id = "chk_" + thesisTitle.thesis_title_id, onclick = "setCheck('" + thesisTitle.thesis_title_id + "')" })
</td>
< td >
@thesisTitle.title
</td>
< td >
@(thesisTitle.TASE_Write_Batch != null ? thesisTitle.TASE_Write_Batch.write_batch_name : string.Empty)
</td>
< td >
@(thesisTitle.TASE_Thesis_Direction != null ? (thesisTitle.TASE_Thesis_Direction.TASE_Professional != null ? thesisTitle.TASE_Thesis_Direction.TASE_Professional.name : string.Empty) : string.Empty)
</td>
< td >
@(thesisTitle.TASE_Thesis_Direction != null ? thesisTitle.TASE_Thesis_Direction.direct_name : string.Empty)
</td>
< td >
@(thesisTitle.state == "1" ? "已发布" : "未发布")
</td>
< td align ="center" >
< input type ="button" id ="btnModify" name ="btnModify" class ="btn" value ="修改" style ="width:60px" onclick ="showModifyModal('@thesisTitle.thesis_title_id')" />
</td>
</tr> }
}
</table>
< div class ="divpager" >
共有 < font color ="red" >@(Model != null ? Model.TotalCount : 0) </font> 条记录 当前是第 < font color ="red" >@(Model != null ? Model.PageIndex : 0) </font>
页 共 < font color ="red" >@(Model != null ? Model.TotalPages : 0) </font>页
@if (Model!=null&&Model.HasPreviousPage)
{
@Ajax.ActionLink("首页", "Index", "ThesisTitlePublish", new { id = 1 + "_" + 10 + "_" + DateTime.Now.Ticks }, new AjaxOptions { UpdateTargetId = "thesisTitle_tab" }) < label > </label>
@Ajax.ActionLink("上一页", "Index", "ThesisTitlePublish", new { id = (Model.PageIndex - 1) + "_" + 10 + "_" + DateTime.Now.Ticks }, new AjaxOptions { UpdateTargetId = "thesisTitle_tab" }) < label > </label>
}
else
{
< a >首页 </a>
< a >上一页 </a>
}
@if (Model != null && Model.HasNextPage)
{
@Ajax.ActionLink("下一页", "Index", "ThesisTitlePublish", new { id = (Model.PageIndex + 1) + "_" + 10 + "_" + DateTime.Now.Ticks }, new AjaxOptions { UpdateTargetId = "thesisTitle_tab" }) < label > </label>
@Ajax.ActionLink("末页", "Index", "ThesisTitlePublish", new { id = Model.TotalPages + "_" + 10 + "_" + DateTime.Now.Ticks }, new AjaxOptions { UpdateTargetId = "thesisTitle_tab" })
}
else
{
< a >下一页 </a>
< a >末页 </a>
}
</div>
</div>
现在我对分页采用了异步刷新,后台代码如下
在后台控制器判断如果是AJAX请求，返回一个Partial页面。去替换<div id="thesisTitle_tab">中的内容。怎么替换呢，看看partial页中的分页代码，@Ajax.ActionLink("首页", "Index", "ThesisTitlePublish", new { id = 1 + "_" + 10 + "_" + DateTime.Now.Ticks }, new AjaxOptions { UpdateTargetId = "thesisTitle_tab" })看见AjaxOptions有一个UpdateTargetId属性，这就是我们分页后要刷新的html标签的id。
对于增加删除我们也可以采用类似的方式，不过UpdateTargetId 要写在@using (Ajax.BeginForm("ThesisOperation", "ThesisTitlePublish", new AjaxOptions { OnSuccess = "opersuccess()" })) 中。这里我们采用了整页刷新