电商项目

电商项目

数据库:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Model
{
    //用户表
    public class User
    {
        public int Id { get; set; }  //用户id
        public string Name { get; set; }  //用户名
        public string Pwd { get; set; }  //密码
    }

    //店铺表
    public class Shop
    {
        public int Id { get; set; }  //店铺id
        public string SName { get; set; } //店铺名
    }

    //商品表
    public class Goods
    {
        public int Id { get; set; }  //商品id
        public string Name { get; set; }  //商品名
        public string Img { get; set; }  //商品图片
        public int Price { get; set; }   //价格
        public int Count { get; set; }   //库存

        public Shop Shop { get; set; }
        public int ShopId { get; set; } //外键：店铺id
    }

    //订单表
    public class OrderInfo
    {
        public int Id { get; set; } //订单id
        public int Count { get; set; }  //购买数量

        public Goods Goods { get; set; }
        public int GoodsId { get; set; }  //外键：商品id
        public User User { get; set; }
        public int UserId { get; set; }  //外键：用户id
    }

    //退款表
    public class DropOrder
    {
        public int Id { get; set; }  //id
        public string Reason { get; set; }  //退款原因
        public string Img { get; set; }  //上传图片
        public int Count { get; set; }  //已购买的数量

        public Goods Goods { get; set; }
        public int GoodsId { get; set; }  //外键：商品id
        public User User { get; set; }
        public int UserId { get; set; }  //外键：用户id
    }

    //收藏的店铺表
    public class CollectShops
    {
        public int Id { get; set; }  //id

        public Shop Shop { get; set; }
        public int ShopId { get; set; } //外键：店铺id

        public User User { get; set; }
        public int UserId { get; set; }  //外键：用户id
    }
    //收藏的商品表
    public class CollectGoods
    {
        public int Id { get; set; }  //id

        public Goods Goods { get; set; }
        public int GoodsId { get; set; } //外键：店铺id

        public User User { get; set; }
        public int UserId { get; set; }  //外键：用户id
    }
}

帮助类(Models文件夹下):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Text;
using NPOI.HSSF.UserModel;
using System.Reflection;

namespace WebApplication1.Models
{
    /// <summary>
    /// 文件上传下载，导入导出辅助类
    /// </summary>
    public class APIFileHelp
    {
        public string[] ExtentsfileName = new string[] { ".doc", ".xls", ".png", ".jpg" };
        public string UrlPath = "/Img/";
        /// <summary>
        ///响应对象 ，使用前先赋值
        /// </summary>
        public HttpResponse Response = HttpContext.Current.Response;
        public HttpRequest Request = HttpContext.Current.Request;
        /// <summary>
        /// 下载文件 使用过DEMO
        /// using System.IO;
        /// public class FileOperationController : ApiController
        /// {
        ///    APIFileHelp help = new APIFileHelp();
        ///    [HttpGet]
        ///    public void DownLoad(string Url)
        ///    {
        ///        string filePath = HttpContext.Current.Server.MapPath(Url);
        ///        FileInfo fi = new FileInfo(filePath);
        ///        help.DownLoad(fi.Name, fi.FullName);
        ///    }
        ///}
        ///
        /// <a href = "https://localhost:44370/api/FileOperation/DownLoad?Url=/FileUpload/132211303318715030.xls" > 下载 </ a >
        /// </summary>
        /// <param name="downFileName">下载后保存名</param>
        /// <param name="sourceFileName">服务器端物理路径</param>
        public void DownLoad(string downFileName, string sourceFileName)
        {
            if (File.Exists(sourceFileName))
            {
                Response.Clear();
                Response.ClearHeaders();
                Response.ClearContent();
                Response.Buffer = true;
                Response.AddHeader("content-disposition", string.Format("attachment; FileName={0}", downFileName));
                Response.Charset = "GB2312";
                Response.ContentEncoding = Encoding.GetEncoding("GB2312");
                Response.ContentType = MimeMapping.GetMimeMapping(downFileName);
                Response.WriteFile(sourceFileName);
                Response.Flush();
                Response.Close();
            }
        }
        /// <summary>
        /// 上传文件 控制器端
        /// public class FileOperationController : ApiController
        ///{
        ///    [HttpPost]
        ///    public FileResult UpLoad()
        ///    {
        ///        return help.UpLoad();
        ///    }
        ///}
        ///
        /// 
        /// 上传文件 客户端
        ///<input type = "file" id="f1" />
        ////<input type = "button" value="aa" onclick="ff()"/>

