ModalPopupExtender屏蔽後臺事件的解決方案

一、問題重現

      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').hide()
     $find('Panel1').show()

 

      前提是,PopupControlID和BehaviorID都要是Panel1

 

三、ModalPopupExtender客戶端使用方式   

A.直接設置OKControlID的方式

ModalPopupExtender控件在使用時必須要設置TargetControlIDPopupControlID這兩個屬性,我的理解是,對於ExtenderControl而言TargetControlID屬性必須指定,否則就不知道在哪個DOM元素上附加客戶端行爲了。PopupControlID表示要彈出的仿模式窗口的DOM元素,常見的是Panel控件,這個如果不指定,也沒有意義。有時,在執行上下文中可能要在確認這個模式窗口時,執行一些腳本,則可以設置OnOKScript屬性,指明確認時要執行的腳本函數。

B.獲取一個ModalPopupBehavior實例的方式。

如果頁面上放置了ModalPopupExtender控件則可以用$find方法得到一個ModalPopupBehavior實例,這樣就可以調用ModalPopupBehavior實例的任何方法了,如hideshow等,此時客戶端的行爲可以完全自己控制了。這種情況下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這個控件真的好好用哦~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章