AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2011-11-25 927
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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();
        }
    }
}




文章标签：
JavaScript
C#
.NET
前端开发
数据格式
JSON
开发框架
关键词：
ajax数据
.NET数据
jQuery ajax
.NET数据操作
ajax jquery
暖枫无敌
目录
相关文章
游客tsrksm3mlhq4y
|
9月前
|
XML JSON 前端开发
ajax中get和post的区别，datatype返回的数据类型有哪些？web开发中数据提交的几种方式，有什么区别。
ajax的讲解
游客tsrksm3mlhq4y
497 0
东方睿赢
|
SQL 开发框架 数据库
".NET开发者的超能力：AgileEAS.NET ORM带你穿越数据库的迷宫，让数据操作变得轻松又神奇！"
【8月更文挑战第16天】AgileEAS.NET是面向.NET平台的企业应用开发框架，核心功能包括数据关系映射（ORM），允许以面向对象方式操作数据库，无需编写复杂SQL。通过继承`AgileEAS.Data.Entity`创建实体类对应数据库表，利用ORM简化数据访问层编码。支持基本的CRUD操作及复杂查询如条件筛选、排序和分页，并可通过导航属性实现多表关联。此外，提供了事务管理功能确保数据一致性。AgileEAS.NET的ORM简化了数据库操作，提升了开发效率和代码可维护性。
东方睿赢
126 5
小白学大数据
|
10月前
|
Web App开发 数据采集 前端开发
Python + Chrome 爬虫：如何抓取 AJAX 动态加载数据？
Python + Chrome 爬虫：如何抓取 AJAX 动态加载数据？
小白学大数据
463 2
杨校
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校
196 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
众所周知
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言，处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言，处理数据和业务逻辑；Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例，如实时数据更新、表单验证与提交、动态加载内容等。同时，针对跨域问题、数据安全与性能优化提出了建议。总结指出，PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
众所周知
320 3
东方睿赢
|
SQL 开发框架 数据库
".NET开发者的超能力：AgileEAS.NET ORM带你穿越数据库的迷宫，让数据操作变得轻松又神奇！"
【9月更文挑战第1天】3
东方睿赢
162 6
jianz123
|
JSON 前端开发 数据格式
layui 穿梭框transfer组件 数据data用ajax来获取
layui 穿梭框transfer组件 数据data用ajax来获取
jianz123
571 2
bruce_xiaowei
|
Web App开发 前端开发 JavaScript
Python编程—Ajax数据爬取（一）
Python编程—Ajax数据爬取（一）
bruce_xiaowei
257 0
bruce_xiaowei
|
前端开发 NoSQL MongoDB
Python编程—Ajax数据爬取（二）
Python编程—Ajax数据爬取（二）
bruce_xiaowei
351 0
代码掌控者
|
开发框架 .NET 数据库连接
闲话 Asp.Net Core 数据校验（三）EF Core 集成 FluentValidation 校验数据例子
闲话 Asp.Net Core 数据校验（三）EF Core 集成 FluentValidation 校验数据例子
代码掌控者
246 1

热门文章

最新文章

  • 1
    使用 MEF 公开 Silverlight“.NET研究” MVVM 应用程序中的接口
  • 2
    [.NET 3.x新特性四]LinQ查询语法
  • 3
    vs2010查看quartz.net 2.1.2的源码时其中一报错的解决方法
  • 4
    【福州活动】| "福州首届.NET开源社区线下技术交流会"(2018.11.10)
  • 5
    .Net-using-Class：MemoryCache 类
  • 6
    一起谈.NET技术，C#面向对象设计模式纵横谈：Singleton 单件
  • 7
    一起谈.NET技术，概括ADO.NET数据库连接的所有形式(基础）
  • 8
    C#.NET com组件的编写
  • 9
    .Net——实现IConfigurationSectionHandler接口定义处理程序处理自定义节点
  • 10
    运用C#创建一个.Net下的Web Service
  • 1
    ASP.NET Core Blazor 路由配置和导航
    324
  • 2
    精选HTML、JavaScript、ASP代码片段集锦
    203
  • 3
    ASP.NET Core 中的速率限制中间件
    303
  • 4
    C#进阶-ASP.NET WebForms调用ASMX的WebService接口
    819
  • 5
    简化 ASP.NET Core 依赖注入（DI）注册-Scrutor
    338
  • 6
    GraphQL 与 ASP.NET Core 集成：从入门到精通
    376
  • 7
    ASP.NET Web Pages - 添加 Razor 代码
    191
  • 8
    ASP.NET Web Pages - 教程
    403
  • 9
    驾驭Autofac，ASP.NET WebApi实现依赖注入详细步骤总结
    543
  • 10
    在 ASP.NET Core 中创建 gRPC 客户端和服务器
    299

    • 相关课程

    更多
  • Ajax 前端开发入门与实战
  • jQuery开发教程
  • Ajax入门

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    【DataEase】零代码数据可视化分析工具的安装部署保姆级教程