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 中国省市区三级联动

最新文章

热门文章