賀瑞斯機器兵: Html Helper

顯示具有 Html Helper 標籤的文章。顯示所有文章

2010年8月9日星期一

文章分類:Html Helper

2010-08-10 星期一

Html.Action、Html.Partial、Html.RenderAction與Html.RenderPartial的基本運作與介紹

在使用MVC的方式建立網站應用程式中，我們可以使用一些Html Helper來幫助我們產生精簡的字串型態HTML碼(如Form表單、項目列表或是連結)，並放置在View當中，這裡我們介紹Html.Action、Html.Partial、Html.RenderAction與Html.RenderPartial等4種Html Helper使用方式。...MORE

2010-08-10 星期一

Html.Partial與Html.RenderPartial使用方式

這兩個Html Helper屬於System.Web.Mvc.Html.PartialExtensions類別下的方法之一，使用方式都是將PartialView名稱，Model或ViewData當作參數帶入這些Html Helper，而這個當作參數帶入的PartialView名稱，通常就是我們可以先製作成為User Control View (*.ascx)，另外亦可進一步將Model或者是ViewData帶入這個預先製作好的User Control View 中。...MORE

2010-08-10 星期一

Html.Action與Html.RenderAction使用方式

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

2010-07-16 星期五

如何設定HtmlHelper.GenerateRouteLink、routeName、routeValues與HtmlAttributes

HtmlHelper是MVC中新的而且很好用的物件，我們可以用來產生很多延伸的各種Helpers，其中HtmlHelper.GenerateRouteLink()可以用來產生網頁上很單純Link的HTML碼。

如<a href="http://myWebSite/Product/Browse" >產品瀏覽</a>

而本文就是利用HtmlHelper.GenerateRouteLink來達到上述產生Link需求，也藉此說明HtmlHelper.GenerateRouteLink()的使用方式。...MORE

Html.Action與Html.RenderAction使用方式

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

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內嵌在需要的網頁上，而不用每次都重寫一次相同的處理邏輯。

上面即是Html.Action與Html.RenderAction的範例說明.與本文相關的連結如下：

Html.Action、Html.Partial、Html.RenderAction與Html.RenderPartial的基本運作與介紹
Html.Partial與Html.RenderPartial使用方式

Html.Partial與Html.RenderPartial使用方式

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

這兩個Html Helper屬於System.Web.Mvc.Html.PartialExtensions類別下的方法之一，使用方式都是將PartialView名稱，Model或ViewData當作參數帶入這些Html Helper，而這個當作參數帶入的PartialView名稱，通常就是我們可以先製作成為User Control View (*.ascx)，另外，亦可進一步將Model或者是ViewData帶入這個預先製作好的User Control View 中，這個User Control View可放入與主要View的相同目錄中，也可以放入到View/Shared/這個公用的View目錄中。

Html.Partial

這裡我們要產生一個類似「Navigation Bar(網頁導覽連結)」的功能在一個主要的View上面，我們首先在主要的View上在要顯示這個Bar的地方標示如下，表示我們要取用的內容在名稱為NavigateBarUserControl.ascx的這個User control View。請注意，因為Html.Partial的回應示字串型態的Html碼，故須加上Encode的「<%:」符號。

<%: Html.Partial("NavigateBarUserControl") %>

NavigateBarUserControl.ascx的程式內容如下：

<%@ Control Language="C#"
Inherits="System.Web.Mvc.ViewUserControl" %>
<span style="color:Green;">Home > DemoPage > Product</span>

這個範例執行後，產生的整個主要的View如下圖所示，紅框部分為我們使用Html.Partial所產生的網頁導覽連結。這樣的方式，使得相同的網頁導覽連結這個功能可以在不用重寫程式的狀況下，讓在網站的不同地方被使用。

另外，若要帶入Model(假設是NavigateViewModel)當作是參數到Html.Partial中，可採下列方式寫法：

<%: Html.Partial("NavigateBarUserControl",Model) %>

當然NavigateBarUserControl.ascx中也要註明是要去接Model(假設是NavigateViewModel) 這個參數。

