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

叁歲伎倆 2021-12-09 21:19 438阅读 0赞

在本部分中，将修改 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 字典将数据从控制器传递给视图。

转载于:https://www.cnblogs.com/ouyangkai/p/10937849.html