■216容器控件 1.Pane控件 语法格式如下: 口 其他控件 a
◼ 2.1.6 容器控件 ◼ 1．Panel控件 ◼ 语法格式如下： ◼ ◼ 其他控件 ◼
表2-21Pane控件的常用属性 属性 说明 HorizontalAlign 指定子控件在面板内的对齐方式(左对齐、右对齐、居中或两端对齐) Wrap 指定面板内过宽的内容是换到下一行显示,还是在面板边缘处截断显示 指定控件的内容是从左至右呈现还是从右至左呈现。当在页面上创建与整个页面的方向不同的区 Direction 域时,此属性非常有用。本属性对于显示从右到左书写的语言(如阿拉伯语)的文本非常有用 为控件指定滚动条。如果已经设置了 Height和 Width属性,将 Panel控件限制为特定的大小,则 ScrollBars 可以通过设置 ScrollBars属性来添加滚动条 创建一个带标题的分组框, Panel控件的周围将显示一个包含标题的框,其标题是指定的文本。不 GroupingText 能在 Panel控件中同时指定滚动条和分组文本。如果设置了分组文本,则其优先级高于滚动条 Backcolor 控件的背景色 BorderStyle 控件边框的样式 Border width 控件边框的宽度 BackImageUrl 控件的背景图像
【演练29】 Panel控件应用示例,模仿Word中的“查找” 对话框,如图2-25所示。 查找 查找 查找内容 查找内容 童执下一处取消 更少”按钮前、后的显示页面
◼ 【演练2-9】 Panel控件应用示例，模仿Word中的“查找” 对话框，如图2-25所示
①设计页面。新建空网站,添加Web窗体,切换到设计视 图,在 Default. aspx中添加两个 Panel控件。在上面的 Panel1 控件中插入一个用于布局的3行2列、固定宽度450像素的 HTML表格,向表格中添加一个 TextBox控件和3个 Button 控件。在下面的 Panel2控件中插入一个用于布局的2行2列 固定宽度450像素的表格,向表格中添加一个 DropDownList控件和一个 CheckBoxlist控件。适当调整表 格、各控件的大小和位置。因为在设计视图中通过拖动方 式不容易把两个 Panel控件调整为相同的宽度,所以,建议 在源视图中更改控件的 Width属性值为500x。Web窗体的 设计视图如图2-26左图所示
◼ ① 设计页面。新建空网站，添加Web窗体，切换到设计视 图，在Default.aspx中添加两个Panel控件。在上面的Panel1 控件中插入一个用于布局的3行2列、固定宽度450像素的 HTML表格，向表格中添加一个TextBox控件和3个Button 控件。在下面的Panel2控件中插入一个用于布局的2行2列 、固定宽度450像素的表格，向表格中添加一个 DropDownList控件和一个CheckBoxList控件。适当调整表 格、各控件的大小和位置。因为在设计视图中通过拖动方 式不容易把两个Panel控件调整为相同的宽度，所以，建议 在源视图中更改控件的Width属性值为500px。Web窗体的 设计视图如图2-26左图所示
Defaultaspx'x 查找 查找 查找内容 查找内容:d asp: PaselaPanezl Butt ButtonButton 更多》童执下一处有 查找范围,哪定 厂未绑定 查找范围:金部 广区分大小写 厂全字匹配 厂使用通配符 厂同音(英文) 计]口拆分|回源8 asp: anelapanelb> stable,styela stra std 设计口拆分|a源|8 asp: Panapa[ le strand 图2-26web窗体的设计视图 ■②设置页面中各控件对象的属性,见表222。其中 DropDownlist和 CheckBoxlist列表框控件使用Iitm集合 编辑器添加选项。设置完的页面如图2-26右图所示
◼ ② 设置页面中各控件对象的属性，见表2-22。其中 DropDownList和CheckBoxList列表框控件使用ListItem集合 编辑器添加选项。设置完的页面如图2-26右图所示
表2-22各控件对象的属性设置 控件 属性 值 说 Borderstyle Groove 控件边框的样式:凹槽型 Panell Bordercolor #99CCFF 边框颜色 Width 500px 控件的宽度:500像素 orderstyle Groove 该控件边框的样式:凹槽型 Bordercolor #99CCFF 边框颜色 Panel2 Width 500px 控件的宽度:500像素 Visible False 初始时该控件不显示 Button1 Text 更多>> 按钮控件上显示的文本 Button2 Text 查找下一处 按钮控件上显示的文本 Button Text 取消 按钮控件上显示的文本 DropDownList ListItem 全部、向下、向上 搜索范围下拉列表框 CheckBoxlist ListItem 区分大小写、全字匹配、使用通配符、同音(英文)复选列表框 ■③编写事件代码。 ■【演练2-9】代码
◼ ③ 编写事件代码。 ◼ 【演练2-9】代码
2. Placeholder控件 语法格式如下 【演练2-10】 Placeholder控件应用示例。在 Placeholder控 件中动态生成一个 TextBox控件和一个 Button控件,如图2 27所示 ■①设计页面。新建空网站,添加Web窗体,切换到设计视 图,在 Default. aspx中添加一个 Placeholder控件,如图228 所示 uit.aspx x Default.aspx PlaceHolder"PlaceHol derl"] 动态生成的文本(动态生底的技钮 计口拆分回源 图227在 PlaceHolder控件中动态生成的控件图228在页面中添加 PlaceHolder控件
◼ 2．PlaceHolder控件 ◼ 语法格式如下： ◼ ◼ 【演练2-10】 PlaceHolder控件应用示例。在PlaceHolder控 件中动态生成一个TextBox控件和一个Button控件，如图2- 27所示。 ◼ ① 设计页面。新建空网站，添加Web窗体，切换到设计视 图，在Default.aspx中添加一个PlaceHolder控件，如图2-28 所示
②编写事件代码。编写 Page_ load的事件过程代码如下: protected void Page_ load(object sender, EventArgs e) TextBox My TextBox = new TextBoxO MyTextBox.Text="动态生成的文本框" Placeholder Controls. Add(MyTextBox Button MyButton= new Button MyButton Text="动态生成的按钮" Placehlolder1. Controls. Add ( My Button)
◼ ② 编写事件代码。编写Page_Load的事件过程代码如下： ◼ protected void Page_Load(object sender, EventArgs e) ◼ { ◼ TextBox MyTextBox = new TextBox(); ◼ MyTextBox.Text = "动态生成的文本框"; ◼ PlaceHolder1.Controls.Add(MyTextBox); ◼ Button MyButton = new Button(); ◼ MyButton.Text = "动态生成的按钮"; ◼ PlaceHolder1.Controls.Add(MyButton); ◼ }
3. Hidden Field控件 语法格式如下 虽然不显示隐藏字段中的信息,但用户可通过查看页面的 源来查看此控件的内容。注意:不要在 Hidden field控件中 存储重要信息,如用户I、密码或信用卡信息
◼ 3．HiddenField控件 ◼ 语法格式如下： ◼ ◼ 虽然不显示隐藏字段中的信息，但用户可通过查看页面的 源来查看此控件的内容。注意：不要在HiddenField控件中 存储重要信息，如用户ID、密码或信用卡信息
■217其他专用控件 1. Fileupload控件 ■语法格式如下: 【演练2-11】 Fileupload控件应用示例。本代码根据允许 的文件扩展名的编码列表检查要上传文件的文件扩展名, 并拒绝所有其他类型的文件。然后,将该文件写入当前网 站的 UploadedImages文件夹中,并用被上传文件在客户端 计算机中的文件名保存该文件 ■①设计页面。新建空网站“C:\ex2_11”,添加Web窗体, 切换到设计视图,在 Default. aspx中添加一个 Fileupload控件 个 Button控件、两个 Label控件。设置 Button控件的 Tex属性为“上传图片”,两个 Label控件的Tex属性均清 空。如图2-29所示
◼ 2.1.7 其他专用控件 ◼ 1．FileUpload控件 ◼ 语法格式如下： ◼ ◼ 【演练2-11】 FileUpload控件应用示例。本代码根据允许 的文件扩展名的编码列表检查要上传文件的文件扩展名， 并拒绝所有其他类型的文件。然后，将该文件写入当前网 站的UploadedImages文件夹中，并用被上传文件在客户端 计算机中的文件名保存该文件。 ◼ ① 设计页面。新建空网站“C:\ex2_11”，添加Web窗体， 切换到设计视图，在Default.aspx中添加一个FileUpload控件 、一个Button控件、两个Label控件。设置Button控件的 Text属性为“上传图片”，两个Label控件的Text属性均清 空。如图2-29所示
