使用 AJAX 进行下拉列表绑定

• 下载源代码 - 31.9 KB

引言

本文介绍了如何使用 AJAX 在另一个下拉列表的 change 事件中绑定下拉列表。

使用代码

从上方下载源代码文件。创建我在文章中提到的表，并在数据库中创建所需的函数。在 web.config 文件中更新数据库名称。

在代码隐藏文件中

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

在 HTML 侧

<script language="javascript">
function BindDatatoTable()
{
     MyAjaxSample.SampleforDatabind.GetDataSet(BindDatatoTable_callback);
}
function BindDatatoTable_callback(responce)
{
    if(responce.error == null) 
    { 
        var ds = responce.value;
        if(ds!= null && typeof(ds) == "object" && ds.Tables!=null)
        {
            var s = new Array();
            s[s.length] = "<table border = 1 cellpadding=0 cellspacing=0 bordercolor=blue >";
            for(var i=0;i<ds.Tables[0].Rows.length;i++)
            {
                s[s.length] = "<tr>";
                s[s.length] = "<td>" + ds.Tables[0].Rows[i].TabID + "</td>";
                s[s.length] = "<td>" + ds.Tables[0].Rows[i].TabName + "</td>";
                s[s.length] = "<td>" + ds.Tables[0].Rows[i].Remarks + "</td>";
                s[s.length] = "</tr>";
            }
            s[s.length] = "</table>";
            document.getElementById("Display1").innerHTML = s.join("");
        } 
    } 
}
function GetTabSet()
{
    // ddlList.options[ddlList.selectedIndex].value;
    var countryId = document.getElementById("ddlList").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,
           response.value.Tables[0].Rows[i].TabID);
    }
}
</script>

//See the Change event call here

<div>
<input id="btnLoad" type="button" 
   value="Load Data" onclick="BindDatatoTable();" /></div>
<span id="Display1" 
   title="Loading the Data from the Database using Ajax">
   Loading the Data from the Database using Ajax</span>
<br /><p>Menu</p>
<asp:DropDownList ID="ddlList" onchange="GetTabSet()" 
         runat="server"></asp:DropDownList>
<asp:DropDownList ID="ddlItemList" runat="server" ></asp:DropDownList>
</div>

这是本示例中使用的表

CREATE TABLE Tabs (TabID varchar(50) ,TabName varchar(50),Remarks varchar(50) )
Create Table RolePermission (PermissionID varchar(50),
             RoleID varchar(50),TabID varchar(50),Show Varchar(50))
Create Table UserRole (UserRoleID Varchar(50),UserID Varchar(50),RoleID Varchar(50))
Create Table Roles (RoleID Varchar(50),RoleName Varchar(50),Remarks Varchar(50))
Create Table Users (UserID varchar(50),Username varchar(50),Password(10))

这是用于获取选项卡的 SQL 函数

ALTER FUNCTION [dbo].[GetRoleTabs] 
( 
    @UserID varchar(20)
)
RETURNS TABLE 
AS
RETURN 
(
    Select A.TabID,A.TabName from Tabs A,RolePermission B, 
      UserRole C where A.TabID=B.TabID and b.RoleID=C.RoleID AND B.Show=1
    AND C.UserID=@UserID
)

在数据库中创建上述表和函数，并在这些表中输入一些值。

注意：在所有表中，第一列都被视为主键。不要忘记在 web.config 文件中更改数据库名称。

关注点

通过遵循此示例，您可以轻松地在另一个下拉列表的 change 事件中绑定下拉列表。此外，我还在 Click 事件中包含另一个功能，以便您可以绑定 Repeater 而无需页面回发。