案例背景
本文将介绍如何通过一行代码实现下图中的功能。
红色框中是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填充到蓝框中。
传统实现的代码
因为这些代码有些都已经删除了，所以简单复原一下，说明一下思路。
整个初始页面的代码：
- print?下面这堆在dl之前的大约10行代码，是那个所谓的刷新函数。
- 下面这堆在dl之前的大约10行代码，是那个所谓的刷新函数。
- [html] view plaincopyprint?<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>
- <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中，是一段重复代码。
- print?<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中的第二段代码：
- print?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 里边只剩下一行代码。
本文转自火星人陈勇 51CTO博客，原文链接:http://blog.51cto.com/cheny/1101522
