asp.net - asp.netのhtml5DataListへのデータのバインド

Question

HTML5で手を試しています。データテーブルからasp.netドロップダウンコントロールにデータをバインドするときに、html5のデータリストにデータをバインドすることは可能ですか？

私はこの詳細を見つけることができます。どんなポインタでも大歓迎です。:)

ありがとう

Answer 1

1）データリストに割り当てrunat="server"て、コードビハインドからアクセスできるようにします。

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

2）をループし、DataTableを使用してオプションのリストを作成および連結し、結果をデータリストのプロパティにStringBuilder追加しますInnerHtml

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

サイトの複数の場所でこの機能が必要になる場合は、WCFサービスを作成し、jQueryを介して呼び出すか、データリストにデータを入力するか、次のようなHTTPハンドラーを作成します。

1）プロジェクトに汎用ハンドラーを追加し、AutoCompleteHandler.ashxという名前を付けます。

2）AutoCompleteHandler.ashxの内部に置く：

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）ページが読み込まれたときにjQueryを介してハンドラーを呼び出し、返された結果をデータリストに入力します。

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