MVC jQuery 添加修改信息

来源：互联网发布：可视化数据分析编辑：程序博客网时间：2024/05/29 18:03

描述：

后台管理程序，经常会有添加、修改信息，而且经常会使用下拉列表控件select，如果涉及到下拉列表联动事件（select联动事件）那就更加复杂。

此案例使用 MVC + jQuery 实现select联动事件，意在代码简洁、减少代码量，避免代码冗余。代码如下

1、Controller代码

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using WebApplication1.Entity;namespace WebApplication1.Controllers{    public class DefaultController : Controller    {        public ActionResult Index(int? id)        {            Customers model = new Customers();            if (id > 0)            {                model = GetCustomersList().Where(o => o.Id == id).SingleOrDefault();                if (model != null)                {                    GetProvinces(model.ProvinceId);                }                else                {                    return Redirect("Index");                }            }            else            {                GetProvinces(0);            }            return View(model);        }        public ActionResult GetProvinces(int value)        {            List<SelectListItem> select1 = new List<SelectListItem>();            List<Provinces> list = GetProvincesList().OrderByDescending(o => o.Id).ToList();            foreach (var item in list)            {                select1.Add(new SelectListItem { Value = item.Id.ToString(), Text = item.Title });            }            if (value <= 0)                ViewData["selProvinces"] = new SelectList(select1, "Value", "Text", "");            else                ViewData["selProvinces"] = new SelectList(select1, "Value", "Text", value);            return View();        }        [HttpPost]        public ActionResult GetCity(int provinceId)        {            List<Citys> list = GetCitysList();            list = list.Where(o => o.ProvinceId == provinceId).ToList();            var result = new            {                Code = 200,                Data = list,                Msg = "success"            };            return Json(result, JsonRequestBehavior.AllowGet);        }        private List<Customers> GetCustomersList()        {            List<Customers> list = new List<Customers>();            var ldh = new Customers { Id = 1, ProvinceId = 1, CityId = 2, CustomerName = "刘德华", Phone = "666", Email = "liudehua@qq.com" };            list.Add(ldh);            var zxy = new Customers { Id = 2, ProvinceId = 2, CityId = 5, CustomerName = "张学友", Phone = "888", Email = "zhangxueyou@qq.com" };            list.Add(zxy);            var zxc = new Customers { Id = 3, ProvinceId = 3, CityId = 7, CustomerName = "周星驰", Phone = "886", Email = "zhouxingchi@qq.com" };            list.Add(zxc);            return list;        }        private List<Provinces> GetProvincesList()        {            List<Provinces> list = new List<Provinces>();            var heb = new Provinces { Id = 1, Title = "河北", };            list.Add(heb);            var hun = new Provinces { Id = 2, Title = "湖南", };            list.Add(hun);            var zhej = new Provinces { Id = 3, Title = "浙江", };            list.Add(zhej);            return list;        }        private List<Citys> GetCitysList()        {            List<Citys> list = new List<Citys>();            var shijz = new Citys { Id = 1, ProvinceId = 1, Title = "石家庄" };            list.Add(shijz);            var hand = new Citys { Id = 2, ProvinceId = 1, Title = "邯郸" };            list.Add(hand);            var zhangjk = new Citys { Id = 3, ProvinceId = 1, Title = "张家口" };            list.Add(zhangjk);            var changs = new Citys { Id = 4, ProvinceId = 2, Title = "长沙" };            list.Add(changs);            var changd = new Citys { Id = 5, ProvinceId = 2, Title = "常德" };            list.Add(changd);            var hangz = new Citys { Id = 6, ProvinceId = 3, Title = "杭州" };            list.Add(hangz);            var wenz = new Citys { Id = 7, ProvinceId = 3, Title = "温州" };            list.Add(wenz);            return list;        }    }}

2、Html代码

@{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport" content="width=device-width" />    <title>Index</title>    <link href="~/Content/bootstrap.css" rel="stylesheet" />    <script src="~/Scripts/jquery-1.10.2.js"></script></head><body>    <table>        <tr>            <td>姓名：</td>            <td><input type="text" value="@Model.CustomerName" class="form-control" /></td>        </tr>        <tr>            <td>电话：</td>            <td><input type="text" value="@Model.Phone" class="form-control" /></td>        </tr>        <tr>            <td>邮箱：</td>            <td><input type="text" value="@Model.Email" class="form-control" /></td>        </tr>        <tr>            <td>省会：</td>            <td>@Html.DropDownList("Provinces", ViewData["selProvinces"] as SelectList, new { @class = "form-control" })</td>        </tr>        <tr>            <td>城市：</td>            <td><select id="Citys" name="Citys" class="form-control"></select></td>        </tr>    </table>    <input type="hidden" id="hidId" name="hidId" value="@Model.Id" />    <input type="hidden" id="hidCityId" name="hidCityId" value="@Model.CityId" />    <script>        $(document).ready(function () {            var customerId = parseInt($("#hidId").val());            var provinceId = 0;            if (customerId <= 0) {                provinceId = $("#Provinces option:first").val();            } else {                provinceId = $("#Provinces").val();            }            GetCity(provinceId);            $('#Provinces').change(function () {                GetCity($("#Provinces").val());            });        });        function GetCity(provinceId) {            $.ajax({                type: "POST",                url: '@Url.Action("GetCity", "Default")',                data: {                    //"provinceId": $("#Provinces").val()                    "provinceId": provinceId                },                dataType: "json",                success: function (result) {                    var html = "";                    $(result.Data).each(function (index, item) {                        html += "<option value='" + item.Id + "'>" + item.Title + "</option>";                    });                    $("#Citys").html(html);                    if (parseInt($("#hidCityId").val()) > 0) {                        $("#Citys").val($("#hidCityId").val());                    }                }            });        }    </script></body></html>

using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace WebApplication1.Entity{    public class Citys    {        public int Id { get; set; }        public int ProvinceId { get; set; }        public string Title { get; set; }    }}

using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace WebApplication1.Entity{    public class Customers    {        public int Id { get; set; }        public int ProvinceId { get; set; }        public int CityId { get; set; }        public string CustomerName { get; set; }        public string Phone { get; set; }        public string Email { get; set; }    }}

using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace WebApplication1.Entity{    public class Provinces    {        public int Id { get; set; }        public string Title { get; set; }    }}

0 0