MVC和WebForm 中国省市区三级联动

MVC和WebForm是微软B/S端的两条腿,两种不同的设计理念,相对来说MVC更优于WebForm对于大数据的交互,因为WebForm是同一时间传输所有数据,而MVC它只是传输所用到的数据,更精确,传输量少等待数据传输的响应时间就短.但是WebForm也有他的优点,比如说设计起来更像Winform容易理解.

SQL表如下:

根据ParentAreaCode=0001可以查出省级地市, 对应的省级地市有AreaCode

根据不同的AreaCode输入在ParentAreaCode中可以查出省级地市中的市级地市ParentAreaCode=37

同理,对应的AreaCode输入在ParentAreaCode中可以查出市级地市的区县ParentAreaCode=370303

________________________________________________________我是华丽的分割线________________________________________________

MVC:

M:Models, 模型层:可以放方法,类等处理数据.

V:Views,视图层:HTML页面,把数据装饰然后显示到页面给用户.

C:Controller,控制层:负责动作交互,从视图层获取信息给模型层,Vice versa.

新建项目ASP.NET.MVC 4 Web 应用程序选择空窗体,一个空的MVC空网页就有了.

首先在Models里面添加LinQ to SQL类添加模型,选好数据库来源,拖入表

然后在Models里面添加一个空的类用来写代码.

 public class ChinaBF

    {

         private ChinaStatesDataContext _context = new  ChinaStatesDataContext();

       //LinQ查询数据库

        public List<ChinaStates> Select(string AreaCode) //省

        {

            var query = _context.ChinaStates.Where(P => P.ParentAreaCode == AreaCode);

                return query.ToList();

        }

    }

Controller:

 public class HomeController : Controller

    {

        [HttpGet] //刚开始加载页面的时候

        public ActionResult Index()

        {

            List<ChinaStates> listpro = new ChinaBF().Select("");  //0001查省份

                   ViewBag.databb = new SelectList(listpro, "AreaCode", "AreaName");

            List<ChinaStates> list1 = new ChinaBF().Select("");  //市

                   ViewBag.datacc1  = new SelectList(list1, "AreaCode", "AreaName");

            List<ChinaStates> list2 = new ChinaBF().Select("");//区

                    ViewBag.datacc= new SelectList(list2, "AreaCode", "AreaName");

            return View();

        }

        [HttpPost]  //当页面提交后

        public ActionResult Index(string pro,string city,string sub)

        {

            List<ChinaStates> listpro = new ChinaBF().Select("");

           ViewBag.databb  = new SelectList(listpro, "AreaCode", "AreaName",pro);

            List<ChinaStates> list1 = new ChinaBF().Select(pro);

            ViewBag.datacc1 = new SelectList(list1, "AreaCode", "AreaName",city);

            var b = list1.Exists(P => P.AreaCode == city) ? city : list1[].AreaCode;

            List<ChinaStates> list2 = new ChinaBF().Select(b);

             ViewBag.datacc= new SelectList(list2, "AreaCode", "AreaName");

            return View();

        }

    }

Views:

视图要在Controller里面代码快区域右键添加视图

用razor视图方法来写Views,@{} 里面写C#代码,他会自动判定HTML和C# 当遇到<>自动转译到Html.

@using China.Models;

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

</head>

<body>

    <div>

         @{

        SelectList bb = ViewBag.databb;

        SelectList cc = ViewBag.datacc;

        SelectList cc1 = ViewBag.datacc1;

        }

     @using (Html.BeginForm("Index", "Home", FormMethod.Post))

       {

    <div>

        省份： @Html.DropDownList("pro",bb,new { onchange="document.forms[0].submit();"})

        市辖：@Html.DropDownList("city",cc1,new { onchange="document.forms[0].submit();"})

         市区：@Html.DropDownList("sub",cc)

    </div>

     }

    </div>

</body>

</html>

________________________________________________________我是华丽的分割线________________________________________________

WebForm:

public class ChinaStatesDA

{

    private ChinaThreeDataContext context;

    public ChinaStatesDA()

    {

        context = new ChinaThreeDataContext();

    }

    public List<ChinaStates> Ch(string ParentAreaCode)

    {

        return context.ChinaStates.Where(p => p.ParentAreaCode == ParentAreaCode).ToList();

    }

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

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

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if(!IsPostBack)  //因为每一次提交页面就会刷新, IsPostBack就判断是否重复刷新

        {

            bind();

        }

    }

    public void bind()

    {

        List<ChinaStates> list = new ChinaStatesDA().Ch("");

        foreach (ChinaStates data in list)

        {

            ListItem li = new ListItem(data.AreaName,data.AreaCode);

            DropDownList1.Items.Add(li);

        }

    }

    public void bindDrop()

    {

    List<ChinaStates> list =new ChinaStatesDA().Ch("");

    DropDownList1.DataSource = list;

    DropDownList1.DataTextField = "AreaName";

    DropDownList1.DataValueField = "AreaCode";

    DropDownList1.DataBind();

    }

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

    {

        ListItem li = new ListItem("请选择");

        string a = DropDownList1.SelectedItem.Value;//DropDownList1.SelectedValue.ToString();

        List<ChinaStates> list=new ChinaStatesDA().Ch(a);

        DropDownList2.DataSource = list;

        DropDownList2.DataTextField = "AreaName";

        DropDownList2.DataValueField = "AreaCode";

        DropDownList2.DataBind();

        DropDownList3.DataTextField = li.Text;

    }

    protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)

    {

        string a = DropDownList2.SelectedItem.Value;//DropDownList1.SelectedValue.ToString();

        List<ChinaStates> list = new ChinaStatesDA().Ch(a);

        DropDownList3.DataSource = list;

        DropDownList3.DataTextField = "AreaName";

        DropDownList3.DataValueField = "AreaCode";

        DropDownList3.DataBind();

    }

}

