【ASP.NET学习】Web Forms创建Web应用

文章目录

什么是 Web Forms？
ASP.NET Web Forms - HTML 页面
- 用 ASP.NET 编写的 Hello RUNOOB.COM
- 它是如何工作的？
- 经典 ASP
ASP.NET Web Forms - 服务器控件
- 经典 ASP 的局限性
- ASP.NET - 服务器控件
- ASP.NET - HTML 服务器控件
- ASP.NET - Web 服务器控件
- ASP.NET - Validation 服务器控件
ASP.NET Web Forms - 事件
- ASP.NET - 事件句柄
- Page_Load 事件
- Page.IsPostBack 属性
ASP.NET Web Forms - HTML 表单
- ASP.NET Web 表单
- 提交表单
ASP.NET Web Forms - 维持 ViewState
ASP.NET Web Forms - TextBox 控件
- TextBox 控件
- 添加脚本
ASP.NET Web Forms - 数据绑定
ASP.NET Web Forms - ArrayList 对象
- 创建 ArrayList
- 绑定数据到 ArrayList
ASP.NET Web Forms - Hashtable 对象
ASP.NET Web Forms - SortedList 对象
ASP.NET Web Forms - Repeater 控件
ASP.NET Web Forms - DataList 控件
ASP.NET Web Forms - 数据库连接
ASP.NET Web Forms - 导航

什么是 Web Forms？

Web Forms 是三种创建 ASP.NET 网站和 Web 应用程序的编程模式中的一种。

其他两种编程模式是 Web Pages 和 MVC（Model View Controller 模型-视图-控制器）。

Web Forms 是最古老的 ASP.NET 编程模式，是整合了 HTML、服务器控件和服务器代码的事件驱动网页。

Web Forms 是在服务器上编译和执行的，再由服务器生成 HTML 显示为网页。

Web Forms 有数以百计的 Web 控件和 Web 组件用来创建带有数据访问的用户驱动网站。

ASP.NET Web Forms - HTML 页面

简单的 ASP.NET 页面看上去就像普通的 HTML 页面。

用 ASP.NET 编写的 Hello RUNOOB.COM

转换 HTML 页面为 ASP.NET 页面最简单的方法是，直接复制一个 HTML 文件，并把新文件的扩展名改成 .aspx 。

下面的代码将以 ASP.NET 页面的形式显示实例：

<html>
<body bgcolor="yellow">
<center>
<h2>Hello RUNOOB.COM!</h2>
</center>
</body>
</html>

如果您想亲自尝试一下，请保存上面的代码到一个名为 “firstpage.aspx” 的文件中，并创建一个到该文件的链接：firstpage.aspx。

它是如何工作的？

从根本上讲，ASP.NET 页面与 HTML 是完全相同的。

HTML 页面的扩展名是 .htm。如果浏览器向服务器请求一个 HTML 页面，服务器可以不进行任何修改，就直接发送页面给浏览器。

ASP.NET 页面的扩展名是 .aspx。如果浏览器向服务器请求个 ASP.NET 页面，服务器在将结果发回给浏览器之前，需要先处理页面中的可执行代码。

上面的 ASP.NET 页面不包含任何可执行的代码，所以没有执行任何东西。在下面的实例中，我们将添加一些可执行的代码到页面中，以便演示静态 HTML 页面和动态 ASP 页面的不同之处。

经典 ASP

Active Server Pages (ASP) 已经流行很多年了。通过 ASP，可以在 HTML 页面中放置可执行代码。

之前的 ASP 版本（在 ASP.NET 之前）通常被称为经典 ASP。

ASP.NET 不完全兼容经典 ASP，但是只需要经过少量的修改，大部分经典 ASP 页面就可以作为 ASP.NET 页面良好地运行。

ASP.NET Web Forms - 服务器控件

服务器控件是服务器可理解的标签。

经典 ASP 的局限性

<html>
<body bgcolor="yellow">
<center>
<h2>Hello Runoob!</h2>
<p><%Response.Write(now())%></p>
</center>
</body>
</html>

上面的代码反映出经典 ASP 的局限性：代码块必须放置在您想要输出显示的位置。

通过经典 ASP，想要把可执行代码从 HTML 页面中分离出来是不可能的。这让页面变得难以阅读，也难以维护。

ASP.NET - 服务器控件

