日历控件的样式 日历控件通常在博客、论坛等程序中使用，日历控件不仅仅只是显式了一个日历，用户还能够通过日历控件进行时间的选取。在ASP.NET中，日历控件还能够和数据库进行交互操作，实现复杂的数据绑定。开发人员能够将日历控件拖动在主窗口中，在主窗口的代码视图下会自动生成日历控件的HTML代码，示例代码如下所示。

Presentation on theme: "日历控件的样式 日历控件通常在博客、论坛等程序中使用，日历控件不仅仅只是显式了一个日历，用户还能够通过日历控件进行时间的选取。在ASP.NET中，日历控件还能够和数据库进行交互操作，实现复杂的数据绑定。开发人员能够将日历控件拖动在主窗口中，在主窗口的代码视图下会自动生成日历控件的HTML代码，示例代码如下所示。"— Presentation transcript:

1

2 日历控件的样式 日历控件通常在博客、论坛等程序中使用，日历控件不仅仅只是显式了一个日历，用户还能够通过日历控件进行时间的选取。在ASP.NET中，日历控件还能够和数据库进行交互操作，实现复杂的数据绑定。开发人员能够将日历控件拖动在主窗口中，在主窗口的代码视图下会自动生成日历控件的HTML代码，示例代码如下所示。 ASP.NET 通过上述简单的代码就创建了一个强大的日历控件，其效果如图所示。 <asp:Calendar ID="Calendar1" runat="server"> </asp:Calendar>

3 日历控件的样式 日历控件通常用于显示月历，日历控件允许用户选择日期和移动到下一页或上一页。通过设置日历 控件的属性，可以更改日历控件的外观。常用的日历控件的属性如下所示： DayHeaderStype：月历中显示一周中每一天的名称和部分的样式。 DayStyle：所显示的月份中各天的样式。 NextPrevStyle：标题栏左右两端的月导航所在部分的样式。 OtherMonthDayStyle：上一个月和下一个月的样式。 SelectedDayStyle：选定日期的样式。 SelectorStyle：位于月历控件左侧，包含用于选择一周或整个月的连接的列样式。 ShowDayHeader：显示或隐藏一周中的每一天的部分。 ShowGridLines：显示或隐藏一个月中的每一天之间的网格线。 ShowNextPrevMonth：显示或隐藏到下一个月或上一个月的导航控件。 ShowTitle：显示或隐藏标题部分。 TitleStyle：位于月历顶部，包含月份名称和月导航连接的标题栏样式。 TodayDayStyle：当前日期的样式。 WeekendDayStyle：周末日期的样式。

4 Visual Studio 还为开发人员提供了默认的日历样式从而能够选择自动套用格式进行样式控制，如图所示。
日历控件的样式 Visual Studio 还为开发人员提供了默认的日历样式从而能够选择自动套用格式进行样式控制，如图所示。 除了上述样式可以设置以外，ASP.NET 还为用户设计了若干样式，若开发人员觉得设置样式非常困 难，则可以使用系统默认的样式进行日历控件的样式呈现。

5 2.10.2 日历控件的事件 同所有的控件相同，日历控件也包含自身的事件，常用的日历控件的事件包括有：
日历控件的事件 同所有的控件相同，日历控件也包含自身的事件，常用的日历控件的事件包括有： DayRender：当日期被显示时触发该事件。 SelectionChanged：当用户选择日期时触发该事件。 VisibleMonthChanged：当所显示的月份被更改时触发该事件。 在创建日历控件中每个日期单元格时，则会触发 DayRender 事件。当用户选择月历中的日期时，则会触发 SelectionChanged 事件，同样，当双击日历控件时，会自动生成该事件的代码块。当对当前月份 进行切换，则会激发 VisibleMonthChanged 事件。开发人员可以通过一个标签来接受当前事件，当选择月历中的某一天，则此标签显示当前日期，示例代码如下所示。 protected void Calendar1_SelectionChanged(object sender, EventArgs e) { Label1.Text = "现在的时间是:" + Calendar1.SelectedDate.Year.ToString() + "年" + Calendar1.SelectedDate.Month.ToString()+"月" + Calendar1.SelectedDate.Day.ToString()+"号" + Calendar1.SelectedDate.Hour.ToString()+"点"; } 在左述代码中，当用户选择了月历中的某一天时，则标签中的文本会变为当前的日期文本，如“现 在的时间是 xx”之类。

