.NET Core第14天_检视模型ViewModel_Controller跟View双向资料传递方式

视图(检视)模型 / ViewModel
主要用於为View提供资料

ViewModel当中的属性不一定会跟资料表栏位一一对应，因为在该View中
可能存在多个资料表中的资料，也因此在ViewModel设计属性集合中也会是来自於多个表(可能有join的操作)
一般存放在Models目录，但非必须。

创建好新的.net5 mvc专案後
在Models目录新增一个Student Model Class

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

namespace Net5App6.Models
{
    public class StudentViewModel
    {
        /// <summary>
        /// 学生编号
        /// </summary>
        public int Id { get; set; }
        /// <summary>
        /// 学生姓名
        /// </summary>
        public string Name { get; set; }
        /// <summary>
        /// 学生年龄
        /// </summary>
        public int Age { get; set; }
        /// <summary>
        /// 学生性别
        /// </summary>
        public string Sex { get; set; }
    }
}

Controller向View传递资料
新增一个StudentController.cs

using Microsoft.AspNetCore.Mvc;
using Net5App6.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Net5App6.Controllers
{
    public class StudentController : Controller
    {
        public IActionResult Show()
        {
            var model = new StudentViewModel()
            {
                Id=1,
                Name="李晓明",
                Age=21,
                Sex="男"
            };
            return View(model);
        }
    }
}

Show检视

<h3>Controller向View传递ViewModel资料</h3>
@model StudentViewModel

<div>
    <ul>
        <li>@Model.Id</li>
        <li>@Model.Name</li>
        <li>@Model.Age</li>
        <li>@Model.Sex</li>
    </ul>
</div>

View向Controller传递资料

新增Add Action Method
一个类似表单提交情境
通常会有一个透过Get负责显示表单画面的Action
跟表单POST提交的Action
StudentController.cs

using Microsoft.AspNetCore.Mvc;
using Net5App6.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Net5App6.Controllers
{
    public class StudentController : Controller
    {
        public IActionResult Show()
        {
            var model = new StudentViewModel()
            {
                Id=1,
                Name="李晓明",
                Age=21,
                Sex="男"
            };
            return View(model);
        }

        /// <summary>
        /// 显示表单
        /// </summary>
        /// <returns></returns>
        [HttpGet]
        public IActionResult Add()
        {
            return View();
        }

        /// <summary>
        /// 表单提交
        /// </summary>
        /// <param name="model"></param>
        /// <returns></returns>
        [HttpPost]
        public IActionResult Add(StudentViewModel model)
        {
            int id = model.Id;
            string name = model.Name;
            int age = model.Age;
            string sex = model.Sex;
            //後续资料处里....

            return View();
        }
    }
}

新增好Add检视
Add.cshtml

@{ 
    ViewData["Title"] = "表单资料添加";
}

@model StudentViewModel
<form asp-controller="Student" asp-action="Add" method="post" class="form-horizontal" style="width:500px">
    <div class="form-horizontal">
        <h4>@ViewData["Title"]</h4>
        <hr />
        <div class="form-group">
            <label asp-for="Name" class="control-label col-md-2"></label>
            <div class="col-md-10">
                <input type="text" asp-for="Name" class="form-control" />
            </div>
        </div>
        <div class="form-group">
            <label asp-for="Age" class="control-label col-md-2"></label>
            <div class="col-md-10">
                <input type="text" asp-for="Age" class="form-control" />
            </div>
        </div>
        <div class="form-group">
            <label asp-for="Sex" class="control-label col-md-2"></label>
            <div class="col-md-10">
                <input type="text" asp-for="Sex" class="form-control" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="提交" class="btn btn-primary" />
            </div>
        </div>
    </div>
</form>

运行之後可以模拟输入完表单资料提交