webform--常用的控件

1、Lable——標簽：在網頁中呈現出來的時候會變成span標簽

屬性：Text——標簽上的文字

　　  BackColor，ForeColor——背景色，前景色

　　　Font——字體   

  Bold-加粗
  Italic-傾斜
  UnderLine-下划線     OverLine 上划線     StrikeOut 刪除線
  Name - 字體名
  Size - 字體的大小

BorderColor——邊框顏色

　　BorderWidth-邊框粗細
　　BorderStyle - 邊框樣式

　　Height——高

　　Width——寬

　　Enabled-是否可用
　　Visible-是否可見
　　ToolTip-鼠標指上去的提示信息
　　CssClass - 樣式表的class選擇器

2.Literal——這也是一個文本標簽，但它在網頁中顯示的時候不會變成span標簽

它 的屬性很少，是派生自control類的

3.TextBox——文本框     HiddenField——隱藏域  textarea--文本域 

屬性：它擁有Lable所有的屬性

　　 TextMode：文本框的呈現模式——SingleLine--單行文本框；MultiLine-多行文本框；Password-密碼框

       ReadOnly - 只讀
       MaxLength - 最大輸入的字符數。只有TextMode是SingleLine和Password的時候起作用，在MultiLine的時候不起作用。

       Columns：寬度，以字母個數為單位
       Rows：高度，以行數為單位。只有TextMode是MultiLine的時候才起作用。在單行文本或多行文本下是不起作用的。

4.Button——按鈕      LinkButton 超鏈接按鈕        ImageButton 圖片按鈕(ImageUrl屬性，需要把圖片放項目文件夾中，如果VS沒有顯示出來，需要刷新下)

屬性：它擁有Lable所有的屬性

        OnClientClick：當按鈕被點擊的時候，要執行的客戶端的JS代碼。它的觸發要在按鈕的C#事件代碼之前。

5.HyperLink：超鏈接

屬性：它擁有Lable所有的屬性

       NavigateUrl：超鏈接指向的地址，相當於href

　　 Target：打開位置

　　 ImageUrl：圖片超鏈接的地址

6.Image——圖片

屬性：擁有Lable所有的屬性

 ImageUrl：圖片的地址

 

二，復合控件

1.DropDownList——下拉列表    擁有Lable的所有屬性

對於DropDownlist必須會做三件事

（1）把內容填進去

法一：逐項添加

 private void FillList()
    {
          List<QuanxianData> list = new QuanxianDA().Select();
         //QuanxianData qd=new QuanxianData();   
         //qd.Qname="請選擇";
         //qd.Qno="-1";
         //list.Insert(0, qd);在第一項加上“請選擇”的功能
 foreach (QuanxianData data in list)
         {
            //DropDownList 控件中的每個可選項都是由 ListItem 元素定義的！
             ListItem item = new ListItem();
             item.Text = data.Qname;
             item.Value = data.Qno;
             DropDownList1.Items.Add(item);
         }
     }

 

 

法二：數據綁定（用這種簡便方法）

private void FillList2()
    {
        List<QuanxianData> list = new QuanxianDA().Select()；
        DropDownList1.DataSource = list;//綁定數據源
        DropDownList1.DataTextField = "Qname";//要顯示哪一數據列
        DropDownList1.DataValueField = "Qno";//要設置一個value值
        DropDownList1.DataBind();  //最終執行綁定填充，不要漏掉
    }


//linq連接數據庫方法

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        testDataContext _context = new testDataContext();
       DropDownList1.DataSource=  _context.Nation;
       DropDownList1.DataTextField ="Name";//要顯示哪一項內容
       DropDownList1.DataValueField = "Code";//
       DropDownList1.DataBind();
 //最終執行綁定填充，不要漏掉
 }
}

技巧：如何給下拉列表加上“請選擇”的功能

1.用以上代碼中的方法

2.事先在下拉列表中設置靜態的"請選擇"列表項。然后再綁定或添加數據的時候在后面添加上。

如果采用數據綁定模式，默認情況下會把原有的項沖掉。需要設置AppendDataBoundItems屬性為true。

3.所有的項都綁定或填加到下拉列表后，再寫代碼加上”請選擇“的功能。

protected void Page_Load(object sender, EventArgs e)
    {
        FillList();
        ListItem li = new ListItem("請選擇", "-1");
        DropDownList1.Items.Insert(0, li);
    }