        ///< script >
        ///function ff()
        ///{
        ///    var formData = new FormData();
        ///    var file = document.getElementById("f1").files[0];
        ///    formData.append("fileInfo", file);
        ///        $.ajax({
        ///            url: "https://localhost:44370/api/FileOperation/UpLoad",
        ///            type: "POST",
        ///            data: formData,
        ///            contentType: false,//必须false才会自动加上正确的Content-Type
        ///            processData: false,//必须false才会避开jQuery对 formdata 的默认处理，XMLHttpRequest会对 formdata 进行正确的处理
        ///            success: function(data) {
        ///            if (data.Code < 0)
        ///                alert(data.Msg)
        ///                else
        ///                alert(data.Url)
        ///            },
        ///            error: function(data) {
        ///            alert("上传失败！");
        ///        }
        ///    });
        ///}
        ///</script>
        ///
        /// </summary>
        /// <returns></returns>
        public FileResult UpLoad()
        {
            if (Request.Files.Count > 0)
            {
                string FileUrlResult = "";
                foreach (string fn in Request.Files)
                {
                    var file = Request.Files[fn];
                    var extenfilename = Path.GetExtension(file.FileName);
                    //判断 路径是否存在
                    string path = HttpContext.Current.Server.MapPath(UrlPath);
                    if (!Directory.Exists(path))
                    {
                        Directory.CreateDirectory(path);
                    }

                    if (ExtentsfileName.Contains(extenfilename.ToLower()))
                    {
                        string urlfile = UrlPath + DateTime.Now.ToFileTime() + extenfilename;
                        string filepath = HttpContext.Current.Server.MapPath(urlfile);
                        file.SaveAs(filepath);
                        FileUrlResult += urlfile + ";";
                    }
                    else
                    {
                        return new FileResult() { Code = -1, Msg = "只允许上传指定格式文件" + string.Join(",", ExtentsfileName), Url = "" };
                    }
                }
                return new FileResult() { Code = 0, Msg = "上传成功", Url = FileUrlResult };
            }
            else
            {
                return new FileResult() { Code = -1, Msg = "不能上传空文件", Url = "" };
            }
        }
        /// <summary>
        /// 导入
        /// 
        ///        public int Import()
        ///        {
        ///            int i = 0;
        ///            Dictionary<string, string> dic = new Dictionary<string, string>();
        ///             //                编号 姓名  性别 电话  照片 入学时间    毕业时间 班级ID    班级
        ///            dic.Add("编号", "Id");
        ///            dic.Add("姓名", "Name");
        ///            dic.Add("性别", "Sex");
        ///            dic.Add("电话", "Tel");
        ///            dic.Add("照片", "Photo");
        ///            dic.Add("入学时间", "JoinTime");
        ///            dic.Add("毕业时间", "OutTime");
        ///            dic.Add("班级ID", "CId");
        ///            dic.Add("班级", "CName");
        ///            // 导入上传文件的数据到集合中
        ///            List<Student> stus = help.ImportExcel<Student>(dic);

