9-19：Asp第三讲：web服务端控件

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

所有的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

 <%=TextBox1.ClientID%>----------------------------------获取它

 §（2）Visible 属性， 控件是否可见，如果Visible=False是不会转到HTML中的，(Visible=“hidden”有，但是藏起来了)这和在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’)”;

 

所有ASP.NET服务器控件都直接或间接地从System.Web.UI.Control类派生。

ASP.NET服务器控件包括Web服务器控件(简称Web控件)、HTML服务器控件(基础控件)、数据控件和ASP.NET移动控件。ASP.NET服务器控件的语法是在控件的页面标记上包含runat=“server”属性。而Web控件的页面标记通常以<asp:>开头。

 

常用的 Web 控件:

主要的常用的控件：

（1）文本类型控件

（2）按钮类控件

（3）选择类型控件

（4）图像显示控件

今天老师讲了2个大的（1）（2）

（一）文本类型控件

Label ---Literal

TextBox

radio

 

（1）

Label ---Literal

课上的练习：

1. Label（标签）   作用：用于在页面上显示文本 。 语法：

 作用：用于在页面上显示文本 。

 语法：

<asp:Label ID="Label1" runat="server" AssociatedControlID="TextBox1" Text="你好："></asp:Label> 

在浏览器渲染为：

-----<span>

AssociatedControlID(有关联的)

  2.Literal

 <asp:Literal ID="Literal1" runat="server" Mode="Encode"
            Text="&lt;img src=&quot;C:\Users\Administrator.PC-20120907SDQU\Documents\Visual Studio 2010\WebSites\WebControl\委托案例11.png&quot;&gt;"></asp:Literal>

不渲染任何标签，设置Mode属性为Encode，避免xss攻击

2.TextBox（文本框）

    作用：

        用于建立单行文本输入框singleLine、密码输入password、多行motiline文本输入，主要通过TextMode属性来区别三种输入模式。

分别渲染为input(type=text)、textarea和input(type=password)

AutoPostBack=”true|false,是否自动提交表单” runat="server"></asp:TextBox>

当AutoPostBack属性为true的时候，用户焦点离开TextBox就会造成页面Post，实现原理就是讲ASP.Net原理时的AutoPostBack。

 典型事件：

         TextChanged ，在文本框中的内容发生改变时候被激发。 (需要AutoPostBack=true才会修改后触发，否则是页面提交才触发)，文本发生变化的时候事件触发。ASP.Net中要提交表单的时候最好调用__doPostBack方法

<asp:TextBox ID="TextBox2" runat="server" AutoPostBack="false" Height="18px"
        ontextchanged="TextBox2_TextChanged"></asp:TextBox>

 

3.Radio

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

<asp:RadioButton ID="RadioButton1" runat="server" Text="女" GroupName="gender" />
    &nbsp;&nbsp;
    <asp:RadioButton ID="RadioButton2" runat="server" Text="男" GroupName="gender" />

    <br />
       <asp:RadioButton ID="RadioButton3" runat="server" Text="一年级" GroupName="grade" />
    &nbsp;&nbsp;
    <asp:RadioButton ID="RadioButton4" runat="server" Text="二年级" GroupName="grade" />
   
    <hr />
 

二）按钮类型控件

vButton

vLinkButton

vImageButton

HyperLink 

(1)

Button

作用：Button控件呈现为一个普通按钮,它是一个标准的按钮提交控件，一般用于提交Web表单。

语法：

    <asp:Button ID="按钮名称" runat="server" Text="Button" />

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

 典型事件：

   Click ：被单击时候激发，并将表单提交给服务器。

   Command：也是在单击时产生，但是同时CommandName和CommandArgument属性的值与该事件一起被传递。 

(2)

LinkButton(链接按钮)

作用：可以在页面上创建超级链接样式的按钮。即LinkButton的外观和HyperLink控件一样，但是功能与Button控件相同。

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

vHyperLink：IsPostBack=False，没有提交表单内容，没有OnClick事件。

 

语法：<asp:LinkButton ID="控件名" runat="server">显示内容</asp:LinkButton>

典型事件：Click。

 

<asp:LinkButton ID="LinkButton1" runat="server"
        onclientclick="return confirm(&quot;真的要执行吗？&quot;);">LinkButton</asp:LinkButton>

   (3)

ImageButton

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

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

(4)

.超级链接控件HyperLink

  语法：

     <asp:HyperLink ID="控件名" runat="server" NavigateUrl="导航网址" >显示导航信息 </asp:HyperLink>

  常用属性：

       NavigateUrl：用户单击时所转向的页面URL

v       Text:字符串，链接文字

v       ImageUrl： 以图像方式呈现链接时，图形的URL

v       Target: 目标框架，默认为本框架，_blank标识新窗口

v        和LinkButton不一样(常考),不会向服务器端Post，就是一个超链接。NavigateURL：链接地址；Text：显示文本。

 如果设定ImageUrl属性则会显示图片超链

HyperLink如只是指向外网一个地址，如http：//www.baidu.com,那就不必用HyperLink，如果指向本站点的资源使用HyperLink可以自动将虚拟路径进行转换，更加方便。