（2）把選中的值取出來：選擇列表里的項，點擊按鈕，在標簽中顯示選擇的內容

 注：由於DropDownList需要打到服務器執行，需要把屬性AutoPostBack(當內容更改時，自動發回到服務器)改為Ture;

 

protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = DropDownList1.SelectedItem.Text + DropDownList1.SelectedItem.Value;//取出選中項的文本和值
        Label1.Text = DropDownList1.SelectedValue;//取出選中項的值
        int index = DropDownList1.SelectedIndex;//取出選中項的索引號
        Label1.Text = DropDownList1.Items[index].Text + DropDownList1.Items[index].Value;//取出對應索引號的文本和值
    }

 

注意：每次點擊按鈕時，都是要先執行Page_Load中的代碼，然后再執行Button-Click中的代碼

所以在Page_Load中要加入一下代碼

if(!IsPostBack)
{
防止每次點擊提交頁面都會執行這里面的代碼。
這里面的代碼，只有頁面初次加載的時候才被執行。點擊按鈕提交的時候，不會被執行到。
以后記着：在Page_Load事件中99%的情況下需要寫這段判斷
}

（3）設定某項為選中項

給DropDownList的兩個屬性賦值：
SelectedIndex = 選中的索引號
SelectedValue = 選中項的值

 

protected void Button2_Click(object sender, EventArgs e)
    {
        //DropDownList1.SelectedIndex = Convert.ToInt32(TextBox1.Text);
        DropDownList1.SelectedValue = TextBox1.Text;
    }

 

2.RadioButtonList——單選按鈕列表  Radiobutton--單選按鈕

1.Radiobutton: 屬性GroupName組名，同一個組名下的單選按鈕產生互斥效果（例如：注冊時選男、女）

例子：給2個Radiobutton設置同樣的組名

屬性：它擁有Dropdownlist所有的屬性和功能

RepeatDirection：布局的方向

RepeatLayout：布局方式

RepeatColumns：一行顯示幾個

案例： 和Dropdownlist相同

3.CheckBoxList——復選框列表  CheckBox——復選框

1.CheckBox——復選框：屬性:checked 是否選中；取值checkbox.text="";

擁有RadioButtonList所有的屬性和功能

顯示數據：

 

protected void Page_Load(object sender, EventArgs e)
    {
        DataClassesDataContext _conect = new DataClassesDataContext();//建立上下文連接對象
       CheckBoxList1.DataSource =   _conect.Nation;  //獲取數據源
       CheckBoxList1.DataTextField = "Name";//要顯示的項
       CheckBoxList1.DataValueField = "Code";//返回值
       CheckBoxList1.DataBind();//綁定數據源

    }

 

 技巧：
（1）如何獲取選中的多個項？
//獲取復選框的選中值。
//思路：遍歷復選框列表中的每個項，判斷每個項的選中情況。

foreach (ListItem li in CheckBoxList1.Items)
{
   if (li.Selected)
   {
     Label2.Text += li.Value + ",";
   }
}

2）如何設置幾個項同時被選中

//設置文本框中指定的項(用 | 隔開的每一項)被選中
//思路：從文本框中解析出要選中的項的value值，然后再遍歷每一項，判斷是否是文本框中指定的，是的話就設為選中，不是就設為不選中。

 

CheckBoxList1.SelectedIndex = -1; //先清空列表中被選中的項

string s = TextBox1.Text;
string[] ss = s.Split('|'); //解析出要選中的value值

  foreach (ListItem li in CheckBoxList1.Items)
  {
    if (ss.Contains(li.Value))
     {
          li.Selected = true;
          continue;
     }
 }

 

4.ListBox——列表框

擁有Dropdownlist所有的屬性和功能

SelectionMode - Single,Multiple

案例：如果是單選的話就照着Dropdownlist來做

如果是多選的話就照着Checkboxlist來做

 

5.RadioButtonList:單選按鈕列表：
顯示數據：
RadioButtonList1.DataSource = context.Nation;
RadioButtonList1.DataTextField = "Name";
RadioButtonList1.DataValueField = "Code";
RadioButtonList1.DataBind();
取選中項的值：
RadioButtonList1.SelectedValue.ToString();
設置選中項：
RadioButtonList1.SelectedIndex = 2;

6.驗證控件

驗證控件：
一、非空驗證：RequiredFieldValidator
ErrorMessage：錯誤提示信息
ControlToValidate：要驗證哪一個控件
Display：Static--不顯示也占空間。Dynamic--不顯示不占空間
InitialValue：初始值。

