简单干净的C#方法设计案例:SFCUI.AjaxLoadPage()之一
之一,之二
案例背景
本文将介绍如何通过一行代码实现下图中的功能。
红色框中是http://blog.csdn.net/cheny_com/article/details/7234619提到的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填充到蓝框中。
传统实现的代码
因为这些代码有些都已经删除了,所以简单复原一下,说明一下思路。
整个初始页面的代码:
下面这堆在dl之前的大约10行代码,是那个所谓的刷新函数。 <script type = "text/javascript"> }); function refreshLeft() { $("#refreshLeft").click(); }; </script> <div style = "display: no1ne"> @SFCUI.Link("refresh", "/Agile/PlanningMeetings/AjaxRefreshAssignItemsLeftPad?sprintID=" + assignItemsViewModel.Sprint.ID, ajaxUpdateTargetID: "leftpad", ajaxOnSuccess: "refreshAll", id: "refreshLeft") </div>
@SFCUI.Link会产生一个AjaxLink,如果被点击,就能完成后面<dl>内容的刷新;script中包含一个freshLeft函数,会在右边红框修改完成时被调用,完成点击动作。(我尝试了网上直接用JS而无需绕道Ajax.Link的方法,没调试通。)下面<dl>中的内容,首先被初始化在这里,然后还会出现在Ajax的返回的View中,是一段重复代码。
<div id = "leftpad"> <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 */"> @foreach (var user in assignItemsViewModel.Team.Members.Where(i => i == assignItemsViewModel.UserAssigning).Concat(assignItemsViewModel.Team.Members.Where(i => i != assignItemsViewModel.UserAssigning))) { ...一些数据初始化,省略 <dt style = "border-radius: 5px; background-color: #FFB; "> <a href = "#@user" styl>@SFCUI.Image(user, "/SFC/Users/Details16.png") @user <t class = "right" style = "color: Black;"> 可用:@availibleWorkDaysOfUser.ToString("00.00") 人天</t> <t class = "right" style = "color: @(color);"> 分配:@totalEffortAssigned.ToString("00.00") </t> </a> </dt> <dd id = "@user" style = "background-color: #EEEEEE; padding-right: 5px"> <ul class = "treeview" style = "clear: both"> @{ 每个dd是一个手风琴框的内容,这里递归调用并产生那个树形结构,省略。 Html.RenderPartial("~/Areas/Agile/Views/PlanningMeetings/_ItemsTreeInAssignItemsForUser.cshtml", assignItemsViewModel.ItemsTreeInSprint); } </ul> </dd> } </dl> </div>
点击Link后,会执行下面的Controller中的第二段代码:
public ActionResult AssignItems(int sprintID) { var sprint = ... var team = ... var overTimes = ... var itemsTreeInSprint = ... ViewBag.AssignItemsViewModel = ... ViewBag.ViewModel = ... return View("~/Areas/SFC/Views/Items/ItemTree.cshtml"); } public ActionResult AjaxRefreshAssignItemsLeftPad(int sprintID) { var sprint = ... var team = ... var overTimes = ... var itemsTreeInSprint = ... ViewBag.AssignItemsViewModel = ... ViewBag.ViewModel = ... return View("~/Areas/Agile/Views/PlanningMeetings/AjaxRefreshAssignItemsLeftPad.cshtml"); }
上面展示了两个函数,第一个是第一生成初始页面的函数,第二个是Ajax刷新的函数,除了返回的View‘不同,其他都一样,也是重复代码。
而如果看Ajax返回的AjaxRefreshAssignItemsLeftPad.cshtml,其内容则完全是上面的<dl>中的内容,因为他的目的就是刷新dl,因此代码也相同。
之二将提到如何删除这些代码,并且甚至让 JS消失,所有调用除了剩下的必须的controller中的代码,在cshtml 里边只剩下一行代码。
转载于:https://www.cnblogs.com/JPAORM/archive/2012/02/20/2510359.html
简单干净的C#方法设计案例:SFCUI.AjaxLoadPage()之一相关推荐
- 简单干净的C#方法设计案例:SFCUI.AjaxLoadPage()之二
合并显而易见的代码 所谓显而易见的代码,就是看上去和别处相同的代码. 在这个例子中,就是View'中初始页面显示的内容与未来刷新的内容重复:Controller中初始显示的运算和刷新的相同. Cont ...
- 简单干净的C#方法设计案例:SFCUI.AjaxValue()之三
之一,之二,之三 之前讲到,方法声明为: @SFCUI.AjaxValue(story.ID, effortValue.ToString(), Effort.EffortPlannedValues, ...
- 简单干净的C#方法设计案例:SFCUI.AjaxValue()之二
之一,之二,之三 先重温一下原则: 最小信息原则:方法接口应只传递最必须的业务信息. 包括两个层面: 1. 技术信息不要暴露 2. 业务信息不能重复 业务信息分析 先别管技术问题,想一想做这个事情需要 ...
- 简单干净的C#方法设计案例:SFCUI.AjaxValue()之一
之一,之二,之三 有很多时候,需要我们在代码中执行很多重复的工作,这时候要涉及到如何使用可复用的方法来解决重复性问题. 比如一个项目管理系统,要求在不同的页面的不同位置都能调整任务的估算工作量,而且要 ...
- 弹性方法计算内力例题_长江大学土木工程专业2008年钢筋混凝土楼盖课程设计案例...
长江大学土木工程专业2008年钢筋混凝土楼盖课程设计案例 钢筋混凝土楼盖课 程 设 计 指 导 书长江大学2008 年 8 月目 录第 1 节 设计任务书一.设计任务二.设计内容三.设计条件四.进度安 ...
- DDD系列 实战一 应用设计案例 (golang)
DDD系列 实战一 应用设计案例 (golang) 基于 ddd 的设计思想, 核心领域需要由纯内存对象+基础设施的抽象的接口组成 独立于外部框架: 比如 web 框架可以是 gin, 也可以是 be ...
- 易于使用的人工智能_需求分析:如何使用这种易于启动的方法+一个案例研究...
易于使用的人工智能 by Turgay Çelik 由TurgayÇelik 需求分析:如何使用这种易于启动的方法+一个案例研究 (Requirement Analysis: how to use t ...
- 怎么把线稿提取出来_PS教程:提取线稿如此简单?三种方法总有一种适合你
原标题:PS教程:提取线稿如此简单?三种方法总有一种适合你 部落窝教育,每天学习PS独家原创视频 在PS出现之前,如果我们喜欢某个动漫角色大概只能通过临摹的方式将人物线条勾勒出来,但PS的出现将提取线 ...
- 数据挖掘:实用案例分析 下载_萌低龄,超实用“萌系”呈现技巧及设计案例分析...
关于讲师:钟文博 ,腾讯互动娱乐创意设计部高级设计师,擅长萌系产品的设计表达. 导语:不同的美术风格有着不同的受众偏好,游戏美术的风格对受众的吸引力和游戏玩法本身同样重要.在当下社会,萌系风格文化对社 ...
最新文章
- 【C++ 语言】Visual Studio 配置 POSIX 线程 ( Windows 不支持 POSIX | 配置文件下载 | 库文件说明 | 配置过程 )
- java-模拟存放String类型数据的栈
- 从谷歌的招聘中,我们学到了什么?
- springboot连接容器内mysql_docker部署springboot项目,连接mysql容器
- Servlet_快速入门
- python执行js文件
- 岛国人气美少女竟然每晚跟 3 个人通宵打麻将?
- java调用el_[Java教程][javaEE] EL表达式调用java方法
- centos7部署gitlab遇到的坑
- 运行出现Server Tomcat v8.5 Server at localhost failed to start.和A child container failed during start...
- 【转】NodeJs使用Mysql模块实现事务处理
- MySQL自动生成Oracle建表语句脚本
- 【转】“中国网游死亡档案”出炉:网游淘汰率达1比1
- Python+OpenCv实现摄像头人脸识别
- 210 Ruby 方法、类和模块【Rails后端开发训练营】
- 戴尔启动修复无法自动修复此计算机,在 Dell 计算机上运行 Windows 启动修复
- 超级鹰解决点触验证码
- Zotero文献管理工具使用指南
- 测试-嵌入式图床外链
- Linux_FastDFS分布式文件系统——搭建