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

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

<a href="http://blog.51cto.com/attachment/201212/223516928.gif" target="_blank"></a>

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

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

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在页面初始化后、人员没有调整时时，里边也已经放了基本相似的内容，因此会造成重复代码，下面会提到，也会提到如何消除。

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

整个初始页面的代码：

print?下面这堆在dl之前的大约10行代码，是那个所谓的刷新函数。   

下面这堆在dl之前的大约10行代码，是那个所谓的刷新函数。 

[html] view plaincopyprint?&lt;script type = "text/javascript"&gt;   

    });   

    function refreshLeft() {   

        $("#refreshLeft").click();   

    };   

&lt;/script&gt;   

&lt;div style = "display: no1ne"&gt;   

    @SFCUI.Link("refresh", "/Agile/PlanningMeetings/AjaxRefreshAssignItemsLeftPad?sprintID=" + assignItemsViewModel.Sprint.ID, ajaxUpdateTargetID: "leftpad", ajaxOnSuccess: "refreshAll", id: "refreshLeft")   

&lt;/div&gt;   

&lt;script type = "text/javascript"&gt; 

    }); 

    function refreshLeft() { 

        $("#refreshLeft").click(); 

    }; 

&lt;/script&gt; 

&lt;div style = "display: no1ne"&gt; 

    @SFCUI.Link("refresh", "/Agile/PlanningMeetings/AjaxRefreshAssignItemsLeftPad?sprintID=" + assignItemsViewModel.Sprint.ID, ajaxUpdateTargetID: "leftpad", ajaxOnSuccess: "refreshAll", id: "refreshLeft") 

&lt;/div&gt; 

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

print?&lt;div id = "leftpad"&gt;   

&lt;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 */"&gt;   

    @foreach (var user in assignItemsViewModel.Team.Members.Where(i =&gt; i == assignItemsViewModel.UserAssigning).Concat(assignItemsViewModel.Team.Members.Where(i =&gt; i != assignItemsViewModel.UserAssigning)))   

    {   

...一些数据初始化，省略   

&lt;dt style = "border-radius: 5px; background-color: #FFB; "&gt;   

            &lt;a href = "#@user" styl&gt;@SFCUI.Image(user, "/SFC/Users/Details16.png") @user    

                &lt;t class = "right" style = "color: Black;"&gt; 可用：@availibleWorkDaysOfUser.ToString("00.00") 人天&lt;/t&gt;   

                &lt;t class = "right" style = "color: @(color);"&gt; 分配：@totalEffortAssigned.ToString("00.00")   &lt;/t&gt;   

            &lt;/a&gt;   

        &lt;/dt&gt;   

        &lt;dd id = "@user" style = "background-color: #EEEEEE; padding-right: 5px"&gt;   

            &lt;ul class = "treeview" style = "clear: both"&gt;   

            @{   

            每个dd是一个手风琴框的内容，这里递归调用并产生那个树形结构，省略。   

               Html.RenderPartial("~/Areas/Agile/Views/PlanningMeetings/_ItemsTreeInAssignItemsForUser.cshtml", assignItemsViewModel.ItemsTreeInSprint);   

            }   

            &lt;/ul&gt;   

        &lt;/dd&gt;   

    }   

&lt;/dl&gt;   

点击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)   

    return View("~/Areas/Agile/Views/PlanningMeetings/AjaxRefreshAssignItemsLeftPad.cshtml");   

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

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

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

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