ASP.NET MVC + Jquery 实现Ajax下拉框数据三级联动

ASP.NET MVC 使用Jquery Ajax实现登录 视图[Views]  --   Login.cshtml 页面 Ajax Login @*生成防伪标记*@ @Html.AntiForgeryToken() 用户名: 阅读详情

这是第一使用Jquery实现城市三级数据联动的实例!之前本人没有使用过Jquery,在WebForm的开发过程中,很多时候用的是ASP.NET Ajax,ajaxPro +JavaScript,从未使用过JS框架,最近在学习ASP.NET MVC,在最新的发布版本中,已经集成了Jquery 1.3.1,自然,也要学一学!发现使用Jquery代码果然写得比原始JS优雅!只是语法和方法太多,现在还没弄熟,还需要时间来学习.....这次是第一次使用Jquery写客户端脚本,如果大家发现更好的实现方法,请给我留言!谢谢!

注明:ASP.NET MVC 1.0 ,作者:0x001;

View :

<script type="text/javascript">
    $(document).ready(function() {
        GetByJquery();
        $("#ddlProvince").change(function() { GetCity() });
        $("#ddlCity").change(function() { GetDistrict() });
    });
   
    function GetByJquery() {

        $("#ddlProvince").empty(); //清空省份SELECT控件

        $.getJSON("/ajax/GetProvinceList", function(data) {
            $.each(data, function(i, item) {
                $("<option></option>")
                    .val(item["ProvinceID"])
                    .text(item["ProvinceName"])
                    .appendTo($("#ddlProvince"));
            });
            GetCity();
        });     

    }

    function GetCity() {

        $("#ddlCity").empty(); //清空城市SELECT控件
        var url ="/ajax/GetCityList/" + $("#ddlProvince").val();
        $.getJSON(url, function(data) {
            $.each(data, function(i, item) {
                $("<option></option>")
                    .val(item["CityID"])
                    .text(item["CityName"])
                    .appendTo($("#ddlCity"));
            });
            GetDistrict();
        });
    }

    function GetDistrict() {
        $("#ddlDistrict").empty(); //清空市区SELECT控件
        var url = "/ajax/GetDistrictList/" + $("#ddlCity").val();
       
        $.getJSON(url, function(data) {
            $.each(data, function(i, item) {
                $("<option></option>")
                    .val(item["DistrictID"])
                    .text(item["DistrictName"])
                    .appendTo($("#ddlDistrict"));
            });
        });
    }

</script>
<table><tr><td><select id="ddlProvince"/></td><td><select id="ddlCity"/></td><td><select id="ddlDistrict" /></td></tr></table>

Controller :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;

namespace MvcBBS.Controllers
{
    public class AjaxController : Controller
    {
        //
        // GET: /Ajax/

        /// <summary>
        /// 获取所有[省份]数据
        /// </summary>
        public ActionResult GetProvinceList()
        {
            if (!Request.IsAjaxRequest())
            {
                return Content("请不要非法方法,这是不道德的行为!");
            }

            BLL.Province bll = new MvcBBS.BLL.Province();
            List<MvcBBS.Model.S_Province> modellist = bll.GetProvinceList();

            return Json(modellist);
        }

        /// <summary>
        /// 获取某[省份]的所有[城市]数据
        /// </summary>
        public ActionResult GetCityList(int id)
        {
            if (!Request.IsAjaxRequest())
            {
                return Content("请不要非法方法,这是不道德的行为!");
            }
            BLL.Province bll = new MvcBBS.BLL.Province();
            List<MvcBBS.Model.S_City> modellist = bll.GetCityList(id);
            return Json(modellist);
        }

        /// <summary>
        /// 获取某[城市]的所有[市区]数据
        /// </summary>
        public ActionResult GetDistrictList(int id)
        {
            if (!Request.IsAjaxRequest())
            {
                return Content("请不要非法方法,这是不道德的行为!");
            }

            BLL.Province bll = new MvcBBS.BLL.Province();
            List<MvcBBS.Model.S_District> modellist = bll.GetDistrict(id);

            return Json(modellist);
        }

    }
}

我比较喜欢使用三层+工厂模式来读写数据,O/R Mapping不太适合我的要求!我们写的项目经常不是为了方便移植,而是选择明确的数据库,需要更高的性能,更强的业务逻辑!大家看到上面的代码,应该很熟悉,从数据库读数据到List<>中返回,并使有ASP.NET MVC内置的Json方法转换数据并Response.

DAL :    

// BLL,Model就不贴出来了!

