ASP.NET MVC3 异步刷新 推荐
2011-08-13 09:51
225 查看
好久没写博客了，今天就讲讲如何在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)
{
string isChecked = fc["chk_" + thesisTitleid].Split(',')[0];
if (isChecked.Equals("true"))
{
TASE_Thesis_Titles thesisTitles = thesisTitlePublishService.GetThesisTitles(thesisTitleid);
if (thesisTitles.state == "1")
{
return JavaScript("alert('已发布的论文题目不能删除!')");
}
thesisTitlePublishService.RemoveThesisTitle(thesisTitles);
}
}
thesisTitlePublishService.Commit();
return JavaScript("alert('删除成功!');window.location.href=window.location.href;");
}
catch
{
return JavaScript("alert('删除失败!')");
}
}
本系统采用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)
{
string isChecked = fc["chk_" + thesisTitleid].Split(',')[0];
if (isChecked.Equals("true"))
{
TASE_Thesis_Titles thesisTitles = thesisTitlePublishService.GetThesisTitles(thesisTitleid);
if (thesisTitles.state == "1")
{
return JavaScript("alert('已发布的论文题目不能删除!')");
}
thesisTitlePublishService.RemoveThesisTitle(thesisTitles);
}
}
thesisTitlePublishService.Commit();
return JavaScript("alert('删除成功!');window.location.href=window.location.href;");
}
catch
{
return JavaScript("alert('删除失败!')");
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用Trigger让UpdatePanel外部的控件也支持无刷新异步调用
- 今天解决一个异步刷新TreeView的问题
- AJAX(异步刷新技术)
- 源码推荐(11.27B)：网易标题栏目功能实现，仿天猫首页刷新效果 导航栏颜色渐变效果
- jQuery框架+DWR框架实现的Java Web中的Ajax效果（异步请求，局部刷新）
- (14)--异步刷新页面之ajax
- 示范如何以异步AJAX方式访问SharePoint数据 推荐
- Spring MVC异步刷新Web端代码
- ajax异步请求刷新
- Bootstrap的Select异步刷新时有问题
- 用FormData实现无刷新页面异步上传文件
- IOS异步获取数据并刷新界面dispatch_async的使用方法
- javascript;Jquery;获取JSON对象，无刷新分页，异步加载，异步删除，实例。
- C# 窗体加载假死，异步刷新总结
- 17 Jquer定时刷新以及循环遍历功能和ajax 的异步请求数据
- 异步编程需要“意识” 推荐
- Windows Store App异步返回刷新页面
- ajax 异步刷新实例
- Ajax同步、异步、异步刷新
- 异步请求与异步刷新