1) Weisen Sie dem datalist runat="server"
zu, damit es von Code-Behind aus zugänglich ist:
Geben Sie Ihren bevorzugten Browsernamen ein:
2) Durchlaufen Sie die DataTable
, konstruieren und verknüpfen Sie eine Liste von Optionen mithilfe eines StringBuilder
und fügen Sie das Ergebnis der InnerHtml
-Eigenschaft des datalists hinzu
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("",table.Rows[i][0]));
browsers.InnerHtml = builder.ToString();
}
Wenn Sie diese Funktionalität an mehreren Stellen auf Ihrer Website benötigen, können Sie entweder einen WCF-Service erstellen und über jQuery aufrufen, um den datalist zu befüllen, oder einen HTTP-Handler wie diesen erstellen:
1) Fügen Sie Ihrem Projekt einen generischen Handler hinzu und nennen Sie ihn AutoCompleteHandler.ashx
2) Fügen Sie in AutoCompleteHandler.ashx Folgendes ein:
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("");
options.Append("");
options.Append("");
options.Append("");
options.Append("");
context.Response.Write(options.ToString());
context.Response.End();
}
public bool IsReusable
{
get{return false;}
}
}
3) Rufen Sie den Handler über jQuery auf, wenn die Seite geladen wird, und füllen Sie den datalist mit dem zurückgegebenen Ergebnis:
$(document).ready(function () {
$.post('AutoCompleteHandler.ashx', function (data) {
$('#browsers').html(data);
});
});