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>")
            })
        })
    }