【ASP.NET MVC系列】浅谈ASP.NET MVC 视图

时间 2019-11-08

标签 ASP.NET MVC系列浅谈 asp.net asp mvc 视图栏目 ASP 繁體版

原文原文链接

ASP.NET MVC系列文章html

【01】浅谈Google Chrome浏览器（理论篇）编程

【02】浅谈Google Chrome浏览器（操做篇）（上）浏览器

【03】浅谈Google Chrome浏览器（操做篇）（下）缓存

【04】浅谈ASP.NET框架安全

【05】浅谈ASP.NET MVC运行过程   网络

【06】浅谈ASP.NET MVC 控制器框架

【07】浅谈ASP.NET MVC 路由   模块化

【08】浅谈ASP.NET MVC 视图布局

【09】浅谈ASP.NET MVC 视图与控制器传递数据post

【10】浅谈jqGrid 在ASP.NET MVC中增删改查

【11】浅谈ASP.NET 页面之间传值的几种方式

【12】浅谈缓存技术在ASP.NET中的运用

【13】浅谈NuGet在VS中的运用

【14】浅谈ASP.NET 程序发布过程

【15】浅谈数据注解和验证

【16】浅谈依赖注入

【17】浅谈表单和HTML辅助方法

【18】浅谈基于APS.NET身份验证

【19】浅谈ASP.NET MVC 模型

【20】浅谈ASP.NET MVC 单元测试

【21】浅谈ASP.NET MVC网络安全;

【22】浅谈ASP.NET MVC八大类扩展

【23】再谈ASP.NET MVC Routing

【24】浅谈ASP.NET 高级话题

【25】浅谈大型ASP.NET MVC项目（含DEMO）

【26】下一系列：ASP.NET WebAPI

本篇文章内容属于ASP.NET MVC系列视图篇，主要讲解View，大体内容以下：

1.Views文件夹讲解

2.View种类

3.Razor语法

4.对视图的基本操做

一 Views文件夹

（一） Views文件夹下经常使用文件种类

分析：

1.ASP.NET MVC页面基本被放在Views文件夹下；

2.利用APS.NET MVC模板生成框架，Views文件夹下的默认页面为.cshtml页面；

3.ASP.NET MVC默认页面为Razor格式的页面，所以默认页面为.cshtml页面；

4.ASP.NET MVC中，支持WebForm页面，即.aspx页面；

5.ASP.NET MVC中，支持静态html页面；

（二）默认Views文件夹包含内容

分析：

1.这里没添加Account控制器；

2).默认约定：在Controllers新增一个控制器，就会默认地在Views文件夹下新增一个视图问价，用来存放该控制器添加的视图，如上图中增长Home控制器，

在Views下就自动新增长Home文件，用来存放是Home控制器视图；

二视图种类

（一）起始视图——_ViewStart.cshtml

分析：

1.打开_ViewStart.cshtml文件，咱们发现该文件是引用Shared文件夹下的_Layout.cshtml文件，_Layout.cshtml是什么文件？布局页，稍后将分析；

2.咱们来作以下动做

(1)将_ViewStart.cshtml内容注释掉，且添加一个div内容

(2)添加控制器_ViewStartDemoController和Index.cshtml视图

(3)运行程序，访问视图：http://localhost:2016/_ViewStartDemo/Index

分析：

查看html

（二）布局视图

如上，咱们分析了_VeiwStart.cshtml文件，咱们发现里面有一段代码

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

不理解这局话没关系，它采用的Razor语法格式，将稍后与你们分享Razor，但咱们看到了_Layout.cshtml文件，该文件便是Views文件夹下，Shared文件夹下的_Layout.cshtml视图

1.查看_Layout.cshtml视图

分析：

(1)_Layout.cshtml基本结构就是HTML基本结构(其实，.aspx和.cshtml结构，均是html结构);

(2)咱们发如今<body></body>区域，有两个后台代码：@RenderBody()和@RenderSection()。@RenderBody()表示视图体，@RenderSection()表示部分视图和节点；

(3)咱们将程序运行起来，看看

分析：

(1)咱们发现最终呈现的页面由两部分组成：Layout.cshtml页面(由_ViewStart.cshtml页面引用_Layout.cshtml页面实现)和Home控制器下的Index页面;

(2)_Layout.cshtml究竟是什么？布局页，至关于WebForm的模板页面；

(3)下面咱们来定义一个模板页

（三）强类型视图

