ASP.NET MVC3 异步刷新

2011-08-13 09:51:53

标签：MVC3 异步刷新休闲 N Layer 职场

原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。http://leelei.blog.51cto.com/856755/638408

好久没写博客了，今天就讲讲如何在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="http://www.cnblogs.com/Content/Site.css" />
        <script type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery-1.4.4.js"></script>
        <script type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery.unobtrusive-ajax.min.js"></script>
        <link rel="Stylesheet" type="text/css" href="http://www.cnblogs.com/Scripts/jquery.autocomplete.css" />
        <script type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery.autocomplete.js"></script>
        <script type="text/javascript" src="http://www.cnblogs.com/Scripts/common.js"></script>
        <script type="text/javascript" src="http://www.cnblogs.com/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>

现在我对分页采用了异步刷新,后台代码如下

public ActionResult Index(string id)

{

try

{

int pageSize = 10, pageIndex = 1;

if (!string.IsNullOrEmpty(id))

{

pageIndex = int.Parse(id.Split('_')[0]);

pageSize = int.Parse(id.Split('_')[1]);

}

TASE_Write_Batch writeBatch = thesisTitlePublishService.GetWriteBatch();

PagedList<TASE_Thesis_Titles> thesisTitleList = thesisTitlePublishService.GetThesisTitleList((string)Session["userid"], writeBatch.write_batch_id, pageIndex, pageSize);

if (Request.IsAjaxRequest())

{

return PartialView("~/Views/TeacherPlatForm/ThesisTitlePartial.cshtml", thesisTitleList);

}

return View("~/Views/TeacherPlatForm/ThesisTitlePublish.cshtml", thesisTitleList);

}

catch (Exception ex)

{

if (ex.GetType() == typeof(MyException))

{

ViewBag.errorMessage = ((MyException)(ex)).Message;

return View("~/Views/TeacherPlatForm/ErrorMessage.cshtml");

}

else

{

return View("~/Views/TeacherPlatForm/ThesisTitlePublish.cshtml", null);

}

在后台控制器判断如果是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()" })) 中。这里我们采用了整页刷新

public JavaScriptResult RemoveThesisTitle(FormCollection fc)

{

try

{

string thesisTitleId = fc["thesisTitleIds"];

if (thesisTitleId.Length == 0)

{

return JavaScript("alert('请选择要删除的题目!')");

}

string[] thesisTitleIds = thesisTitleId.Split(new char[] { '_' }, StringSplitOptions.RemoveEmptyEntries);

foreach (var thesisTitleid in thesisTitleIds)

{