码迷,mamicode.com
首页 > Web开发 > 详细

ASP.NET服务器端控件(class0617)

时间:2014-07-02 21:22:52      阅读:257      评论:0      收藏:0      [点我收藏+]

标签:style   java   color   使用   文件   数据   

ASP.Net服务端基本控件介绍

ASP.Net服务端控件是ASP.Net对HTML的封装,在C#代码中就可以用txt1.Text=‘abc’这种方式来修改input的值,ASP.Net会将服务端控件转成HTML代码输出给浏览器。服务端控件是ASP.Net非常吸引初学者、非常容易上手的东西,也是最被人诟病的东西。物尽其用,服务端控件在内网系统、互联网系统的后台部分等访问频率不高的地方用的还是很适合的。

(互联网公司,产品型公司(OA)) 在服务端控件的标签中写的属性如果不是控件内置的属性就会被原样的输出到客户端

所有的ASP.Net大部分都是从Control、WebControl类继承的,几乎都有的成员有:

(1)ClientID,控件在客户端的Id,控件在服务端的Id不一定等于客户端HTML中的Id,比如说在ListView等控件的模板中。因此如果要在客户端通过JavaScript Dom、JQuery的getElementById、$(“#id”)来操作控件的话最好不要直接写服务端Id,而是$(‘#<%=txt1.ClientID%>’)。用JQuery事件设置鼠标移到控件上和从控件移开的不同样式。在用户控件中就可以看到ClientID和id的不同。UserControl、母版、ListView。推荐永远用ClientID

(2)Visible 属性, 控件是否可见,如果Visible=False是不会转到HTML中的,这和在HTML中给元素style.display=‘none‘效果是不一样的。

(3)CssClass 属性,控件的样式名,就是HTML中控件的class属性。也可以单独修改BackColor、BorderStyle等属性,但是不建议这么做,因为会生成很多的内联样式,生成html尺寸大,不便于统一的修改。 (

4)Attributes,用来设置获取控件的额外属性。和Dom中的setAttribute()、getAttribute()是一样的。Button1.Attributes[“a1”] = “2.jpg”; HTML 事件在服务端看来也是属性 Button1.Attributes[“onmouseover”] = “alert(‘hello’)”;

服务端控件的额外属性

说明:所有的服务端控件不仅可以使用控件定义的属性,还可以使用额外的属性,这些属性包括控件没有封装的HTML属性(比如onmouseover等浏览器端事件页当作属性),ASP.Net会将它不识别的属性原封不动的渲染到客户端。在代码中也可以通过Attributes属性设置额外属性:

CheckBox1.Attributes["onmouseover"] = "alert(‘hello‘)";

ASP.Net服务端基本控件1

1、Label控件。Text属性为显示文本。AssociatedControlID属性用来关联一个控件,如果为空的话会展示为一个Span,如果指定为一个控件的id,则会展示为一个HTML中的<Label>并且将for属性设置为被关联控件的ClientId。

2、Literal控件也是展示一段文本,但是Literal控件不会渲染任何额外的标签,就是将Text属性的值展示出来而已。

3、TextBox控件,文本框控件。TextMode属性取值SingleLine、MultiLine、Password,分别渲染为input(type=text)、textarea和input(type=password)。当AutoPostBack属性为true的时候,用户焦点离开TextBox就会造成页面Post,实现原理就是讲ASP.Net原理时的AutoPostBack。TextChanged事件(需要AutoPostBack=true才会修改后触发,否则是页面提交才触发),文本发生变化的时候事件触发。ASP.Net中要提交表单的时候最好调用__doPostBack方法。

4、RadioButton控件,对应为input(type=radio),通过GroupName属性进行分组

ASP.Net服务端基本控件 Button

5、Button控件。OnClientClick属性,当用户点击按钮的时候在浏览器端执行的代码,注意OnClientClick是字符串属性,写的代码是JavaScript代码,运行在浏览器端。<asp:Button ID="btnDel" runat="server" onclientclick="return confirm(‘真的要删除吗?‘)" Text="删除" />

6、LinkButton,用法和Button差不多,区别就是Button控件渲染为按钮,而LinkButton渲染为超链接。不要用LinkButton来实现普通的超链接,因为LinkButton的href为一段javascript代码,进行的是表单的Post,无法“在新窗口中打开连接”。和讲“行删除”那个例子中href为javascript的超链接原理一样。一般用Button就行,只有用户要求“长成超链接好”采用LinkButton,就是一个在浏览器中渲染成超链接,服务端当成按钮用的东西。 HyperLink:IsPostBack=False,没有提交表单内容,没有OnClick事件。

7、ImageButton控件也和Button差不多,只不过是显示为图片,渲染为input(type=image)

8、Button、LinkButton、ImageButton等控件都有CommandName、CommandArgument两个属性和Command事件,可以让多个按钮控件共享一个Command事件处理函数,通过读取事件对象e的CommandName、CommandArgument两个属性读取被点击按钮上设置的这两个参数来执行不同的操作。例子:编辑、删除多行数据。这种用法在ListView等控件中用的最多。

ASP.Net服务端基本控件3

9、Panel控件用来盛放一些控件。如果设定GroupingText属性那么就渲染为含有<fieldset>的div标签,也就是GroupBox效果,否则渲染为<div>

10、HyperLink控件,超链接。和LinkButton不一样(常考),不会向服务器端Post,就是一个超链接。NavigateURL:链接地址;Text:显示文本。如果设定ImageUrl属性则会显示图片超链接。

11、FileUpload控件,文件上传控件。渲染成input(type=file)。属性:FileContent以流形式获得上传的文件;FileName 上传文件名;HasFile Bool值,表示用户是否选择文件,SaveAs方法用于将文件保存到磁盘的指定位置。漏洞:文件上传漏洞(上传一个下载源代码的aspx、Process.Start启动格式化,创建管理员、开启远程桌面)。解决方法:只允许上传指定类型文件,上传文件夹不给执行权限。

三种控件

HTML控件,ASP.Net把HTML控件当成普通字符串渲染到浏览器端,不去检查正确性、无法在服务器端进行处理。

ASP.Net服务端控件,经过ASP.Net高度封装的控件,使用简单,运行在服务器端,可以在服务端使用C#代码进行操作,会渲染到客户端为HTML控件。

runat=server的HTML控件。在HTML控件的基础上添加runat="server",也是运行在服务器端的,也可以服务端使用C#代码进行操作,也会渲染到客户端,不像ASP.Net服务端控件那样高度封装,暴露的属性大部分是普通HTML属性。和ASP.Net服务端控件相比的好处是:当需要在服务器端要对控件进行操作的时候,如果控件没有被ASP.Net服务端控件封装的时候,用runat=server的HTML控件很方便,runat=server的HTML控件也会对虚拟路径(~/)、id→ClientID进行处理,所以在使用虚拟路径、UserControl中也可能会用到onmouseover="document.getElementById(‘<%=TextBox1.ClientID%>‘).value=‘哈哈‘;" 直接在属性中有问题,会把<%直接输出到浏览器端,因此不要在控件的属性值中写<%%>。

服务器控件使用路径的时候,中间有个 ~ 符号,它代表返回到当前网站应用程序的根目录。

 

run=server控件的好处,中庸!

1、不像ASP.Net服务端控件那么重量级、封装的那么多,程序员可以比较好的控制生成内容的质量。更容易让美工来使用,因为美工不认得<asp:TextBox

2、相对于html控件: 1)能够在服务端代码中操作控件 2)能够自动处理虚拟路径~ 3)可以处理ClientID。 选择的顺序:HTML→run=server的HTML→ASP.Net服务端控件