ASP.NET 通过服务器控件，已经解决了上述的"意大利面条式代码"问题。

服务器控件是服务器可理解的标签。

有三种类型的服务器控件：

HTML 服务器控件 - 创建的 HTML 标签
Web 服务器控件 - 新的 ASP.NET 标签
Validation 服务器控件 - 用于输入验证

ASP.NET - HTML 服务器控件

HTML 服务器控件是服务器可理解的 HTML 标签。

ASP.NET 文件中的 HTML 元素，默认是作为文本进行处理的。要想让这些元素可编程，需向 HTML 元素中添加 runat=“server” 属性。这个属性表示，该元素将被作为服务器控件进行处理。同时需要添加 id 属性来标识服务器控件。id 引用可用于操作运行时的服务器控件。

注释：所有 HTML 服务器控件必须位于带有 runat=“server” 属性的标签内。runat=“server” 属性表明了该表单必须在服务器上进行处理。同时也表明了包含在它内部的控件可被服务器脚本访问。

在下面的实例中，我们在 .aspx 文件中声明了一个 HtmlAnchor 服务器控件。然后我们在一个事件句柄（事件句柄是一种针对给定事件执行代码的子例程）中操作 HtmlAnchor 控件的 HRef 属性。Page_Load 事件是 ASP.NET 可理解的多种事件中的一种：

ASP.NET - Web 服务器控件

Web 服务器控件是服务器可理解的特殊 ASP.NET 标签。

就像 HTML 服务器控件，Web 服务器控件也是在服务器上创建的，它们同样需要 runat=“server” 属性才能生效。然而，Web 服务器控件没有必要映射任何已存在的 HTML 元素，它们可以表示更复杂的元素。

ASP.NET - Validation 服务器控件

Validation 服务器控件是用来验证用户输入的。如果用户输入没有通过验证，将显示一条错误消息给用户。

每种 validation 控件执行一种指定类型的验证（比如验证某个指定的值或者某个范围的值）。

在默认情况下，当 Button、ImageButton、LinkButton 控件被点击时，会执行页面验证。您可以设置 CausesValidation 为 false ，来阻止按钮控件被点击时进行验证。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebPages.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Web Pages Demo</title>
</head>
<body>
    <form id="form1" runat="server">
        <p>
            Enter a number from 1 to 100:
            <asp:TextBox ID="tbox1" runat="server" />
            <br />
            <br />
            <asp:Button Text="Submit" runat="server" />
        </p>

        <p>
            <asp:RangeValidator ControlToValidate="tbox1" MinimumValue="1" MaximumValue="100" Type="Integer" Text="The value must be from 1 to 100!" runat="server" />
        </p>
    </form>
</body>
</html>

在这里插入图片描述

ASP.NET Web Forms - 事件

事件句柄是一种针对给定事件来执行代码的子例程。

ASP.NET - 事件句柄

Page_Load 事件

Page_Load 事件是 ASP.NET 可理解的众多事件之一。Page_Load 事件会在页面加载时被触发， ASP.NET 将自动调用 Page_Load 子例程，并执行其中的代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebPages
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            lblCurrentTime.Text = DateTime.Now.ToString("yy年MM月dd日 HH:mm:ss");
        }
    }
}

Page.IsPostBack 属性

Page_Load 子例程会在页面每次加载时运行。如果您只想在页面第一次加载时执行 Page_Load 子例程中的代码，那么您可以使用 Page.IsPostBack 属性。如果 Page.IsPostBack 属性设置为 false，则页面第一次被载入，如果设置为 true，则页面被传回到服务器（比如，通过点击表单上的按钮）：

ASP.NET Web Forms - HTML 表单

所有的服务器控件都必须出现在标签中，标签必须包含 runat=“server” 属性。

ASP.NET Web 表单

所有的服务器控件都必须出现在标签中，标签必须包含 runat=“server” 属性。runat=“server” 属性表明该表单必须在服务器上进行处理。同时也表明了包含在它内部的控件可被服务器脚本访问：

<form runat="server">

...HTML + server controls

</form>

注释：该表单总是被提交到自身页面。如果您指定了一个 action 属性，它会被忽略。如果您省略了 method 属性，它将会默认设置 method=“post”。同时，如果您没有指定 name 和 id 属性，它们会由 ASP.NET 自动分配。

注释：一个 .aspx 页面只能包含一个控件！