using System;
using System.Data;
using System.Text;
using System.Data.SqlClient;
using System.Collections.Generic;
using DBUtility;//请先添加引用

namespace MvcBBS.DAL
{
    public class Province
    {
        public Province()
        {}

        /// <summary>
        /// 获取所有省份数据
        /// </summary>
        /// <returns></returns>
        public List<Model.S_Province> GetProvinceList()
        {
            StringBuilder strSql = new StringBuilder();
            strSql.Append("SELECT ProvinceID,ProvinceName ");
            strSql.Append(" FROM S_Province ");
            List<Model.S_Province> modelList = new List<MvcBBS.Model.S_Province>();
            SqlDataReader dr = DbHelperSQL.ExecuteReader(strSql.ToString());           
            while (dr.Read())
            {
                 Model.S_Province _model = new MvcBBS.Model.S_Province();
                 _model.ProvinceID = int.Parse(dr["ProvinceID"].ToString());
                 _model.ProvinceName = dr.GetString(1);
                modelList.Add(_model);
            }
            dr.Close();
            return modelList;
        }

        /// <summary>
        /// 获取某省份的所有城市数据
        /// </summary>
        /// <param name="ProvinceID"></param>
        /// <returns></returns>
        public List<Model.S_City> GetCityList(int ProvinceID)
        {
            StringBuilder strSql = new StringBuilder();
            strSql.Append("SELECT CityID,CityName,ZipCode");
            strSql.Append(" FROM S_City ");
            strSql.Append(" WHERE ProvinceID=");
            strSql.Append(ProvinceID.ToString());

            List<Model.S_City> modelList = new List<MvcBBS.Model.S_City>();
            SqlDataReader dr = DbHelperSQL.ExecuteReader(strSql.ToString());
            while (dr.Read())
            {
                Model.S_City _model = new MvcBBS.Model.S_City();
                _model.CityID = int.Parse(dr["CityID"].ToString());
                _model.CityName = dr.GetString(1);
                _model.ZipCode = dr.GetString(2);
                _model.ProvinceID = ProvinceID;
                modelList.Add(_model);
            }
            dr.Close();
            return modelList;
        }

        /// <summary>
        /// 获取某城市的所有市区
        /// </summary>
        /// <param name="CityID"></param>
        /// <returns></returns>
        public List<Model.S_District> GetDistrict(int CityID)
        {
            StringBuilder strSql = new StringBuilder();
            strSql.Append("SELECT DistrictID,DistrictName");
            strSql.Append(" FROM S_District ");
            strSql.Append(" WHERE CityID=");
            strSql.Append(CityID.ToString());

            List<Model.S_District> modelList = new List<MvcBBS.Model.S_District>();
            SqlDataReader dr = DbHelperSQL.ExecuteReader(strSql.ToString());
            while (dr.Read())
            {
                Model.S_District _model = new MvcBBS.Model.S_District();
                _model.DistrictID = int.Parse(dr["DistrictID"].ToString());
                _model.DistrictName = dr.GetString(1);
                _model.CityID = CityID;
                modelList.Add(_model);
            }
            dr.Close();
            return modelList;
        }
    }
}

Asp.Net MVC WebAPI的创建与前台Jquery ajax后台HttpClient调用详解 1、什么是WebApi,它有什么用途? Web API是一个比较宽泛的概念。这里我们提到Web API特指ASP.NET MVC Web API。在新出的MVC中,增加了WebAPI,用于提供REST风格的WebService,新生成的WebAPI项目和典型的MVC项目一样,包含主要的Models、Views、Controllers等文件夹和Global.asax文件。Vie... 阅读详情

相关推荐

实现jquery.ajax向ASP.NET MVC Action的参数传递

本文还有配套的精品资源,点击获取 简介:jQuery的ajax方法允许在不刷新页面的情况下与服务器进行数据交互,是提升Web用户体验的关键技术。本文深入讲解了如何通过ajax方法向ASP.NET MVC框架中的Action传递参数。文章从ajax方法的结构开始,详细说明了如何设置URL、请求类型、发送数据、期望返回的数据类型以及成功和错误处理函数。同时,还介绍了conten...

weixin_42600128的博客 1137

Jquery实现城市三级数据联动的实例

这是第一使用Jquery实现城市三级数据联动的实例!之前本人没有使用过Jquery,在WebForm的开发过程中,很多时候用的是ASP.NET Ajax,ajaxPro +JavaScript,从未使用过JS框架,最近在学习ASP.NET MVC,在最新的发布版本中,已经集成了Jquery 1.3.1,自然,也要学一学!发现使用Jquery代码果然写得比原始JS优雅!只是语法和方法太多,现在还没弄

