简单干净的C#方法设计案例:SFCUI.AjaxLoadPage()之一

简介:

案例背景

本文将介绍如何通过一行代码实现下图中的功能。

红色框中是http://cheny.blog.51cto.com/blog/3988930/1101508提到的AjaxValue,也只有一行代码,看上去类似一个下拉菜单,但能从内部把Ajax功能执行完毕并显示到屏幕上。

现在要做的业务需求是:在上述任务分配界面,做右边红框边点选人员并调整名字后,左边的蓝框中整个页面要更新。这是常见的一种业务操作,没有什么新奇之处,本文讨论的是:能否只用一行代码实现

当然,这里所说的一行代码,是指在调用处只需要一行代码(因此以后这类功能都只需一行代码),后台则需要一些储备。

传统实现步骤

1. 在左边调整人员后调用某个JS函数

2. 这个函数调用后台的一个函数,产生需要填充左边蓝框的内容

3. 将内容用Ajax填充到蓝框中。

本人上个月刚看明白JS是什么东西,还不会做上面的步骤2,所以不得不用下面的方法:

1. 在左边调整人员后调用某个JS函数(现成的,我做的SFCUI.AjaxValue中有OnSuccess能指定调用什么刷新函数)

2.1 这个“刷新”函数实际上会点击一个刷新链接,这个链接是asp.net的MVC自带的Ajax.Link,它会把指定Url中的参数更新到指定ID的DIV中。

2.2 在刷新链接下面,放置一个DIV,准备接收传来的内容。

确切说,这个DIV在页面初始化后、人员没有调整时时,里边也已经放了基本相似的内容,因此会造成重复代码,下面会提到,也会提到如何消除。

3. 将内容用Ajax填充到蓝框中。

传统实现的代码

因为这些代码有些都已经删除了,所以简单复原一下,说明一下思路。

整个初始页面的代码:


 
 
  1. print?下面这堆在dl之前的大约10行代码,是那个所谓的刷新函数。   
  2.  
  3. 下面这堆在dl之前的大约10行代码,是那个所谓的刷新函数。 
  4. [html] view plaincopyprint?<script type = "text/javascript">   
  5.     });   
  6.     function refreshLeft() {   
  7.         $("#refreshLeft").click();   
  8.     };   
  9. </script>   
  10. <div style = "display: no1ne">   
  11.     @SFCUI.Link("refresh", "/Agile/PlanningMeetings/AjaxRefreshAssignItemsLeftPad?sprintID=" + assignItemsViewModel.Sprint.ID, ajaxUpdateTargetID: "leftpad", ajaxOnSuccess: "refreshAll", id: "refreshLeft")   
  12. </div>   
  13.  
  14. <script type = "text/javascript"> 
  15.     }); 
  16.     function refreshLeft() { 
  17.         $("#refreshLeft").click(); 
  18.     }; 
  19. </script> 
  20. <div style = "display: no1ne"> 
  21.     @SFCUI.Link("refresh", "/Agile/PlanningMeetings/AjaxRefreshAssignItemsLeftPad?sprintID=" + assignItemsViewModel.Sprint.ID, ajaxUpdateTargetID: "leftpad", ajaxOnSuccess: "refreshAll", id: "refreshLeft") 
  22. </div> 

@SFCUI.Link会产生一个AjaxLink,如果被点击,就能完成后面<dl>内容的刷新;script中包含一个freshLeft函数,会在右边红框修改完成时被调用,完成点击动作。(我尝试了网上直接用JS而无需绕道Ajax.Link的方法,没调试通。)下面<dl>中的内容,首先被初始化在这里,然后还会出现在Ajax的返回的View中,是一段重复代码。


 
 
  1. print?<div id = "leftpad">   
  2. <dl style = "width: 300px; box-shadow: 5px 5px 20px #888; border-collapse: separate; border-radius:5px; -moz-border-radius:5px; /* Firefox 3.6 and earlier */">   
  3.     @foreach (var user in assignItemsViewModel.Team.Members.Where(i => i == assignItemsViewModel.UserAssigning).Concat(assignItemsViewModel.Team.Members.Where(i => i != assignItemsViewModel.UserAssigning)))   
  4.     {   
  5. ...一些数据初始化,省略   
  6. <dt style = "border-radius: 5px; background-color: #FFB; ">   
  7.             <a href = "#@user" styl>@SFCUI.Image(user, "/SFC/Users/Details16.png") @user    
  8.                 <t class = "right" style = "color: Black;"> 可用:@availibleWorkDaysOfUser.ToString("00.00") 人天</t>   
  9.                 <t class = "right" style = "color: @(color);"> 分配:@totalEffortAssigned.ToString("00.00")   </t>   
  10.             </a>   
  11.         </dt>   
  12.         <dd id = "@user" style = "background-color: #EEEEEE; padding-right: 5px">   
  13.             <ul class = "treeview" style = "clear: both">   
  14.             @{   
  15.             每个dd是一个手风琴框的内容,这里递归调用并产生那个树形结构,省略。   
  16.                Html.RenderPartial("~/Areas/Agile/Views/PlanningMeetings/_ItemsTreeInAssignItemsForUser.cshtml", assignItemsViewModel.ItemsTreeInSprint);   
  17.             }   
  18.             </ul>   
  19.         </dd>   
  20.     }   
  21. </dl>   
  22. </div>   

