无刷新二级下拉菜单联动

使用VS2005+ACCESS实现

首先数据库的只有一张表，内容如下：

解决方案目录，如下图：

各文件的源码如下：

CascadeHandler.ashx源码如下：

代码

<%@ WebHandler Language="C#" Class="CascadeHandler" %>
using System;
using System.Web;
using System.Configuration;
using System.Data;
using System.Data.OleDb;

public class CascadeHandler : IHttpHandler {
private const string SQL_GET_CUSTOMER_BY_COMANYID = "SELECT CUSTOMER_ID,CUSTOMER_NAME FROM CUSTOMER WHERE COMPANY_ID=@COMPANY_ID ORDER BY CUSTOMER_ID";

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        if (context.Request["id"].Trim().Length <= 0)
        {
            return;
        }

        System.Text.StringBuilder sb = new System.Text.StringBuilder("[");
        using (OleDbConnection oleCon = new OleDbConnection(ConfigurationManager.ConnectionStrings["cascade"].ConnectionString))
        {
            OleDbCommand cmd = new OleDbCommand(SQL_GET_CUSTOMER_BY_COMANYID, oleCon);
            cmd.Parameters.AddWithValue("@COMPANY_ID", context.Request["id"]);
            cmd.Connection.Open();
            OleDbDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
            while (dr.Read())
            {
                sb.Append("{");
                sb.AppendFormat("'id':'{0}','name':'{1}'", dr.GetInt32(0).ToString(), dr.GetString(1));
                sb.Append("},");
            }
        }
        sb.Replace(',', ']', sb.Length - 1, 1);
        context.Response.Write(sb);
    }

    public bool IsReusable {
        get {
            return false;
        }
    }
}

Default.aspx源码：

代码

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />

    <title>无刷新联动下拉菜单</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#ddlCompany").change(function(){
                //alert('id='+$("#ddlCompany").val());
                $.ajax({
                    type:'GET',
                    url:'CascadeHandler.ashx',
                    data:'id='+$("#ddlCompany").val(),
                    dataType:'text',
                    success:function(data){
                        removeOption();
                        var jsonObj=eval(data);
                        $(jsonObj).each(function(i){
                            appendOption(jsonObj[i].id,jsonObj[i].name);
                        });
                    }
                });
            });
        });

        function removeOption()
        {
            $("#ddlCustomer option").not(":first").remove();
        }

        function appendOption(value,text)
        {
            $("#ddlCustomer").append("<option value='"+value+"'>"+text+"</option>");
        }
    </script>
</head>
<body>
    <h3>使用AJAX、Jquery及HttpHandler实现无刷新二级下拉菜单联动</h3>
    <hr />
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>公司名称：</td>
                <td>
                    <asp:DropDownList ID="ddlCompany" runat="server" AppendDataBoundItems="True" DataTextField="COMPANY_NAME" DataValueField="COMPANY_ID">
                        <asp:ListItem Value="">请选择公司名称</asp:ListItem>
                    </asp:DropDownList></td>
            </tr>
            <tr>
                <td>客户名称：</td>
                <td>
                    <asp:DropDownList ID="ddlCustomer" runat="server" AppendDataBoundItems="True">
                        <asp:ListItem>请选择客户名称</asp:ListItem>
                    </asp:DropDownList></td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Default.aspx.cs 源码：

代码

using System;
using System.Data;
using System.Configuration;
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 System.Data.OleDb;

public partial class _Default : System.Web.UI.Page
{
    private const string SQL_GET_COMPANY = "SELECT DISTINCT COMPANY_NAME,COMPANY_ID FROM CUSTOMER ORDER BY COMPANY_ID";

    protected void Page_Load(object sender, EventArgs e)
    {
        using (OleDbConnection oleCon = new OleDbConnection(ConfigurationManager.ConnectionStrings["cascade"].ConnectionString))
        {
            OleDbCommand cmd = new OleDbCommand(SQL_GET_COMPANY, oleCon);
            cmd.Connection.Open();
            ddlCompany.DataSource = cmd.ExecuteReader();
            ddlCompany.DataBind();
        }
    }
}

运行效果图：

posted @ 2010-05-02 15:34 sandals 阅读(560) 评论(0) 收藏举报

刷新页面返回顶部

sandals

无刷新二级下拉菜单联动

公告