zhongjie的专栏 1816

基于Js与SqlServer的三级联动省市区实现

ASP.NET MVC 是一个轻量级的,可测试的 Web 开发框架,它将 Web 应用分成模型(Model)、视图(View)和控制器(Controller)三个主要部分,每个部分处理应用程序的不同方面。MVC 模式促进了关注点的分离,代码更加模块化,并有助于并行开发。模型(Model): 模型负责定义数据结构,并处理与数据库的交互。在 MVC 中,模型通常包括数据访问逻辑和业务逻辑。视图(View): 视图负责显示数据(模型)和响应用户交互。视图是呈现给用户的用户界面部分。

weixin_34438187的博客 440

asp.net MVC 下拉多级联动及编辑

多级联动实现,附源码。当前,部分代码是参与博客园其它网友。 新增,前台代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 ...

weixin_30374009的博客 319

asp省市区3级联动 asp+ajax三级联动

完整的 带数据库 很好用 asp省市区3级联动 asp+ajax三级联动

mvc4实现二级联动

简单的省市选择,实现二级,三级联动.Models,View,Controller,简单容易理解

asp.net 使用jquery 和ajax 实现三级联动

前台: #Select1 { height: 21px; width: 95px; } #Select2 { height: 21px; width: 90px; }

张海涛 3755

用废旧汽车电池DIY家用UPS:手把手教你低成本搭建Wi-Fi不断电系统

本文详细介绍了如何利用废旧汽车电池DIY低成本家用UPS系统,确保Wi-Fi设备在断电时持续供电。通过精选材料、电路搭建和安全防护,实现高效稳定的电源转换与智能切换,成本仅为市售UPS的三分之一。特别适合家庭办公和远程工作者提升网络供电可靠性。

weixin_29200485的博客 468

asp.net MVC4——省市三级联动

转载注明出处:http://www.cnblogs.com/breakman/p/5501971.html controller: public ActionResult GetCity(string id) { AreaService _areaSvc = new AreaService(); List&l...

diaoluoqu7450的博客 598

【高级-RAG-优化方法】

本文介绍了两种优化RAG(检索增强生成)系统的高级方法。第一部分介绍KnowFlow项目,它采用父子分块技术,将文档分为父分块(800-1500字符)和子分块(200-400字符),通过精确匹配子分块再返回父分块内容来保证搜索精确性和上下文完整性。第二部分探讨Milvus的多种增强技术,包括查询增强(如假设问题生成、回溯提示)、索引增强(自动合并块、分层索引)、检索器增强(句子窗口检索、元数据过滤)、生成器增强(提示压缩、块排序)以及管道增强(自我反省、代理查询路由)。这些方法共同提升了RAG系统的检索效率

weixin_48585108的博客 960

鱼眼相机矫正实战:除了棋盘格,试试横向展开和经纬度法(OpenCV4/C++实现对比)

本文对比了鱼眼相机矫正的三种主流方法:棋盘格标定法、横向展开法和经纬度法,通过OpenCV4/C++实战代码解析,帮助开发者在自动驾驶、VR全景拼接和安防监控等场景中选择最适合的技术方案。重点分析了各方法的精度、处理速度和适用场景,为工程实践提供实用指导。

weixin_29032489的博客 284

怎么用ajax实现3级联动,三级联动-使用Jquery实现城市三级数据联动的实例

《三级联动-使用Jquery实现城市三级数据联动的实例》由会员分享,可在线阅读,更多相关《三级联动-使用Jquery实现城市三级数据联动的实例(5页珍藏版)》请在人人文库网上搜索。1、三级联动 使用 Jquery 实现城市三级数据联动的实例 .txt21 春暖花会开! 如果你曾经历过冬 天,那么你就会有春色!如果你有着信念,那么春天一定会遥远;如果你正在付出,那么总 有一天你会拥有花开满圆。使用 ...

weixin_39622562的博客 487

基于云平台的ATS系统微服务架构方案研究

在当前智慧地铁的升级转型过程中,城市轨道交通ATS系统面临着稳定性差、运维方 式繁琐和故障应急处理效率低等问题。为此,提出一种基于云平台的ATS系统微服务架构方案; 研究了ATS系统在云平台上的微服务总体架构、ATS应用的微服务划分和设计、容器部署方式 及通信交互模式,可实现系统松耦合和易扩展,达到节约计算资源、提高系统稳定性和运营效 率的目的

mi_lan1的博客 966

Asp.NET误人子弟教程:在MVC里面结合JQ实现AJAX