点击Link后,会执行下面的Controller中的第二段代码:


 
 
  1. print?public ActionResult AssignItems(int sprintID)   
  2. {   
  3.     var sprint = ...   
  4.     var team = ...   
  5.     var overTimes = ...   
  6.     var itemsTreeInSprint = ...   
  7.     ViewBag.AssignItemsViewModel = ...   
  8.    
  9.    
  10.     ViewBag.ViewModel = ...   
  11.     return View("~/Areas/SFC/Views/Items/ItemTree.cshtml");   
  12. }   
  13. public ActionResult AjaxRefreshAssignItemsLeftPad(int sprintID)   
  14. {   
  15.     var sprint = ...   
  16.     var team = ...   
  17.     var overTimes = ...   
  18.     var itemsTreeInSprint = ...   
  19.     ViewBag.AssignItemsViewModel = ...   
  20.    
  21.    
  22.     ViewBag.ViewModel = ...   
  23.     return View("~/Areas/Agile/Views/PlanningMeetings/AjaxRefreshAssignItemsLeftPad.cshtml");   
  24. }   

上面展示了两个函数,第一个是第一生成初始页面的函数,第二个是Ajax刷新的函数,除了返回的View‘不同,其他都一样,也是重复代码。

而如果看Ajax返回的AjaxRefreshAssignItemsLeftPad.cshtml,其内容则完全是上面的<dl>中的内容,因为他的目的就是刷新dl,因此代码也相同。

之二将提到如何删除这些代码,并且甚至让 JS消失,所有调用除了剩下的必须的controller中的代码,在cshtml 里边只剩下一行代码。


本文转自火星人陈勇 51CTO博客,原文链接:http://blog.51cto.com/cheny/1101522

相关文章
|
5月前
|
开发框架 .NET 程序员
C# 去掉字符串最后一个字符的 4 种方法
在实际业务中,我们经常会遇到在循环中拼接字符串的场景,循环结束之后拼接得到的字符串的最后一个字符往往需要去掉,看看 C# 提供了哪4种方法可以高效去掉字符串的最后一个字符
471 0
|
4月前
|
编译器 C#
C#多态概述:通过继承实现的不同对象调用相同的方法,表现出不同的行为
C#多态概述:通过继承实现的不同对象调用相同的方法,表现出不同的行为
148 65
|
3月前
|
JSON 程序员 C#
使用 C# 比较两个对象是否相等的7个方法总结
比较对象是编程中的一项基本技能,在实际业务中经常碰到,比如在ERP系统中,企业的信息非常重要,每一次更新,都需要比较记录更新前后企业的信息,直接比较通常只能告诉我们它们是否指向同一个内存地址,那我们应该怎么办呢?分享 7 个方法给你!
|
3月前
|
C# UED SEO
C# 异步方法async / await任务超时处理
通过使用 `Task.WhenAny`和 `Task.Delay`方法,您可以在C#中有效地实现异步任务的超时处理机制。这种方法允许您在指定时间内等待任务完成,并在任务超时时采取适当的措施,如抛出异常或执行备用操作。希望本文提供的详细解释和代码示例能帮助您在实际项目中更好地处理异步任务超时问题,提升应用程序的可靠性和用户体验。
121 3
|
4月前
|
存储 C#
【C#】大批量判断文件是否存在的两种方法效率对比
【C#】大批量判断文件是否存在的两种方法效率对比
76 1
|
4月前
|
C#
C#的方法的参数传递
C#的方法的参数传递
43 0
|
4月前
|
数据可视化 程序员 C#
C#中windows应用窗体程序的输入输出方法实例
C#中windows应用窗体程序的输入输出方法实例
76 0
|
3月前
|
C# 开发者
C# 一分钟浅谈:Code Contracts 与契约编程
【10月更文挑战第26天】本文介绍了 C# 中的 Code Contracts,这是一个强大的工具,用于通过契约编程增强代码的健壮性和可维护性。文章从基本概念入手,详细讲解了前置条件、后置条件和对象不变量的使用方法,并通过具体代码示例进行了说明。同时,文章还探讨了常见的问题和易错点,如忘记启用静态检查、过度依赖契约和性能影响,并提供了相应的解决建议。希望读者能通过本文更好地理解和应用 Code Contracts。
60 3
|
2月前
|
存储 安全 编译器
学懂C#编程:属性(Property)的概念定义及使用详解
通过深入理解和使用C#的属性,可以编写更清晰、简洁和高效的代码,为开发高质量的应用程序奠定基础。
113 12
|
3月前
|
设计模式 C# 图形学
Unity 游戏引擎 C# 编程:一分钟浅谈
本文介绍了在 Unity 游戏开发中使用 C# 的基础知识和常见问题。从 `MonoBehavior` 类的基础用法,到变量和属性的管理,再到空引用异常、资源管理和性能优化等常见问题的解决方法。文章还探讨了单例模式、事件系统和数据持久化等高级话题,旨在帮助开发者避免常见错误,提升游戏开发效率。
113 4