Wiązanie danych z danymi html5 DataList w asp.net

Question

Próbuję swoich sił za pomocą HTML5. Czy jest możliwe powiązanie danych z danymi w html5, ponieważ wiążemy dane z formantu rozwijanego datatable do asp.net.

Gdzie mogę znaleźć te szczegóły. wszelkie wskazówki są mile widziane. :)

Dzięki

Answer 1

1) przydziela runat="server" do DataList tak, że może on być dostępny z kodem tyle:

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

2) Pętla przez DataTable, skonstruować i złączyć listę opcji za pomocą StringBuilder i dodać wynik do majątku 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(); 
    } 

i InnerHtml Jeśli będziesz potrzebować tej funkcji w wielu miejscach swojej witryny, możesz albo create a WCF service and call it via jQuery, gdzie możesz zapełnić bazę danych, albo utworzyć procedurę obsługi HTTP w ten sposób:

1) Dodaj ogólny projektor do swojego projektu i nazwij go AutoCompleteHandler.ashx

2) Wewnątrz AutoCompleteHandler.ashx umieścić:

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) Zadzwoń do obsługi za pomocą jQuery po załadowaniu strony i wypełnić DataList z zwracanego wyniku:

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