應用：
1.必須填
2.像“不能為空”，這種提示的形式。

二、對比驗證：CompareValidator
ErrorMessage：
ControlToValidate：
Display：Static--不顯示也占空間。Dynamic--不顯示不占空間
ControlToCompare：要對比的控件。
ValueToCompare：要對比的值
Type：按照什么類型對比。輸入的類型。
Operator：運算符

應用：
1.密碼和確認密碼——兩個控件對比
2.月收入——控件和某個固定值對比。

三、范圍驗證： RangeValidator
ErrorMessage：
ControlToValidate：
Display：Static--不顯示也占空間。Dynamic--不顯示不占空間
Type:按照什么類型對比，需要輸入的是什么類型
MaximumValue：范圍的最大值
MinmumValue：范圍的最小值

 

四、正則表達式驗證：RegularExpressionValidator
ErrorMessage：
ControlToValidate：
Display：Static--不顯示也占空間。Dynamic--不顯示不占空間
RegularExpression：正則表達式

注意：正則表達式的使用與修改

五、自定義驗證：CustomValidator
ErrorMessage：
ControlToValidate：
Display：Static--不顯示也占空間。Dynamic--不顯示不占空間
ClientValidationFunction：自定義的客戶端驗證函數

第一步：設置ClientValidationFunction屬性
第二步：為ClientValidationFunction的屬性編寫JS代碼
//像C#服務端事件函數一樣，sender是事件源，args是事件數據
function checkSex(sender, bbb) {
//把要驗證的值取出來。
var s = bbb.Value; //把驗證控件要驗證的那個控件（文本框）里面的值給取出來。
//進行驗證
if (s == "男生" || s == "女生") {
//告訴系統，驗證結果是否正確
bbb.IsValid = true;
}
else {
//告訴系統，驗證結果是否正確
bbb.IsValid = false;
}

}

六、ValidationSummary：驗證匯總控件
ShowMessageBox：是否以對話框的形式顯示錯誤信息
ShowSummary：是否在頁面上顯示錯誤信息

七、驗證分組：
把同一組的輸入控件、按鈕、驗證控件的ValidationGroup屬性設成一樣的。

 7、上傳文件（圖片）

ASP.NET 提供三種處理文件夾路徑的工具：~ 操作符、Server.MapPath 方法以及 Href 方法。

~ 操作符

如需在編程代碼中規定虛擬根目錄，請使用 ~ 操作符。

如果您使用 ~ 操作符，而不是路徑，就能夠在不改變任何代碼的情況下，將網站移動到不同的文件夾或位置：

var myImagesFolder = "~/images";
var myStyleSheet = "~/styles/StyleSheet.css";

Server.MapPath 方法

Server.MapPath 方法將虛擬路徑 (/default.cshtml) 轉換為服務器能夠理解的物理路徑 (C:\Johnny\MyWebSited\Demo\default.cshtml)。

當需要打開位於服務器上的數據文件時，您就會用到該方法（數據文件只能通過完整的物理路徑來訪問）：

var pathName = "~/dataFile.txt";
var fileName = Server.MapPath(pathName);

在本教程的下一章中，您將學習更多有關在服務器上讀取和寫入數據文件的知識。

Href 方法

Href 方法把代碼中的路徑轉換為瀏覽器能夠理解的路徑（瀏覽器無法理解 ~ 操作符）。

您使用 Href 方法來創建指向資源（比如圖片和 CSS 文件）的路徑。

您會經常在 HTML <a>、<img> 以及 <link> 元素中用到該方法：

@{var myStyleSheet = "~/Shared/Site.css";}

<!-- 創建指向 CSS 文件的鏈接 -->
<link rel="stylesheet" type="text/css" href="@Href(myStyleSheet)" />

<!-- 同上 : --> <link rel="stylesheet" type="text/css" href="/Shared/Site.css" /> 

Href 方法屬於 WebPage 對象的方法。

 8.repeater 

 

Repeater控件：展示數據庫相關的數據
外觀與數據分離。
外觀代碼：用模板來實現的。（頭，腳，項，交替項，分隔符模板）
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li><%# Eval("Name") %></li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
數據代碼：C#的綁定代碼。
var query = _Context.Info;

Repeater1.DataSource = query;
Repeater1.DataBind();

