服务端控件
ClientID
我们以后在客户端操作服务端控件的时候，不要用ID,而是最好是使用ClinetID。因为服务端控件的ID不一定等于“服务端控件渲染到客户端后生成的HTML中的ID”
比如说在ListView等控件的模板中。因此如果在客户端通过JavaScript，Dom,Jquery的documnet.getElementById("id") ,或者$("#id")来操作控件的话最好不要直接
写服务端控件的ID,而是通过 $("#<%=Button1.ClientID%>")这种形式来操作。
用jquery时间设置鼠标移动到控件上和控件移开的不同样式，在用户控件中就可以看到ClientID和Id的不同。 UserControl,母版，ListView，推荐永远用ClientID
例如：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApp.WebForm3" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<%--获取由ASP.NET生成的HTML标记的控件ID 这里虽然也是输出Button1--%>
<%=this.Button1.ClientID %>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
</body>
</html>
Visible属性
表示控件是否可见，如果Visible=False那么在在渲染的时候就会忽略掉这个控件，也就是说这个控件不会生成HTML代码。也就表明根本不存在这个控件，既然控件都不存在，也就不会占用区域。
怎么给服务器端控件设置Class样式？
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApp
{
public partial class WebForm3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//给服务端控件Button1这个控件设置一个Class样式
//这样在客户端生成的HTML就是：
//<input type="submit" name="Button1" value="Button" id="Button1" class="MyClass" />
this.Button1.CssClass = "MyClass";
}
或者在WebForma.aspx源代码中设置：添加一个CssClass属性"
<asp:Button ID="Button1" runat="server" Text="Button" CssClass="MyClass"/><input type="submit" name="Button1" value="Button" id="Button1" class="MyClass" />给服务控件设置一些额外的属性：Attributes
比如：控件本身没有UserName这个，但是在某些操作的时候，我就是想用一个UserName属性，比如在用jquery操作的时候。
那怎么给控件加一个额外的属性呢?
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApp
{
public partial class WebForm3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//给Button1这个控件添加一个额外的属性UserName，并将这个属性设置一个值，这里指定值为“张三”
//这样Button1这个控件在客户端生成的Html代码为：
//<input type="submit" name="Button1" value="Button" id="Button1" UserName="张三" />
this.Button1.Attributes.Add("UserName", "张三");
}
}
}利用可以给服务端控件添加一个额外属性这一点，我们好可以更好的利用这一点：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApp
{
public partial class WebForm3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//给Button1这个控件添加一个额外的属性UserName，并将这个属性设置一个值，这里指定值为“张三”
//这样Button1这个控件在客户端生成的Html代码为：
//<input type="submit" name="Button1" value="Button" id="Button1" UserName="张三" />
//这样等于给Button这个控件添加了一个onMouseOver事件了。
this.Button1.Attributes.Add("onMouseOver", "alert('你好！')");
//也可以换一种写法：这种写法相当于也是给控件添加了一个事件
this.Button1.Attributes["onmouseleave"] = "this.style.backgroundColor='red'";
}
}
}TextBox 控件
TextBox控件，有一个自动提交属性AutoPostBack
只要将这个属性的值设为true，那么当这个控件失去焦点时候会立刻出发一个onchange事件，在这个事件里会其实就是执行了一个名字叫__doPostBack的函数，并在这个函数里提交了表单。
下面我们可以看看当将一个TextBox控件的AutoPostBack属性设为True的时候，服务端为我们在客户端生成了什么代码？
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
</title></head>
<body>
<form method="post" action="WebForm4.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="jDEYukuMkwLgZ/lmoQJjSHiidrhaHlkEpHU1ULbVH2ES2yd4TOtefiOc97f6WzzjCyNUU33CfdXBW0O3q+8wtyJhfkeoh023M24FK7yr7eM=" />
</div>
<!--这都是将一个TextBox控件的AutoPostBack属性设为True的时候服务自动我们生成的一段js代码-->
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZNUN7LZkz3OUIcz5FRy2P7fXFY_ewwxCDhpw62pOTb2PoNFDLdb7SVnCbGvNY8r3DA2&t=635586541120000000" type="text/javascript"></script>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="D51E3F29" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="BNUoHCx0FgLnaebhPSPBkmflIXE/4+YoMKJYoVLoyc2D7FhBHTXkaqQ4ziDvOCSOKtNc9LAnIg4216uvt4OVJJ/g+SJR6zTGBI1NBDJHz9voxPl4OgUtLlv4Cxz217kP" />
</div>
<div>
<!--这都是将一个TextBox控件的AutoPostBack属性设为True的时候服务自动我们生成的HTML代码，里面给我们自动添加了一个onchange事件，里面调用了__doPostBack函数-->
<input name="TextBox1" type="text" οnchange="javascript:setTimeout('__doPostBack(\'TextBox1\',\'\')', 0)" οnkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="TextBox1" />
</div>
</form>
</body>
</html>Button控件
Button控件有一个OnClientClick属性，这个属性不是给服务端设置一个点击事件，而为客户端生成一个单击事件。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApp
{
public partial class WebForm4 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//给这个按钮注册一个客户端的单击事件。这样这个按钮在客户端生成的HTML代码里，就多了一个OnClick事件
//到时候这个Button控件会在客户端解析成：
//<input type="submit" name="Button1" value="Button" οnclick="alert(new Date().toString());" id="Button1" />
Button1.OnClientClick = "alert(new Date().toString())";
//Button1.OnClientClick = "return confirm('你确定要删除吗？')";
}
}
}LinkButton控件
LinkButton用法和Button控件差不多，区别在于Button控件渲染成按钮。而LinkButton渲染成一个超链接的样子而已。一般情况下我们都是用Button按钮，只有用户要求将按钮变成超链接的样子的时候才采用LinkButton按钮。
HyperLink控件
这个控件是一个超链接控件
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApp
{
public partial class WebForm4 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//要链接到的网站
//this.HyperLink1.NavigateUrl = "WebForm3.aspx";
this.HyperLink1.NavigateUrl = "http://www.baidu.com";
this.HyperLink1.Text = "百度";
//我们也可以给这个超链接加一个图片。这样点击图片的时候就链接到百度去了。
this.HyperLink1.ImageUrl = "e.jpg";
//渲染后生成的HTML代码是这样的：
// <a id="HyperLink1" href="http://www.baidu.com"><img src="e.jpg" alt="百度" /></a>
}
}
}ImageButton控件
ImageButton控件和Button也差不多，只不过显示为图片。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApp
{
public partial class WebForm4 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.ImageButton1.ImageUrl = "e.jpg";
//当点击图片的时候，将表单提交到WebForm3.aspx这个页面
this.ImageButton1.PostBackUrl = "WebForm3.aspx";
}
}
}Button,LinkButton，ImageButton等控件都有CommandName,CommandArgument两个属性和Command事件，可以让多个按钮控件共享一个属性读取被点击按钮上设置的这个两个参数来指向不同的操作。例子：编辑，删除多行数据。这种用法，在ListView等控件中用的最多。
Panel控件
Panel控件经过渲染后生成的代码其实就是一个div
<div id="Panel1"></div>但是panel控件有一个属性：GroupingText。
namespace WebApp
{
public partial class WebForm5 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.Panel1.GroupingText = "国家";
}
}
}<div id="Panel1">
<fieldset>
<legend>
国家
</legend>
中国
</fieldset>
</div>
DropDownList下拉控件
<asp:DropDownList ID="DropDownList1" runat="server" SelectedValue="男">
<asp:ListItem Value="男">男</asp:ListItem>
<asp:ListItem Value="女">女</asp:ListItem>
</asp:DropDownList>
825
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
