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

之一，之二

案例背景

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



红色框中是/article/1432145.html提到的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 里边只剩下一行代码。