在运行时将项添加到DropDownList

时间:2014-01-28 05:53:01

标签: c# asp.net drop-down-menu

我在C#中使用Asp.Net。我想在运行时向DropDownList添加数据库名称。这是代码。

代码背后:

    [WebMethod]
    public void GetDdlList()
    {
    if (!String.IsNullOrEmpty(txtServer.Text.ToString()))
    ServerName = txtServer.Text.ToString();
    if (!String.IsNullOrEmpty(txtUnm.Text.ToString()))
    UserName = txtUnm.Text.ToString();
    if (!String.IsNullOrEmpty(txtPwd.Text.ToString()))
    Pwd = txtPwd.Text.ToString();
    SqlConnection conn = new SqlConnection("Data Source=" + ServerName + ";User ID=" +  UserName + ";Password=" + Pwd);
    SqlCommand cmd = new SqlCommand();
    cmd.Connection = conn;
    cmd.CommandText = "SELECT name FROM sys.databases";
    cmd.CommandType = CommandType.Text;
    conn.Open();
    SqlDataReader rdr = cmd.ExecuteReader();
    while (rdr.Read())
    {
       ddlDbnm.Items.Add(rdr.GetString(0).ToString());
    }
    conn.Close();
    }

脚本:

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript">
    $(document).ready(function () {
        $('#<%= ddlDbnm.ClientID %>').click(function () {
            PageMethod.GetDdlList();
            //alert('hi');
        })
    });
</script>  

当我点击按钮时编写GetDdlList()代码时,它会成功执行。但我不想使用按钮点击。相反,我希望在单击DropDownList时执行此代码。在上面的示例中,当我单击Dropdownlist时,没有任何事情发生。

3 个答案:

答案 0 :(得分:1)

您可以在jquery中获取dropdownlist的click事件,然后对您的方法进行ajax调用。以下是下拉列表的获取点击事件的代码:

    $(document).ready(function () {
        var isClickToLoad = true;

        $('#<%= ddlDbnm.ClientID %>').click(function () {
            if (isClickToLoad == false) {
                //The following line is not allowing the selection changed value to persist
                //But commenting it out will call the server side code just once 
                //i.e. when first time the dropdownlist is clicked
                //You need to handle it
                isClickToLoad = true;
                return;
            }

            isClickToLoad = false;
            $('#<%= ddlDbnm.ClientID %>').empty();

            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Default.aspx/GetDdlList",
                data: '{ }',
                dataType: "json",
                success: function (msg) {
                    var options = "";
                    $.each(msg.d, function (index, value) {
                        options = options + "<option>" + value + "</option>";
                    });
                    $('#<%= ddlDbnm.ClientID %>').html(options);
                }
            });
        })
    });

以下是webmethod代码:

    [WebMethod]
    public static List<string> GetDdlList()
    {
        //This can be your call to database. Hard-coded here for simplicity
        List<string> lst = new List<string>();

        lst.Add("aaa");
        lst.Add("bbb");

        return lst;
    }

链接here详细说明了如何在代码中使用jquery ajax。

希望这有帮助

答案 1 :(得分:0)

您可以将此js用于动态下拉列表:

HTML:

<select>
 <option>Select Something</option>
    <option>&nbsp;</option>
    <option>&nbsp;</option>
    <option>&nbsp;</option>
</select>

JavaScript的:

$(document).ready(function () {
    var isClickToLoad = true;
    $("select").click(function(e) {
        if (isClickToLoad == false){
            isClickToLoad = true;
            return;
        }
        isClickToLoad = false;
        $("select").empty().html("<option>Loading options</option>");
        setTimeout(function() {
            $.ajax({
                type: "POST",
                url: 'your url',
                traditional: true,
                dataType: "json",
                data: {},
                success: function(resp) {
                    $('select').empty();
                    if (resp.length > 0) {
                        var listItems = [];
                        for (var i = 0; i < resp.length; i++) {
                            listItems.push('<option value="' +
                                resp[i].Value + '">' + resp[i].Text
                                + '</option>');
                        }
                        $('select').append(listItems.join(''));
                    }
                }
            });
            $("select :nth-child(1)").attr("selected", "selected");
        }, 500);
    });
});

demo

答案 2 :(得分:0)

您已经使用Visual Studio为ComboBox构建了一个click事件。右键单击Combox并选择属性。在“属性”中,单击“事件”按钮(闪电符号)并在其中找到“单击”事件,然后双击此按钮即可自动创建单击事件。您可以将以上代码添加到此事件并尝试运行它。这应该有助于你实现目标。试试这个,如果这对你不起作用,请告诉我。