• 2.将视图添加到 ASP.NET Core MVC 应用


    在本部分中,将修改 HelloWorldController 类,进而使用 Razor 视图文件来顺利封装为客户端生成 HTML 响应的过程。

    当前,Index 方法返回带有在控制器类中硬编码的消息的字符串。 在 HelloWorldController 类中,将 Index 方法替换为以下代码:


    public IActionResult Index()
    {
    return View();
    }


    上面的代码调用控制器的 View 方法。 它使用视图模板来生成 HTML 响应。 控制器方法(亦称为“操作方法”,如上面的 Index 方法)
    通常返回 IActionResult(或派生自 ActionResult 的类),而不是 string 等类型。

    添加视图


    右键单击“视图”文件夹,然后单击“添加”>“新文件夹”,并将文件夹命名为“HelloWorld”。
    右键单击“Views/HelloWorld”文件夹,然后单击“添加”>“新项”。
    在“添加新项 - MvcMovie”对话框中
    在右上角的搜索框中,输入“视图”
    选择“Razor 视图”
    保持“名称”框的值:Index.cshtml。
    选择“添加”

    使用以下内容替换 Razor 视图文件 Views/HelloWorld/Index.cshtml 的内容:


    @{
    ViewData["Title"] = "Index";
    }

    <h2>Index</h2>

    <p>Hello from our View Template!</p>

    导航到 https://localhost:xxxx/HelloWorld。 HelloWorldController 中的 Index 方法作用不大;它运行 return View();
    语句,指定此方法应使用视图模板文件来呈现对浏览器的响应。 因为没有显式指定视图模板文件的名称,所以 MVC 默认使用
    /Views/HelloWorld 文件夹中的 Index.cshtml 视图文件。 下面图片显示了视图中硬编码的 字符串“Hello from our View Template!”


    更改视图和布局页面


    选择菜单链接(“MvcMovie”、“首页”和“隐私”)。 每页显示相同的菜单布局。 菜单布局是在 Views/Shared/_Layout.cshtml 文件中实现的。
    打开 Views/Shared/_Layout.cshtml 文件。
    布局模板使你能够在一个位置指定网站的 HTML 容器布局,然后将它应用到网站中的多个页面。 查找 @RenderBody() 行。
    RenderBody 是显示创建的所有特定于视图的页面的占位符,已包装在布局页面中。 例如,如果选择“隐私”链接
    ,Views/Home/Privacy.cshtml 视图将在 RenderBody 方法中呈现。

    更改布局文件中的标题、页脚和菜单链接
    在标题和页脚元素中,将 MvcMovie 更改为 Movie App。
    将定位点元素


    <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a>
    更改为 <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>



    在前面的标记中,省略了 asp-area 定位点标记帮助程序属性,因为此应用未使用区域。
    说明:Movies 控制器尚未实现。 此时,Movie App 链接不起作用。


    完整的 HelloWorldController.cs 文件如下所示:


    using Microsoft.AspNetCore.Mvc;
    using System.Text.Encodings.Web;

    namespace MvcMovie.Controllers
    {
    public class HelloWorldController : Controller
    {
    public IActionResult Index()
    {
    return View();
    }

    public IActionResult Welcome(string name, int numTimes = 1)
    {
    ViewData["Message"] = "Hello " + name;
    ViewData["NumTimes"] = numTimes;

    return View();
    }
    }
    }

    创建一个名为 Views/HelloWorld/Welcome.cshtml 的 Welcome 视图模板。
    使用以下内容替换 Views/HelloWorld/Welcome.cshtml 的内容:

    @{
    ViewData["Title"] = "Welcome";
    }

    <h2>Welcome</h2>

    <ul>
    @for (int i = 0; i < (int)ViewData["NumTimes"]; i++)
    {
    <li>@ViewData["Message"]</li>
    }
    </ul>

    保存更改并浏览到以下 URL:


    https://localhost:xxxx/HelloWorld/Welcome?name=Rick&numtimes=4

    数据取自 URL,并传递给使用 MVC 模型绑定器的控制器。 控制器将数据打包到 ViewData 字典中,并将该对象传递给视图。
    然后,视图将数据作为 HTML 呈现给浏览器。
    在上面的示例中,我们使用 ViewData 字典将数据从控制器传递给视图。

  • 相关阅读:
    Zabbix基本配置及监控主机
    利用XAG在RAC环境下实现GoldenGate自动Failover
    Oracle Database 12c Data Redaction介绍
    使用Oracle官方巡检工具ORAchk巡检数据库
    浅谈C# 多态
    Qt 操作Excel
    一个适用于任何继承于QObject的类的创建工厂
    QT5 控件增加背景图片(可缩放可旋转)的几种方法
    值得推荐和学习的C/C++框架和库
    gcc/g++编译
  • 原文地址:https://www.cnblogs.com/ouyangkai/p/10937849.html
Copyright © 2020-2023  润新知