Repeater在模板中綁定數據三種方式：
1.<%# Eval("屬性名或列名","格式如{0:yyyy-MM-dd}")%>
2.<%# 函數名()%>，函數需要事先在.cs文件寫好，並返回字符串。如：
public string ShowSexName()
{
bool sex = Convert.ToBoolean(Eval("Sex"));
return sex ? "男" : "女";
}
3.如果使用的實體類（如Linq），可擴展屬性，在模板中使用<%# Eval("擴展屬性")%>進行綁定。

Webfrom 生成流水號 組合查詢 Repeater中單選與復選控件的使用 JS實戰應用

 

                                        

 

Default.aspx 網頁界面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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:Label ID="Label1" runat="server" Text="流水號生成" Font-Bold="True" Font-Size="30px"></asp:Label>

<br />
代號：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="生成流水號" />
<br />
姓名：<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br />
性別：<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<br />
民族:
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
&nbsp;<br />
生日:
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button2" runat="server" Text="提交" />
<br />
<br />

</div>
</form>
</body>
</html>

 

Defaule.aspx.cs C#界面

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
private MyDBDataContext _Context = new MyDBDataContext();
protected void Page_Load(object sender, EventArgs e)
{


}
protected void Button1_Click(object sender, EventArgs e)
{
string prefix = "p" + DateTime.Now.ToString("yyyyMMdd");
//1查當天最大的流水號
int maxFlow = 0;
var query = _Context.Info.Where(p=>p.Code.StartsWith(prefix));
if (query.Count() > 0)
{
query = query.OrderByDescending(p=>p.Code);//按流水號經序排列
string maxCode = query.First().Code;//獲取最大流水號
maxFlow =Convert.ToInt32(maxCode.Substring(9));
}

//組合查詢最新的流水號
string flowCode = prefix + (maxFlow + 1).ToString("000");
//顯示在文本框中
TextBox1.Text = flowCode;
}
}

 

 

*********************************************************************************************

                                                                                 組合查詢

*********************************************************************************************

                       

 

 

Default.aspx 網頁界面

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!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">
<h1>組合查詢</h1>
<div>

車名：<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
&nbsp; 系列：<asp:DropDownList ID="ddlBrand" runat="server" AppendDataBoundItems="True">
<asp:ListItem Value="-1">==請選擇==</asp:ListItem>
</asp:DropDownList>
&nbsp; 油耗：<asp:TextBox ID="txtOil" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="查詢" OnClick="Button1_Click" />
<br />
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<%# Eval("Name") %>
<font color="red"><%# Eval("Brand") %></font>
<font color="blue"><%# Eval("Oil") %></font>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>

</div>
</form>
</body>
</html>

 

 

 

Defaule.aspx.cs C#界面

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default2 : System.Web.UI.Page
{
private MyDBDataContext _Context = new MyDBDataContext();
private void FillBrand()
{
var query = _Context.Brand;

ddlBrand.DataSource = query;
ddlBrand.DataTextField = "Brand_Name";
ddlBrand.DataValueField = "Brand_Code";
ddlBrand.DataBind();
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
FillBrand();
}
}
//核心代碼：
protected void Button1_Click(object sender, EventArgs e)
{

var query1 = _Context.Car.AsQueryable(); //根據名稱查 默認情況下應當是全集
var query2 = _Context.Car.AsQueryable();//根據系列查
var query3 = _Context.Car.AsQueryable();//根據油耗查

//根據輸入框的填寫情況來完善上面三個查詢條件
if (txtName.Text.Trim().Length > 0)
{
query1 = query1.Where(p => p.Name.Contains(txtName.Text));
}
if (ddlBrand.SelectedValue != "-1")
{
query2 = query2.Where(p => p.Brand == ddlBrand.SelectedValue);
}
if (txtOil.Text.Trim().Length > 0)
{
query3 = query3.Where(p => p.Oil == Convert.ToDecimal(txtOil.Text));
}

//三個查詢條件是邏輯與的關系，可以使用集合操作的交集來實現
var query = query1.Intersect(query2).Intersect(query3);

//綁定顯示
Repeater1.DataSource = query;
Repeater1.DataBind();

}
}

 

 

*********************************************************************************************

                                                                   Repeater中單選與復選控件的使用        JS實戰應用      

*********************************************************************************************

