一步步學習ASP.NET MVC3 (6)——@helper，@functions

  請注明轉載地址：http://www.cnblogs.com/arhat

在前一章中，我們講述了View如何從Action中獲得數據，並顯示出來，但隨着需求的變化，我們可能要對View中顯示的數據作出一些簡單的改變，那么如果放到ASP.NET中，我們都知道，只需要在aspx.cs中寫一個共有的方法，然后則頁面通過<%%>來調用，但是在ASP.NET MVC中是不能這樣干的，那么如何解決這樣的問題呢？本章就這個問題學習兩個新的Razor語法@helper和@functions。
在上一章的最后，我們展示了4條記錄，但是這個4條記錄都是用div來顯示，今天我們該寫一下，使用表格來展示數據，更改內容如下：

@using  Com.ArHat.Web.Models;

@{int i =1;}

<table border="1px" cellpadding="2px" cellspacing="0px" width="500px" style="border-collapse:collapse">

<tr>

<th width="20px">ID</th>

<th>和尚</th>

<th width="50px">年齡</th>

<th width="100px">操作</th>

</tr>

@foreach (M_Person person in ViewBag.Data)

    { 

<tr>

<td align="center">@(i++)</td>

<td align="center">@person.Name</td>

<td align="center">@person.Age</td>

<td align="center">刪除||編輯</td>

</tr>

    }

</table>

那么現在我們有一個需求，要求如果年齡大於90，則要顯示為黃色，其他的不便，那么該怎么辦呢？我們可以采用這樣的方法：

<td align="center">

@{if (person.Age > 90)

                                  {

<font color="red">@person.Age</font>

                                  }

else

                                  { 

@person.Age

                                  }

}

</td>

預覽一下就可以看到預想的效果了：

但是，如果這樣寫的話，首先是代碼看起來不爭氣，二是不能重復利用，這就違反了面向對象的原則，那么可不可以把這種功能給封裝起來呢？有的，下面我們先看一下Razor提供給我們的@helper語法。

@helper語法，允許我們能夠輕松創建可重用的幫助器方法。他們使代碼能更好地重用，也使代碼更具有可讀性。好了，我們更改一下代碼：

@using  Com.ArHat.Web.Models;

@{int i = 1;}

@helper ChangeColor(int age)

{

if(age>90)

    {

<font color="red">@age</font>

    }else

    {

@age

    }    

}

<table border="1px" cellpadding="2px" cellspacing="0px" width="500px" style="border-collapse:collapse">

<tr>

<th width="20px">ID</th>

<th>和尚</th>

<th width="50px">年齡</th>

<th width="100px">操作</th>

</tr>

@foreach (M_Person person in ViewBag.Data)

    { 

<tr>

<td align="center">@(i++)</td>

<td align="center">@person.Name</td>

<td align="center">@ChangeColor(person.Age)</td>

<td align="center">刪除||編輯</td>

</tr>

    }

</table>

下面我們來分析一下@heler語法：

@helper ChangeColor(int age)

{

if(age>90)

    {

<font color="red">@age</font>

    }else

    {

@age

    }    

}

@helper后面的ChagenColor是函數名，其實和定義函數沒什么區別，就是不能猛有返回值，而函數中只是輸出語句“<font color="red">@age</font>”和”@age”。但是，如果我們每個View中都寫這個函數的話，是不是沒有代碼重用呢?所以Razor可以用一個文件專門的存放這樣的函數。我們在項目創建一個App_Code文件夾，在這個文件夾中創建一個布局頁：

我們給這個文件七個名字為”UIHelper”。然后把上面的@helper代碼復制到這個文件中。

UIHelper.cshtml代碼：

@helper ChangeColor(int age)

{

if(age>90)

    {

<font color="red">@age</font>

    }else

    {

@age

    }    

}

然后我們在所有的view中都可以使用這個函數了，我們更改一下Index.cshtml文件。

