view 的渲染

在这几天小光认识了dotnetcore的网页开发相关知识，从请求流水线、路由到过滤器，已经把基本的网页程序开发知识都学过了，所以今天要来介绍如何渲染View的部分。

本文同步放置於此

view 是什麽

「前辈，我们网页程序的html都是怎麽产生的阿」
一大早小光没头没脑的问题让大头从需求文件堆中探出头来。
「因为在中介层软件那个介绍中看到怎麽返回资讯给使用者，所以就很纳闷那些漂亮的网页要怎麽处理阿。」
这时大头才了解小光想问的问题是甚麽，所以他喝了一杯水後跟小光这样说。
「所以你是想要了解服务器端的网页是怎麽渲染出来的阿。」
听到大头这麽问小光不住的点头。
「好吧，那我们今天就来分享一下dotnetcore的MVC是怎麽渲染View的部分。」

view 怎麽渲染

这边以MVC来说明view怎麽渲染，之前的内容提到了中介层软件及过滤器，当请求一个个通过了之後会来到Controller的Action，而Action的最後就会决定要返还甚麽东西给使用者，所以这里的渲染就是指Action怎麽把要传给使用者的资料呈现出来。因此这部分可以分成两阶段来说明，首先第一阶段要处理的是要怎麽把资料从Action传给View的部分，第二个阶段再来说明画面怎麽处理传进来的资料跟如何把资料转换成Html後返还给使用者。所以接下来以这两方面来说明。

资料的传递

现代的网页内容比较多，所以很多东西是依据使用者传入的资料不同而返还不同的html，所以这边很多东西是需要服务器端决定要渲染甚麽资讯，所以需要再Action里面去由资料库取得资料或是由程序逻辑决定要渲染甚麽资料，因此要如何将资料传递到view里面就是这部分要说明的内容。资料的传递可以先分成两种一种是强行别的ViewModel另一种是若型别的ViewBag跟ViewData还有同一请求可以使用的TempData。

ViewModel

首先说明强行别的ViewModel，简单说明就是定义一类别，并且可以在类别上的Property上挂Attribute可以自动在html上面做处理。如下所示。

public class CustomViewModel
{
    [Display(Name = "First Name")]
    public string FirstName { get; set; }

    [Display(Name = "Last Name")]
    public string LastName { get; set; }
}

而其使用方式就直接把ViewModel传到方法里面即可。

public IActionResult About()
{
    var viewModel = new CustomViewModel{};

    return View(viewModel);
}

除了显示之外，ViewModel在传入资讯(FormPost)前会做验证，入验证错误也会先显示错误讯息而不会POST到服务器端。然後除了类别之外还可以传递IEnumerable泛型物件。

ViewBag

ViewBag跟ViewData的差别就在於是ViewBag是dynamic而ViewData是字典类别，而其内容都相同。

public IActionResult About()
{
    ViewBag.Message = "Your application description page.";

    return View();
}

ViewData

ViewData的使用方式如下，不过这边要注意ViewBag是由ViewData封装而来的，所以当使用得Key值相同时资料会被盖过去。

public IActionResult About()
{
    ViewData["Message"] = "Your application description page.";

    return View();
}

TempData

最後说到TempData的使用，如同ViewData一样，他是一个字典格式的容器，所以使用方式如下所示。

public IActionResult About()
{
    TempData["Message"] = "Your application description page.";

    return View();
}

而TempData与ViewBag、ViewData不同的地方是他是可以跨Controller存取的，只要是同一个请求下就可以存取到同样的TempData，但是就是因为他是把资料放在Session之中，而因为GDPR的关系，预设的dotnetcore不会特别开启Session不过如果要使用TempData要开启否则取出来的TempData会是null。

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews()
        .AddSessionStateTempDataProvider();

    services.AddSession();
}

画面呈现

这边处理view的部分使用的是Razor语法，所以主要是产生.cshtml的档案并依照MVC的习惯把资料放在Views资料夹下以Controller为命名的资料夹的Action为档名，如下配置。

.
├──Views
  ├──Home
    ├──Index.cshtml
.

这边的语法简单说就是把html当范本，传入ViewModel时在最上方宣告如下列所示。

@using Namespace
@model CustomViewModel

而ViewBag跟ViewData还有TempData的使用方式如下

@ViewBag.Message
@ViewData["Message"]
@TempData["Message"]

然而如果有使用到C#的程序码可以用@加上{}来区隔开来使用，简单讲就是可以在html上做动态资料处理，简单范例如下。

@if(Model.Condition)
{
    <div>True<div>
}
else
{
    <div>False<div>
}

上述的例子是ViewModel有个Condition的bool属性，当该属性为true时会显示<div>True<div>否则会显示<div>False<div>。
除此之外还有partial view的用法，不过因为篇幅关系先介绍到这边，待以後有时间在专门介绍这部分。

後记

今天介绍MVC怎麽渲染画面出来，这也是本系列文关於网应程序开发的最後一篇，後面的内容会比较偏实用技巧，敬请期待。