JQuery+Ajax实战三级下拉列表联动（八）

本片文章为练习，项目中不会这样写：

一：涉及到的知识点：

jQuery Dom操作

jQuery Ajax操作

ASP.net中的json操作

二：用了自动代码生成器

1.Dal层的代码：

public static partial class BranchTwoService

	{

        /// <summary>

        /// 根据一级机构的ID得二级机构列表

        /// </summary>

        /// <param name="branchOneId">1级机构ID</param>

        /// <returns></returns>

        public static IList<BranchTwo> GetBranchTwoByBranchOneId(int branchOneId)

        {

            string strsql = "select * from BranchTwo where BranchOneNo=" + branchOneId;

            return GetBranchTwosBySql(strsql);

        }

	}

public static partial class BranchThirdService

	{

        /// <summary>

        /// 根据二级机构的ID得三级机构列表

        /// </summary>

        /// <param name="branchTwoId">2级机构ID</param>

        /// <returns></returns>

        public static IList<BranchThird> GetBranchThirdByBranchTwoId(int branchTwoId)

        {

            string strsql = "select * from BranchThird where BranchTwoNo=" + branchTwoId;

            return GetBranchThirdsBySql(strsql);

        }

	}

2.BLL层的代码：

   public static partial class BranchTwoManager

    {

        /// <summary>

        /// 根据一级机构的ID得二级机构列表

        /// </summary>

        /// <param name="branchOneId">1级机构ID</param>

        /// <returns></returns>

        public static IList<BranchTwo> GetBranchTwoByBranchOneId(int branchOneId)

        {

            return DAL.BranchTwoService.GetBranchTwoByBranchOneId(branchOneId);

        }

    }

 public static partial class BranchThirdManager

    {

        /// <summary>

        /// 根据二级机构的ID得三级机构列表

        /// </summary>

        /// <param name="branchTwoId">2级机构ID</param>

        /// <returns></returns>

        public static IList<BranchThird> GetBranchThirdByBranchTwoId(int branchTwoId)

        {

            return DAL.BranchThirdService.GetBranchThirdByBranchTwoId(branchTwoId);

        }

    }

UI层的代码：

 protected void Page_Load(object sender, EventArgs e)

    {

        IList<Models.BranchOne> branchOnes = BLL.BranchOneManager.GetAllBranchOnes();

        string json = JsonHelper.Serialize(branchOnes);

        Response.Write(json);

    }

 protected void Page_Load(object sender, EventArgs e)

    {

        if (Request["branchoneid"] != null)

        {

            int branchoneId = int.Parse(Request.QueryString["branchoneid"]);

            IList<Models.BranchTwo> branchTwos = BLL.BranchTwoManager.GetBranchTwoByBranchOneId(branchoneId);

            Response.Write(JsonHelper.Serialize(branchTwos));

        }

    }

public partial class BranchThirdHandler : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if (Request["branchtwoid"] != null)

        {

            int branchtwoId = int.Parse(Request.QueryString["branchtwoid"]);

            IList<Models.BranchThird> branchThirds= BLL.BranchThirdManager.GetBranchThirdByBranchTwoId(branchtwoId);

            Response.Write(JsonHelper.Serialize(branchThirds));

        }

    }

}

JQuery代码：

%@ 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">

    <title>jQuery+Ajax实战三级下拉列表联动</title>

    <script src="Scripts/jquery-1.2.6.js" type="text/javascript"></script>

<%--    <script src="Scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script>

