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

一.MVC视图

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

　　

　　1.1  视图页Razor 标记

　　　　下面是Views/Home 文件夹中创建一个 About.cshtml 文件，呈现的视图如下：

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

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

 

　　1.2 控制器指定视图

　　　　通常以 ViewResult 的形式从Action返回结果到视图，这是一种 ActionResult结果类型（Web api中有讲到)。但通常不会这样做。 因为大多数控制器均继承自Controller，因此只需使用 View 方法即可返回 ViewResult。示例如下：

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

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

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

 

　　1.3 视图发现

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

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

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

　　　　在返回视图时，可以提供视图文件路径。 如果使用绝对路径(“/”或“~/”开头)，必须指定 .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 中的视图