阿駿的部落格

在寫 asp.net core MVC 時，常常需要傳多個資料模型(Models)到前端，

這邊就先筆記一種傳多個Model到前端的方法。

1.建立一個TestModel.cs ，裡面放兩個Class。

程式碼:

namespace Test.Models
{
    public class TestModel
    {
        public string Type { get; set; }
        public string TypeName { get; set; }
    }

    public class ImgOrderModel
    {
        public string OrderValue { get; set; }
        public string OrderName { get; set; }
        public int Order { get; set; }
    }
}

2.在Controller 裡面，建立物件並賽入測試資料。

使用 Tuple 資料型別，塞入陣列 -> 傳送到前端。

程式碼:

       [HttpGet]
        public async Task<IActionResult> TestMulModels()
        {
           

            TypeNameModel[] TypeList =
            {
            new TypeNameModel{ Type="A",TypeName="分類" },
            new TypeNameModel{ Type="B",TypeName="物件偵測" },
            new TypeNameModel{ Type="C" ,TypeName="與意分割" }
            };

            ImgOrderModel[] Order =
            {
            new ImgOrderModel{ OrderValue="OA",OrderName="最新",Order= 1 },
            new ImgOrderModel{ OrderValue="OB",OrderName="價錢高低",Order= 2 },
            new ImgOrderModel{ OrderValue="OC",OrderName="難易度",Order= 3 }
            };

            var TupleModel = new Tuple<TypeNameModel[], ImgOrderModel[]>(TypeList, Order);//重要~~

            //var TupleModel = new Tuple<List<ImgOrderModel>, ImgOrderModel[]>(TypeList, Order);//補充:如果資料型態是list，就要轉換型態

            return View(TupleModel);
        }

3.前端程式

主要就是把Model 的物件型態引用進來，期他就跟之前都是相同的了

程式碼:

@model Tuple<GoMarking.Models.TypeNameModel[], GoMarking.Models.ImgOrderModel[]>

    <h1>上傳圖片</h1>
    <form enctype="multipart/form-data" asp-controller="Home" asp-action="Requester" method="post">
        類別名稱:
        <select name="TypeName">
            @foreach (var item in Model.Item2)
            {
                <option value="@item.Type">@item.TypeName</option>
            }
        </select> <br />
        排序方法:
        @foreach (var item in Model.Item3)
        {
            @item.OrderName
            <input type="checkbox" id="@item.OrderValue" name="@item.OrderName" value="@item.OrderValue" />
        }
        <br />
        備註: <input name="Remark" />
        <button type="submit" class="btn btn-primary">查詢</button>
    </form>

總結: 這樣就可以把後端多個models資料串接到前端了~

下次再筆記另外一種方式。