​

案例背景

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

提到的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 里边只剩下一行代码。