HTML控件(runat=server)对应服务器类型

a→HtmlAnchor;form→HtmlForm;head→HtmlHead;input→HtmlInputButton、HtmlInputCheckBox 、HtmlInputText 等;meta→HtmlMeta;table→HtmlTable;tr→HtmlTableRow;td→HtmlTableCell;title→HtmlTitle。未单独封装的标签(比如div)或者自定义的标签(比如mmm)对应类型为HtmlGenericControl。使用Attributes属性操作未封装的属性。

不用单独记忆,忘了的话,在aspx中弄一个标签试验一下就行。

服务端HTML控件不像ASP.Net控件那样封装的高级,比如ASP.Net控件的BgColor属性为Color类型,而HTML控件的BgColor属性则为字符串类型,需要开发人员设置合法的值

数据绑定控件简介

数据绑定分为数据源和数据绑定控件两部分,数据绑定控件通过数据源来获得数据,通过数据源来隔离数据提供者和数据使用者,数据绑定控件通过数据源来对数据进行修改,数据源有SqlDataSource、AccessDataSource、ObjectDataSource、LinqDataSource、EntityDataSource、XmlDataSource等(SiteMapDataSource是SiteMap专用数据源),由于大部分项目都不会页面直连数据库(因为违反最基本的分层原则),所以SqlDataSource、AccessDataSource不会使用,LinqDataSource、EntityDataSource也是只有在很极端的采用Linq、EF的项目中才会用,XmlDataSource是处理XML数据是才可能会用。ObjectDataSource是Web开发中应用最广的数据源,也能很容易的进行数据库切换。