@using  Com.ArHat.Web.Models;

@{int i = 1;}

<table border="1px" cellpadding="2px" cellspacing="0px" width="500px" style="border-collapse:collapse">

<tr>

<th width="20px">ID</th>

<th>和尚</th>

<th width="50px">年齡</th>

<th width="100px">操作</th>

</tr>

@foreach (M_Person person in ViewBag.Data)

    { 

<tr>

<td align="center">@(i++)</td>

<td align="center">@person.Name</td>

<td align="center">@UIHelper.ChangeColor(person.Age)</td>

<td align="center">刪除||編輯</td>

</tr>

    }

</table>

我們會發現，在View中使用這個方法的時候需要加上@UIHelper前綴。可以認為@UIHelper就是一個類，而ChangeColor是個這個類中的一個靜態方法。

當然了，我們知道了@helper定義的方法只能是輸出不能有返回值，那么有沒有一種功能可以類似函數呢?答案就是@functions。好我們繼續更改一下Index.cshtml文件。

@using  Com.ArHat.Web.Models;

@{int i = 1;}

@functions{

public IHtmlString ChangeColor(int age)

    {

if(age>90)

        {

return new HtmlString("<font color='red'>"+age+"</font>");

        }else

        {

return new HtmlString(age + "");

        }

    }

}

<table border="1px" cellpadding="2px" cellspacing="0px" width="500px" style="border-collapse:collapse">

<tr>

<th width="20px">ID</th>

<th>和尚</th>

<th width="50px">年齡</th>

<th width="100px">操作</th>

</tr>

@foreach (M_Person person in ViewBag.Data)

    { 

<tr>

<td align="center">@(i++)</td>

<td align="center">@person.Name</td>

<td align="center">@ChangeColor(person.Age)</td>

<td align="center">刪除||編輯</td>

</tr>

    }

</table>

我們會發現，我們在Index.cshtml中定義了一個@funtions代碼塊，在代碼塊中可以定義方法，就和普通的類一樣。但是注意的地方時函數的返回值，在@functions中定義的方法，一般的返回值類型都是IHtmlString類型這個類型可以認為是String類型的一個變種，但依然是String.所以我們在返回值的時候使用了IHtmlString的一個實現類HtmlString。

當然，我們和@helper一樣，也可以吧@functions放到一個文件中，方便代碼的重復利用。同樣，我們在App_Code文件中創建一個布局文件，名字為”UIFunctions”。

代碼如下：

@functions{

public static IHtmlString ChangeColor(int age)

    {

if(age>90)

        {

return new HtmlString("<font color='red'>"+age+"</font>");

        }else

        {

return new HtmlString(age + "");

        }

    }

}

但是要注意的地方時，如果把@functions移動到單獨的文件中，起方法必須是static類型的。其實猜猜就應該知道，這個是一個擴展方法。
在View中，我們可以通過@UIFunctions來調用這個函數，而@UIFunctions可以認為是一個類名。

@using  Com.ArHat.Web.Models;

@{int i = 1;}

<table border="1px" cellpadding="2px" cellspacing="0px" width="500px" style="border-collapse:collapse">

<tr>

<th width="20px">ID</th>

<th>和尚</th>

<th width="50px">年齡</th>

<th width="100px">操作</th>

</tr>

@foreach (M_Person person in ViewBag.Data)

    { 

<tr>

<td align="center">@(i++)</td>

<td align="center">@person.Name</td>

<td align="center">@UIFunctions.ChangeColor(person.Age)</td>

<td align="center">刪除||編輯</td>

</tr>

    }

</table>

好了，通過這個練習，我們知道了@helper和@funtions的用法，至於用哪個都無所謂的。到本章，基本的Razor語法已經結束了，如果后續章節中我們用到其他的語法另說把！所謂不可能面面俱到啊！
告訴大家一個不好的消息，老魏在寫篇文章的時候，不小心把手指頭弄傷了，很是疼啊！