Default.aspx 網頁界面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!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>
<script language="javascript">
function checkAll(ckall) {
//找所有的每一項左側的復選框。
var cks = document.getElementsByName("ck");
//遍歷每個復選框，把每個復選框的選中狀態設置得和chkall一樣
for (var i = 0; i < cks.length; i++) {
cks[i].checked = ckall.checked;
}
}
function setCheckAll() {
//思路：遍歷所有項的復選框，判斷是否全選。是全選的話，把ckall設為選中，否則把它設為不選中。
//1.找到所有的項的復選框。
var cks = document.getElementsByName("ck");
//2.遍歷每個復選框，記錄是否被全選了。
var selectedall = true;
for (var i = 0; i < cks.length; i++) {
selectedall = selectedall && cks[i].checked;
}
//3.根據是否被全選的狀態，確定ckall的選中狀態
var ckall = document.getElementById("ckall");
ckall.checked = selectedall;
}
function dodelete() {
//1.找到所有的項的復選框。
var cks = document.getElementsByName("ck");

//2.判斷是否有選中項
var selecteditem = false;
for (var i = 0; i < cks.length; i++) {
selecteditem = cks[i].checked || selecteditem;
}
//3.根據選中項的情況給出不同的對話框提示
if (selecteditem == false) {
alert("請選擇要刪除的項");
return false;
}
else {
var del = confirm("確認要刪除選中的項嗎？");
return del;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table width="100%" border="0" cellspacing="5">
<tr>
<td>
<input id="ckall" name="ckall" type="checkbox" onclick="checkAll(this)" />
</td>
<td>名稱</td>
<td>系列</td>
<td>廠商</td>
<td>價格</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<input id="ck_<%# Eval("Code") %>" name="ck" type="checkbox" value="<%# Eval("Code") %>" onclick="setCheckAll()" />
</td>
<td><%# Eval("Name") %></td>
<td><%# Eval("BrandName") %></td>
<td><%# Eval("ProdName") %></td>
<td><%# Eval("Price") %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>

</div>
<asp:Button ID="Button1" runat="server" OnClientClick="return dodelete()" OnClick="Button1_Click" Text="刪除" />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</form>
</body>
</html>

 

 

Defaule.aspx.cs C#界面

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default3 : System.Web.UI.Page
{
private MyDBDataContext _Context = new MyDBDataContext();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Show();
}
}

private void Show()
{
var query = _Context.Car;

Repeater1.DataSource = query;
Repeater1.DataBind();
}
protected void Button1_Click(object sender, EventArgs e)
{
if (Request["ck"] != null)
{
//獲取選中項的主鍵值
string s = Request["ck"].ToString(); //選中項的value值，使用,隔開的。
string[] keys = s.Split(','); //劈開上面的字符串，形成主鍵值的數組。
//根據上面的主鍵值刪除數據
foreach (string key in keys)
{
var query = _Context.Car.Where(p=>p.Code == key);
if (query.Count() > 0)
{
Car data = query.First();
_Context.Car.DeleteOnSubmit(data);
_Context.SubmitChanges();
}
}
//刷新顯示
Show();
Literal1.Text = "<script language='javascript'>alert('刪除成功')</script>";
}
}
}

使用 <AlternatingItemTemplate>

您可以在 <ItemTemplate> 元素后添加 <AlternatingItemTemplate> 元素，這樣就可以描述交替行的外觀了

eg

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>
         <br />

         <asp:Label ID="Label1" runat="server" Text="關鍵字："></asp:Label>
         <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
&nbsp;
         <asp:Label ID="Label2" runat="server" Text="價格："></asp:Label>
         <asp:TextBox ID="txtJGmin" runat="server" Width="49px"></asp:TextBox>