        ///            //把集合中的数据保存到数据库  循环添加，使用了事务
        ///            using (TransactionScope scope = new TransactionScope())
        ///            {
        ///                foreach (Student s in stus)
        ///                { 
        ///                    i++;
        ///                    dal.AddStudent(s);
        ///                }
        ///                scope.Complete();
        ///            }
        ///            return i;
        ///        }
        /// </summary>
        /// <typeparam name="T"></typeparam>
        /// <param name="dic">字典集合 EXECL标题=》对象属性</param>
        /// <returns>对象集合</returns>
        public List<T> ImportExcel<T>(Dictionary<string, string> dic) where T : class, new()
        {

            if (Request.Files.Count > 0)
            {
                var file = Request.Files[0];

                List<T> list = new List<T>();
                Type tp = typeof(T);

                using (var fs = file.InputStream)
                {
                    //把xls文件中的数据写入workbook1中
                    var workbook1 = new HSSFWorkbook(fs);
                    //获取第一个Sheet
                    var sheet = workbook1.GetSheetAt(0);
                    //获取第一行 标题行
                    var row = sheet.GetRow(0);
                    //声明字段数组
                    string[] fields = new string[row.LastCellNum];

                    for (var i = 0; i < row.LastCellNum; i++)
                    {

                        string title = row.GetCell(i).ToString();
                        if (dic.ContainsKey(title))
                        {
                            fields[i] = dic[title];
                        }
                    }
                    for (var j = 1; j <= sheet.LastRowNum; j++)
                    {
                        //读取当前行数据
                        var dataRow = sheet.GetRow(j);
                        // 创建对象实例
                        T t = new T();
                        if (dataRow != null)
                        {
                            for (var k = 0; k <= dataRow.LastCellNum; k++)
                            {   //当前表格 当前单元格 的值
                                var cell = dataRow.GetCell(k);
                                if (cell != null)
                                {
                                    var p = tp.GetProperty(fields[k]);
                                    if (p != null)
                                    {
                                        p.SetValue(t, GetValue(cell.ToString(), p));
                                    }
                                }
                            }
                        }
                        list.Add(t);
                    }
                }
                return list;
            }
            else
            {
                return null;
            }

        }
        /// <summary>
        /// 导出
        /// [HttpGet]
        /// public void Export1(int PageSize, int PageIndex, int Cid)
        /// {
        ///    var list = dal.GetStudentByPaging(PageSize, PageIndex, Cid).Data;
        ///    Dictionary<string, string> dic = new Dictionary<string, string>();
        ///    dic.Add("Id", "编号");
        ///    dic.Add("Name", "姓名");
        ///    dic.Add("Sex", "性别");
        ///    dic.Add("Tel", "电话");
        ///    dic.Add("Photo", "照片");
        ///    dic.Add("JoinTime", "入学时间");
        ///    dic.Add("OutTime", "毕业时间");
        ///    dic.Add("CId", "班级ID");
        ///    dic.Add("CName", "班级");
        ///    help.ExportExcel<Student>("a.xls", list, dic);
        ///}
        /// </summary>
        /// <typeparam name="T"></typeparam>
        /// <param name="fileName">保存到客户端的文件名</param>
        /// <param name="list">要导出的数据集合</param>
        /// <param name="dic">字典集合  属性=》标题</param>
        public void ExportExcel<T>(string fileName, List<T> list, Dictionary<string, string> dic) where T : class, new()
        {
            Type tp = typeof(T); //获取类型
            var ps = tp.GetProperties(); //获取属性集合

            //创建工作薄
            var workbook = new HSSFWorkbook();
            //创建表
            var table = workbook.CreateSheet("sheet1");
            //创建表头
            var row = table.CreateRow(0);
            for (int i = 0; i < ps.Length; i++)
            {
                if (dic.ContainsKey(ps[i].Name))
                {
                    var cell = row.CreateCell(i);//创建单元格
                    cell.SetCellValue(dic[ps[i].Name]);
                }
            }

            //模拟20行20列数据
            for (var i = 1; i <= list.Count; i++)
            {
                //创建新行
                var dataRow = table.CreateRow(i);
                for (int j = 0; j < ps.Length; j++)
                {
                    if (dic.ContainsKey(ps[j].Name))
                    {
                        var cell = dataRow.CreateCell(j);//创建单元格
                        cell.SetCellValue(ps[j].GetValue(list[i - 1]).ToString());
                    }
                }
            }

            Response.Clear();
            Response.ClearHeaders();
            Response.ClearContent();
            Response.Buffer = true;
            Response.AddHeader("content-disposition", string.Format("attachment; FileName={0}", fileName));
            Response.Charset = "GB2312";
            Response.ContentEncoding = Encoding.GetEncoding("GB2312");
            Response.ContentType = MimeMapping.GetMimeMapping(fileName);
            workbook.Write(Response.OutputStream);
            Response.Flush();
            Response.Close();
        }
        private static object GetValue(string obj, PropertyInfo p)
        {
            object o = null;
            switch (p.PropertyType.Name)
            {
                case "Int16":
                    o = Int16.Parse(obj);
                    break;
                case "Int32":
                    o = Int32.Parse(obj);
                    break;
                case "Int64":
                    o = Int64.Parse(obj);
                    break;
                case "double":
                    o = double.Parse(obj);
                    break;
                case "float":
                    o = float.Parse(obj);
                    break;
                case "String":
                    o = obj.ToString();
                    break;
                case "bool":
                    o = bool.Parse(obj);
                    break;
                case "DateTime":
                    o = DateTime.Parse(obj);
                    break;
            }
            return o;
        }
    }

