Chủ nhật, ngày 4 tháng 12 năm 2016

Tạo Custom Html Helper (Razor) - MVC 3

Ngày đăng: 27/9/2012, 10:37:9PM | Lượt xem: 2,209
Hot!
tag ,

 HtmlHelper là một lớp hỗ trợ việc tạo các thành phần (thẻ) html với Razor Engine. Mặc dù lớp này cung cấp rất nhiều các thành phần nhưng vẫn chưa đáp ứng được yêu cầu cụ thể cho từng dự án. Khi đó, bạn có thể tạo ra thêm các phương thức Html Helper mới để sử dụng nhờ vào kĩ thuật Extension Method.

 Trong bài viết này, tôi sẽ tạo một ví dụ cho phép thêm vào một thẻ <details> (một thẻ mới của Html5) thông qua cú pháp:

 
@Html.Details(summary, content, open)
 
- summary: chuỗi tiêu đề
- content: phần nội dung sẽ ẩn/hiện khi bạn click vào tiêu đề
- open: tham số boolean xác định phần content sẽ được ẩn/hiện theo mặc định (khi mới tải trang).
 
Minh họa:
Bản chất của phương pháp này là tạo ra chuỗi Html trong một extension method và trả về dưới dạng một IHtmlString. Loại helper này là “code based” do được viết hoàn toàn bằng  C# (hoặc VB) để tạo ra nội dung Html cần thiết.
 
Để thực hiện, bạn tạo một dự án ASP.NET MVC mới và thêm một lớp dùng để chứa các extension sẽ được tạo ra. Sau đó, thêm vào phương thức Details sau. Tôi dùng StringBuilder để tối ưu các thao tác cộng chuỗi.
using System;
using System.Web;
using System.Web.Mvc;
using System.Text;

namespace MyHtmlHelpers
{
    public static class Helpers
    {
        public static IHtmlString Details(this HtmlHelper helper,
            string summary,
            string content,
            bool open = false)
        {
            StringBuilder str = new StringBuilder("<details " + (open ? "open" : String.Empty) + ">");
            str.Append("<summary>").Append(summary).AppendLine("</summary>");
            str.AppendLine(content);
            str.AppendLine("</details>");
            return new MvcHtmlString(str.ToString());
            // or
            // return helper.Raw(str.ToString());
        }
    }
} 
Tiếp tục, bạn cần thêm namespace MyHtmlHelpers vào tập tin Views/Web.config để có thể sử dụng được các lớp trong namespace này trong view.
...
<pages pageBaseType="System.Web.Mvc.WebViewPage">
  <namespaces>
    <add namespace="System.Web.Mvc" />
    <add namespace="System.Web.Mvc.Ajax" />
    <add namespace="System.Web.Mvc.Html" />
    <add namespace="System.Web.Routing" />
    <add namespace="MyHtmlHelpers"/>
  </namespaces>
</pages>
... 
Trong tập tin view bất kì (có đuôi .cshtml với ngôn ngữ C#), bạn có thể sử dụng Html Helper vừa tạo như sau:
@Html.Details("Love and Friendship", @"Love is like the wild rose-briar,<br/>
Friendship like the holly-tree<br/>
The holly is dark when the rose-briar blooms<br/>
But which will bloom most constantly?")
Nó sẽ tạo ra đoạn html sau khi hiển thị trên trình duyệt:
<details>
	<summary>Love and Friendship</summary>
	Love is like the wild rose-briar,<br>
	Friendship like the holly-tree<br>
	The holly is dark when the rose-briar blooms<br>
	But which will bloom most constantly?
</details>
 
Theo YinYangIt’s Blog
 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.