Associazione di dati a html5 DataList in asp.net

Question

Sto provando le mie mani con HTML5. È possibile associare i dati al datalist in html5 mentre leghiamo i dati da un controllo dropdown datatable a asp.net.

Dove posso trovare questi dettagli. qualsiasi suggerimento è molto apprezzato. :)

Grazie

Answer 1

1) Assegnare runat="server" al datalist in modo che possa essere accessibile da codice dietro:

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

2) Loop attraverso il DataTable, costruire e concatenare un elenco di opzioni utilizzando un StringBuilder e aggiungere il risultato al InnerHtml proprietà del 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 Se hai bisogno di questa funzionalità in più punti del tuo sito, puoi o create a WCF service and call it via jQuery dove puoi popolare il datalist o creare un gestore HTTP come questo:

1) Aggiungi un gestore generico al tuo progetto e chiamalo AutoCompleteHandler.ashx

2) All'interno AutoCompleteHandler.ashx messo:

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) chiamare il gestore tramite jQuery quando la pagina viene caricata e popolare la DataList con il risultato restituito:

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