2012-05-22 35 views
18

Trong asp.net, nếu bạn sử dụng thuộc tính tùy chỉnh, thường thì nó được hiển thị dưới dạng.Asp.net hộp kiểm và thuộc tính dữ liệu html

Xét đánh dấu này (lưu ý: các thuộc tính như id, namefor đã được gỡ bỏ trong tất cả các ví dụ như id tạo của họ/tên là verbose):

<asp:TextBox runat="server" data-foo="bar" /> 

là render trong asp.net như:

<input type="text" data-foo="bar" /> 

Tức là, asp.net giữ data-foo không bị ảnh hưởng.

Kiểm tra hộp thường được trả lại như thế này:

<asp:CheckBox runat="server" Text="Normal" /> 

ám như:

<input type="checkbox" /> 
<label>Normal</label> 

Nhưng nếu bạn thêm một thuộc tính tùy chỉnh trên một hộp kiểm:

<asp:CheckBox runat="server" Text="Custom attribute" data-foo="bar" /> 

Nó ám như :

<span data-foo="bar"> 
    <input type="checkbox" /> 
    <label>Custom attribute</label> 
</span> 

Như bạn có thể thấy, một khoảng trong kết xuất để giữ thuộc tính. Điều này cũng xảy ra nếu bạn thêm thuộc tính vào mã phía sau. Điều này không xảy ra với bất kỳ HtmlControl, AFAIK nào khác.

Có ai biết tại sao khoảng thời gian này được hiển thị để giữ thuộc tính không?

Có cách nào để hiển thị thuộc tính trong thẻ đầu vào không?

+0

Thú vị .. Chỉ cần tò mò, những gì bạn đang sử dụng thuộc tính bổ sung cho –

Trả lời

20

Tôi không chắc chắn lý do tại sao nó được trả lại với một nhịp, nhưng tôi cho rằng bạn có thể thêm các thuộc tính trực tiếp đến input yếu tố của CheckBoxtrong mã-behid như thế này:

myCheckBox.InputAttributes.Add(...) 

Re chênh liên kết:

Cập nhật

Một yếu tố phụ huynh thêm được sử dụng, do đó các thuộc tính bạn áp dụng cho một CheckBox có thể ảnh hưởng đến cả input và văn bản. Tôi cho rằng đó là span (và không phải là div), bởi vì đó là một yếu tố nội tuyến , giúp việc sử dụng thuận tiện hơn trong các trường hợp khác nhau trở nên thuận tiện hơn.

tham khảo liên kết:

+0

\ Nice, tôi chưa bao giờ ghi nhận InputAttributes này trước đây. Tôi đã thử Attributes.Add, không hoạt động. – Andre

4

Đây là cách mà công cụ kết xuất xây dựng điều khiển CheckBox, không có nhiều việc phải làm.

Điều bạn có thể làm là tạo đầu vào runat="server".

<input id="myInput" runat="server" type="checkbox" data-foo="bar"/> 
<label>Custom attribute</label> 

Một lựa chọn khác là thêm thuộc tính data-foo sử dụng jquery trên tải tài liệu

$(function(){ 
    $('span[data-foo]').each(function(){ 
     var $span = $(this); 
     var value = $span.data('foo'); 
     $span.find('input').data('foo',value);   
    }); 
}) 
1

Chỉ cần thêm một phương pháp mà tôi sử dụng khi vẫn thất bại, bạn luôn có thể sử dụng một điều khiển đen và làm cho nó render bất cứ điều gì bạn muốn. Bạn cần phải làm một công việc nhiều hơn một chút khi xử lý postback, nhưng đôi khi đây là cách duy nhất để có được html bạn cần.

Markup:

<asp:Literal ID="myLiteral" runat="server"/> 

Codebeside:

myLiteral.Text = string.Format("<input type=\"checkbox\" data-foo=\"{0}\" /><label>Normal</label>", value) 
Các vấn đề liên quan