c# - asp.netのデータベースから「select」を作成する方法

Question

私はhtmlコントロールを持っていますselect

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

またはSQL Serverを使用してデータベースからデータを取り込むにはどうすればよいですか?C#JavaScript/jQuery/JSON

コントロールasp:DropDownListを使用する必要があるため、入力方法についての回答を投稿しないでください。select

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

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

};

jsonにasp.net webapiを使用できます。非常に簡単で高速です

• Asp.Net Web API
• Web フォームで Web API を使用する

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

Answer 4

リピーターを利用できる

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