ASP.NET MVC
ViewModel

Just Model for View,
not MVVM, Model-View-ViewModel

Model

View

Controller


public ActionResult Index() 
{
         .
         .
         .

    return View(Model);
}

Controller.cs

ViewModel

View

Controller


public ActionResult Index() 
{
         .
         .
         .

    return View(ViewModel);
}

Controller.cs

ViewModel

View

Controller

[1]

ViewBag

ViewData

[2]

Model

( ViewModel )

Case: Sorting Events by Date

    <ul>
        @{
            System.Data.DataTable dtEvents = ViewBag.Events as System.Data.DataTable;
            foreach (System.Data.DataRow dr in dtEvents.Rows)
            {
                <li class="relatedItem">
                    <div>
                        <h4 class="eventTitle"><a href="@(dr["HYPER_LINK"].ToString().ToUpper().StartsWith("HTTP://") ? dr["HYPER_LINK"] : "http://" + dr["HYPER_LINK"])" target="_blank">@Html.Raw(dr["TITLE"])</a></h4>
                        <p>@(String.Format("{0: M/d/yyyy}", dr["EVENT_START"]) + "-" + String.Format("{0: M/d/yyyy}", dr["EVENT_END"])) </p>
                        <p>@(dr["City"] + "," + dr["COUNTRY"])</p>
                        <p>@dr["BOOTH"]</p>
                    </div><br style="clear:both;" />
                </li>
            }
         }
    </ul>

View

        public ActionResult Events()
        {
            Advantech.Bussiness.CMS Biz_CMS = new Advantech.Bussiness.CMS();
            Biz_CMS.L_TypeID.Add(News_Type.Events);
            Biz_CMS.L_ProductCategory.Add("7f854079-4f60-47c7-9bc6-07cc21c0e740");
            Biz_CMS.iTop = 4;
            Biz_CMS.L_CMSOffice.Add(base.propCMS_TargetArea);
            DataSet ds = Biz_CMS.getCMS_MASTERBy();
            ViewBag.Events = ds.Tables[0];
            return View();
       }

Controller

Step 1. ViewModel

   
    public class TupleEventsViewModel
    {
        public List<IotEvent> EventList { set; get; }
    }


    public class IotEvent
    {
        public String TitleLink { get; set; }
        public String Title { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }
        public String City { get; set; }
        public String Country { get; set; }
        public String Booth { get; set; }
    }

