就是简简单单的增删改查,也没什么特殊的或者特别难的业务逻辑,二级联动用一张表的自连接做的,注释都加在代码中了,不多说了,代码如下:
1.首先是我们的实体类数据模型层(model)
地址详情表:
using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace G5.Exam03.Day12.Models{ public class ShAddress { public int AId { get; set; } public string AName { get; set; } public string Area { get; set; } public string Dzhi { get; set; } public string hanSet { get; set; } }}
ShAddress
二级联动用的区域表:
using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace G5.Exam03.Day12.Models{ public class Qy { public int Id { get; set; } public string Name { get; set; } public int QId { get; set; } }}
Qy
2.ado调用:
地址的dal层:
using System;using System.Collections.Generic;using System.Linq;using System.Web;using G5.Exam03.Day12.Models;namespace G5.Exam03.Day12.Dal{ public class AddressDal { DBHelper db = new DBHelper(); //地址显示 public List<ShAddress> GetList() { string sql = "select * from ShAddress"; return db.GetToList<ShAddress>(sql); } //删除功能 public int Del(int id) { string sql = $"delete from ShAddress where AId={id}"; return db.ExecuteNonQuery(sql); } //添加的sql语句及方法 public int Upt(ShAddress model) { string sql = $"Update ShAddress set AName=‘{model.AName}‘,Area=‘{model.Area}‘,Dzhi=‘{model.Dzhi}‘,hanSet=‘{model.hanSet}‘ where AId={model.AId}"; return db.ExecuteNonQuery(sql); } }}
AddressDal
省市及添加,反填的dal层:
这两个ado调用层其实可以写在一块的,具体看您要实现的功能及要求:
using G5.Exam03.Day12.Models;using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace G5.Exam03.Day12.Dal{ public class AddDal { DBHelper db = new DBHelper(); //省市下拉 public List<Qy> GetSsList(int qid) { string sql = $"select * from Qy where QId={qid}"; return db.GetToList<Qy>(sql); } //添加的sql语句及方法 public int Add(ShAddress model) { string sql = $"insert into ShAddress values (‘{model.AName}‘,‘{model.Area}‘,‘{model.Dzhi}‘,‘{model.hanSet}‘)"; return db.ExecuteNonQuery(sql); } //根据id查询数据进行反填 public List<ShAddress> GetListId(int id) { string sql = $"select * from ShAddress where AId={id}"; return db.GetToList<ShAddress>(sql); } }}
AddDal
3.控制器(视图)如下(这里其实创建一个控制器就好,具体看要求):
using G5.Exam03.Day12.Dal;using G5.Exam03.Day12.Models;using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Web;using System.Web.Mvc;namespace G5.Exam03.Day12.Controllers{ public class AddressController : Controller { AddressDal dal = new AddressDal(); // GET: Address public ActionResult Index() { return View(); } public int Del(int id) { return dal.Del(id); } [HttpGet] public JsonResult GetList() { return Json(dal.GetList(),JsonRequestBehavior.AllowGet); } public ActionResult Upt(int id) { ViewBag.id = id; return View(); } [HttpPost] public int Upt(ShAddress model) { return dal.Upt(model); } //根据id获取地址信息->反填 [HttpPost] public JsonResult GetId(int id) { AddDal add = new AddDal(); return Json(add.GetListId(id), JsonRequestBehavior.AllowGet); } }}
AddressController
using G5.Exam03.Day12.Dal;using G5.Exam03.Day12.Models;using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace G5.Exam03.Day12.Controllers{ public class AddController : Controller { AddDal add = new AddDal(); // GET: Add //为添加视图提供方法 public ActionResult Add() { return View(); } //从后台获取到我们要的数据源 [HttpPost]// public int Add(ShAddress model) { return add.Add(model); } //为省市提供数据源 [HttpGet] public JsonResult GetSs(int qid) { return Json(add.GetSsList(qid), JsonRequestBehavior.AllowGet); } //为区县提供数据源 [HttpGet] public JsonResult GetQx(int qid) { return Json(add.GetSsList(qid), JsonRequestBehavior.AllowGet); } }}
AddController
4.视图层:(view)
地址显示视图:
@{ ViewBag.Title = "Index";}<h2>Index</h2><input type="button" onclick="Add()" name="name" value="新增收获地址" /><div id="divMain"> </div><script> //文档就绪函数 $(function () { Show(); }) //显示函数 function Show() { $.ajax({ url: "/Address/GetList",//地址 dataType: "json",//返回到后台的数据格式 type: "get",//获取到数据的方式 success: function (d) {//成功就继续执行后面的代码 //清空原有的旧数据 $("#divMain").empty(); //each遍历显示数据库的数据 $(d).each(function () { //字符串拼接 var str = ‘<div style="border:solid;color:lightpink;">‘; str += ‘收货人:‘ + this.AName; str += ‘<img src="../Img/228c96645e893848a8bd68a66c84777f.png" onclick="Del(‘ + this.AId + ‘)" Title="删除" style="float:right;cursor:pointer;"/></br>‘; str += ‘所在地区:‘ + this.Area +‘</br>‘; str += ‘地址:‘ + this.Dzhi + ‘</br>‘; str += ‘手机:‘ + this.hanSet + ‘<a href="javascript:Edit(‘ + this.AId +‘)" style="float:right;cursor:pointer;">编辑</a>‘; str += ‘</div></br >‘; //在div最后面添加要拼接上去的内容 $("#divMain").append(str); }) } }) } //删除功能实现 function Del(id) { //弹框提示是否要删除 if (confirm(‘确认删除吗?‘)) { $.ajax({ url: "/Address/Del",//地址 dataType: "json",//返回到后台的数据格式 data: { id: id },//要向数据库后台发送的数据,前面是你的控制器名称,后面是你发送的值定义好的名称(我这里发送值的名称与控制器名称是一样的) type: "post",//获取到数据的方式 post是发送命令到数据库中,get是从数据库获取到数据 success: function (d) {//成功就继续执行后面的代码 if (d > 0) { alert("删除成功!"); //调用显示函数进行刷新页面 Show(); } else { alert("删除失败!"); } } }) } else { return false;//选择否,返回false; } } //编辑按钮要跳转到编辑页面 function Edit(id) { location.href = ‘/Address/Upt?id=‘ + id; } //添加 function Add() { location.href = ‘/Add/Add‘; }</script>
Index.cshtml
地址修改视图:
@{ ViewBag.Title = "Upt";} <script src="~/Scripts/jquery-3.4.1.min.js"></script><h2>Upt</h2><table class="table table-bordered"> <tr> <td>收货人:</td> <td> <input type="hidden" id="aid"/> <input id="aName" type="text" name="name" /></td> </tr> <tr> <td>所在地区:</td> <td> 省市:<select id="Ss" onfocus="BandQ(this.value)"></select> 区:<select id="q"></select> </td> </tr> <tr> <td>地址:</td> <td><input id="Dzhi" type="text" name="name" /></td> </tr> <tr> <td>手机:</td> <td><input id="hanSet" type="text" name="name" /></td> </tr> <tr> <td colspan="2"><input type="button" onclick="Xg()" name="name" value="修改" /></td> </tr></table><script> //文档就绪函数 $(function () { //绑定二级联动的函数 var id = @ViewBag.id; $("#aid").val(id); Ft(id); BandSel(); }) function Ft(id) { $.ajax({ url: "/Address/GetId", data: {id:id}, dataType: "json", type: "post", success: function (d) { // console.log(d); alert(d.AId); $("#aid").val(d.AId); $("#aName").val(d.AName); $("#Dzhi").val(d.Dzhi); //$("#Ss option:selected").text() + $("#q option:selected").text(); $("#hanSet").val(d.hanSet); } }) } //修改函数 function Xg() { var obj = {}; obj.AId = $("#aid").val();//勿忘我 obj.AName = $("#aName").val(); obj.Area = $("#Ss option:selected").text() + $("#q option:selected").text(); obj.Dzhi = $("#Dzhi").val(); obj.hanSet = $("#hanSet").val(); $.ajax({ url: "/Address/Upt", data: { model:obj }, dataType: "json", type: "post", success: function (d) { if (d > 0) { alert("修改成功!"); location.href = ‘/Address/Index‘; } else { alert("修改失败!"); } } }) } //绑定下拉 省市绑定 function BandSel() { $.ajax({ url: "/Add/GetSs", data: { qid:0}, dataType: "json", type: "get", success: function (d) { $("#Ss").empty(); $(d).each(function () { var str = ‘<option value="‘ + this.Id + ‘">‘ + this.Name + ‘</option>‘; $("#Ss").append(str); }) } }) } function BandQ() { $.ajax({ url: "/Add/GetQx", data: { qid: $("#Ss").val() }, dataType: "json", type: "get", success: function (d) { $("#q").empty(); $(d).each(function () { var str = ‘<option value="‘ + this.Id + ‘">‘ + this.Name + ‘</option>‘; $("#q").append(str); }) } }) }</script>
Upt.cshtml
地址添加视图:
@{ ViewBag.Title = "Add";}<h2>Add</h2><table class="table table-bordered"> <tr> <td>收货人:</td> <td><input id="aName" type="text" name="name" value="" /></td> </tr> <tr> <td>所在地区:</td> <td> 省市:<select id="Ss" onfocus="BandQ(this.value)"></select> 区:<select id="q"></select> </td> </tr> <tr> <td>地址:</td> <td><input id="Dzhi" type="text" name="name" value="" /></td> </tr> <tr> <td>手机:</td> <td><input id="hanSet" type="text" name="name" value="" /></td> </tr> <tr> <td colspan="2"><input type="button" onclick="Tj()" name="name" value="添加到地址" /></td> </tr></table><script> //文档就绪函数 $(function () { //绑定二级联动的函数 BandSel(); }) //添加函数 function Tj() { var obj = {}; obj.AName = $("#aName").val(); obj.Area = $("#Ss option:selected").text() + $("#q option:selected").text(); obj.Dzhi = $("#Dzhi").val(); obj.hanSet = $("#hanSet").val(); $.ajax({ url: "/Add/Add", data: { model:obj }, dataType: "json", type: "post", success: function (d) { if (d > 0) { alert("添加成功!"); location.href = ‘/Address/Index‘; } else { alert("添加失败!"); } } }) } //绑定下拉 省市绑定 function BandSel() { $.ajax({ url: "/Add/GetSs", data: { qid:0}, dataType: "json", type: "get", success: function (d) { $("#Ss").empty(); $(d).each(function () { var str = ‘<option value="‘ + this.Id + ‘">‘ + this.Name + ‘</option>‘; $("#Ss").append(str); }) } }) } function BandQ() { $.ajax({ url: "/Add/GetQx", data: { qid: $("#Ss").val() }, dataType: "json", type: "get", success: function (d) { $("#q").empty(); $(d).each(function () { var str = ‘<option value="‘ + this.Id + ‘">‘ + this.Name + ‘</option>‘; $("#q").append(str); }) } }) }</script>
Add.cshtml
5.还望大佬们多多提一些修改意见,我会努力慢慢去改正的.
![[acwing#24]机器人的运动范围（BFS-DFS）](https://www.winkp.com/wp-content/themes/ZTMao.com-M1-V2.5.1-1230/timthumb.php?src=https://www.winkp.com/wp-content/themes/ZTMao.com-M1-V2.5.1-1230/img/random/2.jpg&w=218&h=124&zc=1)