<%@ Control Language="C#"
Inherits="System.Web.Mvc.ViewUserControl<Mvc2Application.Models.NavigateViewModel>" %>
<% foreach (var item in Model) {%>
:
:

已上為Html.Partial的用法。

Html.RenderPartial

這裡的範例，是想要呈現「登入使用者的角色」到主要的View網頁上，我們順道示範如何將ViewData也帶入到Html.RenderPartial之中，我們要呈現的PartialView是一個名稱為RolesUserControl.ascx的User control View，為了簡化範例我們令ViewData等於一個Admin的角色名稱。

<% Html.RenderPartial("RolesUserControl", ViewData["Role"] = "Admin"); %>

RolesUserControl.ascx的程式內容如下，ViewData的名稱須與上述帶入的ViewData參數同名：

<%@ Control Language="C#"Inherits="System.Web.Mvc.ViewUserControl" %>
<span>Role:<%:ViewData["Role"] %></span>

執行這個範例後，如下圖會在主要的View頁面上顯示這個PartialView，當然一般這個網頁導覽連結會設定在MVC應用中的Site.Master這支View之中。

上面即是Html.Partial與Html.RenderPartial的範例說明，陸續我們會介紹Html.Action與Html.RenderAction使用方式，與本文相關的連結如下：

Html.Action、Html.Partial、Html.RenderAction與Html.RenderPartial的基本運作與介紹

應用時機

我們需要在一個主要的View中之部分去呈現另外一個小小的View(以下稱為Partial View),如購物車資訊、登入者資訊、會員維護表單...等等。透過呼叫這些小小的Partial View，我們可以獲得一些HTML碼(如Form表單、項目列表或是一些連結)，在MVC中若有上述的需求，我們可以透過到這4個Html Helper來產生與完成這項需求。

運作方式

通常我們透過這些內嵌在View中的Html Helper直接回應一個PartialView，或是去執行一個Controller中的某個Action，並將執行結果(字串型態HTML碼或是產生Partial View)回傳到原來呼叫它們的主要View之上，然後內嵌在這個原來主要的View中，成為這個View的一部份。如下圖：

執行Html.Partial之後傳回字串型態HTML碼，執行Html.RenderPartial後則直接呈現Partial View，然後皆內嵌在這個主要的View中，回應給使用者。

Html.Action與Html.RenderAction皆透過執行另外一個Control與Action。執行Html.Action之後傳回字串型態HTML碼，執行Html.RenderAction後最後會直接呈現Partial View，然後內嵌在這個View中，回應給使用者。

每個Html Helper的回應的型態整理如下圖所示：

這4個Html Helper的詳細介紹與範例，將在陸續的文章中說明，與本文相關的連結如下：

Html.Action與Html.RenderAction使用方式
Html.Partial與Html.RenderPartial使用方式
透過呼叫多個動作建立 ASP.NET MVC 檢視
System.Web.Mvc.Html.PartialExtensions類別
System.Web.Mvc.Html.ChildActionExtensions類別

2010年8月3日星期二

如何在Html.TextBoxFor內設定Disable TextBox欄位

在網頁維護資料頁面中，常需有TextBox欄位是給user看，但並不准許user去修改這個欄位，這時我們就需要將這個欄位給「失效」(disable)起來，看起來應該如下圖：

在一般Web Form應用中，我們可用TextBox控制項中的Enabled = "false" 來達成這個要求，但在MVC應用中，因為不採用控制項的方式，故我們需要在Html.TextBoxFor的屬性去標示。假設現在我們有一個TextBox欄位「會員編號」，因為在會員資料維護功能中，我們並不開放這個欄位給user修改，所以須將「會員編號」這個欄位給「失效」(disable)起來，並成只能看不能改的欄位，且整來反灰顯示，我們可以在MVC的View中用下列方式設定：

<%: Html.TextBoxFor(model => model.Order.CustomerID, new { @disabled = "disabled" })%>

這個View實際運作時，如下畫面所示，可達成我們將TextBox欄位「失效」(disable)起來的效果。

2010年7月16日星期五

如何設定HtmlHelper.GenerateRouteLink、routeName、routeValues與HtmlAttribute

HtmlHelper是MVC中新的而且很好用的物件，我們可以用來產生很多延伸的各種Helpers，其中HtmlHelper.GenerateRouteLink()可以用來產生網頁上很單純Link的HTML碼。

如<a href="http://myWebSite/Product/Browse" >產品瀏覽</a>

而本文就是利用HtmlHelper.GenerateRouteLink來達到上述產生Link需求，也藉此說明HtmlHelper.GenerateRouteLink()的使用方式。

From:www.lamborghini.com

在MVC的應用中，我們常會用到需要由程式產生一個Link，而這個Link可由MVC中的Route判別該存取哪一個頁面，例如有一個「賀瑞斯汽車資訊網站」，需要在網頁上產生一個Link，可讓網友點選後，即可連結到產品名稱為Lamborghini的汽車規格資訊頁面。

網址列上我們希望如下顯示：

http://localhost/Product/Details/CarName/Lamborghini

我們當然可以直接以HTML寫成下列的Link：

但想像一下，假設「賀瑞斯汽車資訊網站」需提供好幾百種車款的詳細資訊，若都是在網頁上直接以HTML寫成好幾百條Link程式碼，這看來不是一件有效率的事，而且維護起來是一件災難。比較適當的方式，就是透過程式與資料庫互動，動態且自動產生很多這類的連結資訊。透過程式與資料庫互動的方法其中之一是我們可以用foreach迴圈方式去讀取資料中Model。CarName的方式，也可以組成很多如下Link，如下。

網址顯示 http://localhost/Product/Details/CarName/Lamborghini

網址顯示 http://localhost/Product/Details/CarName/Porsche

另外也可以利用本文所提的HtmlHelper.GenerateRouteLink()的方式，達到上述產生Link需求，尤其是要寫MVC中各種Helpers.GenerateRouteLink()這個方法更是重要。

下面簡單說明GenerateRouteLink所需帶入的各參數與涵義，並舉例說明實際用法讓大家瞭解。

GenerateRouteLink方法

GenerateRouteLink(RequestContext requestContext,
    RouteCollection routeCollection,
    string linkText,
    string routeName,
    RouteValueDictionary routeValues,
    IDictionary(String, Object) htmlAttributes)

下面為GenerateRouteLink需帶入的參數說明，這些來自微軟MSDN文件，不過很可惜，沒有實際範例可供參考，這也是本文想要補足之處。

requestContext
    型別：System.Web.Routing..::..RequestContext
    HTTP 要求的內容。

routeCollection
    型別：System.Web.Routing..::..RouteCollection
    URL 路由的集合。

linkText
    型別：System..::..String
    要顯示的連結文字標題。

routeName
    型別：System..::..String
    用來傳回虛擬路徑之路由的名稱。

routeValues
    型別：System.Web.Routing..::..RouteValueDictionary
    包含路徑參數的物件。

htmlAttributes
    型別：System.Collections.Generic..::..IDictionary<(Of <(<'String， Object>)>)>
    物件，包含項目的 HTML 屬性。

傳回值
型別：System..::..String
HTML 項目，連結至指定的 URL 路由。

重點來了，再提一下，我們是要建立一個HtmlHelpers中的GenerateRouteLink()。如何建立一個HtmlHelpers就暫時不在這裡討論了，大家可到微軟:建立Custom HTML Helpers參考一下基本建立方式。建立HtmlHelpers內的GenerateRouteLink()來自動產生如下這樣的Link，這才是本文所要說明的地方。

http://localhost/Product/Details/CarName/Lamborghini

而每一個參數，我們可實際以下列方式帶入：

requestContext參數：就是指HTTP要求的內容，我們可帶入「helper.ViewContext.RequestContext」。

routeCollection參數：就是指Route的集合，我們可帶入「helper.RouteCollection」，因為這部份是提供給Route使用，故直接帶入這些值即可。

linkText參數：就是Link要出現的文字，在我們「賀瑞斯汽車資訊網站」的例子中，我們要顯示「Lamborghini(藍寶堅尼)汽車規格資訊」這個字串。

string myLinkName= "Lamborghini(藍寶堅尼)汽車規格資訊";

routeName參數：就是我們「必須」寫在Global.asax中，讓網站系統的Route「識別的名稱」，說穿了就是一個字串型態的文字，我們設定如下：

string myRouteName = "CarProducts";

有了這個「識別的名稱」，這樣她(Route)才知道要去使用Global.asax內那組「Route的規則」來處理這條Link要指到哪一個Controller與Action，而在Global.asax內，我們也需加上這組「Route的規則」，讓整串Link產生後，網友在網頁上點選才能真正去執行。這組規則如下。

routes.MapRoute(
    "CarProducts"， // Route name
    "Product/Details/CarName/{car_name_id}"， // URL with parameters
    new { controller = "Product", action = "Details" } // Parameter defaults
);

routeValues參數:routeValues資料型態是一個<Key,Value>的組合，這個也會在Global.asax中被使用到，就是上述Global.asax中參數car_name_id(就是指Key)與屆時需帶入的資料(就是指Value)，以我們「賀瑞斯汽車資訊網站」為例，我們可先直接帶入<"CarName","Lamborghini">這樣的組合。

RouteValueDictionary myRouteValues = new RouteValueDictionary();
myRouteValues.Add("car_name_id"，("Lamborghini"));

若是CarName後要帶數值型態的編號:38，也可用下列方式：

myRouteValues.Add("car_name_id",(38));

但是一般我們會自資料庫抓了汽車名稱或編號資料，放入陣列中，讓程式自動產生routeValues中所需的value，如下：

myRouteValues.Add("car_name_id",carNameIDAry[i]);

htmlAttributes參數：就是我們舉例的「http://localhost/Product/Details/CarName/Lamborghini」這個Link要配合名為「car-link-style」的這個cssClass，如下寫法：

IDictionary<string, object> myHtmlAtts= new Dictionary<string, object>();
myHtmlAtts.Add("class", "car-link-style");

或是myHtmlAtts後面直接加上style的各種屬性設定如下寫法：

myHtmlAtts.Add("style", "color:Gray;font-family:Georgia;font-size:20px");

上面已經設定完GenerateRouteLink()所需帶入的各種參數，本範例完整方法與參數呼叫如下，她會回應成一個網頁上的Link字串供網友點選，就是一直在提的「http://localhost/Product/Details/CarName/Lamborghini」。

public static string ShowDetailCar(this HtmlHelper helper)
{
        :
        :
    return HtmlHelper.GenerateRouteLink(helper.ViewContext.RequestContext,
        helper.RouteCollection,
        helper.Encode(myLinkName),
        helper.Encode(myRouteName),
        myRouteValues,
        myHtmlAtts);
}

而上面這個Link產生後，它會對應到Product這個Controller的Details這個Action，在這個Action中，我們可簡單寫成直接給予一個Car的資料，當然Car這個類別須在Models中建立。在正式的網站中，通常Car的資料是從資料庫撈出來的，然後轉成List<Car>的資料.這裡只是示範一筆資料來顯示。注意帶入Details這個Action的參數，名稱要和上述routeValues<Key,Value>參數內的Key值相符合(這裡就是都要名稱為car_name_id)，也要和Global.asax內那組我們用到的「識別的名稱」內的參數相同名稱。

public class ProductController : Controller
{
    public ActionResult Details(string car_name_id)
    {
        Car carToDetails = new Car
        {
            CarName = "Lamborghini Gallardo",
            Year = "2004",
            Country = "義大利",
            Exhaust = "4961 cc",
            Speed = "309 km/h"
        };
        return View(carToDetails);
    }
}

實際執行後，自動產生的Link如下第一個圖，點選該Link後，就顯示該車的詳細資料，如下圖二。我們可以看一下圖中網址列的Link，就會直接指到我們本範例中所想建立的「http://localhost/Product/Details/CarName/Lamborghini」這樣型態的連結。

小結

網址上顯示「http://localhost/Product/Details/CarName/Lamborghini」這樣的名稱，看來比顯示「http://localhost/Product/Details.aspx?CarName=Lamborghini」還要來得直覺與簡便，這部份也可利用在顯示分頁資料的分頁頁碼字串中，如下：

直覺與相互獨立，這就是ASP.NET MVC2的魅力所在!!

訂閱：文章 (Atom)

2010年8月9日 星期一