MVC4 DropDownList省市联动

1、添加省份和城市类

//省份
    public class Province
    {
        public int Id { get; set; }

        public string Name { get; set; }
    }

    //城市
    public class City
    {
        public int Id { get; set; }

        public string Name { get;set;}

        public int ProvinceId { get; set; }
    }

2、添加控制器

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SupermarketManagement.Models;

namespace SupermarketManagement.Controllers
{
    public class LinkageController : Controller
    {

        List<Province> provinceList = new List<Province>();
        List<City> cityList = new List<City>();

        //初始化城市数据
        private void InitProvince()
        {
            provinceList.Add(new Province { Id = 1, Name = "河北省" });
            provinceList.Add(new Province { Id = 2, Name = "河南省" });
            provinceList.Add(new Province { Id = 3, Name = "广东省" });

            cityList.Add(new City { Id = 4, Name = "石家庄", ProvinceId = 1 });
            cityList.Add(new City { Id = 5, Name = "邢台", ProvinceId = 1 });
            cityList.Add(new City { Id = 6, Name = "保定", ProvinceId = 1 });

            cityList.Add(new City { Id = 7, Name = "郑州", ProvinceId = 2 });
            cityList.Add(new City { Id = 8, Name = "安阳", ProvinceId = 2 });
            cityList.Add(new City { Id = 9, Name = "洛阳", ProvinceId = 2 });

            cityList.Add(new City { Id = 10, Name = "广州", ProvinceId = 3 });
            cityList.Add(new City { Id = 11, Name = "中山", ProvinceId = 3 });
            cityList.Add(new City { Id = 12, Name = "佛山", ProvinceId = 3 });
        }

        //绑定省份
        public ActionResult Index()
        {
            InitProvince();
            var pEnumrable = provinceList.Select(p => new SelectListItem { Value = p.Id.ToString(), Text = p.Name });
            ViewBag.Province = pEnumrable;
            return View();
        }

        //获取城市
        public ActionResult ShowCity(int provinceId)
        {
            InitProvince();
            List<City> cList = new List<City>();
            cList = cityList.Where(c => c.ProvinceId == provinceId).ToList();

            return Json(cList, JsonRequestBehavior.AllowGet);
        }
    }

}

3、添加HTML

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Content/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            $("#Province").bind("change", function () {
                var selectProvince = $(this).val();

                //除了第一个都删除
                  $("#City option:not(:first)").remove();
                $.getJSON("@Url.Action("ShowCity","Linkage")", { provinceId: selectProvince }, function (data) {

                    $.each(data, function (i, item) {
                        $("#City").append("<option value=‘"+item.Id+"‘>"+item.Name+"</option>");
                    });
                });
            });
        });
    </script>
</head>
<body>

    省份:@Html.DropDownList("Province", "请选择省份")<br />
    城市:<select id="City">
        <option value="">请选择城市</option>
    </select><br />
</body>
</html>
时间: 2024-10-05 17:23:23

MVC4 DropDownList省市联动的相关文章

select省市联动选择城市 asp.net mvc4

本文在 http://www.cnblogs.com/darrenji/p/3606703.html(感谢博主的分享)基础上加入全国各省市,从文件中读取全国省市县,组成省市联动的选择标签 在Model里定义Province 和 City ? 1 2 3 4 5 6 7 8 9 10 11 12 13 public class Province {     public int ID { get; set; }     public string Name { get; set; } } publ

省市联动 js

工作中见到这个省市联动代码,虽然很简单也能写出来,还是随便把它记录下来. //省市联动 function area(obj_id, area_pId, data_call_back) { if (area_pId == -1) return; $.ajax({ type: 'GET', url: "/SysAdmin/Pages/tb_supplierAdd.aspx", data: { area_pId: area_pId }, dataType: 'json', success:

省市联动下拉菜单的实现

  省市联动下拉菜单的实现一.数据库的建立为了更好的实现与数据库连接,省表中需要有两个元素,一个是省编号,一个是省名称:市表中需要有三个元素,一个是市编号,一个是市名称,更重要的是这个市改隶属于那个省.省表(UserProvince)ProID    ProName1            河南2            安徽市表(UserCity)CityID    ProID    CityName1              1         郑州2              2     

自建List&lt;&gt;绑定ComboBox下拉框实现省市联动

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Data.SqlClient; namespace _04省市联动 { public partial cl

php省市联动实现

设计模式:ajax实现,数据库格式:id,name,parent_id 数据库: CREATE TABLE IF NOT EXISTS `city` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(30) DEFAULT NULL, `parent_id` int(11) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREME

fragment 中利用spinner实现省市联动

(1)布局文件就不在说明了,主要说代码的实现,先把代码贴上! package com.example.cl; import android.annotation.SuppressLint; import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import

jquery插件-省市联动

由于项目需要需要实现一个省市联动,由于业务有一些特殊的需求,使用现有的插件略有不便,就自己实现了一个. 首先需要保存地区数据的JS数据文件,我这里命名为areaData.js,内容如下: /** * 保存地区信息 * 数据格式 * areaData = [{'pro': '北京', 'cities': {'-1': '北京'}}, {...}] * 直辖市存在-1,表示就是直辖市 */ (function(window) { window.areaData = [{"pro":&quo

几个数据库的小案例(二):极其简单的省市联动

总用有两个文件(frmMain.cs SqlHelper.cs) //frmMain.cs//作者:Meusing System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; namespace 省市联动

Dynamic CRM 2013学习笔记(八)过滤查找控件 (类似省市联动)

我们经常要实现类似省市联动一样的功能,常见的就是二个查找控件,一个选择了省后,另一个市的查找控件就自动过滤了,只显示当前省下的市,而不是所有的市.当然这是最简单的,实际工作中还有更复杂的功能要通过过滤查找控件来实现.本文主要介绍基本的查找控件过滤.多表关联的复杂过滤以及子表里实现查找控件的过滤.   一.简单的过滤 先看下需求: 按"Special GL Indicator" 来过滤 Posting 查找控件增加了preSearch事件.它发生在查找控件显示对话框供用户查找记录之前,与