1.為button控件添加確認(rèn)功能
要想為服務(wù)器控件添加客戶端的事件,需要用到Attributes屬性。Attributes屬性是所有的服務(wù)器控件都有的一個(gè)屬性,它用來(lái)為最終生成的HTML添加自定義的一些標(biāo)記。假設(shè)Web Form上有一個(gè)保存按鈕btnSave,希望在用戶點(diǎn)此按鈕時(shí)提示用戶是否確實(shí)要保存(比如一旦保存就無(wú)法恢復(fù)等),則應(yīng)在Page_Load事件中添加如下代碼:
btnSave.Attributes.Add(“onclick”,“Javascript:return confirm(‘Are you sure to save?’);”)
要注意的是‘return’,這是不可省的,否則即使用戶點(diǎn)了取消,數(shù)據(jù)仍然會(huì)保存。
2.為Datagrid中的每一行添加Javascript事件
Datagrid中的子控件是沒(méi)辦法直接訪問(wèn)的,要實(shí)現(xiàn)上面的那種效果,我們需要用到Datagrid的OnItemDataBound事件。OnItemDataBound事件發(fā)生在Datagrid的每一行數(shù)據(jù)綁定到Datagrid之后(即一行激發(fā)一次)。首先在Datagrid的聲明中添加OnItemDataBound屬性,如下:
此處說(shuō)明OnItemDataBound事件發(fā)生時(shí)調(diào)用ItemDataBound方法,在代碼后置文件中添加此方法的定義:
private void OnItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
?? {
?????? ?if(e.Item.ItemType != ListItemType.Header && e.Item.ItemType != ListItemType.Footer )
?????? ?{
??????????? LinkButton btnSave = (LinkButton)e.Item.Cells[2].Controls[0];
??? string strClientID = btnSave.ClientID; //得到該控件的客戶端ID,可供JavaScript調(diào)用
??????????? btnSave.Attributes.Add("onclick","Javascript:return confirm('Are you sure to save?');");
??????? }
}
由于Datagrid的標(biāo)題行和腳注行也會(huì)激發(fā)此事件,所以首先判斷激發(fā)此事件的行不是標(biāo)題行和腳注行。這里假設(shè)btnSave按鈕位于Datagrid的第3列(第一列是0)。
3.在Javascript中觸發(fā)服務(wù)器端控件事件
讓我們?cè)賮?lái)考慮第一個(gè)實(shí)例,我們?yōu)楸4姘粹o增加了確認(rèn)功能,只有在用戶確認(rèn)后才會(huì)執(zhí)行保存操作,用戶不確認(rèn)的話就不執(zhí)行,如果我們想要用戶按下“取消”時(shí),執(zhí)行另外的操作怎么辦呢?這就要需要用JS來(lái)回調(diào)(PostBack)服務(wù)器端控件完成操作。
當(dāng)前頁(yè)面中有一個(gè)DropDownList控件ddlTest,Button按鈕btnSave.當(dāng)選擇ddlTest時(shí)觸發(fā)onchange事件,保存當(dāng)前的選擇值,在保存前會(huì)讓操作者先確認(rèn),用戶確認(rèn)則保存,否則轉(zhuǎn)向default.aspx頁(yè)。
在Page_Load事件中添加如下代碼:
??? string strCMD = Page.GetPostBackClientHyperlink( btnSave, "" );
??? string script = @"Javascript:ConfirmUpdate(""EVAL_MESSAGE"");";
??? script = script.Replace( "EVAL_MESSAGE" , strCMD );
??? ddlTest.Attributes.Add("onchange",script);
這段代碼執(zhí)行后生成的select控件將是這樣:
〈select name="ddlTest" id="ddlTest" onchange="Javascript:ConfirmUpdate("javascript:__doPostBack('btnSave','')");" 〉
ConfirmUpdate函數(shù)如下
〈SCRIPT language=javascript〉
??? function ConfirmUpdate(cmd){
??? if(confirm("Are you sure to update?"))
?? {
?????? eval(cmd);
??? }
??? else
?? ?{
??????? window.location.href="default.aspx"
??? }
?? }
?〈/SCRIPT〉
這里利用了Javascript eval函數(shù)來(lái)調(diào)用一個(gè)字符串中包含的命令。需注意的是包含命令的字符串不能用單引號(hào)括起來(lái),因?yàn)樽詣?dòng)生成的腳本中包括單引號(hào),所以這里用兩個(gè)雙引號(hào)表示字符串本身的雙引號(hào)。
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=586711