6 2.10.2 日历控件的事件 在进行逻辑编程的同时，也需要对日历控件的样式做稍许更改，日历控件的HTML代码如下所示。
日历控件的事件 在进行逻辑编程的同时，也需要对日历控件的样式做稍许更改，日历控件的HTML代码如下所示。 <asp:Calendar ID="Calendar1" runat="server" BackColor="#FFFFCC" BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="200px" onselectionchanged="Calendar1_SelectionChanged" ShowGridLines="True" Width="220px"> <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" /> <SelectorStyle BackColor="#FFCC66" /> <TodayDayStyle BackColor="#FFCC66" ForeColor="White" /> <OtherMonthDayStyle ForeColor="#CC9966" /> <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" /> <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" /> <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" /> </asp:Calendar> 上述代码中的日历控件选择的是ASP.NET的默认样式，如图左所示。 当确定了日历控件样式后， 并编写了相应的SelectionChanged事件代码后，就可以通过日历控件获取当前时间，或者对当前时间进 行编程，如图右所示。

7 在 Web 应用开发中，广告总是必不可少的。而 ASP
在 Web 应用开发中，广告总是必不可少的。而 ASP.NET 为开发人员提供了广告控件为页面在加载时提供一个或一组广告。广告控件可以从固定的数据源中读取（如 XML 或数据源控件），并从中自动读取出广告信息。当页面每刷新一次时，广告显示的内容也同样会被刷新。 广告控件必须放置在 Form 或 Panel 控件，以及模板内。广告控件需要包含图像的地址的 XML 文件。 并且该文件用来指定每个广告的导航连接。广告控件最常用的属性就是 AdvertisementFile，使用它来配 置相应的 XML 文件，所以必须首先按照标准格式创建一个 XML 文件，如图所示。

8 上述代码实现了一个标准的广告控件的 XML 数据源格式，其中各标签意义如下所示：
创建了XML文件之后，开发人员并不能按照自己的意愿进行XML文档的编写，如果要正确的被广告控件解析形成广告，就需要按照广告控件要求的标准的XML格式来编写代码，示例代码如下所示。 ImageUrl：指定一个图片文件的相对路径或绝对路径，当没有 ImageKey 元素与 OptionalImageUrl匹配时则显示该图片。 NavigateUrl：当用户单击广告时单没有 NaivigateUrlKey 元素与 OptionalNavigateUrl元素匹配时， 会将用户发送到该页面。 OptionalImageUrl ：指定 一个图片文 件的相对路 径或绝对路 径，对于ImageKey元素与OptionalImageUrl匹配时则显示该图片。 OptionalNavigateUrl：当用户单击广告时单有NaivigateUrlKey元素与OptionalNavigateUrl元素匹配时，会将用户发送到该页面。 AlternateText：该元素用来替代IMG中的ALT元素。 KeyWord：KeyWord用来指定广告的类别。 Impression：该元素是一个数值，指示轮换时间表中该广告相对于文件中的其他广告的权重。 <?xml version="1.0" encoding="utf-8" ?> <Advertisements> [<Ad> <ImageUrl></ImageUrl> <NavigateUrl></NavigateUrl> [<OptionalImageUrl></OptionalImageUrl>] [<OptionalNavigateUrl></OptionalNavigateUrl>] *<AlternateText></AlternateText> <Keyword></Keyword> <Impression></Impression> </Ad>]* </Advertisements>

9 配置好数据源之后，就需要在广告控件的数据源 XML 文件中加入自己的代码了，XML 广告文件示 例代码如下所示。
<?xml version="1.0" encoding="utf-8" ?> <Advertisements> <Ad> <ImageUrl> <NavigateUrl> <AlternateText>我的网站</AlternateText> <Keyword>software</Keyword> <Impression>100</Impression> </Ad> <ImageUrl> </Advertisements> 当创建了一个 XML 数据源之后，就需要对广告控件的 AdvertisementFile 进行更改，如图所示。

10 注意：广告控件本身并不提供点击统计，所以无法计算广告是否被用户点击或者统计用户最关心的广告。
页面每次刷新时，广告控件呈现的广告内容都会被刷新，如图所示。 运行程序，广告对应的图像在页面每次加载的时候被呈现，如图所示。 注意：广告控件本身并不提供点击统计，所以无法计算广告是否被用户点击或者统计用户最关心的广告。