数据绑定控件有列表数据绑定控件(DropDownList、RadioButtonList、ListBox、CheckBoxList、BulletedList等)和

复杂控件(DataGrid、GridView、DetailsView、FormView、ListView、Repeater、DataList等,GridView等都是ListView子集)。

复杂控件中DataGrid已经不推荐使用,Repeater是最轻量级的组件,在互联网的前台用的最多,ListView是GridView、DetailsView、FormView、Repeater、DataList等这些控件的大一统者,那些控件的优点ListView全都有,会了ListView那些控件也就会用了,因此数据绑定控件主要讲列表数据绑定控件RepeaterListView,项目中会用到FormView 、GridView。

ObjectDataSource

ObjectDataSource用来将一个类做为数据源,TypeName属性为数据源类的全名,有DeleteMethod(删除方法)、InsertMethod(新增方法)、SelectMethod(查询方法)、UpdateMethod(修改方法)等几个属性,分别为类中删除、插入、查询、更新数据的方法名,这些方法可能有参数,参数的值是通过DeleteParameters、UpdateParameters、InsertParameters等嵌套节点设置的。

ObjectDataSource访问自己写的普通类,在类上标注[DataObject] DataObjectMethod

手工编写ObjectDataSource太麻烦,使用可视化界面来完成。将ObjectDataSource拖放到界面上,在右上角的智能标志上选择“配置数据源”即可进行配置。数据源类一般TypeNameAdapter类,选中类,选择【下一步】,分别选择对应的获得、删除、更新、插入数据的方法。

列表绑定控件

DropDownList显示来自于ObjectDataSource的数据,选择数据源(DataSourceID属性)为刚才的ObjectDataSource,并且设定显示字段(DataTextField)和值字段(DataValueField)即可。RadioButtonList、ListBox、CheckBoxList、BulletedList等也都是这么用。

手工设定绑定,除了可以给控件的DataSourceID属性设置一个数据源的方式进行数据绑定(推荐),还可以在代码中通过代码设置绑定(旧版本的ASP.Net只能这样绑定,新版本中不推荐)。

用代码绑定可以将任何实现了IEnumerable接口的对象绑定到数据绑定控件。

ListBox2.DataSource = new object[]{3,5,6};

ListBox2.DataBind();

由于数据绑定控件默认会将数据保存在ViewState中,因此不会每次刷新页面都会重新加载数据,只有第一次需要加载(!IsPostBack)

由于代码绑定在禁用ViewState的情况下有很多麻烦事,因此推荐用DataSourceID的方式,控件会自己来判断是否应该重新取得数据。

