一、問題重現
gridview控件一模板列中有一個”編輯“的linkbutton按鈕,我要求點擊這個按鈕的時候彈出一個div模態層。並且在層裏面顯示出gridview當前選中行的主鍵。(注:我用的是ajax自帶的ModalPopupExtender控件來彈出模態層)
問題1:如何在linkbutton中取gridview主鍵?
問題2:ModalPopupExtender對應的TargetControlID是linkbutton控件,這樣的話linbutton的後臺事件會被屏蔽掉
二、知識點掃盲
1.ModalPopupExtender常用屬性
TargetControlID:用於觸發彈出面板的控件。
OkControlID:彈出面板中的確認按鈕,用於確認新的樣式。
OnOkScript:當單擊確認按鈕後,關閉樣式面板後,執行腳本。
CancelControlID:樣式面板中的取消按鈕,用於取消應用樣式。
PopupDragHandleControlID:樣式面板中用於觸發面板的控件。
DropShadow:樣式面板是否有陰影。值爲True,則有陰影;值爲False,則沒有陰影。
BackgroundCssClass:樣式面板中應用的css樣式。
2.要爲ModalPopupExtender添加半透明陰影,需要定義一個CSS類,並指派到BackgroundCssClass屬性上。最重要的是這個樣式:filter: alpha(opacity=60);
3.如果我們需要用JavaScript控制彈出層的 show/hide ,使用以下代碼即可:
$find('Panel1').show()
前提是,PopupControlID和BehaviorID都要是Panel1
三、ModalPopupExtender客戶端使用方式
A.直接設置OKControlID的方式
ModalPopupExtender控件在使用時必須要設置TargetControlID和PopupControlID這兩個屬性,我的理解是,對於ExtenderControl而言TargetControlID屬性必須指定,否則就不知道在哪個DOM元素上附加客戶端行爲了。PopupControlID表示要彈出的仿模式窗口的DOM元素,常見的是Panel控件,這個如果不指定,也沒有意義。有時,在執行上下文中可能要在確認這個模式窗口時,執行一些腳本,則可以設置OnOKScript屬性,指明確認時要執行的腳本函數。
B.獲取一個ModalPopupBehavior實例的方式。
如果頁面上放置了ModalPopupExtender控件則可以用$find方法得到一個ModalPopupBehavior實例,這樣就可以調用ModalPopupBehavior實例的任何方法了,如hide、show等,此時客戶端的行爲可以完全自己控制了。這種情況下ModalPopupExtender控件必須要設置BehaviorID屬性,否則無法用$find方法來獲取ModalPopupBehavior實例。
四、ModalPopupExtender服務器端使用方式
直接調用ModalPopupExtender控件的Show()方法和Hide()方法來控制模式窗口的現實與隱藏
在服務器端調用ModalPopupExtender控件的Show()方法或Hide()方法有個缺點,就是會引起回發,用戶體驗不好。我們可以將彈出的模式窗口(一個panel控件)放到一個UpdatePanel控件中,並將觸發按鈕註冊爲異步回發按鈕來改善用戶體驗。
五、解決方案
1、問題1的解決方案比較簡單,爲linkbutton添加屬性CommandArgument='<%# Bind("主鍵") %>',綁定主鍵。在後臺的onclick事件中取值:((LinkButton)sender).CommandArgument
2、問題2如果採用客戶端使用方式的解決方案
給ModalPopupBehavior添加相應方法,來訂閱、取消相應事件,及觸發事件的方法。(沒有測試過,不知道可行否)
3、問題2如果採用服務器端使用方式的解決方案(經過測試,可行)
不直接通過linkbutton來觸發ModalPopupExtender,通過隱藏按鈕來觸發
首先在頁面上放置一個隱藏的button按鈕,設置ModalPopupExtender的TargetControlID爲隱藏按鈕
在linkbutton的後臺事件中加載客戶端腳本showDiv()
在showDiv的腳本中獲取觸發button按鈕的onclick:var btnHid=document.getElementById("btnHid");btnHid.click();return false;
注:回頭看看其實還是挺簡單的,不過ModalPopupExtender這個控件真的好好用哦~