ASP.NET 教程之Web Pages II

来源：互联网发布：淘宝刷单违规编辑：程序博客网时间：2024/04/29 00:37

一.web pages forms 窗体

1.创建HTML输入页面

窗体就是再HTML上输入的控件，比如文本框、复选框、单选框和下拉菜单。

例如，创建一个HTML输入页面

<html>
<body>
@{
if (IsPost) {
string companyname = Request["CompanyName"];
string contactname = Request["ContactName"];
<p>You entered: <br />
Company Name: @companyname <br />
Contact Name: @contactname </p>
}
else
{
<form method="post" action="">
Company Name:<br />
<input type="text" name="CompanyName" value="" /><br />
Contact Name:<br />
<input type="text" name="ContactName" value="" /><br /><br />
<input type="submit" value="Submit" class="submit" />
</form>
}
}
</body>
</html>

运行结果如下

2.Razor实例，显示图像

假设在您的图片文件夹中有三张图片，并且您希望根据用户的选择来动态地显示这些图片，通过一小段 Razor 就可以很容易地实现。

如果网站图片文件夹中的图片的名称是 "Photo1.jpg"，则您可以使用 HTML <img> 元素来显示这幅图片

例如，从下拉列表中选择图片

@{var imagePath=""; //服务器创建名为imagePathif (Request["Choice"] != null)   {imagePath="images/" + Request["Choice"];} } <!DOCTYPE html> <html> <body> <h1>Display Images</h1> <form method="post" action=""> I want to see: <select name="Choice">   <option value="Photo1.jpg">Photo 1</option>   <option value="Photo2.jpg">Photo 2</option>   <option value="Photo3.jpg">Photo 3</option> </select> <input type="submit" value="Submit" /> @if (imagePath != ""){<p><img src="@imagePath" alt="Sample" /></p>}  </form> </body> </html>

运行结果如下

代码解释：

HTML 页面中有名为 Choice 的下拉列表（<select> 元素）。它允许用户选择一个友好的（编者注：容易阅读的）名称（比如 Photo 1），当页面被提交到 web 服务器时，向服务器传递文件名（比如 Photo1.jpg）。

Razor 通过 Request["Choice"] 读取 Choice 的值。如果值存在，则代码构造出指向图片的路径 (images/Photo1.jpg)，并把路径存储于变量 imagePath 中。

HTML 页面中的 <img> 元素显示出该图片。当显示页面时，src 属性会被设置为 imagePath 变量的值。

如果变量 imagePath 的值为空，则会防止 <img> 元素显示不存在的图片（比如当页面首次加载时）。

二.web pages objects 对象

1.page对象

之前见到过的page对象

@RenderPage("header.cshtml")

@RenderBody()

之前见到过的page对象属性(isPost和Request)

If (isPost) {

if (Request["Choice"] != null {

2.page对象的一些方法

3.page对象的一些属性

4.page对象的page属性

Page 对象的 Page 属性，提供对页面、布局页和分页之间共享的页数据的类似属性的访问

给page属性添加自己的属性

Page.Title

Page.Version

Page.anythingyoulike

page属性很有用，比如可以在内容文件中设置页面标题，然后在布局文件中使用它

Home.cshtml

@{
Layout="~/Shared/Layout.cshtml";
Page.Title="Home Page"
}

<h1>Welcome to W3Schools</h1>

<h2>Web Site Main Ingredients</h2>

<p>A Home Page (Default.cshtml)</p>
<p>A Layout File (Layout.cshtml)</p>
<p>A Style Sheet (Site.css)</p>

Layout.cshtml

<!DOCTYPE html>
<html>
<head>
<title>@Page.Title</title>
</head>
<body>
@RenderBody()
</body>
</html>

三.web pages files 文件

1.处理文本文件

存储数据的文本文件通常被称为平面文件（flat files）。常见的文本文件格式是 .txt、.xml 以及 .csv（comma-delimited values，逗号分隔的值）

2.手动添加文本文件

您的网站上如果没有 App_Data 文件夹，就创建一个。在 App_Data 文件夹中，创建名为 Persons.txt 的新文件。

向这个文件添加如下内容：

George,Lucas
Steven,Spielberg
Alfred,Hitchcock

3.显示文本文件中的数据

例如，显示文本文件中的数据

@{
var dataFile = Server.MapPath("~/App_Data/Persons.txt"); //Server.MapPath 找到确切的文本文件路径
Array userData = File.ReadAllLines(dataFile);//File.ReadAllLines 打开这个文件文件，然后把文件中的所有文本行读入一个数组
}

<!DOCTYPE html>
<html>
<body>

<h1>Reading Data from a File</h1>
@foreach (string dataLine in userData)//显示出数组的每个数据行（dataline）中的每个数据项（dataItem）的数据
{
foreach (string dataItem in dataLine.Split(','))
{@dataItem <text> </text>}
<br />
}
</body>
</html>

运行结果如下

4.显示Excel文件中的数据

通过微软的 Excel，您能够把电子表格保存为逗号分隔的文本文件（.csv 文件）。当您这么做时，电子表格中的每行会保存为一个文本行，每个数据列由一个逗号来分隔。

你可以使用上面的例子读取一个 Excel .csv 文件（把文件名改为 Excel 文件的名称就可以）

四.web pages databases 数据库

1.显示数据库中的数据

用web pages，可以轻松地显示数据库中的数据，只要连接一个已经存在的数据库或者创建一个新的数据库

2.添加一个客户端页面

在DemoWebPages文件夹中创建一个CSHTML文件夹，并且命名为Products.cshtml

把其中的代码用下面代码代替

@{
var db = Database.Open("SmallBakery");
var selectQueryString = "SELECT * FROM Product ORDER BY Name";
}
<html>
<body>
<h1>Small Bakery Products</h1>
<table>
<tr>
<th>Id</th>
<th>Product</th>
<th>Description</th>
<th>Price</th>
</tr>
@foreach(var row in db.Query(selectQueryString))
{
<tr>
<td>@row.Id</td>
<td>@row.Name</td>
<td>@row.Description</td>
<td align="right">@row.Price</td>
</tr>
}
</table>
</body>
</html>

运行结果

事例解释

3.ASP.NET Database对象参考手册

五.web pages helpers 帮助器

1.asp.net 帮助器

ASP.NET 帮助器是通过几行简单的 Razor 代码即可访问的组件。

可以使用存放在 .cshtml 文件中的 Razor 语法构建自己的帮助器，或者使用内建的 ASP.NET 帮助器。

下面介绍一些有用的 Razor 帮助器

2.WebGrid 帮助器

WebGrid 帮助器简化了显示数据的方法

·自动建立显示数据的 HTML 表格

·支持不同的格式化选项

·支持对数据的分页（第一页、下一页、上一页、最后一页）

·支持通过点击列标题进行排序

3.Chart 帮助器

"Chart Helper" 能够显示出带有不同格式选项和标记的不同类型的图表图片

Chart Helper 能够显示数组、数据库或文件中的数据

4.WebMail 帮助器

WebMail 帮助器提供了使用 SMTP (Simple Mail Transfer Protocol) 来发送电邮消息的功能

5.WebImage 帮助器

WebImage 帮助器提供了在网页中管理图片的功能

关键词：剪裁、旋转、调整尺寸、水印

6.第三方帮助器

通过 Razor，您能够利用内建的第三方帮助器来简化对电邮、数据库、多媒体和社交网络的使用，以及许多其他的问题比如导航和网络安全

7.安装帮助器

如果你的网站在 WebMatrix 中创建，请使用如下步骤来安装帮助器：

·在 WebMatrix 中，打开 Site workspace

·点击 Web Pages Administration

·使用密码登陆 Web Pages Administration

·使用搜索字段搜素帮助器

·点击安装来安装你需要的帮助器

0 0