使用 Ajax 绑定下拉列表

• 下载源代码 - 56.1 KB

引言

这个项目包含多个 Ajax 示例，例如加载 Repeater、绑定下拉列表、获取用户名、传递用户 ID 等。在这里，我将解释如何在另一个下拉列表的 Change 事件中，使用 Ajax 绑定一个下拉列表。在这个代码片段中，我复制了两种类型的模型来绑定下拉列表。一种是在按钮点击事件中，另一种是在下拉列表的 Change 事件中。

使用代码

以下是关于如何使用文章代码的简要说明，包括类名、方法、属性以及任何技巧或提示。首先，创建一个只包含连接建立的 DB 类。然后创建您想要与下拉列表绑定的表。接下来，更改 Web.config 文件中的连接字符串。

使用 Ajax 点击事件连接字符串绑定下拉列表

<appSettings>
    <add key="ConnectionString" value=
        "Data Source=.\SQLEXPRESS;Integrated Security=yes;database=TAACS;"/>
</appSettings>

为 Ajax 注册页面

AjaxPro.Utility.RegisterTypeForAjax(typeofSample1));
// Write the Ajax method to bind the drop down  

[AjaxPro.AjaxMethod]
public DataSet GetDataSet()
{
    string connectionString = 
        (string)ConfigurationManager.AppSettings["ConnectionString"];
    SqlConnection myConnection = new SqlConnection(connectionString);
    SqlDataAdapter ad = new SqlDataAdapter(
        "SELECT * FROM Tabs", myConnection);
    DataSet ds = new DataSet();
    ad.Fill(ds, "Tabs");
    return ds;
}

在 HTML 设计页面上，编写 JavaScript 进行绑定

// your code is start here

<script language="JavaScript">
function GetDataSet() 
{
    Sample1.GetDataSet(callback);
}

function callback(res)
{
    var html = [];
    for(var i=0; i < res.value.Tables[0].Rows.length; i++)
    html[html.length] = 
        "<option>" + res.value.Tables[0].Rows[i].TabName + "</option>";
    document.getElementById("display").innerHTML = 
        "<select id=\"sel\">" + html.join("") + "</select>";
}
</script>

使用 System.Data.DataSet 填充一个下拉框

由于您可以返回任何对象，因此可以使用两行代码填充一个下拉框。在您点击链接后，国家/地区列表将从服务器获取。

方法 1

通过下拉列表 Change 事件绑定下拉列表

<script language="JavaScript">
function GetTabSet()
{
    var countryId = document.getElementById(
        "ddlList").value;// ddlList.options[ddlList.selectedIndex].value;

    MyAjaxSample.SampleforDatabind.GetTabSet(countryId, GetTabSet_CallBack);
}

function GetTabSet_CallBack(response)
{
    if (response.error != null)
    {
        alert(response.error); 
        return;
    }
    var states = response.value; 
    if (states == null || typeof(states) != "object")
    {
        return;
    }
    var statesList = document.getElementById("ddlItemList");
    statesList.options.length = 0; 
    for (var i = 0; i < response.value.Tables[0].Rows.length; ++i)
    {
        statesList.options[statesList.options.length] = 
            new Option(response.value.Tables[0].Rows[i].TabName);
    }
}
</script>

现在，使用 Ajax 从数据库加载数据

In Code bihind 
using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HTMLControls;
using Ganesh;
 
namespace MyAjaxSample
{
    public partial class SampleforDatabind : System.Web.UI.Page
    {
        public static string connectionString = 
            (string)ConfigurationManager.AppSettings["ConnectionString"];
        public DataSet ds = new DataSet();
        DBClass MyClass = new DBClass();
        protected void Page_Load(object sender, EventArgs e)
        {
            AjaxPro.Utility.RegisterTypeForAjax(typeof(SampleforDatabind));
            if (!IsPostBack)
            {
                ddlList.DataSource = MyClass.GetDataSet("Select * from Users");
                ddlList.DataTextField = "UserName";
                ddlList.DataValueField = "UserID";
                ddlList.DataBind();
                ddlList.Items.Add("--Select table--");
                ddlList.SelectedIndex = ddlList.Items.Count - 1;
            }
        }

        [AjaxPro.AjaxMethod]
        public DataSet GetDataSet() 
        {
            SqlConnection myConnection = new SqlConnection(connectionString); 
            SqlDataAdapter ad = new SqlDataAdapter(
                "SELECT * FROM Tabs",myConnection);
            ad.Fill(ds, "Tabs");
            return ds;
        }

        [AjaxPro.AjaxMethod]
        public DataSet GetTabSet(int UserId)
       {
           SqlConnection myConnection = new SqlConnection(connectionString);
           SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM GetRoleTabs(
               " + UserId + ")", myConnection);
           ad.Fill(ds, "Tabs");
           return ds;
       }
    }
}

方法 2

