データをhtml5にバインドするasp.netのデータリスト

Question

私はHTML5で手をつけています。 html5のdatalistにデータをバインドすることは可能ですか？datatableからasp.netまでのドロップダウンコントロールからデータをバインドします。

私はこの詳細を見つけることができます。任意のポインタは非常に高く評価されます。 DataTableスルー

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

2）ループを用いてオプションのリストを構築し、連結：それは背後にあるコードからアクセスできるようにおかげ

Answer 1

1）のデータリストにrunat="server"を割り当て:)

StringBuilderとデータリストのInnerHtmlプロパティに結果を追加

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サイト内の複数の場所でこの機能が必要になる場合は、create a WCF service and call it via jQueryにデータリストを設定するか、次のようなHTTPハンドラを作成します。

1）プロジェクトにジェネリックハンドラを追加して呼び出しますAutoCompleteHandler.ashxインサイドAutoCompleteHandler.ashx

2）が置か：

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>