如果您在一个包含不带有 name、method、action 或 id 属性的表单的 .aspx 页面中选择查看源代码，您会看到 ASP.NET 添加这些属性到表单上了，如下所示：

<form name="_ctl0" method="post" action="page.aspx" id="_ctl0">

...some code

</form>

提交表单

表单通常通过点击按钮来提交。ASP.NET 中的 Button 服务器控件的格式如下：

id 属性为按钮定义了一个唯一的名称，text 属性为按钮分配了一个标签。onClick 事件句柄规定了一个要执行的已命名的子例程。

在下面的例子中，我们在一个 .aspx 文件中声明了一个按钮控件。一次鼠标单击就可以运行一个子例程，可以更改该按钮上的文本。

<script  runat="server">
Sub submit(Source As Object, e As EventArgs)
   button1.Text="You clicked me!"
End Sub
</script>

<html>
<body>

<form runat="server">
<asp:Button id="button1" Text="Click me!" runat="server" OnClick="submit" />
</form>

</body>
</html>

在这里插入图片描述

ASP.NET Web Forms - 维持 ViewState

维持 ViewState（视图状态）

在经典 ASP 中，当一个表单被提交时，所有的表单值都会被清空。假设您提交了一个带有大量信息的表单，而服务器返回了一个错误。您不得不回到表单改正信息。您点击返回按钮，然后发生了什么…所有表单值都被清空了，您不得不重新开始所有的一切！站点没有维持您的 ViewState。

在 ASP .NET 中，当一个表单被提交时，表单会连同表单值一起出现在浏览器窗口中。如何做到的呢？这是因为 ASP .NET 维持了您的 ViewState。 ViewState 会在页面被提交到服务器时表明它的状态。这个状态是通过在带有控件的每个页面上放置一个隐藏域定义的。

ASP.NET Web Forms - TextBox 控件

TextBox 控件用于创建用户可输入文本的文本框。

TextBox 控件

TextBox 控件用于创建用户可输入文本的文本框。

TextBox 控件的特性和属性列在我们的 WebForms 控件参考手册页面。

下面的实例演示了您可能会用到的 TextBox 控件的一些属性：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebPages.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Web Pages Demo</title>
</head>
<body>
    <form id="form1" runat="server">
        A basic TextBox:
        <asp:TextBox ID="tb1" runat="server" />
        <br />
        <br />

        A password TextBox:
        <asp:TextBox ID="tb2" TextMode="password" runat="server" />
        <br />
        <br />

        A TextBox with text:
        <asp:TextBox ID="tb4" Text="Hello World!" runat="server" />
        <br />
        <br />

        A multiline TextBox:
        <asp:TextBox ID="tb3" TextMode="multiline" runat="server" />
        <br />
        <br />

        A TextBox with height:
        <asp:TextBox ID="tb6" Rows="5" TextMode="multiline"
            runat="server" />
        <br />
        <br />

        A TextBox with width:
        <asp:TextBox ID="tb5" Columns="30" runat="server" />
    </form>
</body>
</html>

在这里插入图片描述

添加脚本

当表单被提交时，TextBox 控件的内容和设置可能会被服务器脚本修改。表单可通过点击一个按钮或当用户修改 TextBox 控件的值的时候进行提交。

在下面的实例中，我们在 .aspx 文件中声明了一个 TextBox 控件、一个 Button 控件和一个 Label 控件。当提交按钮被触发时，submit 子例程将被执行。submit 子例程将写入一行文本到 Label 控件中：

窗体代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebPages.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Web Pages Demo</title>
</head>
<body>
    <form id="form1" runat="server">
        Enter your name:
        <asp:TextBox ID="txt1" runat="server" />
        <asp:Button OnClick="submit" Text="Submit" runat="server" />
        <p>
            <asp:Label ID="lbl1" runat="server" /></p>
    </form>

     
</body>
</html>

提交按钮事件方法有3种绑定方式：

在后台代码中定义与按钮事件对应的单击事件绑定方法。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebPages
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //lblCurrentTime.Text = DateTime.Now.ToString("yy年MM月dd日 HH:mm:ss");
        }
        protected void submit(object sender, EventArgs e)
        {
            lbl1.Text = "Your name is " + txt1.Text;
        }
    }
}