DropDownList 要选 AutoPostBack=True;这样list里面更改数据后他会自动提交

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

</head>

<body>

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

        <div style="height: 218px">

            <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">

            </asp:DropDownList>

            省<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged">

            </asp:DropDownList>

            市<asp:DropDownList ID="DropDownList3" runat="server" OnSelectedIndexChanged="DropDownList3_SelectedIndexChanged">

            </asp:DropDownList>

            区</div>

    </form>

</body>

</html>

MVC和WebForm 中国省市区三级联动的更多相关文章

java的JCombobox实现中国省市区三级联动
源代码下载:点击下载源代码用xml存储中国各大城市的数据. xml数据太多了就不贴上了,贴个图片: 要解释xml,添加了一个jdom.jar,上面的源代码下载里面有. 解释xml的类: packag ...
Webform——中国省市三级联动以及IsPostBack
首先要明白Webform的运行顺序,当开始启动时候,首先执行的是Page_Load事件, 当点击任意按钮后,每次点击都要先执行一遍Page_Load(在这里Page_Load里面的事件是给数据控件加载 ...
[moka同学转载]Yii2 中国省市区三级联动
1.获取源码:https://github.com/chenkby/yii2-region 2.安装添加到你的composer.json文件 "chenkby/yii2-region&qu ...
Yii2 中国省市区三级联动
1.获取源码:https://github.com/chenkby/yii2-region 2.安装添加到你的composer.json文件 "chenkby/yii2-region&qu ...
laraveladmin省市区三级联动
Distpicker是一个中国省市区三级联动选择组件,这个包是基于Distpicker的laravel-admin扩展,用来将Distpicker集成进laravel-admin的表单中安装 com ...
JS实现年月日三级联动+省市区三级联动+国家省市三级联动
开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...
jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...
省市区三级联动 pickerView
效果图概述关于省市区三级联动的 pickerView,我想大多数的 iOS 开发者应该都遇到过这样的需求.在遇到这样的需求的时候,大多数人都会觉的这个很复杂,一时无从下手.其实真的没那么复杂. ...
JS省市区三级联动
不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...

随机推荐

Java中 NIO与IO的区别
当学习了Java NIO和IO的API后,一个问题马上涌入脑海: 我应该何时使用IO,何时使用NIO呢?在本文中,我会尽量清晰地解析Java NIO和IO的差异.它们的使用场景,以及它们如何影响您的代 ...
BZOJ3168: [Heoi2013]钙铁锌硒维生素
设$A^TC=B^T$,这样$C_{ij}$表示$B_j$的线性表出需要$A_i$,那么$B_j$可以替换$A_i$,根据$C=(A^T)^{-1}B^T$求出$C$.要求字典序最小完美匹配,先求任意 ...
Angular.js实现折叠按钮的经典指令.
var expanderModule=angular.module('expanderModule',[]) expanderModule.directive('expander',function( ...
Charles抓Android的数据包
1. 获得Mac OS的IP地址 2. 对Android手机设置代理,主机IP是步骤1中获得的IP,端口8888
log4j的使用详细解析
1 Log4j配置说明 1.1 配置文件Log4j可以通过java程序动态设置,该方式明显缺点是:如果需要修改日志输出级别等信息,则必须修改java文件,然后重新编译,很是麻烦: log4j也可以通过 ...
自动化运维工具Ansible详细部署（转载）
自动化运维工具Ansible详细部署标签:ansible 原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责任.http://sofar.blog. ...
[Recommendation System] 推荐系统之协同过滤（CF）算法详解和实现
1 集体智慧和协同过滤 1.1 什么是集体智慧(社会计算)? 集体智慧 (Collective Intelligence) 并不是 Web2.0 时代特有的,只是在 Web2.0 时代,大家在 Web ...
C语言运算符优先级详细列表
首先还是插入原博客的地址http://blog.csdn.net/huangblog/article/details/8271791 另外还有一个参考博客http://www.slyar.com/bl ...
UVa2326
理解:区域覆盖.注意1,属于的区间有大小颠倒的情况:注意2,看图 ,两排房间公用一条走廊(for instance 1->3 4->6 不可公用) #include<iostrea ...
javascript——三元操作符
{{C?A:B}} C条件成立则为A,不存在取B 比如在跟后台交互时,有许多要设默认值 <script type=''text/javascript> var value = docume ...

MVC和WebForm 中国省市区三级联动

MVC和WebForm 中国省市区三级联动的更多相关文章

随机推荐

热门专题