1.简介
1.1 web pages是什么
web pages是三种创建ASP.NET网站和应用程序的编程模式的一种，是开发ASP.NET网页最简单的开发模式，简单地将html,css,js、服务器脚本语言(visual basic或者c#)结合起来
围绕单一的网页创建、全HTML、CSS、JavaScript控制
内置了数据库、视频、图形、社交媒体和其他更多的Web Helpers，因此更容易扩展
文件后缀有两类
.cshtml,表明此文件是使用ASP.NET WebPages和Razor视图引擎编写。文件实际内容包括HTML标记和嵌入式的C#代码
.vbhtml,表示此文件中的Razor视图引用使用的是Visual Basic(vb.net)语言编写
.cshtml比.vbhtml相对使用广泛且常见
1.2 学习目标
如何使用 VB(Visual Basic) 或者 C#(C sharp) 最新的 Razor 服务器标记语法将 HTML、CSS、JavaScript 和服务器代码结合起来
如何使用具有可编程的 Web Helpers（包括数据库、视频、图形、社交媒体等等）来扩展网页
1.3 Web Pages实例
ASP.NET代码在服务器上运行，无法在浏览器中查看代码，智能看到普通的HTML输出
分为C#和Visual Basic两种语言的实例，主要有：日期时间、重复使用的头部和底部、基本HTML表单、循环、数组、显示数据库数据、使用Chart帮助器
1.4 Web Pages参考手册
1.5 开发工具
WebMatrix 简单但功能强大，由微软专门为Web Pages量身定做的,free的ASP.NET开发工具
WebMatrix包含：
webpages实例和模板、
一种web 服务器语言(vb或者c#的Razor 服务器标记语法)
一种web服务器(IIS Express)
一种数据库服务器(Sql Server Compact)
一个完整的ASP.NET开发框架
使用此IDE可从空白网站进行开发，或者使用"web应用程序库"中的开源二次应用程序进行二次开发
2.Web Pages添加Razor代码
目标：使用C#和Visual Basic代码的Razor标记
2.1 Razor是什么
基于服务器代码添加到网页中的标记语法
具有传统ASP.NET标记的功能，更容易使用且更容易学习
服务器端标记语法，与ASP和PHT很像
支持C#和Visual Basic语言
说白了就是在html文件中使用服务器端的C#或者Visual Basic代码
2.2 Web Pages中添加Razor代码
@DateTime.Now 表示当前事件，输出结果示例：9/21/2013 4:19:13 AM
Razor可在服务器上实时地完成多有的动作，并将结果显示出来。当前可以指定格式化选项，否则按默认格式显示
2.3 Razor C#主要语法规则
变量使用 var 关键字声明
代码块包含在 @{...} 中,代码语句用 分号 结束
内联表达式(变量和函数)使用 @ 开头
字符串使用 双引号 括起来
C#中代码区分大小写
C#文件结合webpages的文件扩展名为 .cshtml
例如：
@{var myMessage = "Hello Message";}
this message is @myMessage
@{
var gteeting = "Hello to out site;"
var weekday = DateTime.Now.DayOfWeek;
vat greetingMessage = gteeting + "Today is"+weekday;
}
this greetingMessage is : @greetingMessage
2.4 Razor VB 主要语法规则
变量使用 Dim 关键字声明
代码块包含在 @Code ... End Code 中
内联表达式(变量和函数)以@开头
字符串用双引号括起来
VB代码不区分大小写
VB文件结合webpages的文件扩展名为.vbhtml
例如：
@Code dim myMessage="" End Code
value of message is : @myMessage
@Code
dim greeting = "Hello to out site"
dim weekday = DateTime.Now.DayOfWeek
dim greetingMessage = greeting+"Today is"+weekday
End Code
this greetingMessage is : @greetingMessage
3.WebPages页面布局
使用webpages创建一个布局一致的网站很容易
3.1 一致的外观
每个页面具有相同的头部、底部、样式和布局
实现方式：将重复使用的内容块写在一个文件中；或者使用布局模板(布局文件)为站点的所有网页定义一致的布局
3.2 内容块
内容块(来自另一个文件)能被导入到网页中的任何地方。内容块可包含文件、标记和代码，和普通网页没有区别。
将共同的内容写成单独的文件，使用 @RenderPage("文件名称") 引入指定的文件，即可。后续共同的内容块需要修改，只需修改指定引入的文件即可。
例如：
@RenderPage("header.cshtml")
this is a prograph
@RenderPage("footer.cs.html")
3.3 布局页
是使多个网页显示相同内容的另一种方式
一个布局页包含了网页的结构，而非内容，当一个内容页链接到布局页，会根据布局页(模板)的结构进行显示
使用 @RenderBody 在布局页中嵌入内容页，除此之外，和正常网页没区别
如果要想将内容页嵌入布局页，内容页必须以布局指令开始,布局指令为 @{Layout="布局文件名.cshtml"}
示例
布局页
this is header
@RenderBody()
©2024.
内容页：
@{Layout="Layout.cshtml"}
<h1>Welcome Runoob</h1>
<p>Lorm</p>
此方式创建的文件较多，不推荐使用。使用内容块可以用最少的文件来实现不同文件具有相同的内容。
3.4 Don't Repeat Yourself(DRY) 拒绝自我重复
使用内容块和布局页这两个ASP.NET工具，可让web程序显示一致的外观。不必每个页面上修改同样的内容。
3.5 防止文件被浏览
文件名称以_开头，可防止文件在网上被浏览
例如：_header/cshtml;_footer.cshtml,_Layout.html
3.6 隐藏敏感信息
将信息保存在名为 _AppStart的单独的文件中
如：
_AppStart.cshtml
@{
WebMail.username="[email protected]";
WemMail.password="123";
}
4.WebPages文件夹
此小节介绍文件夹和文件夹路径的知识点
学习目标：逻辑文件夹结构和物理文件夹结构；虚拟名称和物理名称；Web URL和Web路径
4.1 逻辑文件夹结构
典型的ASP.NET网站文件夹结构
Account文件夹包含登录和安全文件
App_Data文件夹包含数据库和数据文件
Images文件夹包含图片
Scripts文件夹包含浏览器脚本
Shared文件夹包含公共的文件(比如布局和样式文件)
4.2 物理文件夹结构
和Windows系统中的文件夹路径相似
例如上述Images文件夹在计算机上的物理文件夹结构可能为：C:\Documents\MyWebSites\Demo\Images
4.3 虚拟名称和物理名称
例如：
虚拟名称可能为："Images/pic31.jpg"
物理名称可能为："C:\Documents\MyWebSites\Demo\Images\pic31.jpg"
4.4 URL和路径
URL用于访问网站中的文件，例如：http://www.runoob.com/html/html-tutorial.html
URL对应服务器上的物理文件，例如：C:\MyWebSites\runoob\html\html-tutorial.html
虚拟路径是物理路径的一种简写表示，如果使用虚拟路径，当更改域名或者将网页移动到其他服务器上时，可不用更新(虚拟)路径
磁盘驱动器的根目录下书写为C:，但是网站根目录为/（斜线）
web文件夹的虚拟路径通常与物理路径不相同
在实际代码中，根据实际需要是使用虚拟路径还是物理路径。
ASP.NET中文件夹路径有3种工具，~运算符，Server.MapPath方法，Href方法
示例：
URL: http://www.runoob.com/html/html-tutorial.html
服务器名称： RUNOOB
虚拟路径： /html/html-tutorial.html
物理路径： C:\MyWebSites\runoob\html\html-tutorial.html
4.5 ~运算符
~运算符，在编程代码中规定虚拟路径
使用~运算符，当站点迁移至其他不同的文件夹或者位置时，代码无需更改
例如：
var myImagesFolder="~/images";
var myStyleSheet="~/styles/StyleSheet.css";
4.6 Server.MapPath方法
Server.MapPath方法将虚拟路径转换成服务器为可理解的物理路径，需要打开服务器上的数据文件时，可使用此方法。(只有提供完整的路径才可以访问文件)
例如：
var pathName = "~/dataFile.txt";
var fileName = Server.MapPath("pathName");
4.7 Href方法
将代码中的路径转换为浏览器可以理解的路径(浏览器无法理解~运算符)
可使用Href创建资源(比如图片文件和css文件)的路径
一般在html的<a>、<img>、<link>元素中使用此方法
Href是WebPage对象的一种方法
例如：
@{var myStyleSheet = "~/Shared/Site.css";}
<link rel="stylesheet" type="text/css" href="@Href{myStyleSheet}">
5.WebPages全局文件
概述：介绍全局页面AppStart和PageStart
5.1 web启动之前 _AppStart
根节点目录下创建一个名为_AppStart的页面，便可在站点服务启动时执行此文件内的代码。此页面存在，ASP.NET会在站点中其他页面被请求时，优先运行_AppStart页面
_AppStart典型作用是启动代码和初始化全局数值(比如计数器和全局名称)、初始化设置(初始全局变量、初始化服务或帮助器类，)
_AppStart文件的扩展名和网页的扩展名一致，比如_AppStart.cshtml；_AppStart有下划线前缀，因此不可直接浏览
5.2 每一个页面前，_PageStart
针对每个文件夹，都可创建一个_PageStart文件，从而在指定文件夹下的所有界面运行之前的代码
典型用途是为一个文件夹的所有页面设置布局页面，或者在运行某个界面之前检查用户是否登录
5.3 _AppStart和_PageStart在程序运行中如何工作的
当接收到一个请求，先检查_AppStart是否存在，如果存在且这是站点接收的第一个请求，则运行_AppStart
然后ASP.NET检查_PageStart是否存在，如果存在，则在其它被请求的界面运行之前先运行_PageStart.
可以在_PageStart中调用RunPage()来指定被请求页面运行位置，否则默认情况下，被请求页面是在_PageStart运行之后才被运行
6.WebPages HTML表单
表单是HTML文档中放置输入控件(文本框、复选框、单选按钮、下拉列表)的部分
6.1 创建一个输入HTML界面
6.2 Razor实例 显示图像
可实现用户动态选择图像
todo 待实际操作查看效果
7.WebPages 对象
WebPages 经常和对象有关
7.1 Page对象
例如前面使用到的Page对象方法 @RenderPage("xxx.html");@RenderBody();
两个Page对象属性 isPost和Request
7.2 某些Page对象方法
href:使用指定的值创建URL
RenderBody():呈现不在布局页命名区域的内容页的一部分
RenderPage(page):在另一个页面中呈现某一个页面的内容
RenderSection(section):呈现布局页命名区域的内容
WriteObject(object)：将对象作为编码字符串写入
WriteLiteral:写入对象时优先不使用HTML编码
7.3 某些Page对象属性
isPost:客户端使用的HTTP数据传输方法为post，返回true
Layout:获取或设置布局页面的路径
Page:提供了对页面和布局页之间共享的数据的类似属性访问
Request:为当前的HTTP请求获取HttpRequest对象
Server:获取 HttpServerUtility,该对象提供了网页处理方法
7.4 Page对象的Page属性
提供了对页面和布局页之间共享的数据的类似属性访问
可使用Page属性添加自定义属性，例如：Page.title,Page.version
页面属性可在内容文件中设置页面标题 例如：
内容页：
@{
Layout="~/Layout.cshtml":
Page.title = "Home Page"
}
布局页：
<title>@Page.title</title>
<body>@RenderBody</body>
8.WebPages文件
学习目标:如何从文本文件中读取并显示数据
8.1 使用文本文件
前面的章节中，网页数据都是存储在数据库中，也可将站点数据存储在文本文件中，用来存储数据的文本文件称为平面文件。常见的文件格式是.txt、.xml、.csv。
8.2 显示文本文件中的数据
假设有文件 Persons.txt
包含以下数据：
George,Lucas
Steven,Spielberg
Alfred,Hitchcock
显示文件中的数据代码实例
@
{
var dataFile = Server.mapPath("~/App_Data/Persons.txt");
Array userData = File.ReadAllLines(dataFile);
}
@foreach(string dataLine in userData)
{
foreach(string dataItem in dataLine.split(","))
{@dataItem <text> </text>}
<br/>
}
上述代码实例解释说明
Server.mapPath 找到确切的文本文件的路径
File.ReadAllLines打开文件，并读取文件中的所有行到一个数组中
最后将数组进行遍历，显示每个数据行的每个数据项
同样也可将电子表格保存为逗号分隔的.csv文件，此时电子表格中的每一行保存一个文本行，每个数据列由逗号分隔，也可使用上述实例读取一个Excel.csv文件，只需要将文件名改成Excel文件名称即可
9.WebPages帮助器
ASP.NET帮助其极大简化了Web开发和编程任务
学习目标：学会如何使用Razor帮助器
8.1 ASP.NET帮助器
是通过几行Razor代码即可访问的组件
可使用内建的ASP.NET帮助器，也可使用在.cshtml文件中的Razor代码创建自己的帮助器
8.2 WebGrid帮助器
简化了显示数据的方式
自动创建一个HTML表格来显示数据
支持不同的格式化选项
支持数据分页显示(第一页，上一页，下一页，最后一页)
支持通过点击列表标题进行排序
8.2 Chart帮助器
能显示不同类型的带有多种格式化选项和标签的图标图像
数据来源可以是数组、数据源或文件
8.3 WebMail帮助器
提供了使用SMTP(Simple Mail Transfer Protocol)发送电子邮件的功能
8.4 WebImage帮助器
提供管理网页中图像的功能，可翻转、旋转、缩放、水印等
8.5 第三方帮助器
通过Razor,可利用内建或者第三方的帮助器来简化电子邮件、数据库、多媒体、社交网络以及很多其他问题(如导航和网络安全)的使用
8.6 安装帮助器
todo
Visual Studio安装并使用相关帮助器
10.WebPages WebGrid帮助器
10.1 使用Razor代码显示数据库数据
实例：
@{
var db = Database.Open("SmallBakery");
var selectQueryString = "select * from PRODUCT ORDER BY name";
}
@foreach(var row in db.Query(selectQueryString))
{
<tr>
<td>@row.Id</td>
<td>@row.Name</td>
<td>@row.Desc</td>
<td align="right">@row.Price</td>
</tr>
}
10.2 使用WebGrid帮助器
实例：
@{
var db = Database.Open("SmallBakery");
var selectQueryString = "select * from PRODUCT ORDER BY name";
var data = da.Query(selectQueryString);
var grid = new WebGrid(data);
}
<body>@grid.GetHeml()</body>
11.WebPages图表- Chart帮助器
图形化的形式显示数据，可创建面积图、条形图、柱状图、折线图、饼图等标准图表，也可创建股票图那样更专业的图表
11.1 根据数组创建图标
实例：
@{
var myChart = new Chart(width:600,height:400)
.AddTitle("Empoyless")
.AddSeries(chartType:"column",
xValue:new []{ "Peter", "Andrew", "Julie", "Mary", "Dave" },
yValues:new[]{"2","6","4","5","3"})
.write();
}
实例代码解释说明
-new Chart：创建一个图标并设置宽度和告诉
-AddTitle：指定图表标题
-AddSeries:方法向图标中添加数据
-xValue：参数定义x轴的名称
-yValues:参数定义y轴的名称
-write():方法显示图表
11.2 根据数据库创建图标
实例：DataBindTable 更容易使用
@{
var db = Database.Open("SmallBakery");
var dbdata = db.Query("select Name,Price from Product");
var myChart = new Chart(width:600,height:400)
.AddTitle("Product Sales")
.DataBindTable(dataSource:dbdata,xField:"Name")
.Write();
}
实例代码解释说明：
-Database.Open:打开数据库，将数据库对象赋值给变量db
-db.Query:执行数据库查询并保存结果至dbdata中
-new Chart:创建一个新的图表对象并设置宽度和高度
-AddTitle:指定图表标题
-DataBindTable:将数据源绑定至图表
-Write():方法显示图表
实例：AddSeries 更加灵活，可明确指定图标和数据
@{
var db = Database.Open("SmallBakery");
var dbdata = db.Query("select Name,Price from Product");
var myChart = new Chart(width:600,height:400)
.AddTitle("Product Sales")
.AddSeries(chartType:"pie",
xValue:daData,xField:"Name",
yValues:dbdata,yFields:"Price")
.Write();
}
}
11.3 根据XML创建图标
实例：使用XML作为图标的数据
@using System.Data;
@{
var dataSet = new DataSet();
dataSet.ReadXmlSchema(Server.MapPath("data.xsd"));
dataSet.ReadXml(Server.MapPath("data.xml"));
var dataView = new DataView(dataSet,Tables[0]);
var myChart = new Chart(width:600,height:400)
.AddTitle("Sales Per Employee")
.AddSeries("Default",charType:"pie"
xValue:dataView,xField:"Name",
yValues:dataView,yFields:"Sales"
).Write();
}
12.WebPages WebMail帮助器
可使得发送邮件更为简单，按照SMTP协议(Small Mail Transoer Protocol 简单邮件传输协议)从web应用程序发送邮件
实例:创建一个界面，让用户提交1个界面到另一个界面，并发送一封邮件
编辑_App_Start界面
@{
WebSecurity.InitializeDatabaseConnection("Users", "UserProfile", "UserId", "Email", true);
WebMail.SmtpServer="";
WebMail.SmtpPort="";
WebMail.EnableSsl="false";
WebMail.UserName="";
WebMail.Password="";
WebMail.Form="";
}
属性解释：
SmtpServer：用于发送电子邮件的SMTP服务器的名称
SmtpPort:服务器用来发送SMTP(电子邮件)的端口
EnableSsl：如果服务器使用SSL(Secure Socket Layer 安全套接字)加密，则值为true
UserName：用于发送电子邮件的SMTP电子邮件账户的名称
Password：SMTP电子邮件账户的密码
Form：在发件栏显示的电子邮件(通常和UserName相同)
创建邮件输入界面，此界面是用于输入信息，然后将填写的信息作为邮件发送的内容，发送邮件在另一个界面中去进行
<!DOCTYPE html>
<html>
<body>
<h1>Request for
Assistance
</h1>
<form method="post" action="EmailSend.cshtml">
<label>Username:</label>
<input type="text name="customerEmail" />
<label>Details about the problem:</label>
<textarea name="customerRequest" cols="45" rows="4">
</textarea>
<p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>
版权归原作者 qq_48501521 所有， 如有侵权，请联系我们删除。