一、後臺操作

• 使用資料遷移Code First的方式去操作
• dal層繫結下拉框

public List<GoodsTypeModel> Bind(int id)
        {
            return db.GoodsTypes.Where(m => m.PId == id).ToList();
        }

• 控制器

[HttpGet]
        public ActionResult Bind(int id)
        {
            return Json(bll.Bind(id), JsonRequestBehavior.AllowGet);
        }
 

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

二、前臺操作

1、頁面佈局

@{
ViewBag.Title = "AddGoods";
}
<script src="/Scripts/vue.js"></script>
<script src="/Scripts/axios.js"></script>
<h2>AddGoods</h2>

<div id="app">
<table class="table table-hover">
<tr>
<td>商品圖</td>
<td>
<input type="file" name="name" value="" v-model="GoodsData.Img" v-on:change="upLoad"/>
</td>
</tr>
<tr>
<td>商品編號</td>
<td>
<input type="text" name="name" value="" v-model="GoodsData.Number"/>
</td>
</tr>
<tr>
<td>商品名稱</td>
<td>
<input type="text" name="name" value="" v-model="GoodsData.Name"/>
</td>
</tr>
<tr>
<td>品牌</td>
<td>
<select v-model="GoodsData.PId">
<option v-for="(item,index) in binds" :value="item.TId">{{item.TName}}</option>
</select>
</td>
</tr>
<tr>
<td>商鋪</td>
<td>
<input type="text" name="name" value="" v-model="GoodsData.Shop"/>
</td>
</tr>
<tr>
<td>所屬分類</td>
<td>
<select v-model="GoodsData.TId" v-on:change="bindm">
<option v-for="(item,index) in bind" :value="item.TId">{{item.TName}}</option>
</select>
</td>
</tr>
<tr>
<td>銷售價</td>
<td>
<input type="text" name="name" value="" v-model="GoodsData.SellPrice"/>
</td>
</tr>
<tr>
<td>市場價</td>
<td>
<input type="text" name="name" value="" v-model="GoodsData.MarketPrice"/>
</td>
</tr>
<tr>
<td>庫存</td>
<td>
<input type="text" name="name" value="" v-model="GoodsData.Stock"/>
</td>
</tr>
<tr>
<td>重量</td>
<td>
<input type="text" name="name" value="" v-model="GoodsData.Weight"/>
</td>
</tr>
<tr>
<td>釋出時間</td>
<td>
<input type="date" name="name" value="" v-model="GoodsData.CreateTime"/>
</td>
</tr>
<tr>
<td>上架狀態</td>
<td>
<input type="radio" name="name" value="0" v-model="GoodsData.Status"/>未上架
<input type="radio" name="name" value="1" v-model="GoodsData.Status"/>上架
<input type="radio" name="name" value="2" v-model="GoodsData.Status"/>下架
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" name="name" value="新增" v-on:click="addGoods"/>
</td>
</tr>
</table>
</div>

2、操作

<script>
    let app = new Vue({
        el: "#app",
        data() {
            return {
                GoodsData: {
                    Img: "",
                    Number: "",
                    Name: "",
                    TId: "",
                    PId: "",
                    SellPrice: "",
                    MarketPrice: "",
                    Stock: "",
                    Weight: "",
                    CreateTime: "",
                    Status: "",
                    Shop: "",
                },
                bind: [],
                binds:[]
            }
        },
        methods: {
            addGoods() {
                axios.post('/Goods/AddGoods', this.GoodsData).then(res => {
                    if (res.data > 0) {
                        alert("新增成功");
                        location.href = '/Goods/ShowGoods';
                    }
                    else {
                        alert("新增失敗");
                    }
                })
            },
            bindk() {
                axios.get('/Goods/Bind?id=0').then(res => {
                    this.bind = res.data;
                    this.bind.unshift({ "TId": "0", "TName": "請選擇" });
                })
            },
            bindm() {
                if (this.GoodsData.TId > 0) {
                    axios.get('/Goods/Bind?id=' + this.GoodsData.TId).then(res => {
                        this.binds = res.data;
                        this.binds.unshift({ "TId": "0", "TName": "請選擇" });
                        this.GoodsData.PId = 0;
                    })
                }
                this.binds = [];
            },
            upLoad(event) {
                let file = event.target.files[0];
                let config = {
                    headers: {
                        'Context-Type': "multipart / form - data"
                    }
                }
                let fd = new FormData();
                fd.append("file", file);
                axios.post('/Goods/UpLoad', fd).then(res => {
                    if (res.data.code == 1) {
                        alert("成功");
                        this.GoodsData.Img = res.data.filName;
                    }
                    else {
                        alert("失敗");
                    }
                })
            }
        },
        created: function () {
            this.bindk();
        }
    })
</script>