asp.net jquery ajax数据操作 DropDownList级联

简介: 1、定义一个类 CityCounty.cs文件,如下:using System;using System.

1、定义一个类 CityCounty.cs文件,如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Runtime.Serialization;

/// <summary>
///CityCounty 的摘要说明
/// </summary>
[DataContract]
public class CityCounty
{
    [DataMember]
    private int menu_ID;
    public int Menu_ID
    {
        get { return menu_ID; }
        set { menu_ID = value; }
    }

    [DataMember]
    private string menu_Name;
    public string Menu_Name
    {
        get { return menu_Name; }
        set { menu_Name = value; }
    }
}

2、定义一个Json处理类,ToJson.cs文件,如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Runtime.Serialization.Json;
using System.IO;

/// <summary>
///JsonHelper 的摘要说明
/// </summary>
public static class JsonHelper
{
    //转换为Json格式输出
    public static string ToJson(this object obj)
    {
        DataContractJsonSerializer serializer = new DataContractJsonSerializer(obj.GetType());
        Stream stream = new MemoryStream();
        serializer.WriteObject(stream, obj);
        stream.Position = 0;
        StreamReader streamReader = new StreamReader(stream);
        return streamReader.ReadToEnd();
    }
}

3、定义Default4.aspx及Default4.aspx.cs文件,如下:

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

<!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">
    <title></title>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $(function () {
            $("#DropDownList1").change(function () {
                $.ajax({
                    url: "Default5.aspx?id=" + $(this).val(),
                    data: null,
                    dataType: "json",
                    success: function (data) {
                        $("#DropDownList2").empty();
                        //第一种方法
                        //for (var i = 0; i < data.length; i++) {
                        //$("<option value='" + data[i]["menu_ID"] + "'>" + data[i]["menu_Name"] + "</option>").appendTo("#DropDownList2");
                        //}
                        //第二种方法  用下面的方法也能够循环输出 .each方法
                        $.each(data, function (i) {
                            $("<option value='" + data[i]["menu_ID"] + "'>" + data[i]["menu_Name"] + "</option>").appendTo("#DropDownList2");
                        })
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div>
            <asp:Label ID="lblone" runat="server" Text="市" />
            <asp:DropDownList ID="DropDownList1" runat="server">
            </asp:DropDownList>
            <asp:Label ID="lbltwo" runat="server" Text="县" />
            <asp:DropDownList ID="DropDownList2" runat="server">
                <asp:ListItem Text="--请选择市--" Value="1"></asp:ListItem>
            </asp:DropDownList>
        </div>
    </div>
    </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using USTC;
using System.Data;

public partial class Default4 : System.Web.UI.Page
{
    DM dm = new DM();
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            string strSQL = "select * from UDS_Menu where Menu_ID like '%____00%'";
            DataSet ds = dm.getsql(strSQL);
            this.DropDownList1.DataSource = ds;
            this.DropDownList1.DataTextField = "Menu_Name";
            this.DropDownList1.DataValueField = "Menu_ID";
            this.DropDownList1.DataBind();
            this.DropDownList1.Items.Insert(0,"--请选择城市--");
        }
    }
}


4、定义Default5.aspx及Default5.aspx.cs文件,如下:

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

<!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">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using USTC;
using System.Data;

public partial class TEST_Default5 : System.Web.UI.Page
{
    DM dm = new DM();
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            IList<CityCounty> list = new List<CityCounty>();
            string id = Request.QueryString["id"].ToString();
            string strSQL = "select Menu_ID,Menu_Name from UDS_Menu where Super_Menu_ID=" + int.Parse(id);
            DataSet ds = dm.getsql(strSQL);
            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {
                CityCounty c = new CityCounty();
                c.Menu_ID = Convert.ToInt32(ds.Tables[0].Rows[i]["Menu_ID"].ToString());
                c.Menu_Name = ds.Tables[0].Rows[i]["Menu_Name"].ToString();
                list.Add(c);
            }
            Response.Write(list.ToJson());
            Response.End();
        }
    }
}




相关文章
|
7月前
|
网络协议 定位技术 网络安全
IPIP.NET-IP地理位置数据
IPIP.NET 是一家专注于 IP 地理位置数据的提供商,基于 BGP/ASN 数据与全球 800+ 网络监测点技术,提供高精度的 IPv4 和 IPv6 定位服务。其核心服务包括地理位置查询、详细地理信息和网络工具等,广泛应用于网络安全、广告营销、CDN 优化等领域。数据覆盖全球,支持多语言,每日更新确保实时性。IPIP.NET 提供 API 接口、离线数据库及多种语言 SDK,方便开发者集成使用。
1270 0
|
SQL XML 关系型数据库
入门指南:利用NHibernate简化.NET应用程序的数据访问
【10月更文挑战第13天】NHibernate是一个面向.NET的开源对象关系映射(ORM)工具,它提供了从数据库表到应用程序中的对象之间的映射。通过使用NHibernate,开发者可以专注于业务逻辑和领域模型的设计,而无需直接编写复杂的SQL语句来处理数据持久化问题。NHibernate支持多种数据库,并且具有高度的灵活性和可扩展性。
303 2
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
579 1
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
128 1
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
105 1
|
开发框架 .NET 数据库连接
闲话 Asp.Net Core 数据校验(三)EF Core 集成 FluentValidation 校验数据例子
闲话 Asp.Net Core 数据校验(三)EF Core 集成 FluentValidation 校验数据例子
214 1
|
开发框架 前端开发 算法
分享 .NET EF6 查询并返回树形结构数据的 2 个思路和具体实现方法
分享 .NET EF6 查询并返回树形结构数据的 2 个思路和具体实现方法
216 0
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
141 0