    public class FileResult
    {
        public int Code { get; set; }
        public string Msg { get; set; }
        public string Url { get; set; }
    }


}

 

登录:

API控制器:

 //登录
        [HttpGet]
        public User Login(string name, string pwd)
        {
            User u = db.Users.Where(x => x.Name == name && x.Pwd == pwd).FirstOrDefault();
            return u;
        }

登陆页面(MVC  View):

@{
    ViewBag.Title = "Login";
}
<script src="~/Scripts/jquery-3.3.1.js"></script>

<h2>用户登录</h2>

<table class="table table-bordered">
    <tr>
        <td>用户名:</td>
        <td>
            <input id="name" type="text" />
        </td>
    </tr>
    <tr>
        <td>密码:</td>
        <td>
            <input id="pwd" type="password" />
        </td>
    </tr>
    <tr>
        <td>
            <input id="Button1" type="button" value="登录" onclick="login()" />
        </td>
        <td></td>
    </tr>
</table>

<script>
    function login() {
        var obj = {
            name:$("#name").val(),
            pwd:$("#pwd").val()
        };

        $.ajax({
            url: "http://localhost:50473/api/Goods/Login",
            data: obj,
            type: "get",
            dataType: "json",
            success:
                function (d) {
                    if (d!=null) {
                        alert('登录成功!');
                        document.cookie = d.Id;
                        location.href = '/Goods/Index';
                    }
                    else {
                        alert('登录失败!');
                    }
                }
        })
    }
</script>

显示:

API控制器:

  //显示商品
        [HttpGet]
        public List<Goods> GetGoods()
        {
            List<Goods> list = db.Goods.ToList();
            return list;
        }
        //商品详情
        [HttpGet]
        public List<Goods> FindGood(int id)
        {
            var list = db.Goods.Include("Shop").Where(x => x.Id == id).ToList();
            return list;
        }
 
        //显示店铺中的商品
        [HttpGet]
        public List<Goods> ShopsGoods(int id)
        {
            List<Goods> list = db.Goods.Where(x => x.ShopId == id).ToList();
            return list;
        }

        //显示订单
        [HttpGet]
        public List<OrderInfo> GetOrderInfos(int id)
        {
            var list = db.OrderInfos.Include("Goods").Where(x => x.UserId == id).ToList();
            return list;
        }
        //订单详细
        [HttpGet]
        public OrderInfo FindOrder(int id)
        {
            OrderInfo o = db.OrderInfos.Include("Goods").Where(x => x.Id == id).FirstOrDefault();
            return o;
        }

显示页面(MVC  View):

@{
    ViewBag.Title = "Good";
}
<script src="~/Scripts/jquery-3.3.1.js"></script>

<h3>商品详情</h3>
<table class="table table-bordered">
    <thead>
        <tr>
            <td>商品名称</td>
            <td>商品图片</td>
            <td>商品价格</td>
            <td>商品库存</td>
            <td>收藏</td>
        </tr>
    </thead>
    <tbody id="tb1"></tbody>
</table>

<h3>店铺名称</h3>
<table class="table table-bordered">
    <thead>
        <tr>
            <td>店铺名称</td>
            <td>收藏</td>
        </tr>
    </thead>
    <tbody id="tb2"></tbody>
</table>

