一、一種寫法

1、Domain=Model
2、Repository=Dal
3、Service=Bll

4、寫成資料夾或直接做成方法可以清晰的分辨寫作的程式碼模組

二、Dal層

//顯示 查詢
        public List<DisPlayModel> GetShow(int? nid,string name)
        {
            var list = from a in db.UserModels
                       join b in db.TableModels on a.BNId equals b.NId
                       join c 
 
in db.TableModels on a.BPId equals c.PId
                       select new DisPlayModel
                       {
                           Id = a.Id,
                           Pictrue = a.Pictrue,
                           Number = a.Number,
                           Name = a.Name,
                           BNId 
 
= a.BNId,
                           BNName = b.TradeName,
                           Shop = a.Shop,
                           BPId = a.BPId,
                           BPName = c.TradeName,
                           SellingPrice = a.SellingPrice,
                           MarketPrice = a.MarketPrice,
                           Repertory 
 
= a.Repertory,
                           Weight = a.Weight,
                           IssueTime = a.IssueTime,
                           State = a.State,

                           NId = b.NId,
                           TradeName = b.TradeName,
                           PId = b.PId
                       };
            if(nid!=null)
            {
                list = list.Where(p => p.NId == nid);
            }
            if(!string.IsNullOrEmpty(name))
            {
                list = list.Where(p => p.Name.Contains(name));
            }

            return list.ToList();
        }

        //新增
        public int Adds(UserModel user)
        {
            db.UserModels.Add(user);
            return db.SaveChanges();
        }

        //下拉框
        public List<TableModel> GetXiaLa(int id)
        {
            return db.TableModels.Where(p => p.PId == id).ToList();
        }

三、Bll層

//顯示查詢
        public List<DisPlayModel> GetShow(int? nid, string name)
        {
            return userDal.GetShow(nid, name);
        }
        //新增
        public int Adds(UserModel user)
        {
            return userDal.Adds(user);
        }
        //下拉框
        public List<TableModel> GetXiaLa(int id)
        {
            return userDal.GetXiaLa(id);
        }

四、控制器

 //顯示頁面
        public ActionResult Index()
        {
            return View();
        }
        //顯示 查詢
        [HttpGet]
        public ActionResult  GetShow(int? nid, string name)
        {
            var list = userBll.GetShow(nid,name);
            return Json(list,JsonRequestBehavior.AllowGet);
        }
        //新增頁面
        public ActionResult Add()
        {
            return View();
        }
        //新增功能
        [HttpPost]
        public ActionResult Adds(UserModel user)
        {
             return Json(userBll.Adds(user),JsonRequestBehavior.DenyGet);
        }

        //下拉框功能
        [HttpGet]
        public ActionResult  GetXiaLa(int id)
        {
            return Json(userBll.GetXiaLa(id),JsonRequestBehavior.AllowGet);
        }

        //檔案上傳功能
        [HttpPost]
        public ActionResult UpLoad()
        {
            try
            {
                //一、獲取前臺傳過來的檔案
                var file = Request.Files[0];
                //將虛擬路徑轉成物理路徑
                var imgDir = Server.MapPath("/Images/");
                //判斷你要儲存的資料夾是否存在，不存在建立
                //需要引用System.IO
                if (!Directory.Exists(imgDir))
                {
                    //建立資料夾
                    Directory.CreateDirectory(imgDir);
                }
                //儲存
                file.SaveAs(imgDir + file.FileName);
                return Json(new { code = 1, fileName = file.FileName, msg = "" },JsonRequestBehavior.DenyGet);
            }
            catch (Exception ex)
            {
                return Json(new { code = 0, fileName = "", msg = ex.Message }, JsonRequestBehavior.DenyGet);
                
            }
        }

五、頁面顯示