ViewModel

        public ActionResult Events()
        {
            TupleEventsViewModel vm = new TupleEventsViewModel();

            Advantech.Bussiness.CMS Biz_CMS = new Advantech.Bussiness.CMS();
            ... ... ...
            DataSet ds = Biz_CMS.getCMS_MASTERBy();

            List<IotEvent> eventList = new List<IotEvent>();

            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                IotEvent evt = new IotEvent();

                String drTitleLink =   dr["HYPER_LINK"].ToString();
                evt.TitleLink = drTitleLink.ToUpper().StartsWith("HTTP://") ? drTitleLink : "http://" + drTitleLink;

                evt.Title = dr["TITLE"].ToString();
                evt.StartDate = Convert.ToDateTime(dr["EVENT_START"]);
                evt.EndDate = Convert.ToDateTime(dr["EVENT_END"]);
                evt.City = dr["City"].ToString();
                evt.Country = dr["COUNTRY"].ToString();
                evt.Booth = dr["BOOTH"].ToString();

                eventList.Add(evt);
            }
            eventList.Sort(delegate(IotEvent evtA, IotEvent evtB){
                return DateTime.Compare(evtA.StartDate, evtB.StartDate);
            });

            vm.EventList = eventList;

            return View(vm);
        }

        public ActionResult Events()
        {
            TupleEventsViewModel vm = new TupleEventsViewModel();

            Advantech.Bussiness.CMS Biz_CMS = new Advantech.Bussiness.CMS();
            ... ... ...
            DataSet ds = Biz_CMS.getCMS_MASTERBy();

            List<IotEvent> eventList = new List<IotEvent>();

            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                IotEvent evt = new IotEvent();

                String drTitleLink =   dr["HYPER_LINK"].ToString();
                evt.TitleLink = drTitleLink.ToUpper().StartsWith("HTTP://") ? drTitleLink : "http://" + drTitleLink;

                evt.Title = dr["TITLE"].ToString();
                evt.StartDate = Convert.ToDateTime(dr["EVENT_START"]);
                evt.EndDate = Convert.ToDateTime(dr["EVENT_END"]);
                evt.City = dr["City"].ToString();
                evt.Country = dr["COUNTRY"].ToString();
                evt.Booth = dr["BOOTH"].ToString();

                eventList.Add(evt);
            }
            eventList.Sort(delegate(IotEvent evtA, IotEvent evtB){
                return DateTime.Compare(evtA.StartDate, evtB.StartDate);
            });

            vm.EventList = eventList;

            return View(vm);
        }

    @model Web.Model.xxxxxViewModel

    ... ... ...

    <ul>
        @foreach (var evt in Model.EventList)
        {
        <li class="relatedItem">
            <div>
                <h4 class="eventTitle">
                    <a href="@evt.TitleLink" target="_blank">@Html.Raw(evt.Title)</a>
                </h4>
                <p>@evt.StartDate.ToString("M/dd/yyyy") - @evt.EndDate.ToString("M/dd/yyyy") </p>
                <p>@evt.City, @evt.Country</p>
                <p>@evt.Booth</p>

            </div><br style="clear:both;" />
        </li>
        }
    </ul>

    @model Web.Model.xxxxxViewModel

    ... ... ...

    <ul>
        @foreach (var evt in Model.EventList)
        {
        <li class="relatedItem">
            <div>
                <h4 class="eventTitle">
                    <a href="@evt.TitleLink" target="_blank">@Html.Raw(evt.Title)</a>
                </h4>
                <p>@evt.StartDate.ToString("M/dd/yyyy") - @evt.EndDate.ToString("M/dd/yyyy") </p>
                <p>@evt.City, @evt.Country</p>
                <p>@evt.Booth</p>

            </div><br style="clear:both;" />
        </li>
        }
    </ul>

    @model Web.Model.xxxxxViewModel

    ... ... ...

    <ul>
        @foreach (var evt in Model.EventList)
        {
        <li class="relatedItem">
            <div>
                <h4 class="eventTitle">
                    <a href="@evt.TitleLink" target="_blank">@Html.Raw(evt.Title)</a>
                </h4>
                <p>@evt.StartDate.ToString("M/dd/yyyy") - @evt.EndDate.ToString("M/dd/yyyy") </p>
                <p>@evt.City, @evt.Country</p>
                <p>@evt.Booth</p>

            </div><br style="clear:both;" />
        </li>
        }
    </ul>

    <ul>
        @{
            System.Data.DataTable dtEvents = ViewBag.Events as System.Data.DataTable;
            foreach (System.Data.DataRow dr in dtEvents.Rows)
            {
                <li class="relatedItem">

Before

After

    @model Web.Model.xxxxxViewModel

    ... ... ...

    <ul>
        @foreach (var evt in Model.EventList)
        {
        <li class="relatedItem">
            <div>
                <h4 class="eventTitle">
                    <a href="@evt.TitleLink" target="_blank">@Html.Raw(evt.Title)</a>
                </h4>
                <p>@evt.StartDate.ToString("M/dd/yyyy") - @evt.EndDate.ToString("M/dd/yyyy") </p>
                <p>@evt.City, @evt.Country</p>
                <p>@evt.Booth</p>

            </div><br style="clear:both;" />
        </li>
        }
    </ul>

<h4 class="eventTitle">
    <a href="@(dr["HYPER_LINK"].ToString().ToUpper().StartsWith("HTTP://") ? 
        dr["HYPER_LINK"] : "http://" + dr["HYPER_LINK"])" 
        target="_blank">@Html.Raw(dr["TITLE"])</a>
</h4>

Before

After

    @model Web.Model.xxxxxViewModel

    ... ... ...

    <ul>
        @foreach (var evt in Model.EventList)
        {
        <li class="relatedItem">
            <div>
                <h4 class="eventTitle">
                    <a href="@evt.TitleLink" target="_blank">@Html.Raw(evt.Title)</a>
                </h4>
                <p>@evt.StartDate.ToString("M/dd/yyyy") - @evt.EndDate.ToString("M/dd/yyyy") </p>
                <p>@evt.City, @evt.Country</p>
                <p>@evt.Booth</p>

            </div><br style="clear:both;" />
        </li>
        }
    </ul>

<p>@(String.Format("{0: M/d/yyyy}", dr["EVENT_START"]) + "-" + String.Format("{0: M/d/yyyy}", dr["EVENT_END"])) </p>

<p>@(dr["City"] + "," + dr["COUNTRY"])</p>

<p>@dr["BOOTH"]</p>

Before

After

Concept

One View, one ViewModel
ViewModel is only exist for its View.

    /project

        /Controller
            pdMiniSiteController.cs

        /View
            /pdMiniSite
                Index.cshtml
                List.cshtml
                Detail.cshtml

        /Model
            /pdMiniSite
                IndexViewModel.cs
                ListViewModel.cs
                DetailViewModel.cs

namespace Web.Models.SuccessStories
{

    public class DetailViewModel
    {
        public String ArticleTitle { get; set; }
        public String Content { get; set; }
        public String pdf { get; set; }

        public List<DetailTag> TagList { get; set; }
        public List<RelatedProduct> RelatedProductList { get; set; }
        public List<RelatedStory> RelatedStoryList { get; set; }
    }

    public class DetailTag
    {
        public String tagID { get; set; }
        public String tagName { get; set; }
    }

    public class RelatedProduct
    {
        public String imageURL { get; set; }
        public String DisplayName { get; set; }
        public String Description { get; set; }
        public String url { get; set; }
    }

    public class RelatedStory
    {
        public String RECORD_ID { get; set; }
        public String RECORD_IMG { get; set; }
        public String TITLE { get; set; }
        public String ABSTRACT { get; set; }

        public List<DetailTag> TAGS = new List<DetailTag>();
    }
}

ArticleTitle

Content

RelatedProductList

TagList

RelatedStoryList

ViewModel

View

Controller

front-end

back-end

HTML
CSS
JavaScript
… …

C#, VB
Entity Framwork
WebAPI
... ...

asp.net mvcViewModel

By Jayson Chiang

ASP.NET MVC ViewModel

Concept

asp.net mvcViewModel

More from Jayson Chiang

ASP.NET MVC
ViewModel