Mvc调用Api的显示、添加+二级联动
作者：互联网
一、显示的DAL层代码
public List<ViewModel> LoadShow(string Dname, int? Cid, int? Eid, int? Ctid, int pageindex, int pagesize, out int totalcount, out int totalpage)
{
var query = from a in mm.DeliveryInfos
join b in mm.Cities on a.Cid equals b.Cid
where b.Cityid == 0
join c in mm.Cities on a.Ctid equals c.Cid
where c.Cityid > 0
join d in mm.Expresses on a.Eid equals d.Eid
select new ViewModel
{
Cid = b.Cid,
Cname = b.Cname,
Cityid = b.Cityid,
Eid = d.Eid,
Ename = d.Ename,
Ctid = a.Ctid,
Did = a.Did,
Dname = a.Dname,
ImgCp = a.ImgCp,
Name = a.Name,
Phone = a.Phone,
Site = a.Site,
State = a.State
};
if (!string.IsNullOrWhiteSpace(Dname))
{
query = query.Where(k => k.Dname.Contains(Dname));
}
if (Cid != null)
{
query = query.Where(k => k.Cid == Cid);
}
if (Eid != null)
{
query = query.Where(k => k.Eid == Eid);
}
if (Ctid != null)
{
query = query.Where(k => k.Cityid == Ctid);
}
totalcount = query.Count();
totalpage = Convert.ToInt32(Math.Ceiling(totalcount * 1.0 / pagesize));
return query.OrderBy(k => k.Did).Skip((pageindex - 1) * pagesize).Take(pagesize).ToList();
二、添加的DAL层代码
public int Add(DeliveryInfo d)
{
mm.DeliveryInfos.Add(d);
return mm.SaveChanges();
}
三、二级联动的DAL层代码
public List<City> CityType(int Cityid)
{
return mm.Cities.Where(k => k.Cityid == Cityid).ToList();
}
四、显示的视图层代码Ajax方法
<div>
<table class="table table-bordered">
<tr style="background-color:coral;color:azure">
<td colspan="8">产品发货管理</td>
</tr>
<tr>
<td colspan="8">
产品名称 <input type="text" id="Dname" />
快递公司
<select id="Express">
<option>所有</option>
</select>
<select id="Province" onchange="Shi()">
</select>
<select id="City">
</select>
<input type="button" value="查询" class="btn btn-info" onclick="Load()"/>
<input type="button" value="添加" class="btn" style="background-color:coral;color:azure" />
</td>
</tr>
<tr style="background-color:coral;color:azure">
<td>产品名称</td>
<td>收货人</td>
<td>收货人手机</td>
<td>收货地址</td>
<td>快递公司</td>
<td>图片</td>
<td>状态</td>
<td>操作</td>
</tr>
<tbody id="tblist"></tbody>
</table>
</div>
<span id="pageinfo"></span>
<a href="#" onclick="page('F')">首页</a>
<a href="#" onclick="page('P')">上页</a>
<a href="#" onclick="page('N')">下页</a>
<a href="#" onclick="page('L')">尾页</a>
<script>
var pageindex = 1;
var pagesize = 3;
var totalcount = 0;
var totalpage = 0;
$(function () {
Sheng();
Express();
Load();
})
function Sheng() {
$("#Province").append("<option>请选择</option>")
$.get('http://localhost:51198/api/Default/CityType?Cityid=0', k => {
$(k).each(function () {
$("#Province").append("<option value=" + this.Cid + ">" + this.Cname + "</option>")
})
})
}
function Shi() {
var id = $("#Province").val();
$("#City").empty();
$("#City").append("<option>请选择</option>")
$.get('http://localhost:51198/api/Default/CityType?Cityid=' + id, k => {
$(k).each(function () {
$("#City").append("<option value=" + this.Cid + ">" + this.Cname + "</option>")
})
})
}
function Express() {
$.get('http://localhost:51198/api/Default/ExpressesType', k => {
$(k).each(function () {
$("#Express").append("<option value=" + this.Eid + ">" + this.Ename + "</option>")
})
})
}
function Load() {
$.get('http://localhost:51198/api/Default/LoadShow', {
Dname: $("#Dname").val(),
Cid: $("#Province").val(),
Eid: $("#Express").val(),
Ctid: $("#City").val(),
pageindex: pageindex,
pagesize: pagesize
}, k => {
totalcount=k.totalcount
totalpage=k.totalpage
var slist = '';
$("#tblist").empty();
$(k.list).each(function () {
slist += '<tr>'
+ '<td>' + this.Dname+'</td>'
+ '<td>' + this.Name+'</td>'
+ '<td>' + this.Phone+'</td>'
+ '<td>' + this.Site + '</td>'
+ '<td>' + this.Ename + '</td>'
+ '<td></td>'
+ '<td style="color:' + (this.State ? "green" : "red") + '">' + (this.State ? "已发货" : "未发货") + '</td>'
+ '<td><a onclick="Del(' + this.Did + ')">删除</a></td>'
+'</tr>'
})
$("#tblist").html(slist);
$("#pageinfo").text("共" + totalcount + "条信息，每页" + pagesize + "条，当前" + pageindex + "/" + totalpage + "页")
})
}
function Del(id) {
if (confirm("确定要删除吗？")) {
$.get('http://localhost:51198/api/Default/Del/?id=' + id, k => {
if (k > 0) {
alert("删除成功！！！");
Load();
}
})
}
}
function page(k) {
switch (k) {
case 'F':
pageindex=1
break;
case 'P':
pageindex = pageindex <= 1 ? pageindex : pageindex - 1
break;
case 'N':
pageindex = pageindex >= totalpage ? pageindex : pageindex+1
break;
case 'L':
pageindex = totalpage
break;
}
Load();
}
</script>
五、添加的视图层代码Ajax方法
function LodaAdd() {
$.post('http://localhost:51198/api/Default/Add', {
Dname: $("#Dname").val(),
Name: $("#Name").val(),
Phone: $("#Phone").val(),
Cid: $("#Province").val(),
Ctid: $("#City").val(),
Site: $("#Site").val(),
Eid: $("#Express").val(),
ImgCp:"",
State: $("[name=State]:checked").val()
}, k => {
if (k > 0) {
alert("添加成功！");
location.href = "/Mvc/Index";
}
})
}
六、二级联动的视图层代码
$(function () {
Sheng();
Express();
})
function Sheng() {
$("#Province").append("<option>请选择</option>")
$.get('http://localhost:51198/api/Default/CityType?Cityid=0', k => {
$(k).each(function () {
$("#Province").append("<option value="+this.Cid+">" + this.Cname + "</option>")
})
})
}
function Shi() {
var id = $("#Province").val();
$("#City").empty();
$("#City").append("<option>请选择</option>")
$.get('http://localhost:51198/api/Default/CityType?Cityid=' + id, k => {
$(k).each(function () {
$("#City").append("<option value=" + this.Cid + ">" + this.Cname + "</option>")
})
})
}
标签：function,pageindex,调用,val,Cid,Cityid,Mvc,Api,query 来源： https://www.cnblogs.com/713kk/p/15073524.html