Dữ liệu ràng buộc vào html5 DataList trong asp.net

Question

Tôi đang thử dùng HTML5. Có thể ràng buộc dữ liệu để datalist trong html5 như chúng tôi ràng buộc dữ liệu từ một datatable để kiểm soát thả xuống asp.net.

Nơi tôi có thể tìm thấy chi tiết này. bất kỳ con trỏ nào được đánh giá cao. :)

Cảm ơn

Answer 1

1) Gán runat="server" cho datalist để nó có thể được truy cập từ mã sau:

Enter your favorite browser name:<br /> 
<input id="browserName" list="browsers" /> 
<datalist id="browsers" runat="server" /> 

2) Vòng qua các DataTable, xây dựng và nối một danh sách tùy chọn sử dụng a StringBuilder và thêm kết quả vào thuộc tính InnerHtml của nhà dữ liệu

protected void Page_Load(object sender, EventArgs e) 
    { 
     DataTable table = new DataTable(); 
     table.Columns.Add("BrowserName"); 
     table.Rows.Add("IE"); 
     table.Rows.Add("Chrome"); 
     table.Rows.Add("Firefox"); 
     table.Rows.Add("Opera"); 
     table.Rows.Add("Safari"); 

     var builder = new System.Text.StringBuilder(); 

     for (int i = 0; i < table.Rows.Count; i++) 
      builder.Append(String.Format("<option value='{0}'>",table.Rows[i][0])); 
     browsers.InnerHtml = builder.ToString(); 
    } 

I f bạn sẽ cần chức năng này ở nhiều nơi trong trang web của bạn, bạn có thể create a WCF service and call it via jQuery nơi bạn có thể cư trú trong datalist hoặc tạo một handler HTTP như thế này:

1) Thêm một Generic Handler để dự án của bạn và gọi nó là AutoCompleteHandler.ashx

2) Bên AutoCompleteHandler.ashx đặt:

public class AutoCompleteHandler : IHttpHandler 
{ 
    public void ProcessRequest(HttpContext context) 
    { 
     context.Response.ContentType = "text/plain"; 
     context.Response.Clear(); 

     var options = new System.Text.StringBuilder(); 
     options.Append("<option value='IE'>"); 
     options.Append("<option value='Chrome'>"); 
     options.Append("<option value='Firefox'>"); 
     options.Append("<option value='Safari'>"); 
     options.Append("<option value='Opera'>"); 

     context.Response.Write(options.ToString()); 
     context.Response.End(); 
    } 
    public bool IsReusable 
    { 
     get{return false;} 
    } 
} 

3) Gọi xử lý qua jQuery khi tải trang và cư trú trong datalist với kết quả trả về:

<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $.post('AutoCompleteHandler.ashx', function (data) { 
      $('#browsers').html(data); 
     }); 
    }); 
</script>