6 Stimmen

Daten an die HTML5-Datenliste in ASP.NET binden

Ich probiere es mit HTML5. Ist es möglich, Daten an ein Datalist in HTML5 zu binden, so wie wir Daten von einer DataTable an ein Dropdown-Control in ASP.NET binden?

Wo finde ich diese Informationen? Über Hinweise würde ich mich sehr freuen. :)

Vielen Dank

10voto

Denys Wessels Punkte 16583

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);
        });
    });

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X