[MVC＆Core]ASP. Introduction to net core MVC view value transfer

Preface

1、 The main content of this tutorial

• ASP.NET Core MVC View engine (Razor) brief introduction
• ASP.NET Core MVC View (Razor)ViewData Examples of use
• ASP.NET Core MVC View (Razor)ViewBag Examples of use
• ASP.NET Core NVC View (Razor) Strongly typed values (ViewModel) Page example

2、 Environment information for this tutorial

Software / Environmental Science	explain
operating system	Windows 10
SDK	2.1.401
ASP.NET Core	2.1.3
IDE	Visual Studio Code 1.28
browser	Chrome 70

This code is adjusted based on the following code ：https://github.com/ken-io/asp.net-core-tutorial/tree/master/chapter-02

3、 Pre knowledge

What you may need to know

• MVC frame / Model is introduced

https://baike.baidu.com/item/mvc

4、 preparation

VS Code Itself does not provide ASP.NET Core MVC View engine （Razor） Intelligent perception .
Fortunately, ,VS Code C# Expand from 1.17.0 Version starting support Razor View engine intellisense .

therefore , We're going to VS Code C# Extend upgrade to the latest version .

Two 、ASP.NET Core MVC View engine (Razor) brief introduction

1、ASP.NET Core MVC View engine (Razor) summary

stay MVC In architecture mode , View engine / The template engine is responsible for the controller (Controller) The data provided is combined with the view template to render the format we need （ Usually HTML）. controller (Controller) And then return the rendered results to the requesting client .

stay ASP.NET Core MVC In the frame , Provides a view engine ：Razor.
Razor The suffix provided is .cshtml View template for .Razor View templates support the use of Razor Markup language and C# Compiling . It is very convenient to use .

Razor Equivalent to Java Platform commonly used Freemarker、Thymeleaf

2、Razor View template file location and assignment

View file location
Razor View template files are usually placed in the root directory Views The folder corresponds to a subdirectory of the controller .
for example ： ~/Views/Home/Time.cshtml.

This is because according to ASP.NET Core MVC Framework Agreement , When we are in the controller (Controller) Return a view (return View();) when , If only the view name is specified （ViewName）, No view completion path is specified , that MVC The framework will find the views in the following order ：

• Views/[ControllerName]/[ViewName].cshtml
• Views/Shared/[ViewName].cshtml

How views are specified
Implicitly specify

public class HomeController : Controller
{
    
    public IActionResult Test(){
    
        return View();
    }
}

When not specified ViewName When ,ViewName=ActionName=”Test”;
The framework will look for the view files in the agreed order

• Displays the specified view name

public class HomeController : Controller
{
    
    public IActionResult Test(){
    
        return View("Test");
    }

    public IActionResult TestAbc(){
    
        return View("abc");
    }
}

The view names are manually specified ;ViewName=”Test”、ViewName=”abc”;
The framework will look for the view files in the agreed order

• Displays the specified view file

public class HomeController : Controller
{
    
    public IActionResult Test(){
    
        return View("Views/Test.cshtml");
    }
}

Fixed search Views/Test.cshtml view file

3、 ... and 、Razor The view engine passes data

1、 preparation

• establish RenderDataController

stay Controllers Add controller under folder RenderDataController.cs And inherited from Controller

using System;
using Microsoft.AspNetCore.Mvc;

namespace Ken.Tutorial.Web.Controllers
{
    
    public class RenderDataController : Controller
    {
    

    }
}

• Create the corresponding view folder

stay Views Create a folder in the directory RenderData

2、 Weakly typed parameters pass data

Weak type parameter description

• ViewData
• Derive from ViewDataDictionary, So it has available dictionary properties , Such as ContainsKey、Add、Remove and
  Clear.
• The key in the dictionary is a string , Therefore, spaces are allowed . Example ：ViewData[“ken”]
• Anything that is not string Types must be cast in the view to use ViewData.
• ViewBag
• Derive from DynamicViewData, So it can use point notation (@ViewBag.SomeKey = )
  Create dynamic attributes , And there is no need to cast .
• ViewBag The syntax of makes adding to controllers and views faster .
• ViewBag Easier to check NULL value . Example ：@ViewBag.Person?.Name

ViewData Examples of use

• establish Action：ViewDataDemo

public IActionResult ViewDataDemo()
{
    
    ViewData["name"] = "ken";
    ViewData["birthday"] = new DateTime(2000, 1, 1);
    ViewData["hobby"] = new string[] {
     " running ", " read ", "Coding" };
    return View();
}

• Create view ：ViewDataDemo.cshtml

@{
    var hobby =ViewData["hobby"] as String[];
}

<h3>@ViewData["title"]</h3>
<ul>
    <li> full name ：@ViewData["name"]</li>
    <li> Birthday ：@ViewData["birthday"]</li>
    <li> hobby ：@hobby[0] , @hobby[1]</li>
</ul>

• Access test

Start project , visit /renderdata/viewdatademo You will see ：

ViewBag Examples of use

• establish Action：ViewBagDemo

public IActionResult ViewBagDemo()
{
    
    ViewBag.Title = "ViewBag Example of value transfer ";
    ViewBag.Name = "ken";
    ViewBag.Birthday = new DateTime(2000, 1, 1);
    ViewBag.Hobby = new string[] {
     " running ", " read ", "Coding" };
    return View();
}

• Create view ：ViewBagDemo.cshtml

@{
    var hobby =ViewBag.Hobby as String[];
}

<h3>@ViewBag.Title</h3>
<ul>
    <li> full name ：@ViewBag.Name</li>
    <li> Birthday ：@ViewBag.Birthday</li>
    <li> hobby ：@hobby[0] , @hobby[1]</li>
</ul>

• Access test

Start project , visit /renderdata/viewbagdemo You will see ：

3、 Strongly typed parameters pass data

Strong type parameter description
View strong typing is often called ViewModel, We can do it in return View(); Specify view parameters when / object . And in the view file (.cshtml) Pass through @model The syntax specifies the corresponding type , In this way, we can create a view file (.cshtml) Use in Model Keyword to use instances of this type that are transferred to the view .

Strongly typed parameter example

• establish Person class

Create in project root Models Folder and create... In the file Person.cs

using System;

namespace Ken.Tutorial.Web.Models
{
    
    public class Person
    {
    
        public string Name {
     get; set; }

        public DateTime Birthday {
     get; set; }

        public string[] Hobby {
     get; set; }
    }

• establish Action：ViewModelDemo

public IActionResult ViewModelDemo()
{
    
    ViewBag.Title = "ViewModel Example of value transfer ";
    var person = new Person
    {
    
        Name = "ken",
        Birthday = new DateTime(2000, 1, 1),
        Hobby = new string[] {
     " running ", " read ", "Coding" }
    };
    // Equate to  return View("ViewModelDemo", person);
    return View(person);
}

• Create view ：ViewModelDemo.cshtml

@model Ken.Tutorial.Web.Models.Person;

<h3>@ViewBag.Title</h3>
<ul>
    <li> full name ：@Model.Name</li>
    <li> Birthday ：@Model.Birthday</li>
    <li> hobby ：@Model.Hobby[0] , @Model.Hobby[1]</li>
</ul>

• Access test

Start project , visit /renderdata/viewmodeldemo You will see ：

Four 、 remarks

1、 appendix
Sample code for this article
https://github.com/ken-io/asp.net-core-tutorial/tree/master/chapter-05

In this paper, the reference
https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/overview?view=aspnetcore-2.1