忙裡偷閒的部落格

延續 以jQuey DOMWindow plugin實現子頁面資料回傳父頁面心得筆記 一文，如果利用AjaxToolKit中的ModalPopupExtender要實現同樣的功能，實作起來更為簡單。
1.在Visual Studio中布置以下的控制項:

2.GridView1中的OrderID欄位改為LinkButton 

<asp:LinkButton ID="LinkButton1" runat="server" Text='<%# Eval("OrderID") %>'></asp:LinkButton>

3.在LinkButton1上加入ModalPopupExtender擴充項

  

4.增加遮罩的樣式

<style type="text/css">
    .modalBackground{
        background-color:#CCCCFF;
        filter:alpha(opacity=40);
        opacity:0.5;
    }
</style>

5.增加ModalPopupExtender兩個屬性 :

PopupControlID="Panel1" BackgroundCssClass="modalBackground"

6.當點選GridView的OrderID時，為了能將OrderID的值帶給ForwView1的OrderID欄位，加入以下JQuery程式碼:

<script src="jquery-1.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_pageLoaded(BindEvents);
    function BindEvents() {
        $('a[id*="LinkButton1"]').click(function() {
            $('input[id*="OrderIDTextBox"]').val($(this).text());
        })
    }
});
</script>

7.當使用者點選插入新增資料後，為了能讓GridView1上的OrderQty同步更新，在FormView1_ItemInserted的event上增加以下程式碼:

protected void FormView1_ItemInserted(object sender, FormViewInsertedEventArgs e){
    GridView1.DataSourceID = "SqlDataSource1";
    GridView1.DataBind();
}

8.最後一步，把Panel1的style屬性設為display:none，大功告成!