在asp.net中将数据绑定到html5 DataList

Posted 2023-03-31

【中文标题】在asp.net中将数据绑定到html5 DataList

【英文标题】：Binding data to html5 DataList in asp.net

【发布时间】：2013-03-15 17:42:04

【问题描述】：

我正在尝试使用 html5。当我们将数据从数据表绑定到asp.net下拉控件时，是否可以将数据绑定到html5中的datalist。

我在哪里可以找到这些详细信息。任何指针都非常感谢。 :)

谢谢

【参考方案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();
    

如果您要在站点的多个位置使用此功能，您可以通过create a WCF service and call it via 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
    
        getreturn 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>

【讨论】：

你加倍努力。感谢您的详细回答和参考:)