ViewModel

 

為什麼需要ViewModel這種結構呢？

原來是為了應付一次需要傳多個Model到View裡，直接講一個簡單的範例貫穿ViewModel結構。

 

Model部份：

於Model準備ClassShape與ClassSize類別

ClassShape類別

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

namespace WebApplication1.Models
{
    public class ClassShape
    {
        public string shape { get; set; } 
    }
}

ClassSize類別

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

namespace WebApplication1.Models
{
    public class ClassSize
    {
        public int size { get; set; }
    }
}

 

ViewModel部份：

固定在專案底下新增一個專門用來放ViewModel類別的名為ViewModels資料夾，

而當你有多個ViewModel類別需要管理時，則會依據 Controller 的不同分別建立子目錄，

就如同 Views 目錄下的子目錄，依據 Controller 的名稱來建立子目錄，如下圖。

類別的名稱通常會以「ViewModel」做結尾字，而字首會以Controller ＋ Action名稱來命名。

一次準備兩個ViewModel

HomeIndexViewModel

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

namespace WebApplication1.ViewModels.Home
{
    public class HomeIndexViewModel
    {
        public IEnumerable<ClassShape> ClassShapeCollection { get; set; }
        public IEnumerable<ClassSize> ClassSizeCollection { get; set; }
    }
}

HomeAboutViewModel

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

namespace WebApplication1.ViewModels.Home
{
    public class HomeAboutViewModel
    {
        public SelectList ClassShapeCollection { get; set; }
        public SelectList ClassSizeCollection { get; set; }
    }
}

 

Controller部份：

由於一次舉兩個小例子，分別放在Index與About裡面，都大同小異。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication1.ViewModels.Home;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        HomeIndexViewModel HomeIndexViewModel = new HomeIndexViewModel();
        HomeAboutViewModel HomeAboutViewModel = new HomeAboutViewModel();

        public ActionResult Index()
        {
            List<ClassShape> ClassShapeCollection = new List<ClassShape>();
            List<ClassSize> ClassSizeCollection = new List<ClassSize>();

            ClassShapeCollection.Add(new ClassShape() { shape = "triangle" });
            ClassShapeCollection.Add(new ClassShape() { shape = "retangle" });
            ClassShapeCollection.Add(new ClassShape() { shape = "circle" });

            ClassSizeCollection.Add(new ClassSize() { size = 10 });
            ClassSizeCollection.Add(new ClassSize() { size = 20 });
            ClassSizeCollection.Add(new ClassSize() { size = 30 });

            HomeIndexViewModel.ClassShapeCollection = ClassShapeCollection;
            HomeIndexViewModel.ClassSizeCollection = ClassSizeCollection;

            return View(HomeIndexViewModel);
        }

        public ActionResult About()
        {
            List<ClassShape> ClassShapeCollection = new List<ClassShape>();
            List<ClassSize> ClassSizeCollection = new List<ClassSize>();

            ClassShapeCollection.Add(new ClassShape() { shape = "triangle" });
            ClassShapeCollection.Add(new ClassShape() { shape = "retangle" });
            ClassShapeCollection.Add(new ClassShape() { shape = "circle" });

            ClassSizeCollection.Add(new ClassSize() { size = 10 });
            ClassSizeCollection.Add(new ClassSize() { size = 20 });
            ClassSizeCollection.Add(new ClassSize() { size = 30 });

            HomeAboutViewModel.ClassShapeCollection = new SelectList(ClassShapeCollection, "shape", "shape");
            HomeAboutViewModel.ClassSizeCollection = new SelectList(ClassSizeCollection, "size", "size");

            return View(HomeAboutViewModel);
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

 

View的部份：

Index.cshtml

@model WebApplication1.ViewModels.Home.HomeIndexViewModel

<table>
    @foreach (var item in Model.ClassShapeCollection)
    {
        <tr>
            <td>@item.shape</td>
        </tr>
    }

    @foreach (var item in Model.ClassSizeCollection)
    {
        <tr>
            <td>@item.size</td>
        </tr>
    }
</table>

About.cshtml

@model WebApplication1.ViewModels.Home.HomeAboutViewModel

@Html.DropDownList("ClassShapeCollection", @Model.ClassShapeCollection)

@Html.DropDownListFor(m => m.ClassSizeCollection, @Model.ClassSizeCollection)

 

結論：

此篇文章主要目的是呈現ViewModel的結構，力求易理解好吸收，主要以極簡範例代替說明，

加上個人時間有限，因此省略了很多敘述請見諒。

 

參考資料：

ASP.NET MVC 的 ViewModel - 基礎篇

AutoMapper 初體驗