AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

ASP.NET MVC3 异步刷新

2017-11-21 1311
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
好久没写博客了，今天就讲讲如何在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('删除失败!')"); 
                        } 
                }
 


本文转自 BruceAndLee 51CTO博客，原文链接：http://blog.51cto.com/leelei/638408，如需转载请自行联系原作者

文章标签：
JavaScript
前端开发
.NET
开发框架
关键词：
.NET异步
.NET mvc
ASP.NET mvc
ASP MVC
mvc刷新
技术小阿哥
目录
相关文章
追逐时光者
|
17天前
|
网络协议 Unix Linux
一个.NET开源、快速、低延迟的异步套接字服务器和客户端库
一个.NET开源、快速、低延迟的异步套接字服务器和客户端库
追逐时光者
58 4
二二*一一
|
2月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
二二*一一
35 7
Echo_Wish
|
2月前
|
存储 开发框架 前端开发
ASP.NET MVC 迅速集成 SignalR
ASP.NET MVC 迅速集成 SignalR
Echo_Wish
48 0
VipSoft
|
3月前
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
VipSoft
42 0
代码掌控者
|
3月前
|
开发框架 前端开发 安全
ASP.NET MVC 如何使用 Form Authentication?
ASP.NET MVC 如何使用 Form Authentication?
代码掌控者
47 0
VipSoft
|
3月前
|
开发框架 .NET
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
VipSoft
113 0
追逐时光者
|
5月前
|
SQL 设计模式 开发框架
.NET异步有多少种实现方式？（异步编程提高系统性能、改善用户体验）
想要知道.NET异步有多少种实现方式，首先我们要知道.NET提供的执行异步操作的三种模式，然后再去了解.NET异步实现的四种方式。
追逐时光者
49 1
源码宝
|
6月前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统（Laboratory Information System，缩写LIS）是一类用来处理实验室过程信息的软件，云LIS系统围绕临床，云LIS系统将与云HIS系统建立起高度的业务整合，以体现“以病人为中心”的设计理念，优化就诊流程，方便患者就医。
源码宝
75 0
GoodTime
|
6月前
|
开发框架 前端开发 .NET
C# .NET面试系列六：ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中，TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制，但它们有一些区别。 <b>TempData：</b> 1、生命周期 ```c# TempData 的生命周期是短暂的，数据只在当前请求和下一次请求之间有效。一旦数据被读取，它就会被标记为已读，下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据，例如在一个动作中设置 TempData，然后在重定向到另
GoodTime
315 5
a15034260562-24955
|
6月前
|
开发框架 前端开发 .NET
进入ASP .net mvc的世界
进入ASP .net mvc的世界
a15034260562-24955
82 0

热门文章

最新文章

  • 1
    spring mvc 与JPA/Hibernate的整合示例
  • 2
    MVC中分部视图与扩展方法对页面设计的贡献
  • 3
    【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记15 storyboard中的绘图 MVC模式
  • 4
    MVC中 数据底层联合JQUERY实现动态的安全的验证机制
  • 5
    bboss mvc处理ajax get方法中文乱码方式纪实
  • 6
    MVC+WCF框架下广告位管理——文件上传
  • 7
    bboss mvc快速入门教程
  • 8
    无法安装MVC3，错误提示：安装KB2483190（vs10-kb2483190）出错
  • 9
    白话学习MVC(四)URL路由
  • 10
    【MVC】AJAX+PartialView实现商城首页的楼层加载
  • 1
    asp.net中条件查询+分页
    60
  • 2
    进入ASP .net mvc的世界
    82
  • 3
    ASP.NET体检中心源码，实现检前、检中、检后全流程管理
    107
  • 4
    C# .NET面试系列七：ASP.NET Core
    366
  • 5
    C# .NET面试系列六：ASP.NET MVC
    315
  • 6
    ASP.NET云LIS区域检验云SaaS平台源码
    94
  • 7
    ASP.NET实验室LIS系统源码 Oracle数据库
    75
  • 8
    ASP.NETMVC数据库完整CRUD操作示例
    67
  • 9
    ASP.NET WEB+EntityFramework数据持久化——考核练习库——1、用户管理系统(考点：查询列表、增加、删除)
    116
  • 10
    ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
    80

    • 相关电子书

    更多
  • Java Spring Boot开发实战系列课程【第7讲】：Spring Boot 2.0安全机制与MVC身份验证实战(Java面试题)
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月