--%>    <script type="text/javascript">

            $(document).ready(function() {

                $("#divLoading").ajaxStart(function() { $(this).show(); })

                        .ajaxSuccess(function() { $(this).hide() })

                        .ajaxError(function() { $(this).html("数据加载失败!"); });

                $.getJSON("BranchOneHandler.aspx", function(data) {

                    var $cbxBranchOne = $("#cbxBranchOne");

                    $.each(data, function(i, json) {

                        var $option = $("<option/>").append(json.branchName).attr("value", json.id);

                        $cbxBranchOne.append($option);

                    });

                    $cbxBranchOne[0].selectedIndex = 0;

                    $cbxBranchOne.change(function() {

                        var $cbxBranchTwo = $("#cbxBranchTwo");

                        $cbxBranchTwo.empty(); //清空options

                        var branchoneId = $(this).attr("value");

                        if (branchoneId) {

                            $.getJSON("BranchTowHandler.aspx", { branchoneid: branchoneId }, function(data) {

                                $.each(data, function(i, json) {

                                    var $option = $("<option/>").append(json.branchName).attr("value", json.id);

                                    $cbxBranchTwo.append($option);

                                });

                            });

                        }

                        $cbxBranchTwo.change(function() {

                            var $cbxBranchThird = $("#cbxBranchThird");

                            $cbxBranchThird.empty();

                            var branchtowId = $(this).attr("value");

                            if (branchtowId) {

                                $.getJSON("BranchThirdHandler.aspx", { branchtwoid: branchtowId }, function(data) {

                                    $.each(data, function(i, json) {

                                        var $option = $("<option/>").append(json.branchName).attr("value", json.id);

                                        $cbxBranchThird.append($option);

                                    });

                                });

                            }

                        });

                    });

                });

            });

    </script>

</head>

<body style="text-align:center;padding-top:0px;">

<div id="divLoading" style="width:50px;height:20px;color;white;background-color:Green;text-align:center;padding-top:3px;position:absolute;top:0px;left:0px;display:none;">Loading...</div>

    <form id="form1" runat="server">

    <div style="padding-top:30px">

        <table id="tbBranch" style="width: 361px; border-left-color: #cc00ff; border-bottom-color: #cc00ff; border-top-style: solid; border-top-color: #cc00ff; border-right-style: solid; border-left-style: solid; border-right-color: #cc00ff; border-bottom-style: solid;" border="1">

            <tr>

                <td colspan="3" style="height: 21px; background-color: #cc00ff" align="center">

                    <span style="color: #ffffff"><strong>

                    jQuery+Ajax实战三级下拉列表联动</strong></span></td>

            </tr>

            <tr>

                <td style="width: 74px; background-color: #cc00ff; height: 38px;">

                    一级机构</td>

                <td colspan="2" style="width: 243px; height: 38px;">

                    <select id="cbxBranchOne" style="width: 171px">

                        <option selected="selected"></option>

                    </select></td>

            </tr>

            <tr>

                <td style="width: 74px; background-color: #cc00ff; height: 31px;">

                    二级机构</td>

                <td colspan="2" style="width: 243px; height: 31px;">

                    <select id="cbxBranchTwo" style="width: 171px">

                        <option selected="selected"></option>

                    </select>

                </td>

            </tr>

            <tr>

                <td style="width: 74px; background-color: #cc00ff; height: 29px;">

                    三级机构</td>

                <td colspan="2" style="width: 243px; height: 29px;">

                    <select id="cbxBranchThird" style="width: 171px">

                        <option selected="selected"></option>

                    </select>

                </td>

            </tr>

        </table>

    </div>

    </form>

</body>

</html>

用到的帮助类：

using System;

using System.Collections.Generic;

using System.Web;

using System.IO;

using System.Text;

/// <summary>

/// JSON序列化与反序列化辅助类

/// </summary>

public class JsonHelper

{

    /// <summary>

    /// 用于把对象data序列化为json格式的字符串

    /// </summary>

    /// <typeparam name="T"></typeparam>

    /// <param name="data"></param>

    /// <returns></returns>

    public static string Serialize<T>(T data)

    {

        System.Runtime.Serialization.Json.DataContractJsonSerializer serializer = new System.Runtime.Serialization.Json.DataContractJsonSerializer(data.GetType());

        using (MemoryStream ms = new MemoryStream())

        {

            serializer.WriteObject(ms, data);

            return Encoding.UTF8.GetString(ms.ToArray());

            //ms.Position = 0;

            //using (StreamReader sr = new StreamReader(ms))

            //{

            //    return sr.ReadToEnd();

            //}

        }

    }

    /// <summary>

    /// 用于把json格式的js对象反序列化为C#中的类

    /// </summary>

    /// <typeparam name="T"></typeparam>

    /// <param name="json"></param>

    /// <returns></returns>

    public static T Deserialize<T>(string json)

    {

        T obj = Activator.CreateInstance<T>();

        using (MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(json)))

        {

            System.Runtime.Serialization.Json.DataContractJsonSerializer serializer = new System.Runtime.Serialization.Json.DataContractJsonSerializer(obj.GetType());

            return (T)serializer.ReadObject(ms);

        }

    }

}