<script>
    //商品id
    var gid =@Session["GId"];
    //用户id
    var uid = document.cookie;

    //显示
    function loadgoods() {
        $.ajax({
            url: "http://localhost:50473/api/Goods/FindGood/"+gid,
            type: "get",
            dataType: "json",
            success:
                function (d) {
                    $("#tb1").empty();
                    $(d).each(function () {
                        $("#tb1").append(
                            '<tr>' +
                            '<td>' + this.Name + '</td>' +
                            '<td><img src="http://localhost:50473' + this.Img + '" width="80" height="60" /></td>' +
                            '<td>' + this.Price + '元</td>' +
                            '<td>' + this.Count + '</td>' +
                            '<td><input id="Button1" type="button" value="收藏" onclick="colgood(' + this.Id + ')" /></td>' +
                            '</tr>'
                        )
                    })
                    $("#tb2").empty();
                    $(d).each(function () {
                        $("#tb2").append(
                            '<tr>' +
                            '<td>' + this.Shop.SName + '</td>' +
                            '<td><input id="Button1" type="button" value="收藏" onclick="colshop(' + this.ShopId + ')" /></td>' +
                            '</tr>'
                        )
                    })
                }
        })
    }
    loadgoods();

    //收藏商品
    function colgood(id) {
        if (uid=="") {
            alert('请先登录');
            location.href = '/Goods/Login';
        }

        var obj = {
            GoodsId:id,
            UserId:uid
        };
        $.ajax({
            url: "http://localhost:50473/api/Goods/CollectGood",
            data: obj,
            type: "post",
            dataType:"json",
            success:
            function (d) {
                if (d>0) {
                    alert('收藏商品成功!');
                }
                else {
                    alert('收藏商品失败!');
                }
            }
        })
    }
    //收藏店铺
    function colshop(id) {
        if (uid=="") {
            alert('请先登录');
            location.href = '/Goods/Login';
        }
         var obj = {
            ShopId:id,
            UserId:uid
        };
        $.ajax({
            url: "http://localhost:50473/api/Goods/CollectShop",
            data: obj,
            type: "post",
            dataType:"json",
            success:
            function (d) {
                if (d>0) {
                    alert('收藏店铺成功!');
                }
                else {
                    alert('收藏店铺失败!');
                }
            }
        })
    }
</script>

