Làm thế nào để thêm thuộc tính dữ liệu vào phần tử html trong ASP.NET MVC?

Question

Tôi đã học được few minutes ago rằng việc thêm thuộc tính dữ liệu là một cách hay để thêm thông tin tùy chỉnh vào các phần tử html. Vì vậy, tôi đã cố gắng thực hiện như sau:

<%= Html.TextBox ("textBox", "Value", new { data-myid = m.ID })%> 

Nhưng kết quả là lỗi cú pháp. Làm thế nào tôi có thể xác định các thuộc tính dữ liệu tùy chỉnh?

EDIT:

tôi thấy rằng tôi có thể đạt được hiệu ứng này sử dụng:

<%= Html.TextBox ("textBox", "Value", new Dictionary<string, object> {{ "data-myid", m.ID }})%> 

Nhưng điều đó không giống ... umm ... sạch! Có cách nào tốt hơn để làm điều này không?

Answer 1

Sử dụng một nhấn thay vì một dấu gạch ngang.

new { data_myid = m.ID }

này chắc chắn công trình trong MVC3 (chưa kiểm tra các phiên bản khác). Dấu gạch dưới sẽ được chuyển đổi thành dấu gạch ngang khi HTML được hiển thị.

Answer 2

<%= Html.TextBox ("myTextBox", "", 
     new { @class="redText", title="Enter red text here"})%> 

kết quả trong:

<input type="text" id="myTextBox" class="redText" title="Enter red text here" /> 

Tôi không chắc chắn những gì vấn đề của bạn là. Có thể có liên quan đến "-" trong tên thuộc tính của loại vô danh của bạn.

---

Vâng, trình biên dịch không thích tên thuộc tính của bạn. Từ các nhận xét, để thêm thuộc tính data-html5, bạn sẽ phải sử dụng từ điển hoặc tạo một tiện ích khác giúp đơn giản hóa việc xây dựng các từ điển.

Answer 3

Tôi nghĩ bạn sẽ phải tạo trình trợ giúp của riêng bạn để thực hiện việc này cho bạn. Tôi không thể tìm thấy cách để thực hiện điều này trực tiếp trong chế độ xem.

Answer 4

Tôi không thể thấy bất kỳ cách nào để nhận tuyên bố loại ẩn danh để chấp nhận data-myid vì đó không phải là tên thuộc tính hợp lệ trong C#. Một lựa chọn sẽ là để tạo ra một tình trạng quá tải mới mà sẽ đưa thêm một tham số dataAttributes, và prepends data- với tên cho bạn ...

using System.ComponentModel; 
using System.Web.Mvc; 
using System.Web.Mvc.Html; 
using System.Web.Routing; 

static class TextBoxExtensions 
{ 
    public static string TextBox(this HtmlHelper htmlHelper, string name, object value, object htmlAttributes, object dataAttributes) 
    { 
     RouteValueDictionary attributes = new RouteValueDictionary(htmlAttributes); 
     attributes.AddDataAttributes(dataAttributes); 

     return htmlHelper.TextBox(
      name, 
      value, 
      ((IDictionary<string, object>)attributes); 
    } 

    private static void AddDataAttributes(this RouteValueDictionary dictionary, object values) 
    { 
     if (values != null) 
     { 
      foreach (PropertyDescriptor descriptor in TypeDescriptor.GetProperties(values)) 
      { 
       object obj2 = descriptor.GetValue(values); 
       dictionary.Add("data-" + descriptor.Name, obj2); 
      } 
     } 

    } 
} 

Sau đó, bạn có thể thêm một thuộc tính data-myid với

<%= Html.TextBox ("textBox", "Value", 
     new { title = "Some ordinary attribute" }, 
     new { myid = m.ID }) %> 

Tuy nhiên , điều đó khiến bạn tạo ra tình trạng quá tải trên bất kỳ phương pháp nào khác mà bạn muốn chấp nhận các thuộc tính dữ liệu, đó là một nỗi đau. Bạn có thể nhận được xung quanh đó bằng cách di chuyển logic để một

public static IDictionary<string,object> MergeDataAttributes(
    this HtmlHelper htmlHelper, 
    object htmlAttributes, 
    object dataAttributes) 

và gọi nó như

<%= Html.TextBox ("textBox", "Value", 
     Html.MergeDataAttributes(new { title = "Some ordinary attribute" }, new { myid = m.ID })) %>