直接在页面代码中，将方法放在script脚本模块中，与form平行的区域放置代码，就可以直接实现绑定。

我们可以看到，按钮事件要绑定的方法script代码块放在与form平行的窗体区域中。也可以实现调用。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebPages.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Web Pages Demo</title>
</head>
<body>
    <form id="form1" runat="server">
        Enter your name:
        <asp:TextBox ID="txt1" runat="server" />
        <asp:Button OnClick="submit" Text="Submit" runat="server" />
        <p>
            <asp:Label ID="lbl1" runat="server" /></p>
    </form>

     <script runat="server">
        protected void submit(object sender, EventArgs e)
        {
            lbl1.Text = "Your name is " + txt1.Text;
        }
    </script>
</body>
</html>

将script脚本代码放在项目下的一个文件中，在页面代码中调用这个文件。

页面代码中，在head中关联Submit.js文件，在按钮控件事件中绑定对应的方法名称，就可以调用js文件中的方法了。

Submit.js文件中代码：

function submitForm() {
    var name = document.getElementById('<%= txt1.ClientID %>').value;
    var label = document.getElementById('<%= lbl1.ClientID %>');
    label.innerText = "Your name is " + name;
}

页面中代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebPages.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Web Pages Demo</title>
    <script src="scripts/Submit.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
        Enter your name:
        <asp:TextBox ID="txt1" runat="server" />
        <asp:Button ID="btnSubmit" OnClientClick="submitForm(); return false;" Text="Submit" runat="server" />
        <p>
            <asp:Label ID="lbl1" runat="server" /></p>
    </form>

</body>
</html>

ASP.NET Web Forms - 数据绑定

我们可以使用数据绑定（Data Binding）来完成带可选项的列表，这些可选项来自某个导入的数据源，比如数据库、XML 文件或者脚本。

数据绑定

下面的控件是支持数据绑定的列表控件：

asp:RadioButtonList
asp:CheckBoxList
asp:DropDownList
asp:Listbox

以上每个控件的可选项通常是在一个或者多个 asp:ListItem 控件中定义，如下：
然而，我们可以使用某种独立的数据源进行数据绑定，比如数据库、XML 文件或者脚本，通过数据绑定来填充列表的可选项。

通过使用导入的数据源，数据从 HTML 中分离出来，并且对可选项的修改都是在独立的数据源中完成的。

在下面的三个章节中，我们将描述如何从脚本化的数据源中绑定数据。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebPages.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Web Pages Demo</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:RadioButtonList ID="countrylist" runat="server">
            <asp:ListItem Value="N" Text="Norway" />
            <asp:ListItem Value="S" Text="Sweden" />
            <asp:ListItem Value="F" Text="France" />
            <asp:ListItem Value="I" Text="Italy" />
        </asp:RadioButtonList>
    </form>

</body>
</html>

在这里插入图片描述

ASP.NET Web Forms - ArrayList 对象

ArrayList 对象是包含单个数据值的项目的集合。

创建 ArrayList

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebPages.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Web Pages Demo</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:DropDownList ID="dd" runat="server"></asp:DropDownList>
        <asp:Button ID="btnSubmit" OnClick="displayMessage" Text="Submit" runat="server" />
        <asp:Label ID="lbl1" runat="server" />
    </form>

    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                ArrayList mycountries = new ArrayList();
                mycountries.Add("Norway");
                mycountries.Add("Sweden");
                mycountries.Add("France");
                mycountries.Add("Italy");
                mycountries.TrimToSize();
                mycountries.Sort();
                dd.DataSource = mycountries;
                dd.DataBind();
            }
        }

        protected void displayMessage(object sender, EventArgs e)
        {
            lbl1.Text = "Your favorite country is: " + dd.SelectedItem.Text;
        }
    </script>
</body>
</html>

在这里插入图片描述

绑定数据到 ArrayList

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebPages.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Web Pages Demo</title>
    <script src="scripts/Submit.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:RadioButtonList ID="rb" runat="server" AutoPostBack="True" OnSelectedIndexChanged="displayMessage" />
        <p><asp:Label ID="lbl1" runat="server" /></p>
    </form>

        <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                ArrayList myCountries = new ArrayList();
                myCountries.Add("Norway");
                myCountries.Add("Sweden");
                myCountries.Add("France");
                myCountries.Add("Italy");
                myCountries.TrimToSize();
                myCountries.Sort();
                rb.DataSource = myCountries;
                rb.DataBind();
            }
        }

        protected void displayMessage(object sender, EventArgs e)
        {
            lbl1.Text = "Your favorite country is: " + rb.SelectedItem.Text;
        }
    </script>
