【问题标题】:How to populate 'select' from database in asp.net如何在 asp.net 中从数据库中填充“选择”
【发布时间】:2013-01-31 07:17:43
【问题描述】:

我有一个html控件select

 <select id="Select1" runat="server" name="D1">
    <option></option>
 </select>

如何使用C#JavaScript/jQuery/JSONSQL Server 数据库中的数据填充到它?

请不要发布有关如何填充asp:DropDownList 的答案,因为我已经知道如何操作,我必须使用select 控件。

【问题讨论】:

标签: c# asp.net html sql-server


【解决方案1】:

aspx:

  <select id="Select1" runat="server" name="D1">

  </select>

后面的代码:

protected void Page_Load(object sender, EventArgs e)
{
   if (!IsPostBack)
   {
      string ConnectString = "server=localhost;database=pubs;integrated security=SSPI";
      string QueryString = "select * from authors";

      SqlConnection myConnection = new SqlConnection(ConnectString);
      SqlDataAdapter myCommand = new SqlDataAdapter(QueryString, myConnection);
      DataSet ds = new DataSet();
      myCommand.Fill(ds, "Authors");

      Select1.DataSource = ds;
      Select1.DataTextField = "au_fname";
      Select1.DataValueField = "au_fname";
      Select1.DataBind();
   }
}

【讨论】:

  • 什么是"au_fname",为什么要使用它?
  • 在这种特殊情况下,它是 authors 表中 QueryString 行中的一列。因此,如果我们将 Stephen King、John Grisham 和 Emily Bronte 作为表中的行,那么该列表将包含 Stephen、John 和 Emily 的选项。文本是所见,价值是发送的项目。所以我可能实际上将 DataValueField 设置为 author_id 的等价物。可能还会在 DataTextField 的查询中添加 First Name + Last Name 结果,因为当您拥有 Tom Clancy 和 Tom Brokaw 时会发生什么?可以考虑添加日期以过滤名称相同的地方。
【解决方案2】:
function GetItems() {

var items;

    $.getJSON("/api/MethodName/" + id(Optional), function (data) {
        $.each(data, function (key, val) {
            items += "<option value='" + val.id+ "'>" + val.value+ "</option>";    
        });

        var header = '<option value=\'\'>Select...</option>';
        $('#Select1').html(header + items);
    });

};

你可以使用asp.net webapi for json,非常简单快捷

【讨论】:

  • 如何创建从数据库返回数据为 json 的方法?
  • 你使用的是 mvc 还是 webforms ?
  • 使用它来填充: $('#Select1').append($("") .attr("value", key) .text(val) );
【解决方案3】:

您可以在 ajax 中使用 json,但您必须使用一些 web 服务从服务器返回 json。

$.ajax({
   url:'/path/to/webservice/method',
   type:'POST',
   dataType: 'json',
   success: function(data){
       $.each(data, function(i, item){
          $('<option value="'+item.val+'">'+item.text+'</option>').appendTo('#Select1');
       });
   },
   error: function(){
      console.log('err')
   }
});

【讨论】:

    【解决方案4】:

    在后面的代码中:

     string options = string.Empty; 
     using (SqlConnection sql_conn = new SqlConnection(ConfigurationManager.ConnectionStrings["connstr"].ToString()))
            {
                SqlDataAdapter sql_adapter = new SqlDataAdapter("select Value, Name from YourTable", sql_conn);
                DataSet ds = new DataSet();
                sql_adapter.Fill(ds, "TempTable");
    
                foreach (DataRow row in ds.Tables["TempTable"].Rows)
                {
                    options = "<option value='" + row["Value"] + "'>" + row["Name"] + "</option>";
                }
                sql_conn.Close();
               return options;
            }
    

    然后你就可以使用jquery了:

    $.get(url, function (data) {        
            $('#Select1').html(data);
        });
    

    【讨论】:

      【解决方案5】:

      你可以使用中继器

      <select>
      <asp:Repeater ID="Repeater1" runat ="server" DataSourceID="SqlDataSource1">
          <ItemTemplate>
              <option value='<%# Eval("ID")%>'> <%# Eval("ITEMNAME")%></option>
          </ItemTemplate>
      </asp:Repeater>
      </select> 
      

      【讨论】:

        【解决方案6】:
                    using (SqlConnection con = new SqlConnection("Data Source = [HostName]; Initial Catalog = CustomerOrders; Integrated Security = true"))
                    {
                        SqlCommand cmd = new SqlCommand("SELECT Name FROM Customer", con);
                        con.Open();
        
                        dropDownList.DataSource = cmd.ExecuteReader();
                        dropDownList.DataTextField = "Name";
                        dropDownList.DataValueField = "Name";
                        dropDownList.DataBind();
                    }
        

        【讨论】:

          猜你喜欢
          • 2018-09-11
          • 1970-01-01
          • 2013-03-04
          • 1970-01-01
          • 2016-05-27
          • 2013-04-05
          • 2016-10-25
          • 1970-01-01
          • 2012-07-22
          相关资源
          最近更新 更多