&nbsp;<asp:Label ID="Label3" runat="server" Text="到"></asp:Label>
&nbsp;<asp:TextBox ID="txtJGmax" runat="server" Width="49px"></asp:TextBox>
&nbsp;
         <asp:Button ID="btnSelect" runat="server" OnClick="btnSelect_Click" Text="查詢" />

        <br />
        <br />
        <asp:Repeater ID="Repeater1" runat="server">

            <HeaderTemplate>
                <table width="903" border="0" cellspacing="1" cellpadding="0" bgcolor="#6600FF">
                  <tr style="height:25px;">
                    <td width="260" bgcolor="#FFFFFF">名稱</td>
                    <td width="160" bgcolor="#FFFFFF">上市時間</td>
                    <td width="160" bgcolor="#FFFFFF">油耗</td>
                    <td width="160" bgcolor="#FFFFFF">功率</td>
                    <td width="163" bgcolor="#FFFFFF">價格</td>
                  </tr>
            </HeaderTemplate>
            <FooterTemplate>
                </table>
            </FooterTemplate>
            <ItemTemplate>
                 <tr style="height:25px;">
                    <td bgcolor="#FFFFFF"><%#Eval("Name") %></td>
                    <td bgcolor="#FFFFFF"><%#Eval("Time","{0:yyyy年MM月dd日}") %></td>
                    <td bgcolor="#FFFFFF"><%#Eval("Oil") %></td>
                    <td bgcolor="#FFFFFF"><%#Eval("Powers") %></td>
                    <td bgcolor="#FFFFFF"><%#Eval("Price") %></td>
                  </tr>
            </ItemTemplate>
            <AlternatingItemTemplate>
                <tr style="height:25px;">
                    <td bgcolor="gray"><%#Eval("Name") %></td>
                    <td bgcolor="gray"><%#Eval("Time","{0:yyyy年MM月dd日}") %></td>
                    <td bgcolor="gray"><%#Eval("Oil") %></td>
                    <td bgcolor="gray"><%#Eval("Powers") %></td>
                    <td bgcolor="gray"><%#Eval("Price") %></td>
                  </tr>
            </AlternatingItemTemplate>
        </asp:Repeater>
    
    </div>
    </form>
</body>
</html>

 

 

9、datagrid 使用

 三種列表控件比較：
Datagrid
優點：1.靈活性強，內置事件豐富
            2.提供分頁、編輯、排序等特性
            3.功能強大的Datagrid編輯器以及模板列
            4.快速開發、容易部署
            5.對於表格的操作非常方便
            6.內置多種布局風格
缺點：1.性能不高，因為每次操作必須postback回服務器
            2.個性化輸出數據有限（只能輸出HTML表格）
使用范圍：主要用在含有數據的表格中，一般數據源是一個Dataset。對於有排序、分頁、多列顯示、對性能要求不是很高選用Datagrid.

Datalist
優點：1.擁有強大的模板特性，靈活性高
            2.支持數據的編輯狀態
            3.性能優於Datagrid
缺點：1.開發周期略比Datagrid高
            2.沒有Datagrid編輯器
            3.不容易實現分頁和排序功能
使用范圍：主要用於單列的數據列表、高性能的自定義數據表，每行多條記錄，如電子相冊（含分頁）

Repeat
優缺點：1.控件完全以HTML方式呈現，更加個性化
                2.不支持分頁、編輯和排序功能
                3.開發周期最長 
                4.不提供默認的風格，需手工編寫
                5.性能最好，但特性最少
使用范圍：主要用於一些靈活性、性能更高的數據展現。

Datagrid整體介紹：
Datagrid類似於數據庫的表格，記錄集由行集(items)和列集(columns)組成，行集由多個datagridColumn組成，列集由多個datagriditem組成。
工作原理：1.dataset取得數據，2.指定datagrid的數據源為dataset，3.datagrid綁定數據。在綁定數據的時候，自動加載datagrid列。創建之后，調用兩個事件，ItemCreated和ItemDataBound創建行。
datagrid有兩個對象，datagridColumn（代表一列）和Datagriditem（代表一行）。
每個行集中有ListItemType，有以下幾種類型：Header,Footer,Item,AlernatingItem,SelectedItem,EditItem,Separastor,Pager。
列集有以下幾種類型：BoundColumn,HyperLinkColumn,ButtonColumn,TemplateColumn。
如果Datagrid有子控件，那么Datagrid是通過ItemCommand事件獲取控件的。

DatagridColumn的介紹：
1.綁定列：BoundColumn,文本字段標准顯示，當處於編輯狀態，將顯示為TextBox
2.按鈕列：包括選擇按鈕，刪除按鈕，更新按鈕，編輯按鈕，普通按鈕，每種按鈕都有相對應的事件，有兩種3.按鈕樣式風格，LinkButton和PushButton
3.超鏈接列
4.模板列：TemplateColumn，完全控制哪些控件顯示給用戶，分為多種模板，有HeaderTemplate,ItemTemplate,EditiItemTemplate,FooterTemplate。非模板列均可以轉換為模板列來增加更靈活的功能。
5.編輯命令列
以上列都繼承於DataGridColumn。

實例演示：1.在頁面中拖放一個Datagrid控件
                    2.拖放一個SqlDataAdapter
                    3.生成數據集
                    4.配置Datagrid屬性，配置數據源，數據成員和數據鍵字段（按哪個主鍵綁定），配置列，生成順序是先生成自定義列，再生成自動生成的列
                    5.在Page_Load事件中書寫代碼
                       if (!Page.IsPostBack)
                       {
                          sqlDataAdapter1.Fill(dsCustomers1);
                          DataGrid1.DataBind();
                        }
                    6.添加編輯，更新，取消，刪除操作按鈕，為這些按鈕編寫事件

