在asp.net中將數據綁定到html5 DataList

Question

我正在嘗試使用HTML5。是否有可能將數據綁定到html5中的數據列表，因爲我們將數據從數據表綁定到asp.net下拉控件。

我在哪裏可以找到這個細節。任何指針都非常感謝。 :)

由於

Answer 1

1）分配runat="server"到數據列表，以便它可以從後面的代碼來訪問：

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

2）循環通過DataTable，構建和使用串聯的選項的列表一個StringBuilder並將結果添加到DataList

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(); 
    } 

我的InnerHtml財產如果您需要在您的站點的多個地方使用此功能，您可以使用create a WCF service and call it via jQuery來填充數據列表或創建一個HTTP處理程序，如下所示：

1）將一個通用處理程序添加到您的項目中並調用它AutoCompleteHandler.ashx

2）內部AutoCompleteHandler.ashx地說：

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）通過jQuery調用處理程序頁面加載時與返回的結果填充數據列表：

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