何为“强类型视图”？Controller向View传递少许数据，通常状况，咱们能够归为两大类别：弱类别传递（ViewBag，ViewData，TempData）和强类别传递（强类型视图）。然而，在实际操做中，当涉及大量数据时，

弱类别就显得不是那么方便，此时，通常采用强类型视图。强类型视图通常由三部分构成，即控制器层，视图层和模型层，三者之间调用关系可表示为：

1.建立一个强类型视图

(1)在Model文件夹添加一个UserInfo类

public class UserInfo
    {
        string UserName { get; set; }
        string UserAddress { get; set; }
    }

(2)在控制器PartialViewDemo中添加一个方法QiangLeiXing()，并添加视图

(3)强类型视图分析

使用强类型视图，从控制器向视图传递一个在两端都是强类型的模型对象，从那我的得到智能感知、编译检查等好处。在Controller方法中，能够经过向重载的View方法中传递模型实例来指定模型。

 public ActionResult QiangLeiXingView()
        {
            List<UserInfo> List_UserInfo = new List<UserInfo>();
            for (int i = 0; i < 2; i++)
            {
                List_UserInfo.Add(new UserInfo() { UserName = "Alan_beijing" + i, UserAddress = "上海" + (i++) });
            }
            ViewBag.List_UserInfo = List_UserInfo;
            return View(List_UserInfo);
        }

下一步是告知视图哪一种类型的模型正在使用@model声明。注意，这里须要输入模型的彻底限定名(名称空间和类型名称)

@model IEnumerable<ViewDemo.Models.UserInfo>

对应View

@model IEnumerable<ViewDemo.Models.UserInfo>

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>QiangLeiXingView</title>
</head>
<body>
    <div> 
        <ul>
            @foreach(ViewDemo.Models.UserInfo V_UserInfo in Model)
            {
                @V_UserInfo.UserName
                @V_UserInfo.UserAddress
                <br/>
            }
        </ul>
    </div>
</body>
</html>

固然你也能够采用以下限定

@using ViewDemo.Models
@model IEnumerable<UserInfo>

对应的View

@using ViewDemo.Models
@model IEnumerable<UserInfo>

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>QiangLeiXingView</title>
</head>
<body>
    <div> 
        <ul>
            @foreach(UserInfo V_UserInfo in Model)
            {
                @V_UserInfo.UserName
                @V_UserInfo.UserAddress
                <br/>
            }
        </ul>
    </div>
</body>
</html>

2.关于Controller和View之间传值，请参考个人另外一篇文章：【ASP.NET MVC】View与Controller之间传递数据

因为本篇文章关于页面之间传值讲得比较详细，所以这里就不分析了。

3.咱们来分析一下，为何使用弱型别来传递不是很方便的缘由

关于这个例子，只举例ViewBag(ViewData和TempData差很少原理)

(1)在控制器PartialViewDemo中添加方法

 /// <summary>
        /// 弱类型视图，使用ViewBag来传递数据
        /// </summary>
        /// <returns></returns>
        public ActionResult RuoLeiXingView()
        {
            List<UserInfo> List_UserInfo = new List<UserInfo>();
            for (int i = 0; i < 2; i++)
            {
                List_UserInfo.Add(new UserInfo() { UserName = "Alan_beijing" + i, UserAddress = "上海" });
            }
            ViewBag.List_UserInfo = List_UserInfo;
            return View();
        }

(2)在视图中接收数据

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>RuoLeiXingView</title>
</head>
<body>
    <div>
        @foreach(ViewDemo.Models.UserInfo V_UserInfo in (ViewBag.List_UserInfo as IEnumerable<ViewDemo.Models.UserInfo>))
        {
            @V_UserInfo.UserName
            @V_UserInfo.UserAddress
            <br />
        }
   </div>
</body>
</html>

咱们发如今枚举以前，须要将动态的ViewBag.List_UserInf 转化为IEnumerable<UserInfo>类型，比较麻烦，固然，你可使用Dynamic代替

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>RuoLeiXingView</title>
</head>
<body>
    <div>
       @foreach(dynamic D_UserInfo in ViewBag.List_UserInfo)
        {
            @D_UserInfo.UserName
            @D_UserInfo.UserAddress
            <br />
        }
    </div>
</body>
</html>

使用Dynamic彷佛方便了许多，但细心的你可能已经发现，变量没有了智能感应功能。