</body>
</html>

在这里插入图片描述

ASP.NET Web Forms - Hashtable 对象

Hashtable 对象包含用键/值对表示的项目。

创建与数据绑定

Hashtable 对象包含用键/值对表示的项目。键被用作索引，通过搜索键，可以实现对值的快速搜索。

通过 Add() 方法向 Hashtable 添加项目。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebPages.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Web Pages Demo</title>
    <script src="scripts/Submit.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:RadioButtonList ID="rb" runat="server" AutoPostBack="True" OnSelectedIndexChanged="displayMessage" />
        <p><asp:Label ID="lbl1" runat="server" /></p>
    </form>

    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Hashtable myCountries = new Hashtable();
                myCountries.Add("N", "Norway");
                myCountries.Add("S", "Sweden");
                myCountries.Add("F", "France");
                myCountries.Add("I", "Italy");

                rb.DataSource = myCountries;
                rb.DataValueField = "Key";
                rb.DataTextField = "Value";
                rb.DataBind();
            }
        }

        protected void displayMessage(object sender, EventArgs e)
        {
            lbl1.Text = "Your favorite country is: " + rb.SelectedItem.Text;
        }
    </script>
</body>
</html>

在这里插入图片描述

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebPages.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Web Pages Demo</title>
    <script src="scripts/Submit.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
         <asp:RadioButtonList ID="rb" runat="server" AutoPostBack="True" OnSelectedIndexChanged="navigate" />
    </form>

    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Hashtable navigate = new Hashtable();
                navigate.Add("RadioButtonList", "control_radiobuttonlist.asp");
                navigate.Add("CheckBoxList", "control_checkboxlist.asp");
                navigate.Add("DropDownList", "control_dropdownlist.asp");
                navigate.Add("ListBox", "control_listbox.asp");

                rb.DataSource = navigate;
                rb.DataValueField = "Value";
                rb.DataTextField = "Key";
                rb.DataBind();
            }
        }

        protected void navigate(object sender, EventArgs e)
        {
            Response.Redirect(rb.SelectedItem.Value);
        }
    </script>
</body>
</html>

在这里插入图片描述

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebPages.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Web Pages Demo</title>
    <script src="scripts/Submit.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
         <asp:DropDownList ID="dd" runat="server" AutoPostBack="True" OnSelectedIndexChanged="displayMessage" />
        <p><asp:Label ID="lbl1" runat="server" /></p>
    </form>

    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Hashtable myCountries = new Hashtable();
                myCountries.Add("N", "Norway");
                myCountries.Add("S", "Sweden");
                myCountries.Add("F", "France");
                myCountries.Add("I", "Italy");

                dd.DataSource = myCountries;
                dd.DataValueField = "Key";
                dd.DataTextField = "Value";
                dd.DataBind();
            }
        }

        protected void displayMessage(object sender, EventArgs e)
        {
            lbl1.Text = "Your favorite country is: " + dd.SelectedItem.Text;
        }
    </script>
</body>
</html>

在这里插入图片描述

ASP.NET Web Forms - SortedList 对象

SortedList 对象结合了 ArrayList 对象和 Hashtable 对象的特性。

SortedList 对象包含用键/值对表示的项目。SortedList 对象按照字母顺序或者数字顺序自动地对项目进行排序。

通过 Add() 方法向 SortedList 添加项目。通过 TrimToSize() 方法把 SortedList 调整为最终尺寸。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebPages.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Web Pages Demo</title>
    <script src="scripts/Submit.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
          <asp:RadioButtonList ID="rb" runat="server" AutoPostBack="True" OnSelectedIndexChanged="displayMessage" />
        <p><asp:Label ID="lbl1" runat="server" /></p>
    </form>

    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                SortedList myCountries = new SortedList();
                myCountries.Add("N", "Norway");
                myCountries.Add("S", "Sweden");
                myCountries.Add("F", "France");
                myCountries.Add("I", "Italy");

                rb.DataSource = myCountries;
                rb.DataValueField = "Key";
                rb.DataTextField = "Value";
                rb.DataBind();
            }
        }

        protected void displayMessage(object sender, EventArgs e)
        {
            lbl1.Text = "Your favorite country is: " + rb.SelectedItem.Text;
        }
    </script>