在 Change 事件中绑定下拉列表

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="~/Sample.aspx.cs" Inherits="MyAjaxSample.Sample" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
<title>Sample Ajax Page</title>
<script language="JavaScript">
function GetUserName()
{
    var yourid = document.getElementById("txtuserId").value;
    MyAjaxSample.Sample.GetUserName(yourid,GetUserName_callback);
}
function GetUserName_callback(response)
{
    if (response != null && response.value != null)
    {
        var user = response.value;
        alert(user);
    }
}

// Get the User Permission tabs by passing User ID

function GetUserRole()
{
    var UID = document.getElementById("ddlUser").value;
    MyAjaxSample.Sample.GetUserRole(UID,GetUserRole_callback);
}

function GetUserRole_callback(response)
{
    if (response != null && response.value != null)
    {
        var usertab = response.value;
        alert(usertab);
    }
}

function GetRoleTabs()
{
    var UrID = document.getElementById("ddlUserList").value;
    MyAjaxSample.Sample.GetRoleTabs(UrID,GetRoleTabs_callback);
}

function GetRoleTabs_callback(res)
{
    var html = [];
    for(var i=0; i < res.value.Tables[0].Rows.length; i++)
    html[html.length] = "<option>" + 
        res.value.Tables[0].Rows[i].TabName + "</option>";
    document.getElementById("display").innerHTML = 
        "<select id=\"sel\">" + html.join("") + "</select>";
}

</script>
</head>

<body>
<form id="form1" runat="server" method="post">
<div style="text-align: center">
    <table id="TABLE1" border="1" cellpadding="0" cellspacing="0" >
        <tr>
            <td style="width: 100px; height: 22px;">
                <input id="btnUser" type="button" value="User" 
                    onclick="GetUserName()" />
            </td>
            <td style="width: 100px">
                <asp:DropDownList ID="ddlUser" OnChange="GetUserRole()" 
                    runat="server" Width="132px"></asp:DropDownList>
            </td>
            <td style="width: 100px">
                <asp:DropDownList ID="ddlUserList" OnChange="GetRoleTabs()" 
                    runat="server" Width="132px" style="position: static">
                 </asp:DropDownList>
            </td>
        </tr>
    </table>
</div> 
</form>
</body>
</html>

在代码隐藏文件中

namespace MyAjaxSample
{ 
    public partial class Sample : System.Web.UI.Page
    {
        DBClass ObjDB = new DBClass();
        DataSet ObjDS = new DataSet();
        public SqlConnection ObjCon = 
            new SqlConnection(
            ConfigurationManager.AppSettings["ConnectionString"]);
        SqlDataReader ObjReader;
        SqlDataAdapter ObjAdapter;
        public string username,usertab;
        protected void Page_Load(object sender, EventArgs e)
        {
            AjaxPro.Utility.RegisterTypeForAjax(typeof(Sample)); // Step 3

            if (!IsPostBack)
            {
                BindDropDown();
            }
        }

        [AjaxPro.AjaxMethod()]
        public string GetUserName(int userID)
        {
            string strSelect = 
                "select * from Users where UserID='" + userID + "'";
            ObjReader = ObjDB.GetDataReader(strSelect);
            if(ObjReader.Read())
            {
                username = 
                    ObjReader["FName"].ToString()+
                    " "+ObjReader["LName"].ToString();
            }
            return username;
        }

    public void BindDropDown()
    {
        string strSelect = "Select * from Users";
        ObjDS = ObjDB.GetDataSet(strSelect);
        ddlUser.DataSource = ObjDS;
        ddlUser.DataTextField = "UserName";
        ddlUser.DataValueField = "UserID";
        ddlUser.DataBind();
        ddlUser.Items.Add("--Select table--");
        ddlUser.SelectedIndex = ddlUser.Items.Count - 1;
        ddlUserList.DataSource = ObjDS;
        ddlUserList.DataTextField = "UserName";
        ddlUserList.DataValueField = "UserID";
        ddlUserList.DataBind();
        ddlUserList.Items.Add("--Select table--");
        ddlUserList.SelectedIndex = ddlUserList.Items.Count - 1;
    }

    [AjaxPro.AjaxMethod()]
    public string GetUserRole(string userID)
    {
        string strSelectTab="select * from GetUserRole(" + userID + ")";
        ObjReader = ObjDB.GetDataReader(strSelectTab);
        if (ObjReader.Read())
        {
            usertab = ObjReader["RoleName"].ToString();
        }
    return usertab;
    }

    [AjaxPro.AjaxMethod()] 
    public DataSet GetRoleTabs(string userID)
    {
        string strSelectTab = "Select * from GetRoleTabs(" + userID + ")";
        ObjAdapter = new SqlDataAdapter(strSelectTab,ObjCon);
        ObjAdapter.Fill(ObjDS,"Tabs");
        return ObjDS;
    }
}

以上代码是用 C# 编写的。在这里，我复制了 HTML 页面和代码隐藏文件的代码。请记住使用“语言”下拉列表设置代码片段的语言。使用“var”按钮将变量或类名包装在 <code> 标签中，例如这样。

历史

• 2007 年 5 月 25 日 - 发布原始版本