到此，你们应该明白了ViewBag的不方便性了，固然，细心的你又会发现，强类型视图，恰好具有如上两个优点。

（四）部分视图

何为“分布视图”？在WebForm开发中，咱们常常用到用户自定义控件，其做用是提升代码的复用性，减小代码的冗余，使程序更加模块化，那么，在ASP.NET MVC中，对应地引入了基于Razor结构的分布页，其做用与

WebForm开发中的用户自定义控件差很少。

1. 建立分布页

咱们在/Views/Shared文件夹下建立一个分布页_PartialPageDemo.cshtml，并向该页面中添加一段代码：

<h1 style="color:red">我是分布页</h1>

建立过程以下:

2.调用分布页

(1) 添加控制器PartialViewDemo和视图Index.cshtml

(2)在Index.cshtml页面中调用_PartialPageDemo.cshtml

3.调用分布页的几种方式

方式一：

@Html.Partial()

方式二：

@Html.Action()

方式三：

经过Ajax方式调用；

三 Razor语法

Razor视图引擎是ASP.NET MVC3中新扩展的内容，而且也是他的默认视图引擎，其设计理念是：简单直观。Razor视图引擎可分为MVC和WebForm视图引擎，基于篇幅限制，本文只分析MVC Razor视图引擎。Razor中的核心转

换符"@",表明：标记-代码或代码-标记的意思。通常有两种基本转换，即代码表达式和代码块。

（一）代码表达式

1.支持隐式代码表达式求解

这个特性，在强类型视图中，体现得很明显。

<div> 
        <ul>
            @foreach(UserInfo V_UserInfo in Model)
            {
                @V_UserInfo.UserName
                @V_UserInfo.UserAddress
                <br/>
            }
        </ul>
    </div>

2.支持显示代码表达式

<div>1+2=@(1+2)<div>

3.Razor十分智能，能够知道表达后面的空格字符不是一个有效的标识符，因此它能够顺畅地转回到标记语言。

4.自动识别邮件格式

会自动识别邮件，而并非看成变量。

<div>@www.qq.com</div>

5.支持文本量

@{

      string  BlogName="Alan_beijing";
 }
<div>@BlogName.Views</div>

这段代码回提示错误，提示string没有Views属性。

其实咱们想要输出的结果：Alan_beijing.Views，但@BlogName.Views ，View被解析为BlogName的一个属性，所以出错，此时，应用字面量

@{

      string  BlogName="Alan_beijing";
 }
<div>@(BlogName).Views</div>

6.支持转义字符

如我想输出:@Alan_beijing

<div>@@Alan_beijing</div>

（二）支持HTML编码

咱们知道，在防止XSS攻击时了(跨站脚本注入攻击)　，首先要作到HTML编码，Razor恰好是HTML编码的。

@{

     string message="<script>alert('haacked!')</script>";

}
<span>@message<span>

这段代码不会弹出警告框而只会呈现编码的HTML

<span>&alt;script>alert('haacked!');&alt;/script></span>

这里不论述这个，后在【ASP.NET MVC系列】的后续篇幅中，专门讲解。

(三) 代码块

这个你们应该用的比较多，foreach

<div> 
        <ul>
            @foreach(UserInfo V_UserInfo in Model)
            {
                @V_UserInfo.UserName
                @V_UserInfo.UserAddress
                <br/>
            }
        </ul>
    </div>

四对视图的基本操做

ASP.NET MVC 提供的模板中，当建立View时，提供了六种模型，分别为Create,Delete,Detail,Edit,Empty,Empty(不具备模型),List。基于该模型，咱们能够轻松地建立具体实体的增删改查。因为比较简单，本例只

简单结合UserInfo实体演示Create，其余操做，请读者自行操做，原理思路同样，这里不一一论述。

咱们建立一个基础UserInfo实体的Create

测试结果

四参考文献

【01】【01】ASP.NET MVC5 高级编程(Jon Galloway,Brad Wilson,K.Scott Allen,David Matson ,孙远帅译)

【02】APS.NET MVC4

五版权区

感谢您的阅读，如有不足之处，欢迎指教，共同窗习、共同进步。
博主网址：http://www.cnblogs.com/wangjiming/。
极少部分文章利用读书、参考、引用、抄袭、复制和粘贴等多种方式整合而成的，大部分为原创。
如您喜欢，麻烦推荐一下；如您有新想法，欢迎提出，邮箱：2016177728@qq.com。
能够转载该博客，但必须著名博客来源。