2011-01-26 34 views
32

Mới đối với MVC và đã chạy qua các hướng dẫn trên trang web asp.net.ASP.NET MVC 3 Trình trợ giúp HTML tùy chỉnh- Thực tiễn tốt nhất/Sử dụng

Chúng bao gồm ví dụ về trình trợ giúp html tùy chỉnh để cắt ngắn văn bản dài được hiển thị trong bảng.

Chỉ cần tự hỏi những giải pháp khác mà mọi người đã đưa ra khi sử dụng người trợ giúp HTML và nếu có bất kỳ thực tiễn hay điều gì tốt nhất cần tránh khi tạo/sử dụng chúng.

Như một ví dụ, tôi đang cân nhắc viết một helper tùy chỉnh để ngày định dạng mà tôi cần để hiển thị ở những nơi khác nhau, nhưng bây giờ lo ngại rằng có thể có một giải pháp thanh lịch hơn (DataAnnotations IE trong các mô hình của tôi)

Có suy nghĩ gì không?

EDIT:

Một tiềm năng sử dụng tôi chỉ nghĩ đến ... String nối. Trình trợ giúp tùy chỉnh có thể lấy một ID người dùng làm đầu vào và trả về tên đầy đủ của Người dùng ... Kết quả có thể là một số dạng (Tiêu đề) (Đầu tiên) (Giữa) (Cuối) tùy thuộc vào trường nào có sẵn. Chỉ là một ý nghĩ, tôi chưa thử bất cứ điều gì như thế này.

+0

Tôi vẫn muốn thấy bất kỳ điều thú vị nào khác mà mọi người đã thực hiện với Trình trợ giúp HTML tùy chỉnh. Cảm thấy tự do để đăng chúng! – stephen776

Trả lời

16

Vâng trong trường hợp định dạng thuộc tính DisplayFormat có thể là một giải pháp tốt đẹp:

[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}")] 
public DateTime Date { get; set; } 

và sau đó chỉ cần:

@Html.DisplayFor(x => x.Date) 

Theo như cắt bỏ chuỗi là có liên quan một helper HTML tùy chỉnh là một giải pháp tốt.


UPDATE:

Về EDIT của bạn, một HTML helper tùy chỉnh có thể làm việc trong tình huống này nhưng cũng có một cách tiếp cận khác mà tôi thích rất nhiều: xem các mô hình. Vì vậy, nếu theo quan điểm đặc biệt này, bạn luôn đi để hiển thị nối trong những cái tên sau đó bạn có thể định nghĩa một mô hình điểm:

public class PersonViewModel 
{ 
    public string FullName { get; set; } 
} 

Bây giờ bộ điều khiển sẽ truy vấn các kho để lấy mô hình và sau đó bản đồ mô hình này đối với mô hình chế độ xem sẽ được chuyển đến chế độ xem để chế độ xem có thể chỉ đơn giản là @Html.DisplayFor(x => x.FullName). Việc ánh xạ giữa các mô hình và các mô hình xem có thể được đơn giản hóa với các khung như AutoMapper.

+4

rất thú vị. Hầu như có vẻ như một trình trợ giúp html tùy chỉnh là phương sách cuối cùng. – stephen776

100

Tôi thường xuyên sử dụng HtmlHelpers, phổ biến nhất để đóng gói thế hệ HTML bản mẫu, trong trường hợp tôi thay đổi quyết định. Tôi đã có những người trợ giúp như:

  • Html.BodyId(): tạo thẻ id cơ thể thông thường để tham chiếu khi thêm css tùy chỉnh cho chế độ xem.
  • Html.SubmitButton (chuỗi): tạo phần tử nhập [type = submit] hoặc nút [type = submit], tùy thuộc vào cách tôi muốn tạo kiểu cho các nút.
  • Html.Pager (IPagedList): Để tạo điều khiển phân trang từ mô hình danh sách được phân trang.
  • v.v.

Một trong những ứng dụng yêu thích của tôi dành cho HtmlHelpers là DÙNG đánh dấu biểu mẫu chung. Thông thường, tôi có một div container cho một dòng hình thức, một div cho nhãn, và một nhãn cho các thông báo đầu vào, xác nhận, văn bản gợi ý, vv Cuối cùng, điều này có thể kết thúc được rất nhiều thẻ html boilerplate. Một ví dụ về làm thế nào tôi đã xử lý này sau:

public static MvcHtmlString FormLineDropDownListFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, IEnumerable<SelectListItem> selectList, string labelText = null, string customHelpText = null, object htmlAttributes = null) 
{ 
    return FormLine(
     helper.LabelFor(expression, labelText).ToString() + 
     helper.HelpTextFor(expression, customHelpText), 
     helper.DropDownListFor(expression, selectList, htmlAttributes).ToString() + 
     helper.ValidationMessageFor(expression)); 
} 

public static MvcHtmlString FormLineEditorFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, string templateName = null, string labelText = null, string customHelpText = null, object htmlAttributes = null) 
{ 
    return FormLine(
     helper.LabelFor(expression, labelText).ToString() + 
     helper.HelpTextFor(expression, customHelpText), 
     helper.EditorFor(expression, templateName, htmlAttributes).ToString() + 
     helper.ValidationMessageFor(expression)); 
} 

private static MvcHtmlString FormLine(string labelContent, string fieldContent, object htmlAttributes = null) 
{ 
    var editorLabel = new TagBuilder("div"); 
    editorLabel.AddCssClass("editor-label"); 
    editorLabel.InnerHtml += labelContent; 

    var editorField = new TagBuilder("div"); 
    editorField.AddCssClass("editor-field"); 
    editorField.InnerHtml += fieldContent; 

    var container = new TagBuilder("div"); 
    if (htmlAttributes != null) 
     container.MergeAttributes(new RouteValueDictionary(htmlAttributes)); 
    container.AddCssClass("form-line"); 
    container.InnerHtml += editorLabel; 
    container.InnerHtml += editorField; 

    return MvcHtmlString.Create(container.ToString()); 
} 

public static MvcHtmlString HelpTextFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, string customText = null) 
{ 
    // Can do all sorts of things here -- eg: reflect over attributes and add hints, etc... 
}  

Một khi bạn đã làm điều này, tuy nhiên, bạn có thể dòng dạng đầu ra như thế này:

<%: Html.FormLineEditorFor(model => model.Property1) %> 
<%: Html.FormLineEditorFor(model => model.Property2) %> 
<%: Html.FormLineEditorFor(model => model.Property3) %> 

... và BAM, tất cả các nhãn của bạn , đầu vào, gợi ý và thông báo xác thực nằm trên trang của bạn. Một lần nữa, bạn có thể sử dụng các thuộc tính trên các mô hình của bạn và phản ánh các thuộc tính để thực sự thông minh và KHÔ. Và tất nhiên đây sẽ là một sự lãng phí thời gian nếu bạn không thể chuẩn hóa về thiết kế biểu mẫu của bạn. Tuy nhiên, đối với các trường hợp đơn giản, nơi css có thể cung cấp tất cả các tùy chỉnh bạn cần, nó hoạt động grrrrrrrrreat!

Đạo đức của câu chuyện - HtmlHelpers có thể cách nhiệt bạn khỏi những thay đổi thiết kế toàn cầu phá hỏng đánh dấu thủ công bằng tay trong chế độ xem sau khi xem. Tôi thích họ. Nhưng bạn có thể đi overboard, và đôi khi một phần quan điểm là tốt hơn so với người trợ giúp mã. Quy tắc chung của ngón tay cái tôi sử dụng để quyết định giữa helper và xem một phần: Nếu đoạn HTML yêu cầu nhiều logic điều kiện hoặc thủ thuật mã hóa, tôi sử dụng trình trợ giúp (đặt mã nơi mã phải); nếu không, nếu tôi chỉ outputting đánh dấu chung mà không có nhiều logic, tôi sử dụng một phần xem (đặt đánh dấu nơi đánh dấu nên được).

Hy vọng điều này sẽ mang lại cho bạn một số ý tưởng!

+1

rất đẹp! Có nhiều đồ đạc đẹp ở đây. – stephen776

+3

Bài đăng tuyệt vời! Tôi chắc chắn sao chép/dán một số từ đây nếu bạn không nhớ;) –

+7

Câu trả lời hay. Đã cho tôi một chút thời gian để tìm ra tôi cần bằng System.Web.Mvc.Html; để có được phần mở rộng .EditorFor hiển thị mặc dù – Nick

Các vấn đề liên quan