@{
    ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-3.3.1.js"></script>

<h2>商品显示</h2>

<input id="Button1" type="button" value="登录" onclick="location.href='/Goods/Login'" />
<input id="Button1" type="button" value="我的订单" onclick="order()" />
<input id="Button1" type="button" value="我的退款" onclick="drop()" />
<input id="Button1" type="button" value="我的收藏" onclick="collect()" />
<hr />

<table class="table table-bordered">
    <thead>
        <tr>
            <td>商品名称</td>
            <td>商品图片</td>
            <td>商品价格</td>
            <td>商品数量</td>
            <td>详情</td>
        </tr>
    </thead>
    <tbody id="tb"></tbody>
</table>

<script>
    function load() {
        $.ajax({
            url: "http://localhost:50473/api/Goods/GetGoods",
            type: "get",
            dataType: "json",
            success:
                function (d) {
                    $("#tb").empty();
                    $(d).each(function () {
                        $("#tb").append(
                            '<tr>' +
                            '<td>' + this.Name + '</td >' +
                            '<td><img src="http://localhost:50473' + this.Img + '" width="80" height="60" /></td>' +
                            '<td>' + this.Price + '</td>' +
                            '<td>' + this.Count + '</td>' +
                            '<td><input id="Button1" type="button" value="详情" onclick="find(' + this.Id + ')" /></td>' +
                            '</tr>'
                        )
                    })
                }
        })
    }
    load();

    //商品详情
    function find(id) {
        location.href = '/Goods/Good/' + id;
    }

    //我的订单
    function order() {
        if (document.cookie == "") {
            alert('请先登录');
            location.href = '/Goods/Login';
        }
        else {
            location.href = '/Goods/Order';
        }
    }
    //我的退款
    function drop() {
        if (document.cookie == "") {
            alert('请先登录');
            location.href = '/Goods/Login';
        }
        else {
            location.href = '/Goods/DropInfo';
        }
    }
    //我的收藏
    function collect() {
        if (document.cookie == "") {
            alert('请先登录');
            location.href = '/Goods/Login';
        }
        else {
            location.href = '/Goods/Mycollect';
        }
    }
</script>

@{
    ViewBag.Title = "Mycollect";
}
<script src="~/Scripts/jquery-3.3.1.js"></script>

<h2>我的收藏</h2>
<input id="Button1" type="button" value="首页" onclick="location.href='/Goods/Index'" />
<input id="Button1" type="button" value="全部店铺" onclick="loadshops()" />
<input id="Button1" type="button" value="全部商品" onclick="loadgoods()" />
<hr />

<div id="div" style="1000px">

</div>

<script>
    //用户id
    var uid = document.cookie;

    //加载店铺
    var sid = [];  //店铺id
    function loadshops() {
        $.ajax({
            url: "http://localhost:50473/api/Goods/GetCollectShops/" + uid,
            type: "get",
            dataType: "json",
            success:
                function (d) {
                    $("#div").empty();
                    $(d).each(function () {
                        sid.push(this.ShopId);
                        $("#div").append(
                            '<table class="table table-bordered" style="float:left;200px;height:50px">' +
                            '<thead>' +
                            '<tr>' +
                            '<td>店铺名称</td>' +
                            '</tr>' +
                            '</thead>' +
                            '<tbody>' +
                            '<tr>' +
                            '<td>' + this.Shop.SName + '</td>' +
                            '</tr>' +
                            '</tbody>' +
                            '</table>' +
                            '<table class="table table-bordered" style="float:left;780px;margin-left:20px">' +
                            '<thead>' +
                            '<tr>' +
                            '<td>商品名称</td>' +
                            '<td>商品图片</td>' +
                            '<td>商品价格</td>' +
                            '</tr>' +
                            '</thead>' +
                            '<tbody id="' + this.ShopId + '"></tbody> ' +
                            '</table>'
                        )
                    })
                    for (var i = 0; i < sid.length; i++) {
                        $.ajax({
                            async:false,
                            url: "http://localhost:50473/api/Goods/ShopsGoods/" + sid[i],
                            type: "get",
                            dataType: "json",
                            success:
                                function (d) {
                                    $("#" + sid[i]).empty();
                                    $(d).each(function () {
                                        $("#" + sid[i]).append(
                                            '<tr>' +
                                            '<td>' + this.Name + '</td>' +
                                            '<td><img src="http://localhost:50473' + this.Img + '" width="50" height="50" /></td>' +
                                            '<td>' + this.Price + '</td>' +
                                            '</tr>'
                                        )
                                    })
                                }
                        })
                    }
                }
        })
    }

    //收藏的商品
    function loadgoods() {
        $.ajax({
            url: "http://localhost:50473/api/Goods/GetCollectGoods/" + uid,
            type: "get",
            dataType: "json",
            success:
                function (d) {
                    $("#div").empty();
                    $(d).each(function () {
                        $("#div").append(
                            '<table class="table table-bordered">' +
                            '<thead>' +
                            '<tr>' +
                            '<td>商品名称</td>' +
                            '<td>商品图片</td>' +
                            '<td>商品价格</td>' +
                            '</tr>' +
                            '</thead>' +
                            '<tbody>' +
                            '<tr>' +
                            '<td>' + this.Goods.Name + '</td>' +
                            '<td><img src="http://localhost:50473' + this.Goods.Img + '" width="50" height="50" /></td>' +
                            '<td>' + this.Goods.Price + '</td>' +
                            '</tr>' +
                            '</tbody>' +
                            '</table>'
                        )
                    })
                }
        })
    }
    loadgoods();
</script>

收藏:

API控制器:

//显示收藏的商品
        [HttpGet]
        public List<CollectGoods> GetCollectGoods(int id)
        {
            var list = db.CollectGoods.Include("Goods").Where(x => x.UserId == id).ToList();
            return list;
        }
        //显示收藏的店铺
        [HttpGet]
        public List<CollectShops> GetCollectShops(int id)
        {
            var list = db.CollectShops.Include("Shop").Where(x => x.UserId == id).ToList();
            return list;
        }

收藏页面(MVC  View):

@{
    ViewBag.Title = "Mycollect";
}
<script src="~/Scripts/jquery-3.3.1.js"></script>

<h2>我的收藏</h2>
<input id="Button1" type="button" value="首页" onclick="location.href='/Goods/Index'" />
<input id="Button1" type="button" value="全部店铺" onclick="loadshops()" />
<input id="Button1" type="button" value="全部商品" onclick="loadgoods()" />
<hr />

<div id="div" style="1000px">

</div>

<script>
    //用户id
    var uid = document.cookie;

    //加载店铺
    var sid = [];  //店铺id
    function loadshops() {
        $.ajax({
            url: "http://localhost:50473/api/Goods/GetCollectShops/" + uid,
            type: "get",
            dataType: "json",
            success:
                function (d) {
                    $("#div").empty();
                    $(d).each(function () {
                        sid.push(this.ShopId);
                        $("#div").append(
                            '<table class="table table-bordered" style="float:left;200px;height:50px">' +
                            '<thead>' +
                            '<tr>' +
                            '<td>店铺名称</td>' +
                            '</tr>' +
                            '</thead>' +
                            '<tbody>' +
                            '<tr>' +
                            '<td>' + this.Shop.SName + '</td>' +
                            '</tr>' +
                            '</tbody>' +
                            '</table>' +
                            '<table class="table table-bordered" style="float:left;780px;margin-left:20px">' +
                            '<thead>' +
                            '<tr>' +
                            '<td>商品名称</td>' +
                            '<td>商品图片</td>' +
                            '<td>商品价格</td>' +
                            '</tr>' +
                            '</thead>' +
                            '<tbody id="' + this.ShopId + '"></tbody> ' +
                            '</table>'
                        )
                    })
                    for (var i = 0; i < sid.length; i++) {
                        $.ajax({
                            async:false,
                            url: "http://localhost:50473/api/Goods/ShopsGoods/" + sid[i],
                            type: "get",
                            dataType: "json",
                            success:
                                function (d) {
                                    $("#" + sid[i]).empty();
                                    $(d).each(function () {
                                        $("#" + sid[i]).append(
                                            '<tr>' +
                                            '<td>' + this.Name + '</td>' +
                                            '<td><img src="http://localhost:50473' + this.Img + '" width="50" height="50" /></td>' +
                                            '<td>' + this.Price + '</td>' +
                                            '</tr>'
                                        )
                                    })
                                }
                        })
                    }
                }
        })
    }

    //收藏的商品
    function loadgoods() {
        $.ajax({
            url: "http://localhost:50473/api/Goods/GetCollectGoods/" + uid,
            type: "get",
            dataType: "json",
            success:
                function (d) {
                    $("#div").empty();
                    $(d).each(function () {
                        $("#div").append(
                            '<table class="table table-bordered">' +
                            '<thead>' +
                            '<tr>' +
                            '<td>商品名称</td>' +
                            '<td>商品图片</td>' +
                            '<td>商品价格</td>' +
                            '</tr>' +
                            '</thead>' +
                            '<tbody>' +
                            '<tr>' +
                            '<td>' + this.Goods.Name + '</td>' +
                            '<td><img src="http://localhost:50473' + this.Goods.Img + '" width="50" height="50" /></td>' +
                            '<td>' + this.Goods.Price + '</td>' +
                            '</tr>' +
                            '</tbody>' +
                            '</table>'
                        )
                    })
                }
        })
    }
    loadgoods();
</script>

文件上传:

API控制器:

//文件上传
        [HttpPost]
        public FileResult UpLoad()
        {
            return help.UpLoad();
        }

退款:

API控制器:

//退款
        [HttpGet]
        public int DropOrder(string reason, string img, int count, int gid, int uid)
        {
            string sql = "p_drop";

            SqlParameter[] par = new SqlParameter[] {
                new SqlParameter("@Reason",reason),
                new SqlParameter("@Img",img),
                new SqlParameter("@Count",count),
                new SqlParameter("@GId",gid),
                new SqlParameter("@UId",uid),
                new SqlParameter("@Code",SqlDbType.Int)
            };
            par[5].Direction = ParameterDirection.Output;
            DBHelper.ExecuteNonQueryParameter(sql, par);
            var code = par[5].Value;
            return Convert.ToInt32(code.ToString());
        }
        //显示退款表
        [HttpGet]
        public List<DropOrder> GetDropOrders(int uid)
        {
            var list = db.DropOrders.Include("Goods").Where(x => x.UserId == uid).ToList();
            return list;
        }
    }
}

