asp.net core系列 41 Web 应用 MVC视图

一.MVC视图

  在Web开发的MVC和Razor中,都有使用视图,在Razor中称为"页"。.cshtml视图是嵌入了Razor标记的HTML模板。 Razor 标记使用C#代码,用于与HTML 标记交互以生成发送给客户端的网页。在MVC目录结构中,Views / [ControllerName] 文件夹下用于建立视图,其中Views/Shared 文件夹下的视图是控制器共享的视图。html

  

  1.1  视图页Razor 标记前端

    下面是Views/Home 文件夹中建立一个 About.cshtml 文件,呈现的视图以下:后端

@{ ViewData["Title"] = "About"; } <h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

     Razor 标记以 @ 符号开头。后面的大括号 { ... } 括住的是 Razor 代码块,是运行 C# 语句。 只需用 @ 符号来引用值,便可在 HTML 中显示这些值。好比上面h2和h3标签。api

 

  1.2 控制器指定视图mvc

    一般以 ViewResult 的形式从Action返回结果到视图,这是一种 ActionResult结果类型(Web api中有讲到)。但一般不会这样作。 由于大多数控制器均继承自Controller,所以只需使用 View 方法便可返回 ViewResult。示例以下:app

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

     View 方法有多个重载。 可选择指定:ui

//要返回的显式视图
    return View("Orders"); //要传递给视图的模型(实体)对象
    return View(Orders); //视图和模型
    return View("Orders", Orders);

 

  1.3 视图发现spa

    Action返回一个视图时, 这个过程叫“视图发现”。默认的 return View(); 将返回与当前Action方法同名的视图。搜索匹配的视图文件顺序规则以下:code

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

    当return View()时,首先在 Views/[ControllerName] 文件夹中搜索该视图。 若是在此处找不到匹配的视图,则会在“Shared”文件夹中搜索该视图。htm

    在返回视图时,能够提供视图文件路径。 若是使用绝对路径(“/”或“~/”开头),必须指定 .cshtml 扩展名:

  return View("Views/Home/About.cshtml");

    也可以使用相对路径在不一样目录中指定视图,而无需指定 .cshtml 扩展名:

return View("../Manage/Index");

    能够用“./”前缀来指示当前的控制器特定目录:

return View("./About");

 

  1.4 向视图传递数据

    可使用多种方法将数据传递给视图。包括:(1)强类型数据:viewmodel。(2)弱类型数据ViewData (ViewDataAttribute)、ViewBag。ViewBag  Razor 页中不可用。

    (1) 强类型数据 viewmodel

      在传递数据到视图中,最可靠的是使用强类型数据,由于编译时能检查而且有智能感知。在视图页中使用@model指令来指定模型(能够是实体或集合泛型实体)。以下所示,其中前端的WebApplication1.ViewModels.Address是实体类命令空间,经过后端返回view强类型映射:

@model WebApplication1.ViewModels.Address <h2>Contact</h2>
<address> @Model.Street<br> @Model.City, @Model.State @Model.PostalCode<br>
    <abbr title="Phone">P:</abbr> 425.555.0100 </address>
public IActionResult Contact() { ViewData["Message"] = "Your contact page."; var viewModel = new Address() { Name = "Microsoft", Street = "One Microsoft Way", City = "Redmond", State = "WA", PostalCode = "98052-6399" }; //返回强类型
    return View(viewModel); }

   (2) 弱类型数据(ViewData、ViewData 属性和 ViewBag)

    视图还能够访问弱类型(也称为松散类型)的数据集合。可使用弱类型数据集合将少许数据传入及传出控制器和视图。ViewData 属性是弱类型对象的字典。ViewBag 属性是 ViewData 的包装器,为基础 ViewData 集合提供动态属性。ViewData派生自 ViewDataDictionary,ViewBag派生自 DynamicViewData。

    ViewData 和 ViewBag 在运行时进行动态解析。 因为它们不提供编译时类型检查,所以使用这二者一般比使用 viewmodel 更容易出错。建议尽可能减小或根本不使用 ViewData 和 ViewBag

 

    ViewData介绍

      下面是一个ViewData存储对象,在视图上强制转换为特定类型(Address)。

public IActionResult SomeAction() { ViewData["Greeting"] = "Hello"; ViewData["Address"]  = new Address() { Name = "Steve", Street = "123 Main St", City = "Hudson", State = "OH", PostalCode = "44236" }; return View(); }
@{ // Since Address isn't a string, it requires a cast. var address = ViewData["Address"] as Address; } @ViewData["Greeting"] World! <address> @address.Name<br> @address.Street<br> @address.City, @address.State @address.PostalCode </address>

   

    ViewData 特性介绍

      能够在控制器或 Razor 页面模型上,使用 [ViewData] 修饰属性。下面是一个示例:

public class HomeController : Controller { [ViewData] public string Title { get; set; } public IActionResult About() { Title = "About Us"; ViewData["Message"] = "Your application description page."; return View(); } }
//经过字典key取出 <title>@ViewData["Title"] - WebApplication</title>

     

    ViewBag介绍

      ViewBag 不须要强制转换,所以使用起来更加方便。下面示例以下:   

public IActionResult SomeAction() { // Greeting不须要先声明,Address 也同样,由于是Dynamic类型
    ViewBag.Greeting = "Hello"; ViewBag.Address = new Address() { Name = "Steve", Street = "123 Main St", City = "Hudson", State = "OH", PostalCode = "44236" }; return View(); }
@ViewBag.Greeting World! <address> @ViewBag.Address.Name<br> @ViewBag.Address.Street<br> @ViewBag.Address.City, @ViewBag.Address.State @ViewBag.Address.PostalCode </address>

   

    更多视图功能包括:标记帮助程序、服务注入视图,视图组件等

 

  参考文献

    ASP.NET Core MVC 中的视图

相关文章
相关标签/搜索