Khoanglang89
Bạn hãy đăng nhập hoặc đăng ký
Khoanglang89

NHẬN THIẾT KẾ WEBSITE/ SOFTWARE - LÀM ĐỒ ÁN TỐT NGHIỆP, ĐỒ ÁN CHUYÊN MÔN NGÀNH CÔNG NGHỆ THÔNG TIN


You are not connected. Please login or register

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

Admin

avatar

Admin
Admin
Loading
ASP.NET MVC 3 – Tạo Custom Html Helper (Razor)

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ẻ
(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:

(a poem by Emily Bronte)
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Code:
using

Code:
System;
Code:
using

Code:
System.Web;
Code:
using

Code:
System.Web.Mvc;
Code:
using

Code:
System.Text;
 
Code:
namespace

Code:
MyHtmlHelpers
Code:
{
    
Code:
public

Code:
static

Code:
class

Code:
Helpers
    
Code:
{
        
Code:
public

Code:
static

Code:
IHtmlString Details(
Code:
this

Code:
HtmlHelper helper,
            
Code:
string

Code:
summary,
            
Code:
string

Code:
content,
            
Code:
bool

Code:
open =
Code:
false
Code:
)
        
Code:
{
            
Code:
StringBuilder str =
Code:
new

Code:
StringBuilder(
Code:
"<details "

Code:
+ (open ?
Code:
"open"

Code:
: String.Empty) +
Code:
">"
Code:
);
            
Code:
str.Append(
Code:
"<summary>"
Code:
).Append(summary).AppendLine(
Code:
"</summary>"
Code:
);
            
Code:
str.AppendLine(content);
            
Code:
str.AppendLine(
Code:
"</details>"
Code:
);
            
Code:
return

Code:
new

Code:
MvcHtmlString(str.ToString());
            
Code:
// or
            
Code:
// return helper.Raw(str.ToString());
        
Code:
}
    
Code:
}
Code:
}
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.
1
2
3
4
5
6
7
8
9
10
11
Code:
...
Code:
<
Code:
pages

Code:
pageBaseType
Code:
=
Code:
"System.Web.Mvc.WebViewPage"
Code:
>
  
Code:
<
Code:
namespaces
Code:
>
    
Code:
<
Code:
add

Code:
namespace
Code:
=
Code:
"System.Web.Mvc"

Code:
/>
    
Code:
<
Code:
add

Code:
namespace
Code:
=
Code:
"System.Web.Mvc.Ajax"

Code:
/>
    
Code:
<
Code:
add

Code:
namespace
Code:
=
Code:
"System.Web.Mvc.Html"

Code:
/>
    
Code:
<
Code:
add

Code:
namespace
Code:
=
Code:
"System.Web.Routing"

Code:
/>
    
Code:
<
Code:
add

Code:
namespace
Code:
=
Code:
"MyHtmlHelpers"
Code:
/>
  
Code:
</
Code:
namespaces
Code:
>
Code:
</
Code:
pages
Code:
>
Code:
...
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:
1
2
3
4
Code:
@Html.Details("Love and Friendship", @"Love is like the wild rose-briar,<
Code:
br
Code:
/>
Code:
Friendship like the holly-tree<
Code:
br
Code:
/>
Code:
The holly is dark when the rose-briar blooms<
Code:
br
Code:
/>
Code:
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:
1
2
3
4
5
6
7
Code:
<
Code:
details
Code:
>
    
Code:
<
Code:
summary
Code:
>Love and Friendship</
Code:
summary
Code:
>
    
Code:
Love is like the wild rose-briar,<
Code:
br
Code:
>
    
Code:
Friendship like the holly-tree<
Code:
br
Code:
>
    
Code:
The holly is dark when the rose-briar blooms<
Code:
br
Code:
>
    
Code:
But which will bloom most constantly?
Code:
</
Code:
details
Code:
>
YinYangIt’s Blog


_________________
Có nỗi buồn triền miên, làm trái tim hoá đá
Có những dòng lệ nhỏ, khiến đá hoá thành tim.

-------------------------------------------------------------------------------------------------------
Program Skills:  ASP.Net MVC 3/4; C#; VB.Net/ VB 6.0; Java Applet/Swing; JS/JavaScript; Bootstrap/ AngularJS; HTML/CSS; Turbo C/ Turbo C++; Pascal...
Xem mẫu Phần mêm quản lý ở đây     -           Xem mẫu Bán hàng trực tuyến ở đây
Nguyễn Ích Hoàn
new_life02081989@yahoo.com
nguyenichhoan1989@gmail.com
Xem lý lịch thành viên http://khoanglang89.forumvi.com

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Bài viết mới cùng chuyên mục

      Permissions in this forum:
      Bạn không có quyền trả lời bài viết