11 <asp:FileUpload ID="FileUpload1" runat="server" />
在网站开发中，如果需要加强用户与应用程序之间的交互，就需要上传文件。上传文件在 ASP 中是一个复杂的问题，可 能需要通过组件才能够实现文件的上传。在 ASP.NET 中，开发环境默认的提供了文件上传控件来简化 文件上传的开发。当开发人员使用文件上传控件时，将会显示一个文本框，用户可以键入或通过“浏览” 按键浏览和选择希望上传到服务器的文件。创建一个文件上传控件系统生成的 HTML 代码如右所示。 <asp:FileUpload ID="FileUpload1" runat="server" /> 文件上传控件可视化设置属性较少，大部分都是通过代码控制完成的。当用户选择了一个文件并提 交页面后，该文件作为请求的一部分上传，文件将被完整的缓存在服务器内存中。当文件完成上传，页 面才开始运行，在代码运行的过程中，可以检查文件的特征，然后保存该文件。

12 上传控件在选择 文件后，并不会立即执行操作，需要其他的控件来完成操作，例如按钮控件（Button）。实现文件上传的HTML核心代码如下所示。
<body> <form id="form1" runat="server"> <div> <asp:FileUpload ID="FileUpload1" runat="server" /> <asp:Button ID="Button1" runat="server" Text="选择好了，开始上传" /> </div> </form> </body> 上述代码将一个文件上传到了 upload 文件夹内，并保存为 jpg 格式，如左图所示。打开服务器 文件，可以看到文件已经上传了，如右图所示。 上述代码通过一个 Button 控件来操作文件上传控件，当用户单击按钮控件后就能够将上传控件中选 中的控件上传到服务器空间中，示例代码如下所示。 protected void Button1_Click(object sender, EventArgs e) { FileUpload1.PostedFile.SaveAs(Server.MapPat h("upload/beta.jpg")); ｝ //上传文件另存为

13 在上段代码中，并没有对其他格式进行处理而全部保存为了JPG格式，也没有对上传的文件进行过滤，存在着极大的安全风险，开发人员可以将相应的文件上传的cs更改，以便限制用户上传的文件类型，示例代码如下。
protected void Button1_Click(object sender, EventArgs e) { if (FileUpload1.HasFile) // 如果存在文件 string fileExtension = System.IO.Path.GetExtension(FileUpload1.FileName); //获取文件扩展名 if (fileExtension != ".jpg") Label1.Text = "文件上传类型不正确，请上传 jpg 格式"; } else //如果扩展名不等于 jpg 时 // 提示用户重新上传 FileUpload1.PostedFile.SaveAs(Server.MapPath("upload/beta.jpg")); Label1.Text = "文件上传成功"; // 文件保存 // 提示用户成功

14 上述代码中决定了用户只能上传JPG格式，如果用户上传的文件不是JPG格式，那么用户将被提 示上传的文件类型有误并停止用户的文件上传，如果文件的类型为JPG格式，用户就能够上传文件到服务器的相应目录中，如左图所示。 运行上传控件进行文件上传，运行结果如右图所示。 注意：如果需要更改默认上传文件大小的值，通常可以直接修改存放在 C:\WINDOWS\Microsoft.NET\FrameWork\V \CONFIG的 ASP.NET 2.0配置文件，通过修改文件 中的maxRequestLength标签的值，或者可以通过web.config来覆盖配置文件。

15 注意：在 HTML 代码中，并没有为每个按钮的事件编写代码，是因为按钮通过 CommandArgument
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0"> <asp:View ID="View1" runat="server"> abc<br /> <asp:Button ID="Button1" runat="server" CommandArgument="View2" CommandName="SwitchViewByID" Text="下一个" /> </asp:View> <asp:View ID="View2" runat="server"> 123<br /> <asp:Button ID="Button2" runat="server" CommandArgument="View1" CommandName="SwitchViewByID" Text="上一个" /> </asp:MultiView> 在一个MultiView控件中，可以放置多个View控件（选项卡），当用户点击到关心的选项卡时，可以显示相应的内容，很像Visual Studio 2008中的设计、视图、拆分等类型的功能。无论是MultiView还是View，都不会在HTML页面中呈现任何标记。而MultiView控件和View没有像其他控件那样多的属性，惟一需要指定的就是ActiveViewIndex属性，视图控件HTML代码如下。 注意：在 HTML 代码中，并没有为每个按钮的事件编写代码，是因为按钮通过 CommandArgument 和 CommandName 属性操作视图控件。 上述代码中，使用了 Button 来对视图控件进行选择，通过单击按钮，来选择替换到【下一个】或者 是【上一个】按钮，如图所示。在用户注册中，这一步能够制作成 Web 向导，让用户更加方便的 使用 Web 应用。当标签显式完毕后，会显式上一步按钮所示。

16 MultiView和View能够实现Wizard控件相似的行为，并可以自己编写实现细节。相比之下，当不需要使用Wizard提供的方法时，可以使用MultiView和View控件来代替，并且编写过程更加“可视化”，如图所示。 MultiView和View控件也可以实现导航效果，可以通过编程指定MultiView的ActiveViewIndex属性显示相应的View控件。 注意：在MultiView控件中，第一个被放置的View控件的索引为0而不是1，后面的View控件的 索引依次递增。

17 上述代码创建了一个两行四列的表，如图所示。
在ASP.NET中，也提供了表控件（Table）来提供可编程的表格服务器控件。表中的行可以通过TableRow创建，而表中的列通过 ableCell来实现，当创建一个表控件时，系统生成代码如下所示。 <asp:Table ID="Table1" runat="server" Height="121px" Width="177px"> </asp:Table> 上述代码自动生成了一个表控件代码，但是没有生成表控件中的行和列，必须通过TableRow创建行，通过TableCell来创建列，示例代码如下所示。 <asp:Table ID="Table1" runat="server" Height="121px" Width="177px"> <asp:TableRow> <asp:TableCell>1.1</asp:TableCell> <asp:TableCell>1.2</asp:TableCell> <asp:TableCell>1.3</asp:TableCell> <asp:TableCell>1.4</asp:TableCell> </asp:TableRow> <asp:TableCell>2.1</asp:TableCell> <asp:TableCell>2.2</asp:TableCell> <asp:TableCell>2.3</asp:TableCell> <asp:TableCell>2.4</asp:TableCell> </asp:Table> 上述代码创建了一个两行四列的表，如图所示。

18 TableRow 控件和 TableCell 控件也支持这些属性，同样可以用来指定个别的行或单元格的外观，运行后如下右图所示。

19 表控件和静态表的区别在于，表控件能够动态的为表格创建行或列，实现一些特定的程序需求。Web服务器控件中，Table控件中的行是TableRow对象，Table控件中的列是TableCell对象。可以声明这两个对象并初始化，可以为表控件增加行或列，实现动态创建表的程序，HTML核心代码如下所示。 <body style="font-style: italic"> <form id="form1" runat="server"> <div> <asp:Table ID="Table1" runat="server" Height="121px" Width="177px" BackColor="Silver"> <asp:TableRow> <asp:TableCell>1.1</asp:TableCell> <asp:TableCell>1.2</asp:TableCell> <asp:TableCell>1.3</asp:TableCell> <asp:TableCell BackColor="White">1.4</asp:TableCell> </asp:TableRow> <asp:TableCell>2.1</asp:TableCell> <asp:TableCell BackColor="White">2.2</asp:TableCell> <asp:TableCell>2.3</asp:TableCell> <asp:TableCell>2.4</asp:TableCell> </asp:Table> <br /> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="增加一行" /> </div> </form> </body>

20 上述代码中，创键了一个二行一列的表格，同时创建了一个Button按钮控件来实现增加一行的效果，cs核心代码如下所示。
namespace _5_14 { public partial class _Default : System.Web.UI.Page public TableRow row = new TableRow(); protected void Page_Load(object sender, EventArgs e) } protected void Button1_Click(object sender, EventArgs e) Table1.Rows.Add(row); for (int i = 0; i < 4; i++) TableCell cell = new TableCell(); cell.Text = "3."+i.ToString(); row.Cells.Add(cell); //定义一个 TableRow 对象 //创建一个新行 //遍历四次创建新列 //定义一个 TableCell 对象 //编写 TableCell 对象的文本 //增加列

21 上述代码动态的创建了一行并动态的在该行创建了四列，如图。 单击【增加一列】按钮，系统会在表格中创建新行，效果如图。
在动态创建行和列的时候，也能够修改行和列的样式等属性，创建自定义样式的表格。通常，表不仅用来显示表格的信息，还是一种传统的布局网页的形式，创建网页表格有如下几种形式： 上述代码动态的创建了一行并动态的在该行创建了四列，如图。 单击【增加一列】按钮，系统会在表格中创建新行，效果如图。 HTML格式的表格：如<table>标记显示的静态表格。 HtmlTable控件：将传统的<table>控件通过添加runat=server属性将其转换为服务器控件。 Table表格控件：就是本节介绍的表格控件。 虽然创建表格有以上三种创建方法，但是推荐开发人员在使用静态表格，当不需要对表格做任何逻辑事物处理时，最好使用HTML格式的表格，因为这样可以极大的降低页面逻辑、增强性能。