DropDownList原有“请选择性别”和数据绑定项的共存:AppendDataBoundItems=“true”,把数据绑定的项加到后面。

由于数据绑定控件默认会将数据保存在ViewState中,因此不会每次刷新页面都会重新加载数据,只有第一次需要加载(!IsPostBack)

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

ListBox2.DataSource = new object[] { 3, 5, 6 };

ListBox2.DataBind();

}

}

复杂数据绑定控件

除了显示Text、Value这样简单的列表数据绑定控件之外,还有更复杂的数据绑定控件的要求,比如要将人员信息显示在界面上,包含姓名、年龄、照片等。这时候就要使用Repeater、ListView等控件。

Repeater(今日重点)

Repeater(foreach)用于对绑定数据源中的数据进行遍历显示,每条数据以什么格式显示是由Repeater的<ItemTemplate>来决定的,模板会多次显示,就像foreach, ItemTemplate 中相当于{}中的语句。<ItemTemplate>姓名:<%#Eval(“Name”)%><b>年龄:<%#Eval(“Age”)%></b><br /></ItemTemplate>。注意:%和#中间不能有空格。 <%#Eval("Name")%>表示在这个位置显示当前实体对象的Name属性,注意调用Eval、Bind这些数据绑定方法的时候要用#

因为Eval就是将属性显示到指定的位置,因此也可以显示到文本框中<ItemTemplate>姓名: <asp:TextBox runat="server" Text=‘<%#Eval("Name") %>‘ /> </ItemTemplate>

注意不要写成Text="<%#Eval(‘Name‘) %>" 因为<%%>中的是C#代码,‘‘是字符,而不是字符串 还可以用在服务器控件中<asp:TextBox Text=‘<%#Eval("Name") %>‘ runat="server"></asp:TextBox>

练习:结合JQuery实现选中行高亮(把Repeater放到table标签中,ItemTemplate是tr)

 

 

建强类型DataSet

之前别忘了生成成功,放ObjectDataSource,设定绑定

Repeater绑定到ObjectDataSource

设定ItemTemplate

 

Repeater其他模板

1、<AlternatingItemTemplate>,设置隔行的不同显示风格,如果设定<AlternatingItemTemplate>,则奇数行用<ItemTemplate>模板,偶数行用<AlternatingItemTemplate>模板

<AlternatingItemTemplate><asp:TextBox BackColor="Red" ID="TextBox2" Text=‘<%#Eval("Name") %>‘ runat="server"/></AlternatingItemTemplate> 。设置隔行变色是为了防止数据太多看串行。

2、HeaderTemplate、FooterTemplate:头部、尾部的模板,分别显示在所有数据的前面和后面。

3、SeparatorTemplate :两项数据之间的分隔符,比如换行符

案例

案例:显示人员信息,姓名、年龄、照片(网站中都是存的图片路径 1、ItemTemplate里面用服务端控件: 1)绑定的属性必须用单引号myname=‘<%#Eval("Name") %>‘ 。而HTML控件则单引号、双引号都行。 2)属性值里要么就是普通的值,要么就是整个绑定表达式,不能混着 ,比如ImageUrl=‘images/<%#Eval("ImgPath") %>‘。HTML控件就没有这个问题。 能不用服务端控件就不用 可以这样处理<%#"img/"+Eval("APic")%> 练习:显示文章列表。id、标题、作者、链接地址。如果标题过长则只显示前10个字并且加省略号(不用样式实现)不要在aspx中写过于复杂的C#代码,如果代码比较复杂,想办法提取到cs中 练习:显示友情链接列表,字段:网站名、超链接、友情链接类型(文本、图片)、Logo图片地址。 文本友情链接、图片友情链接分别展示

 

 

ASP.NET服务器端控件(class0617),布布扣,bubuko.com

ASP.NET服务器端控件(class0617)

标签:style   java   color   使用   文件   数据   

原文地址:http://www.cnblogs.com/fanhongshuo/p/3819099.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!