【ASP.NET系列】详解Views
ASP.NET MVC系列文章
【02】浅谈Google Chrome浏览器(操作篇)(上)
【03】浅谈Google Chrome浏览器(操作篇)(下)
【04】浅谈ASP.NET框架
【07】浅谈ASP.NET MVC 路由
【08】浅谈ASP.NET MVC 视图
【10】浅谈jqGrid 在ASP.NET MVC中增删改查
【13】浅谈NuGet在VS中的运用
【14】浅谈ASP.NET 程序发布过程
本篇文章内容属于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。
- 可以转载该博客,但必须著名博客来源。
【ASP.NET系列】详解Views的更多相关文章
- ASP.NET ViewState详解
ASP.NET ViewState详解[转载] 作者:Infinities Loop 概述 ViewState是一个被误解很深的动物了.我希望通过此文章来澄清人们对ViewState的一些错误认识.为 ...
- QAction系列详解
QAction系列详解 一.QAction类详解 [详细描述] QAction类提供了抽象的用户界面action,这些action可以被放置在窗口部件中. 应用程序可以通过菜单,工具栏按 ...
- MySQL系列详解八:MySQL多线程复制演示-技术流ken
前言 Mysql 采用多线程进行复制是从 Mysql 5.6 开始支持的内容,但是 5.6 版本下有缺陷,虽然支持多线程,但是每个数据库只能一个线程,也就是说如果我们只有一个数据库,则主从复制时也只有 ...
- ASP.NET Session详解(转)
ASP.NET Session详解 本文章来自:http://blog.163.com/adam601@126/blog/static/22506317200932824210996/ 当用户在 We ...
- iOS开发技巧系列---详解KVC(我告诉你KVC的一切)
KVC(Key-value coding)键值编码,单看这个名字可能不太好理解.其实翻译一下就很简单了,就是指iOS的开发中,可以允许开发者通过Key名直接访问对象的属性,或者给对象的属性赋值.而不需 ...
- MySQL系列详解六:MySQL主从复制/半同步演示-技术流ken
前言 随着技术的发展,在实际的生产环境中,由单台MySQL数据库服务器不能满足实际的需求.此时数据库集群就很好的解决了这个问题了.采用MySQL分布式集群,能够搭建一个高并发.负载均衡的集群服务器.在 ...
- MySQL系列详解三:MySQL中各类日志详解-技术流ken
前言 日志文件记录了MySQL数据库的各种类型的活动,MySQL数据库中常见的日志文件有 查询日志,慢查询日志,错误日志,二进制日志,中继日志 .下面分别对他们进行介绍. 查询日志 1.查看查询日志变 ...
- OpenStack计费项目Cloudkitty系列详解(一)
云计算是一种按需付费的服务模式,虽然OpenStack前期在计量方面走了些“弯路”,但现在的ceilometer.gnocchi.aodh.panko项目的稳步并进算是让其峰回路转.然而,目前来看Op ...
- 阿里云系列——7.阿里云IIS系列详解(过程+通用+最新)
网站部署之~阿里云系列汇总 http://www.cnblogs.com/dunitian/p/4958462.html 先讲IIS系列,Linux部署以后再继续讲 先打开主机管理平台,确认域名绑定 ...
随机推荐
- C语言之循环计数
#include<stdio.h>int main(){int num,count=0,i=0;scanf("%d",&num);num/=10;count++ ...
- selenium基本操作
#coding=utf-8from selenium import webdriverfrom selenium.webdriver.common.keys import Keysfrom selen ...
- 小程序采坑系列-this.setData
今天踩了大坑,坑里还都是碎瓶渣子.. 先说一下基本使用.官网也有. 比如说你在main.js里面有这些变量.想修改某些值. data: { main_view_bgcolor: "" ...
- openstack pike 单机 一键安装 shell
#openstack pike 单机 centos 一键安装 shell #openstack pike 集群高可用 安装部署 汇总 http://www.cnblogs.com/elvi/p/7 ...
- 企业级分布式监控系统-Zabbix基础
1.基础分部 1.1Zabbix简介 Zabbix 是一个企业级的分布式开源监控方案. 1.2监控系统架构 C/S架构 客户端/服务器端,这种架构适合规模较小,处于同一地域的环境 C/P/S 客户端/ ...
- 怎么配置Jupyter Notebook默认启动目录?
前言 系统环境:win10 x64:跟环境也没啥关系,在LInux下也一样... 前段时间重换了系统后,发现Jupyter Notebook的默认启动目录不太对呀,所以,就翻到了以前的笔记,还是记在这 ...
- PHP如何强制下载文件
很多网站都需要做文件下载的功能.如果直接给连接的方式下载的话有很多的弊处...因为有时候需要对下载权限的检查,对下载次数的检查.所以一般采用php的方法进行安全下载.但是下载的时候如果是txt jpg ...
- iBeacon硬件厂商和产品
最近项目比较忙,也没有时间写Blog. 这几天因为项目需要采购为数不小的iBeacon,所以花了点时间对市面上主要的iBeacon简单的调研总结了一下. 分享给需要买相关设备进行试验的小伙伴,数据不权 ...
- c++对象在lua层的生命周期与内容扩展
前言 上一篇博客记录了 tolua++ 将 c++类型,变量,函数,以及对象导出到 lua 的过程,这篇博客就接着记录一下 c++对象的内存回收以及c++对象数据和方法在lua中的扩展. 首先 tol ...
- 表单的自动到json与urlstr
将表单序列化成json,将json转换成字符串 //将表单序列化成json 字符串 $.fn.serializeObject = function(){ var obj = {}; var count ...