1 / 61

第三章 使用 Web 控件

第三章 使用 Web 控件. 模块三、场景及任务分析. 场景 公司领导希望了解用户的真正需求以及对本站点的一些建议等。因此，要求为浏览者提供在访问站点时可以发表意见（比如对站点设计的或是产品的意见）的手段。同时，也希望能够对一些新产品进行推广宣传，加大产品的宣传力度，因此，要求能够在站点首页包括产品的广告栏。 任务分析 见第三章实验任务. 内容. HTML 控件 Web 服务器控件 使用 Web 服务器控件 页面提交处理流程. 目标. 对 ASP.NET 的控件有个全面的了解 使用 HTML 控件并可转换成 HTML 服务器控件

qiana
Download Presentation

第三章 使用 Web 控件

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第三章 使用Web控件

  2. 模块三、场景及任务分析 • 场景 • 公司领导希望了解用户的真正需求以及对本站点的一些建议等。因此，要求为浏览者提供在访问站点时可以发表意见（比如对站点设计的或是产品的意见）的手段。同时，也希望能够对一些新产品进行推广宣传，加大产品的宣传力度，因此，要求能够在站点首页包括产品的广告栏。 • 任务分析 • 见第三章实验任务

  3. 内容 HTML控件 Web服务器控件 使用Web服务器控件 页面提交处理流程

  4. 目标 对ASP.NET的控件有个全面的了解 使用HTML控件并可转换成HTML服务器控件 了解Web Server控件的常见属性 理解Web Server控件的事件模型 使用Web Server控件 使用控件构建复杂的Web Form 理解Web页面的提交过程

  5. §3.1 HTML控件 一、HTML控件的类型 二、HTML控件常用属性 三、HTML控件的事件 演示和练习：给HTML控件添加事件处理代码 四、将HTML控件转换成HTML服务器控件 演示和练习：将HTML控件转换成HTML服务器控件

  6. 一、HTML控件的类型 div控件 基于 HTML div 元素, 呈现为块，往往包含其他元素。 水平线规则控件 基于 HTML hr 元素，呈现为一条水平直线。 Image控件 基于 HTML img 元素，用于显示一个图像。 输入控件 基于 HTML input 元素，通过设置其type属性，可分别用来显示按钮、文本框、下拉列表框、单选按钮、复选框。

  7. 一、HTML控件的类型 选择控件 基于 HTML select 元素，用来呈现一个下拉列表框。 表格控件 基于 HTML table、tr、td 元素，呈现为一个表格。默认情况下，将 Table 控件添加到 HTML 页或 Web 窗体页时，表将占据三行乘三列的范围。您可以使用“布局”菜单上的命令自定义列数和行数。 文本区域控件 基于 HTML textarea 元素，该元素建立一个文本区 在 Visual Studio 中从工具箱添加到页面上的 HTML 服务器控件只不过是已设置了某些属性的 HTML 元素。也可以通过键入标记在“源”视图中创建 HTML 元素。

  8. 二、HTML控件常用属性 InnerHtml 和InnerText 属性 (093) 这两个属性主要是用来设定控件所要显示的文字。只不过InnerHtml会将内容作为HTML代码解释，而InnerText会将内容直接显示出来。 Disabled 属性 通过该属性可以关闭HTML控件的功能，让它无法执行工作。 Visible 属性 通过该属性可以显示或者隐藏控件。

  9. 二、HTML控件常用属性 Attributes 属性 有两个方法可以指定对象的属性，第一种是前面常用的“对象.属性”的方式，而另外一种就是通过“对象.Attributes[”属性名称“]”来设置或获取属性。如： btnHtml.Attributes["value"] = "这是服务器端代码！"; Style 属性 可以用来设定控件的样式。

  10. 三、HTML控件的事件

  11. 三、 Html控件的事件

  12. 示例：在VS2005中为HTML控件添加事件

  13. 演示和练习：给HTML控件添加事件处理代码

  14. 四、将HTML控件转换成HTML服务器控件 添加 runat=“server" 属性表明应将 HTML 元素作为服务器控件进行处理 设置元素的 id 属性，使得可以通过编程方式引用控件 设置属性来声明服务器控件实例上的属性 参数和事件绑定等 <input id="Text1" type="text" runat=" server " /> • <input id="Button1" type="button" value="button1" runat=" server " /> • <input id="Button1" type="button" value="button1" runat=" server " on serverclick="Button1_ serverClick" />

  15. 演示和练习：将HTML控件变成HTMLServer控件

  16. §3.2 Web 服务器控件 一、什么是Web 服务器控件 二、Web服务器控件的分类 三、Web服务器控件的属性 四、Web服务器控件的事件模型

  17. 一、什么是Web 服务器控件 ASP.NET Web服务器控件是 ASP.NET 网页上的对象，在向浏览器请求页和呈现标记时将运行这些对象。 Web服务器控件与HTML服务器控件相比，其设计侧重点不同。除了提供HTML服务器控件的功能外，还提供其他一些功能，如类型安全编程，支持主题。

  18. 二、Web 服务器控件的分类 标准控件 按钮、列表、图像、框、超链接、标签、表和更复杂的控件等 数据控件 包括数据源控件和格式设置控件，前者可以用于访问数据库中的数据，后者可以用于显示和操作 ASP.NET 网页上的数据。 验证控件 验证控件可用以验证在 Web 窗体中用户的输入。 导航控件 可以使用这些控件在 ASP.NET 网页上创建菜单和其他导航辅助功能。 登录控件 包括可以生成登录页的控件、使用户可以在您的网站上注册的控件、对登录用户和匿名用户显示不同信息的控件。

  19. 三、Web 服务器控件的属性 布局属性 可访问性属性 链接属性 数据属性 外观属性 杂项属性

  20. 三、Web 服务器控件的属性

  21. 三、Web 服务器控件的属性

  22. 四、Web 服务器控件的事件模型 ASP.NET Web 控件事件模型 在客户端捕获事件 通过 HTTP POST 将事件消息传输到服务器 ASP.NET页面解释该 POST 以确定所发生的事件，然后再调用相应方法 服务器控件和页的事件 多数服务器控件要求到服务器的往返行程才能处理，这可能影响页的性能；还会触发页生命周期事件 事件参数 表示触发事件的对象（Object）以及包含任何事件特定信息的事件对象（*EventArgs）。

  23. 四、Web 服务器控件的事件模型 服务器控件中的回发和非回发事件 在服务器控件中，某些事件（通常为Click）事件会导致页被立即回发。在设计时应充分考虑到事件是否应该回发页面（AutoPostBack属性）。 将关联事件到方法 关联控件事件 对于在页上声明的控件，可以通过在控件的标记中设置属性将事件关联到方法。 动态关联控件事件 如果要通过代码动态创建控件，则不能使用上述方法来关联事件，因为编译器在编译时没有对控件的引用。在这种情况下，必须使用显示的事件关联。在C#中，可以创建委托并将它与控件的事件关联。

  24. <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" /> 1、在控件的标记中设置属性将事件关联到方法 protected void Page_Load(object sender, EventArgs e) { Button Button2 = new Button(); Button2.Text = "动态创建控件"; Button2.Click+=new EventHandler(Button2_Click); this.form1.Controls.Add(Button2); } protected void Button2_Click(object sender, EventArgs e) { Response.Write("你单击了动态创建的控件。"); } • 2、动态关联控件事件

  25. §3.3 使用Web 服务器控件 一、如何添加控件到Web Form 二、设置控件的属性 三、设置控件的 Tab 键顺序、焦点和访问键 四、控件和CSS样式 五、使用客户端脚本 六、添加服务器端事件 七、动态创建控件 八、使用常规控件来创建用户注册页面 九、使用其他控件

  26. 一、如何添加控件到Web Form 1、控件的语法结构 2、添加控件到Web Form 演示和练习：向Web Form添加Web服务器控件

  27. 1、控件的语法结构 Web服务器控件位于.aspx文件的窗体元素（<form id="form1”runat="server"></form>）内 必须具有以下声明： 使用引用 asp 命名空间的 XML 标记声明,如<asp:Button 控件必须有runat="server" 属性 必须设置控件的ID属性 控件声明必须正确结束 <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />

  28. 2、添加控件到Web Form （80） 从工具箱中添加控件 以代码方式添加控件

  29. 演示和练习：向Web Form添加Web服务器控件

  30. 二、设置控件的属性 1、以声明的方式设置控件属性 2、以编程的方式设置控件属性 演示和练习：设置服务器控件属性

  31. 1、以声明的方式设置控件属性 在VS2005的IDE里面，可 以通过在属性窗口中很方 便地设置控件的属性

  32. 2、以编程的方式设置控件属性 通过代码设置控件属性 protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack){ DropDown1.Items.Add("中专"); DropDown1.Items.Add("大专"); DropDown1.Items.Add("本科"); DropDown1.Items.Add("高中"); } }

  33. 演示和练习：设置服务器控件属性

  34. 三、设置控件的 Tab 键顺序、焦点和访问键（83） 1、什么是Tab键顺序、焦点和访问键 2、如何设置Tab键顺序、焦点和访问键 演示和练习：设置页面中控件的Tab键顺序、焦点和访问键

  35. 1、什么是Tab键顺序、焦点和访问键 可以指定用户通过按 Tab 键显示 ASP.NET Web 服务器控件的顺序 通过Tab键既可按设置顺序在控件中移动焦点，又可以指定最初打开页时页上的哪个控件具有焦点，让页面一打开就可以将焦点定位到某一控件 还可以设置控件的访问键（也称热键），通过“Alt+访问键”即可将光标定位到该控件

  36. 2、如何设置Tab键顺序、焦点和访问键 Tab键顺序 设置控件的TabIndex属性 焦点 调用该控件的 Focus 方法 调用页的 SetFocus 方法 在窗体或面板中设置默认焦点 示例见下页

  37. protected void Page_Load(object sender, EventArgs e) { TextBox1.Focus();//调用该控件的Focus方法 } protected void Page_Load(object sender, EventArgs e) { this.SetFocus("TextBox1");//调用页的SetFocus方法 }

  38. 2、如何设置Tab键顺序、焦点和访问键 访问键 为特定ASP.NET Web服务器控件设置访问键 将控件的AccessKey属性设置为要和Alt键一起用作快捷键的字母或数字即可。 使用Label控件设置访问键 如果要通过按Alt+N切换输入焦点到图中文本框中，只需对Label控件的AccessKey、AssociatedControlID和Text属性进行设置即可

  39. 演示和练习：设置页面中控件的Tab键顺序、焦点和访问键演示和练习：设置页面中控件的Tab键顺序、焦点和访问键

  40. 四、控件和CSS样式 1、直接在 .aspx 文件中设置样式属性 2、通过编程设置样式属性

  41. 1、直接在 .aspx 文件中设置样式属性 使用样式对象名与属性之间的连字符约定来声明样式属性 声明显式元素，并在这些元素中声明相应数据类型的属性元素 <asp:Calendar Id="MyCalendar" SelectionMode="DayWeek" runat="server" TitleStyle-Backcolor="#3366ff" TitleStyle-ForeColor="White" /> <asp:Calendar id="Calendar1" SelectionMode="DayWeek" runat="server"> < TitleStyle BackColor="#3366ff" ForeColor="white" /> </asp:Calendar>

  42. 2、通过编程设置样式属性 protected void Page_Load(object sender, EventArgs e) { Calendar1.DayStyle.BackColor = System.Drawing.Color.Green; } protected void Page_Load(object sender, EventArgs e) { Style s = new Style(); s.BackColor = System.Drawing.Color.Red; Calendar1.SelectedDayStyle.CopyFrom(s); DataGrid1.HeaderStyle.MergeWith(s); }

  43. 五、使用客户端脚本 1、服务器控件和客户端脚本 2、向ASP.NET 服务器控件添加客户端脚本 3、从客户端脚本引用Web服务器控件 4、在客户端脚本和服务器代码间共享信息 5、以动态方式向页面添加客户端脚本 演示和练习：触发服务器控件的客户端单击事件

  44. 1、服务器控件和客户端脚本 一些 ASP.NET 服务器控件要依赖于客户端脚本来正常工作，在呈现页面时，ASP.NET Web 服务器控件所需的客户端脚本会自动添加到相应页面中

  45. 2、向ASP.NET 服务器控件添加客户端脚本 以声明方式添加客户端事件处理程序 在服务器代码中添加属性 <asp:textbox id="TextBox1" runat="server" text="Sample Text" onkeyup="spanCounter.innerText=this.value.length;" /> <script runat="server"> private void Page_Load() { Button1.Attributes.Add ("onclick", "alert('Hello World !')"); Button1.Style.Add ("background-color", "red"); Button1.Attributes ["bgcolor"] = "lightblue"; } </script>

  46. 3、从客户端脚本引用Web服务器控件 在浏览器中呈现 ASP.NET服务器控件时，该控件的ID 属性 (Property) 作为结果元素的 ID属性和 name 属性呈现于页面上 在客户端脚本中使用这些属性来引用服务器控件 <input name="TextBox1" type="text" value="Sample Text" id="TextBox1" /> document.forms[0].TextBox1.value = "New value";

  47. 4、在客户端脚本和服务器代码间共享信息（092）4、在客户端脚本和服务器代码间共享信息（092） 让客户端脚本和服务器代码间接进行交互 向页面添加 HiddenField 控件

  48. 5、以动态方式向页面添加客户端脚本 通过ClientScriptManager 类的方法可以将客户端脚本或客户端脚本 include 语句插入到页面中 RegisterClientScriptBlock RegisterClientScriptInclude RegisterStartupScript RegisterOnSubmitStatement

  49. 演示和练习：引发服务器控件的客户端单击事件演示和练习：引发服务器控件的客户端单击事件

  50. 六、添加服务器端事件 以声明方式添加事件处理 打开页面并切换到设计视图 选择Server控件，单击右键并选择属性，将属性窗口切换到事件页 双击某个事件即可添加事件处理方法的框架， IDE将自动切换到页面的代码隐藏页 编写执行代码 以编程方式动态添加事件处理 声明事件方法 将该方法和控件的事件关联

More Related