JQuery+Ajax实战三级下拉列表联动（八）的更多相关文章

jquery ajax实现省市二级联动
今天给大家带来使用jQuery ajax实现的省市联动效果.我们直奔主题,先说下实现思路: 准备数据这里数据库我使用的是mysql,先看下表格: provience表 city表这里使用provi ...
java结合jQuery.ajax实现左右菜单联动刷新列表内容
http://域名/一级菜单ID-二级菜单ID/ 用这种URL请求页面,出现如图所看到的内容: 该页面包括四部分,顶部文件夹+左側菜单+右側菜单+右下側数据列表. 左側菜单包括一级菜单和二级菜单,点击 ...
ASP.NET webform基于Jquery,AJAX的三级联动
主要html代码 <select id="province"> <option value="0">--请选择省份--</opti ...
用jQuery,ajax,实现三级联动封装JS的文件
// JavaScript Document $(document).ready(function(e) { //找到ID=SANJI的DIV,造三个下拉扔进去 var str = "< ...
Jquery ajax动态更新下拉列表的内容
$("#book_id").change(function(){ $book_id=$(this).children('option:selected').val(); //ale ...
用jquery ajax做的select菜单，选中的效果
//用server端语言赋值给js变量 var departmentId = '<%=提交的值 %>', deviceId='<%=提交的值 %>' $(fun ...
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...
AJAX部分---对比js做日期的下拉选择和 ajax做三级联动；
js做日期选择: 实现当前年份的前5后5年的日期选择实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变扩展功能:天数可以根据闰年平年变化 <body> & ...
ajax 实现三级联动
ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式比如 ...

随机推荐

JavaEE学习总结（十四）— 人工智能微博
一.数据库与表人工智能微博(blog) note(id,bt,nr);微博信息(编号,标题,内容) 列表添加数据库脚本 /* Navicat MySQL Data Transfer Source ...
Nginx 学习笔记（二）Web 服务启用 HTTP/2
个人网站提升为HTTP2.0协议,加速访问一.条件 1.openssl的版本必须在1.0.2e及以上 2.nginx的版本必须在1.9.5以上二.编译安装 1.openssl 编译安装 (1)开始 ...
luogu 1052 过河
神仙的博客,先copy了日后绝对删掉的,(因为我实在没耐心看懂啊..) 题解 step 1理解题意在做这道题之前,一定要理解好题意,有一个需要特别注意注意的地方: 青蛙不是一定要跳到石头上[嗯... ...
MySQL - 日常操作二备份还原
登录mysql的命令 # 格式: mysql -h 主机地址 -u 用户名 -p 用户密码 mysql -h 110. -P3306 -uroot -p mysql -uroot -p -S /dat ...
停靠窗口QDockWidget
停靠窗口QDockWidget要和QMainWindow一起搭配使用的样式: import sys from PyQt5.QtCore import Qt from PyQt5.QtWidgets ...
Java SE之String，字符串和子字符串的存储与区别
理解String 是怎么占用内存的来看一个每个String对象的各个属性,一个String包括如下的属性: 一个char数组(是个独立的对象用来存储字符串中的字符) 一个int 的off ...
列式数据库~clickhouse 数据同步使用
一简介:进一步了解clickhouse二数据操 1 单机建表 create TABLE aaa ( id UInt32, uid UInt32, amount Float64, ...
mysql 案例~ 分区表
一简介:今天来聊聊分区表的概念和维护二分区的优点: 1.提高查询性能:只需要搜索特定分区,而非整张表,提高了查询速度. 2.节约维护时间:单个分区的数据装载,索引重建,备份,维护远远小于整张表的 ...
composer设计原理与基本用法
原文地址:http://blog.turn.tw/?p=1039 COMPOSER進階原理:PHP命名空間與PSR-0 http://blog.turn.tw/?p=1122 Moving PHP ...
Linux 进程中 Stop, Park, Freeze【转】
转自:https://blog.csdn.net/yiyeguzhou100/article/details/53134743 http://kernel.meizu.com/linux-proces ...

JQuery+Ajax实战三级下拉列表联动（八）

JQuery+Ajax实战三级下拉列表联动（八）的更多相关文章

随机推荐

热门专题