賀瑞斯機器兵: Html.Action與Html.RenderAction使用方式

2010年8月9日星期一

Html.Action與Html.RenderAction使用方式

在MVC應用中，我們可以使用一些Html Helper來幫助我們建立一些小小可重複使用的Partial View(如Form表單、項目列表或是連結)，執行後可內嵌在主要的View之中，本文介紹Html.Action與Html.RenderAction的基本運作與使用方式。

這兩個Html Helper屬於System.Web.Mvc.Html.ChildActionExtensions類別下的方法之一，使用方式都是將Action名稱，Controller名稱或route value當作參數帶入這些Html Helper，執行完Action後，通常會再將其執行後的結果傳遞到某個預先製作好的user control view (*.ascx)，然後在主要的View上顯示這段字串型態HTML碼。這個user control view如同上述，可放入與主要View的相同目錄中，也可以放入到View/Shared/這個公用的View目錄中。

Html.Action

這裡我們要產生一個「Menu」在一個主要的View上面，我們在主要的View上要顯示這個Menu的地方標示如下，執行時，會先讀取MenuController內的ShowMenu這個Action。請注意，因為Html.Action的回應示字串型態的Html碼，故須加上Encode的「<%:」符號。

<%: Html.Action("ShowMenu", "Menu") %>

接著，透過ShowMenu這個Action將menu的相關資料取出，然後將這些結果拋給MainMenuUserControl.ascx這個user controle view。

[ChildActionOnly]
public ActionResult ShowMenu()
{
var menuToList = GetMyMenu();
return PartialView("MainMenuUserControl", menuToList);
}

MainMenuUserControl.ascx這個user control view接到Menu資料後，產生字串型態menu HTML碼，並回應給主要的View。

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Mvc2ActionAndRenderAction.Models.MenuViewModel>" %>
<ul id="menu">
<% foreach (var item in Model.Menu) {%>
<li><a href="<%: item.MenuLink %>"><%: item.MenuItem %></a></li>
<%} %>
</ul>

這個範例最後，我們可在下圖看到執行後，可產生如紅框的Menu清單，這裡我們顯示以頁籤方式呈現的menu。

Html.RenderAction

這裡我們要產生一個「購物車+已經挑選多少產品」的連結這個範例在主要的View上，我們在主要的View上標示如下：

<% Html.RenderAction("CartAmount", "ShoppingCart"); %>

執行時，會先讀取ShoppingCartController內的CartAmount這個Action，這裡我們示範將ViewData當作是執行結果拋給CartAmountUserControl.ascx這個user control view。

[ChildActionOnly]
public ActionResult CartAmount()
{
ViewData["CartCount"] = "8";
return PartialView("CartAmountUserControl");
}

由CartAmountUserControl.ascx這個user control view回應給主要的View

<%@ Control Language="C#"Inherits="System.Web.Mvc.ViewUserControl" %>
<%: Html.ActionLink( "購物車 (" + ViewData["CartCount"] + ")", "Cart", "ShoppingCart",null)%>

最後回應到主要的View呈現如下紅框的「購物車+已經挑選多少產品」。這樣也可以將這個Html Helper內嵌在需要的網頁上，而不用每次都重寫一次相同的處理邏輯。