Tạo và sử dụng template trong ASP.NET MVC3 (Phần 2)

Phần 1: Html.Helper
Khi lập trình website, nếu có 1 nội dung nào đó được lập đi lập lại nhiều lần, bạn sẽ tạo ra 1 thành phần để tái sử dụng lại. Trong Web Forms, chúng ta có thể tạo web user control hoặc web server control, nhưng trong MVC, chúng ta phải sử dụng partial views.

Cú pháp:

public static MvcHtmlString Partial(
 this HtmlHelper htmlHelper,
 string partialViewName
)

Ví dụ:

<div>
  @Html.Partial("_FeaturedProduct")
</div>

Tham số "_FeaturedProduct" mà chúng ta truyền vào Partial View là tên trang View mà chúng ta muốn hiển thị. Trang Partial View sẽ được gọi theo đường dẫn ~/Views/<controller> hoặc trong ~/Views/Shared
Trang _FeaturedProduct:

<style type="text/css"> 
    .featuredProduct {border: solid 1px #000} 
</style> 
<div> 
    <div> 
        <h2> 
            Our Featured product:<br /> 
            @ViewBag.FeaturedProduct.Name 
        </h2> 
    </div>    <div> 
        <h3> 
            Now discounted to $@String.Format("{0:F}", ((decimal)ViewBag.FeaturedProduct.Price)-100) 
        </h3> 
    </div>   
    <div> 
        @Html.ActionLink("Featured Product Details", "Details", new { id = ViewBag.FeaturedProduct.ProductId }) 
    </div>  
    <div> 
        <img class="featuredProduct" src="@Href("~/Content/Images")/@ViewBag.FeaturedProduct.ImageName" alt="Featured Product"/> 
    </div> 
</div>

Chia sẽ dữ liệu giữa View và Partial View

Vì ParitalView là trang được nhúng vào trang View nên bạn có thể sử dụng lại được ViewBag và ViewData của trang View. Còn nếu bạn muốn truyền Model vào trang View, bạn có thể viết như sau:

@Html.Partial("_FeatureProduct", new []{ "Apple", "Orange", "Banana", "Mango"})

trong đó new []{...} là model bạn muốn truyền tới trang Partial View theo cú pháp:

public static MvcHtmlString Partial(
 this HtmlHelper htmlHelper,
 string partialViewName,
 Object model
)

Bạn có thể tải ví dụ tại đây: Mediafire. Lưu ý: Phần Html.Action còn bị lỗi.