ASP.NET MVC3 異步刷新

時間 2020-08-26

標籤 asp.net asp mvc3 mvc 異步刷新欄目 ASP 简体版

原文原文鏈接

很久沒寫博客了，今天就講講如何在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>

在本頁面我引用了一個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)

{