ASP.NET MVC3 异步刷新

最新推荐文章于 2021-08-05 12:01:18 发布
转载 最新推荐文章于 2021-08-05 12:01:18 发布 · 143 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/ppcompany/articles/2674634.html

本文介绍如何在ASP.NET MVC3中通过异步刷新实现论文题目的增删改查功能，包括使用Razor引擎和AJAX选项进行部分页面更新的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 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) 
                                { 
                                         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('删除失败!')"); 
                        } 
                }
 

本文出自 “微软技术” 博客，请务必保留此出处http://leelei.blog.51cto.com/856755/638408

转载于:https://www.cnblogs.com/ppcompany/articles/2674634.html

mvc中实现异步刷新页面
代码的专栏
09-17 7645
Controller:层             var pubshList = BFactory.CreateBussiness().GetPublishList(MemberId, pageIndex, PageSize, out Counts);             if (Request.IsAjaxRequest())             {            
ASP.NET MVC异步获取和刷新ExtJS6 TreeStore
01-20
在本文中，我们将深入探讨如何在ASP.NET MVC环境中异步获取和刷新ExtJS6的TreeStore，以便构建动态的树形结构。TreeStore是ExtJS框架中用于展示树形数据的关键组件，通常与TreePanel结合使用。在常规实现中，我们...
C#异步刷新UI
03-27
异步刷新界面，使得界面应用操作流畅，代码简洁！！！
asp.net mvc ajax 异步刷新例子
03-10 489
这几天在asp.net中使用ajax来做异步刷新，这里整理一下 1.首先看前台页面点击的时候调用函数 function shuxin() { $.ajax( { url: "GetValue", //指处理的action type: "post", ...
MVC5 条件查询异步刷新
weixin_30322405的博客
03-12 220
学校要做一个数据查询，按条件并且能下载 20160312 使用HTML.ajax异步刷新 视图层 @Html.Partial("_men") <div class="col-md-10"> <div class="row"> @using(Ajax.BeginForm(new AjaxOptions { ...
asp.net jquery+ajax异步刷新实现示例
10-26
总结来说，这个示例展示了如何利用ASP.NET、jQuery和AJAX实现异步刷新。通过监听用户输入事件，使用AJAX发送请求，然后在服务器端处理请求，最后将处理结果返回并更新页面，这一切都在不刷新页面的前提下完成，提高...
asp.net mvc3 表单提交和异步提交
03-21
总结来说，ASP.NET MVC3的表单提交和异步提交是构建Web应用程序不可或缺的元素。表单提交适合简单的交互，而Ajax提交则能提升用户体验，尤其是在需要频繁与服务器交互或更新局部页面时。理解并熟练运用这两种提交...
asp.net MVC5简单小例子
01-10
ASP.NET MVC5是一个基于模型-视图-控制器（MVC）设计模式的Web应用程序框架，由微软开发。在这个“asp.net MVC5简单小例子”项目中，开发者创建了一个基础的Web应用，它实现了用户登录、注销、发布内容以及删除内容...
ASP.NET MVC Filter- 登录验证 【异步刷新列表视图】
weixin_30405421的博客
12-15 88
1 public class TAjaxListLoginValidateAttribute : FilterAttribute, IAuthorizationFilter 2 { 3 public void OnAuthorization(AuthorizationContext filterContext) 4 { 5 ...
C# 异步刷新控件
09-30
异步刷新textbox和datagridview控件
MVC 异步增删改查 Demo
12-11
异步的增删改查DEMO, 其中应用了一些开发中常用的jquery插件,例如表格插件datatables, jquery ui插件用来处理一些常用的tab或者dialog, jquery validate用来进行异步的表单验证, 欢迎大家下载, 有问题请发送至邮箱davidjefiny@gmail.com
Spring MVC异步刷新Web端代码
ithouse的专栏
10-17 1669
ACDP Dashboard var j = jQuery.noConflict(true); function readDashboard() { var stageWidth = screen.width * 25 / 28; var stageHeight = screen.height * 17 / 21;
web后台交互定时器
c02645的专栏
10-29 652
private int index     {         get         {             object o = ViewState["index"];             return (o == null) ? 0 : (int)o;//设定起始时间         }         set         {             ViewS
ASP.NET中使用UpdatePanel实现局部异步刷新方法和攻略
小菜鸟的Blog
12-12 4430
asp.net UpdatePanel实现异步局部刷新 如有雷同，不胜荣欣，若转载，请注明 鉴于最近项目需要，研究了一下UpdatePanel控件的使用方法，现总结如下，可能有很多地方不足，还望大家斧正哦，此文的目的也是为了帮助UpdatePanel的初学者，也是为了给自己的学习之路留个脚印，以便自己查缺补漏，废话到此，下面直接开始 UpdatePanel局部刷新的使用 ScriptMana
ASP.NET MVC 异步获取和刷新ExtJS6 TreeStore
weixin_33861800的博客
12-03 117
从数据库获取构造树结构是ExtJS TreePanel的核心技术，常用方法是TreeStroe里配置proxy，这种方式的root成了一个不受控制的节点。 TreeStroe的root实际是一个层叠json数据，大部分情况是直接写一些简单数据，但在实际应用中必定是要从数据库读取的。我的方法是先用Ext.Ajax.request获取root数据形成TreeStroe。定义一个全局的TreeStroe...
《个人笔记》.net mvc 查询后刷新功能失败 null empty
weixin_43577775的博客
07-27 112
null->该对象没有地址 empty->有地址但是内容为空 刷新失败 试试用trim去掉空格，然后用window.loaction.href拼出url window.location.href="/控制器/方法/？和控制器传入的参数一致的参数=“+接受该input值的参数 ...
mvc ajax定时刷新数据库,Asp.net MVC更新网页，无需重新加载页面15秒后使用AJAX
weixin_29418485的博客
08-05 474
参考我的问题，我想更新一个页面，即刷新页面后每隔15秒无需重新加载它。现在我使用它更新页面时重新加载它，这不是一个好方法，因为它重新加载不好看的页面。所以为此，我想使用ajax这将更新/刷新我的网页，无需每15秒后重新加载。Asp.net MVC更新网页，无需重新加载页面15秒后使用AJAX我的目标是urlhttp://localhost:17104/Home/MultiGraph我已经搜查了很多...
mvc ajax定时刷新数据库,通过Ajax.ActionLink()在ASP.NET MVC5中实现无刷新加载操作方法...
weixin_34503235的博客
08-05 584
第1节. Ajax辅助方法#NET编程#在ASP.NET MVC 5中除了支持HTML辅助方法之外，还支持另外一套与Ajax相关的辅助方法，称为Ajax辅助方法。这些Ajax辅助方法是异步进行的。ASP.NET MVC 5 ActionLink()方法要想使用Ajax辅助方法，需要引入文件：jquery.unobtrusive-ajax.js，此文件是支持ajax的基础，微软的MVC 5 Ajax...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值