退款页面(MVC  View):

@{
    ViewBag.Title = "DropInfo";
}
<script src="~/Scripts/jquery-3.3.1.js"></script>

<h2>我的退款</h2>

<table class="table table-bordered">
    <thead>
        <tr>
            <td>商品名称</td>
            <td>退款原因</td>
            <td>图片反映</td>
            <td>退货数量</td>
        </tr>
    </thead>
    <tbody id="tb"></tbody>
</table>
<script>
    var uid = document.cookie;
    function load() {
        $.ajax({
            url: "http://localhost:50473/api/Goods/GetDropOrders?uid="+uid,
            type: "get",
            dataType: "json",
            success:
                function (d) {
                    $("#tb").empty();
                    $(d).each(function () {
                        $("#tb").append(
                            '<tr>' +
                            '<td>' + this.Goods.Name + '</td>' +
                            '<td>' + this.Reason + '</td>' +
                            '<td><img src="http://localhost:50473' + this.Img + '" width="50" height="50" /></td>' +
                            '<td>' + this.Count + '</td>' +
                            '</tr>'
                        )
                    })
                }
        })
    }
    load();
</script>

@{
    ViewBag.Title = "Drop";
}
<script src="~/Scripts/jquery-3.3.1.js"></script>

<h2>订单退款</h2>