void bindData()
  {
   sqlDataAdapter1.Fill(dsCustomers1);
   DataGrid1.DataBind();
  }
 private void DataGrid1_EditCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
  {
   DataGrid1.EditItemIndex=e.Item.ItemIndex; //設置當前行為編輯狀態
   bindData();
  }

  private void DataGrid1_UpdateCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
  {
  //首先取得行中的每個字段
   string CustomerID=e.Item.Cells[1].Text;      //非編輯狀態
   string CompanyName=((TextBox)e.Item.Cells[2].Controls[0]).Text;       //編輯狀態
   string ContactName=((TextBox)e.Item.Cells[3].Controls[0]).Text;
   string ContactTitle=((TextBox)e.Item.Cells[4].Controls[0]).Text;
   string Address=((TextBox)e.Item.Cells[5].Controls[0]).Text;
   string City=((TextBox)e.Item.Cells[6].Controls[0]).Text;
   string Region=((TextBox)e.Item.Cells[7].Controls[0]).Text;
   string Country=((TextBox)e.Item.Cells[8].Controls[0]).Text;
   sqlDataAdapter1.Fill(dsCustomers1);    //重新填充數據集
   dsCustomers.CustomersRow dr=dsCustomers1.Customers.FindByCustomerID(CustomerID);  //獲取當前行
    //獲取修改后的值
   dr.CompanyName=CompanyName;
   dr.ContactName=ContactName;
   dr.ContactTitle=ContactTitle;
   dr.Address=Address;
   dr.Region=Region;
   dr.Country=Country; 
   sqlDataAdapter1.Update(dsCustomers1); //更新數據集
   dsCustomers1.AcceptChanges();  //接受更新
   DataGrid1.EditItemIndex=-1;   //修改狀態為非編輯狀態
   bindData();  //重新綁定數據
  }

  private void DataGrid1_DeleteCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
  {
   string CustomerID=e.Item.Cells[1].Text; //獲取此行主鍵
   sqlDataAdapter1.Fill(dsCustomers1);  //重新填充數據集
   dsCustomers.CustomersRow dr=dsCustomers1.Customers.FindByCustomerID(CustomerID);  //獲取當前行
   dr.Delete();  //刪除行
   sqlDataAdapter1.Update(dsCustomers1);  //更新數據集
   dsCustomers1.AcceptChanges();  //接受更新
   bindData();  //重新綁定
  }

  private void DataGrid1_CancelCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
  {
   DataGrid1.EditItemIndex=-1;
   bindData();
  }

使用DataGrid注意事項：
1.需要更大的靈活性時，建議不要使用自動生成列
2.如果使用了自動生成列，並且在Datagrid中指定了列，那么最終得到列的重復設置。系統將首先顯示特別聲明的列，隨后是所有自動生成的列。
3.切忌不可僅使用控件ID來引用Datagrid項目中的控件，須用FindControl來指明。

DataGridItem介紹
注意事項：
對於非模板列：datagriditem.Cells[第幾個單元格].Controls[第幾個控件]下標從0開始。可以轉換成相應的控件：如boundColumn:Label  EditColumn :Textbox  LinkColumn:DataGridLinkButton
當模板列時，Control的index必須都加1，因為Control[0]  LiteralControl="";
建議：當知道控件ID值，建議采用datagriditem.findcontrol["控件名稱"]來獲得

