ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Mvc调用Api的显示、添加+二级联动

2021-07-29 09:00:37  阅读:175  来源: 互联网

标签:function pageindex 调用 val Cid Cityid Mvc Api query


一、显示的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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有