<table class="table table-bordered">
    <tr>
        <td>退款商品:</td>
        <td> <span id="img"></span> <span id="name"></span> </td>
    </tr>
    <tr>
        <td>已购数量:</td>
        <td>
            <input id="count" type="text" disabled="disabled" />
        </td>
    </tr>
    <tr>
        <td>退货金额:</td>
        <td>
            <input id="money" type="text" disabled="disabled" />
        </td>
    </tr>
    <tr>
        <td>退货原因:</td>
        <td>
            <input id="reason" type="text" />
        </td>
    </tr>
    <tr>
        <td>
            上传图片:
            <input type="file" id="f1" />
        </td>
        <td>
            <input id="Button1" type="button" value="上传" onclick="ff()" />
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input id="Button2" type="button" value="提交" onclick="add()" />
        </td>
    </tr>
</table>

<script>
    //获取订单id
    var oid =@Session["OId"];
    //登录人id
    var uid =parseInt(document.cookie);
    var gid = 0;

    //反填信息
    function find() {
        $.ajax({
            url: "http://localhost:50473/api/Goods/FindOrder/"+oid,
            type: "get",
            dataType: "json",
            success:
                function (d) {
                    //获取商品id
                    gid = d.Goods.Id;
                    $("#img").append('<img src="http://localhost:50473' + d.Goods.Img + '" width="60" height="60" />');
                    $("#name").text(d.Goods.Name);
                    $("#count").val(d.Count);
                    $("#money").val(d.Count*d.Goods.Price+'元');
                }
        })
    }
    find();

    //上传图片
    var img = new Array();  //获取图片路径
    function ff()
    {
        var formData = new FormData();
        var file = document.getElementById("f1").files[0];
        formData.append("fileInfo", file);
            $.ajax({
                url: "http://localhost:50473/api/Goods/UpLoad",
                type: "post",
                data: formData,
                contentType: false,//必须false才会自动加上正确的Content-Type
                processData: false,//必须false才会避开jQuery对 formdata 的默认处理，XMLHttpRequest会对 formdata 进行正确的处理
                success: function(data) {
                    if (data.Code < 0) {
                        alert('上传失败!');
                    }
                    else {
                        alert(data.Msg);
                        alert(data.Url);
                        img = (data.Url).split(';');
                    }

                },
                error: function(data) {
                alert("上传失败！");
            }
        });
    }

    //退货
    function add() {
        $.ajax({
            url: "http://localhost:50473/api/Goods/DropOrder",
            data: {reason: $("#reason").val(),img:img[0],count:$("#count").val(), gid:gid,uid:uid},
            type: "get",
            dataType: "json",
            success:
                function (d) {
                    if (d>0) {
                        alert('退货成功!');
                    }
                    else {
                        alert('退货失败!');
                    }
                }
        })
    }
</script>