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!
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