簡單幹淨的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