Veri bağlama html5 için DataList in asp.net

Question

HTML5 ile ellerimi deniyorum. Verileri bir veritabamından asp.net açılır denetimine bağlarken, verileri html5'e datalist olarak bağlamak mümkün mü? Bu ayrıntıları nerede bulabilirim?

. herhangi bir işaretçi çok takdir edilmektedir. :)

sayesinde

Answer 1

1) arkasındaki kodu erişilebilir, böylece datalist için runat="server" atama: DataTable boyunca

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

2) döngü, yapı kullanarak bir seçenekler listesi bağlamak bir StringBuilder ve 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 özelliğine sonucunu eklemek f Bu işlevselliği sitenizde birden çok yerde kullanmanız gerekecek, ya da datalist'i doldurabileceğiniz bir HTTP işleyicisi oluşturabileceğiniz create a WCF service and call it via jQuery:

1) Projenize Genel İşleyici ekleyin ve arayın AutoCompleteHandler.ashx içinde AutoCompleteHandler.ashx

2) koyun:

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) sayfa yüklendiğinde jQuery ile işleyicisi Çağrı ve iade sonuçla DataList doldurmak:

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