DataGridItem構建行的流程：可以分頁時，itemCreated事件依次創建〔如果有分頁〕Pager（表頭頁），Header（表頭），Item(一行），AlternatingItem(交替行），Footer（腳注），〔如果有分頁〕Pager頁（表尾頁）。如果按下了“編輯”按鈕，則執行當前編輯按鈕所處的行的EditItem,如果按下了選擇按鈕，則執行當前選擇按鈕所處的行的SelectedItem。

 Datagrid綁定事件的觸發流程：
 1.DataBind綁定列，只要執行了DataBind方法，馬上會激發這個方法。
2.ItemCreated創建行 （行容器）,可轉換成DataRowView
3.page.aspx頁中的<%# 表達式%>
4.ItemDataBound綁定行數據，將數據存放於行容器中（數據綁定）,可轉換成DataRowView
5.加入items集合中，count屬性＋1，重復2-5過程
6.數據加載完畢后，PreRender數據呈現。
注意：如果在創建時手工添加自定義控件（不使用模板列），則需要在ItemCreated事件中綁定。

DataGrid綁定事件的常見問題：
1.引用e.Item.DataItem報錯“對象不能為null"
原因：沒有在ItemCreated或ItemDataBound下判斷行類型，（DataRowView)(e.Item.DataItem)只有在item行、AlternatingItem行、SelectedItem、EditItem項下才有值
2.數據訪問完后如何訪問某行數據，可以使用datagriditem來搜索，代碼結構如下：
   foreach (datagriditem dgi in Datagrid1.items){
}
切記不可用dgi.datagriditem來訪問，因為在itembound之后已重新為null

使用ItemCreated注意事項：當加載，修改行屬性或行內的控件屬性時，應該判斷ItemType類型，因為每個單元格均有不同的項類型的呈現方式

數據綁定淺談：ASP.NET數據綁定語法僅在調用DataBind方法時計算，調用的變量必須聲明public類型。
簡單屬性：<%#custID%>,比如在Code behind聲明了一個變量后需要在界面上顯示的情況時使用
集合：<asp:ListBox id="List1" datasource='<%#myArray%>' runat="server"/>
表達式：<%# (customer.FistName+" "+customer.LastName)%>
方法結果 <%#GetBalance(custID)%>

模板列的數據綁定
Container.DataItem容器方法：
DataItem指的是Datagrid某一行，可通過類型轉換成DataRowView,並可以獲取該行中的每個單元，即DatagridItem和Container.DataItem功能相同。
方法一：循環獲取已綁定的datagrid中列名為CustomerID
方法二：在綁定datagrid數據的過程中獲取CustomerID(ItemDataBound事件），DataItem僅適用於DataGrid控件中的數據項，即ListItemType必須是Item,AlternatingItem,SelectedItem或EditItem才能訪問，所以要加判斷。）
方法三：DataBinder.Eval 。<%#DataBinder.Eval（數據項的命名容器，數據字段名，格式字符串）%>，對於Datagrid,DataList,Repeater的命名容器:Container.DataItem。缺點：性能不高。

ItemCommand事件
模板列中的子控件的事件－－“冒泡事件”。子控件調用ItemCommand事件，指定控件的CommandName,從而調用子控件事件代碼。

個性化分頁技巧：默認的只有數字，可以在ItemCreated事件中的ItemType==ListItemType.Pager修改默認的呈現。


實例1：模板列的使用。字段編輯模式時使用DropDownList。步驟：
1.在界面上拖放一個Datagrid控件
2.拖放一個sqlDataAdapter控件，設置sqlConnection，並生成數據集。
3.設置該列為模板列
4.添加Item和EditItem，在Item中綁定Container.DataItem中的某個字段，在EditItem中放置DropDownList,並綁定設置FieldName和FieldValue
5.在DataGrid的ItemDataBound事件中填充需用於綁定DropDownList的數據集並綁定。注意：綁定之前先進行item類型判斷，e.Item.ItemType==ListItemType.EditItem
6.修改UpdataItem事件更新在下拉列表中更新的值，注意事先要設置下拉列表的ID，使用FindControl方法獲得，Control的index必須都加1，因為Control[0]  LiteralControl=""。

實例2：ItemCommand事件的使用。點擊下拉表中的某個值，在頁面上部顯示所選的項。
1.在DropDownList的SelectedValueChanged事件屬性中定義用於處理的子事件的事件名。
2.在后台代碼中定義子事件函數，注意事件屬性應為public，不然前台無法顯示

實例3：測試綁定列的流程
1.在頁面中增加一按鈕
2.添加按鈕點擊事件，顯示添加到字符串的所有生成的行類型
3.在ItemCreated事件中將每個生成行的屬性添加到字符串中。

實例4：插入一行。原理：新行在DataGrid的Footer中顯示
1.在頁面中添加一按鈕
2.添加按鈕事件，執行DataGrid1.ShowFooter=true;
3.在ItemCreater中判斷當類型為Footer時輪循每個單元格，設置需要放置的控件，為控件添加事件處理名和顯示文本
4.在DataGrid的ItemCommand事件中，對應每個CommandName，添加處理方法。比如對於Insert事件，需要添加新記錄，並將ShowFooter屬性設置為false，如果是取消，只需要將ShowFooter屬性設置為false。