@*引用*@
<script src="~/Content/vue.js"></script>
<script src="~/Content/axios.js"></script>
<div id="app">
    <table class="table table-bordered">
        <tr>
            <td>商品圖:</td>
            <td><input type="file" value="" v-on:change="UpLoad" /></td>
        </tr>
        <tr>
            <td>商品編號:</td>
            <td><input type="text" v-model="pageData.Number" value="" /></td>
        </tr>
        <tr>
            <td>商品名稱:</td>
            <td><input type="text" v-model="pageData.Name" value="" /></td>
        </tr>
        <tr>
            <td>商品分類:</td>
            <td>
                品牌:
                <select v-model="pageData.BNId" v-on:change="getClassifys">
                    <option v-for="(item,index) in brands" :value="item.NId">{{item.TradeName}}</option>
                </select>
                所屬分類:
                <select v-model="pageData.BPId">
                    <option v-for="(item,index) in classifys" :value="item.NId">{{item.TradeName}}</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>商鋪:</td>
            <td><input type="text" v-model="pageData.Shop" value="" /></td>
        </tr>

        <tr>
            <td>銷售價:</td>
            <td><input type="text" v-model="pageData.SellingPrice" value="" /></td>
        </tr>
        <tr>
            <td>市場價:</td>
            <td><input type="text" v-model="pageData.MarketPrice" value="" /></td>
        </tr>
        <tr>
            <td>庫存:</td>
            <td><input type="text" v-model="pageData.Repertory" value="" /></td>
        </tr>
        <tr>
            <td>重量:</td>
            <td><input type="text" v-model="pageData.Weight" value="" /></td>
        </tr>
        <tr>
            <td>釋出時間:</td>
            <td><input type="date" v-model="pageData.IssueTime" value="" /></td>
        </tr>
        <tr>
            <td>上架狀態:</td>
            <td>
                <input type="radio" name="name" v-model="pageData.State" value="1" />上架
                <input type="radio" name="name" v-model="pageData.State" value="2" />下架
                <input type="radio" name="name" v-model="pageData.State" value="3" />未上架
            </td>
        </tr>
        <tr>
            <td></td>
            <td colspan="2"><input type="button" class="btn btn-success" v-on:click="PostAdd" value="新添" /></td>
        </tr>

    </table>
</div>

<script>
    let app = new Vue({
        el: "#app",
        //類
        data() {
            return {
                pageData: {
                    Pictrue: "",
                    Number: "",
                    Name: "",
                    BNId: "0",
                    BPId: "0",
                    Shop: "",
                    SellingPrice: "",
                    MarketPrice: "",
                    Repertory: "",
                    Weight: "",
                    IssueTime: "",
                    State: "",
                },
                brands: [],
                classifys: [],

            }
        },
        //方法
        methods: {
            //品牌
            getBrand() {
                axios.get('/User/GetXiaLa?id=0').then(res => {
                    this.brands = res.data;
                    this.brands.unshift({ "NId": "0", "TradeName": "請選擇" });
                });
            },
            //分類
            getClassifys() {
                if (this.pageData.BNId > 0) {
                    axios.get('/User/GetXiaLa?id=' + this.pageData.BNId).then(res => {
                        this.classifys = res.data;
                        this.classifys.unshift({ "NId": "0", "TradeName": "請選擇" });
                        this.pageData.BPId = 0;
                    });
                }
                this.classifys = [];
            },
            //上傳圖片
            UpLoad(event) {
                //獲取圖片
                let file = event.target.files[0];
                //設定頭部型別
                //可不寫 但不標準
                let config = {
                    haders: {
                        'Context-Type': "multpart/form-data"
                    }
                }
                let fd = new FormData();
                fd.append("file", file);
                axios.post('/User/UpLoad', fd, config).then(res => {
                    if (res.data.code > 0) {
                        this.pageData.Pictrue = res.data.fileName;
                        alert("上傳成功");
                    }
                    else {
                        alert(res.data.msg);
                    }
                })

            },

            //新增
            PostAdd() {
                axios.post('/User/Adds', this.pageData).then(res => {
                    if (res.data > 0) {
                        alert("新增成功");
                    }
                    else {
                        alert("新增失敗");
                    }
                })
            }

        },
        //文件就緒函式
        created: function () {
            this.getBrand();
        }
    })
</script>

待續......