声明:本教程是误人子弟的,如果你想成为高手,那千万不要往下读。 在ASP.NET 的WebForm中,你可能发现实现AJAX很简单,因为.NET类库都为你准备好了UpdatePanel控件,用该控件来实现AJAX就等于一行代码都不用写。 然而,在MVC里面,几乎所有的服务器控件都失效了,那怎么办呢?用传统的JS代码的话又会很复杂,呵呵,放心,别忘了,当下jQuery是很流行的,做WEB开发自然

老周——“易之道” 3571

智能体在车联网中的应用:第9天 核心工具链与仿真世界:SUMO交通仿真入门——从安装到构建你的第一个虚拟十字路口

摘要 SUMO是一款开源微观交通仿真工具,为车联网和自动驾驶算法开发提供高效安全的测试环境。文章详细介绍了SUMO的核心概念、安装方法及实战应用。在Ubuntu或Windows系统安装SUMO后,可通过netedit工具构建十字路口路网,包括创建节点、连接边、设置交通信号灯等步骤。随后通过编写.rou.xml文件定义车辆类型、路线和车流,实现动态交通场景模拟。SUMO支持与外部程序交互,能复现真实场景、进行极端测试和算法验证,是车联网研究的理想数字沙盘。

IT深耕十余载,大道之简 1454

【OpenClaw企业级智能体实战】第27篇:Skill生态运营——企业私有Skill商店的搭建与审核机制

2026年ClawHavoc供应链攻击事件曝光超1200个恶意Skill渗透公共技能市场,工信部明确要求企业审慎使用第三方技能包并严格审查代码。本文基于真实安全事件与行业实践,完整讲解企业私有Skill商店从0到1搭建方案,覆盖小团队极简GitLab私有仓库、中大型企业Nacos 3.2私有Registry两种主流架构,配套企业级安全审核四步法、静态代码扫描规则、CI/CD自动化审计、数字签名校验与版本生命周期管理。

专注于人工智能、软件开发、工控自动化、工厂数字化及智能化等领域,希望和大家共同进步! 501

ASP.NET MVC 实现 AJAX 跨域请求

ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新。但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google。     在ASP.NET MVC 框架里实现跨域的AJAX请求有几种方式可以实现,以下就介绍常用的两种方法。 1.     发送JSONP 请求 客户端: JQ

skyandcode的专栏 1万+

基于STM32的多功能旅行箱_329

随着智能硬件技术的不断发展,智能化产品逐渐渗透到日常生活的各个领域。旅行箱作为出行必需的工具,其传统功能已无法满足现代用户的需求,尤其是在安全性、便捷性和智能交互方面。为了解决这一问题,本设计基于STM32单片机开发了一款多功能智能旅行箱,集成了移动防盗报警、语音寻箱、GPS定位、称重检测、手势控制和蓝牙通信等多项功能。通过STM32F103RCT6主控芯片与HC-05蓝牙模块进行通信,结合海凌科V20语音识别模块、ATGM336H-5N GPS模块和HX711称重模块,提供了全方位的智能化体验。

484

Jquery ajax与asp.net MVC前后端各种交互

1.Jquery通过ajaxSubmit提交表单 if (jQuery("#Edit_from").validate().form()) { jQuery("#Edit_from").ajaxSubmit(function (res) { if (res > 0) { layer.msg('提交成功!', { icon: 1 }); ...

枫叶轻翔的博客 1022

chembl_webresource_client 包数据接口下载chembl数据库;ZINC数据库下载、simles获取

点击进去https://zinc.docking.org/subclasses/kinase/predictions/,然后下载sdf模式,这里可以转化simles格式,如果下载csv里面没有包含simles。参考:https://github.com/chembl/chembl_webresource_client/blob/master/demo_wrc.ipynb。参考:https://zinc.docking.org/这是网页搜索查看,16条数据。这个数据这下载特别慢。

weixin_42357472的博客 3052

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

asp ajax局部刷新,ASP.Net用jQuery ajax实现页面局部刷新

刚开始的时候使用asp的updatepanel控件实现局部刷新,而且在本地运行正确,但是部署到服务器上就变成整个页面全部刷新了。服务器用的是Windows server2000,本地机子上用的是win7,没有找到解决办法,最后改用ajax实现,本地和服务器都完美实现局部刷新效果。前台代码:$(".textBox").change(function () {var companyName;compa...

weixin_40006763的博客 1062

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

上一篇: @Html.DropDownList 联动
下一篇: EntityValidationErrors的解决方法
王三水
博客等级 码龄17年 2粉丝 8原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值