</body>
</html>

在这里插入图片描述

绑定 DataSet 到 List 控件

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebPages.WebForm1" %>
<%@ Import Namespace="System.Data" %> <!-- 引入 System.Data 命名空间 -->
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>XML to DataSet Example</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:DropDownList ID="ddlCountries" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlCountries_SelectedIndexChanged" />
        <p><asp:Label ID="lblSelected" runat="server" /></p>
    </form>

    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindData();
            }
        }

        private void BindData()
        {
            // 创建 DataSet
            DataSet ds = new DataSet();

            // 从 XML 文件加载数据
            ds.ReadXml(Server.MapPath("~/App_Data/countries.xml"));

            // 绑定数据到 DropDownList
            ddlCountries.DataSource = ds.Tables[0];
            ddlCountries.DataValueField = "code"; // 设置值字段
            ddlCountries.DataTextField = "Country"; // 设置文本字段
            ddlCountries.DataBind();
        }

        protected void ddlCountries_SelectedIndexChanged(object sender, EventArgs e)
        {
            // 显示选中的国家
            lblSelected.Text = "Your favorite country is: " + ddlCountries.SelectedItem.Text;
        }
    </script>
</body>
</html>

ASP.NET Web Forms - Repeater 控件

Repeater 控件用于显示被绑定在该控件上的项目的重复列表。Repeater 控件可被绑定到数据库表、XML 文件或者其他项目列表。在这里，我们将演示如何绑定 XML 文件到 Repeater 控件。

ASP.NET Web Forms - DataList 控件

aspx
<%@ Page Language="C#" AutoEventWireup="true" Inherits="WebPages.Default" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CD Catalog</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:DataList ID="cdcatalog" runat="server" 
            CellPadding="2" 
            CellSpacing="2" 
            BorderStyle="Inset" 
            BackColor="#e8e8e8" 
            Width="100%" 
            HeaderStyle-Font-Name="Verdana" 
            HeaderStyle-Font-Size="12pt" 
            HeaderStyle-HorizontalAlign="Center" 
            HeaderStyle-Font-Bold="true" 
            ItemStyle-BackColor="#778899" 
            ItemStyle-ForeColor="#ffffff" 
            FooterStyle-Font-Size="9pt" 
            FooterStyle-Font-Italic="true">
            <HeaderTemplate>
                My CD Catalog
            </HeaderTemplate>
            <ItemTemplate>
                "<%# Container.DataItem["title"] %>" of 
                <%# Container.DataItem["artist"] %> - 
                $<%# Container.DataItem["price"] %>
            </ItemTemplate>
            <FooterTemplate>
                Copyright Hege Refsnes
            </FooterTemplate>
        </asp:DataList>
    </form>

    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataSet mycdcatalog = new DataSet();
                mycdcatalog.ReadXml(Server.MapPath("cdcatalog.xml"));
                cdcatalog.DataSource = mycdcatalog;
                cdcatalog.DataBind();
            }
        }
    </script>
</body>
</html>

ASP.NET Web Forms - 数据库连接

ADO.NET 也是 .NET 框架的组成部分。ADO.NET 用于处理数据访问。通过 ADO.NET，您可以操作数据库。

<%@ Import Namespace="System.Data.OleDb" %>
<script runat="server">
sub Page_Load
dim dbconn,sql,dbcomm,dbread
dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;
data source=" & server.mappath("northwind.mdb"))
dbconn.Open()
sql="SELECT * FROM customers"
dbcomm=New OleDbCommand(sql,dbconn)
dbread=dbcomm.ExecuteReader()
customers.DataSource=dbread
customers.DataBind()
dbread.Close()
dbconn.Close()
end sub
</script>
<html>
<body>
<form runat="server">
<asp:Repeater id="customers" runat="server">
<HeaderTemplate>
<table border="1" width="100%">
<tr>
<th>Companyname</th>
<th>Contactname</th>
<th>Address</th>
<th>City</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Container.DataItem("companyname")%></td>
<td><%#Container.DataItem("contactname")%></td>
<td><%#Container.DataItem("address")%></td>
<td><%#Container.DataItem("city")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>