DOMWindow是個類似Facebook的相片播放插件，產生半透明的黑色背景，讓使用者的注意力focus在前端相片上。
而試想如果把它應用在Master(GridView)-Detail(FormView)上要怎麼作呢?以下是示意圖:
折騰了幾天的時間，終於作出來了，分享給看倌們。
一、建立parent.aspx、child.aspx兩個頁面
二、在parent.aspx中拉一GridView並且用UpdatePanel包著，如下圖:
三、OrderID打成樣板(ItemTemplate)，並在樣板中把Label控制項改為HyperLink，如以下:
<asp:HyperLink ID="HyperLink1" runat="server" CssClass="openDOMWindow" NavigateUrl='<%# Eval("OrderID", "child.aspx?id={0}") %>' Text='<%# Eval("OrderID") %>'></asp:HyperLink>
四、在原始碼中，加入以下程式:
<script src="jquery-1.6.min.js" type="text/javascript"></script>
<script src="jquery.DOMWindow.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(BindEvents);
function BindEvents() {
$('.openDOMWindow').openDOMWindow({
windowSource: 'iframe',
eventType: 'click',
width: 260,
height: 200,
borderSize: 1,
windowPadding: 0
})
}
})
</script>
其中何以添加var prm = Sys.WebForms.PageRequestManager.getInstance();.......在小弟的另一篇PO文有解釋，請見 解決JQuery ajax與UpdatePanel的衝突問題 一文，這裡不在贅述。這裡的重點是BindEvents function中對DOMWindow plugin的應用。如上所述，要引用DOMWindow的話，只需要以jQuery選擇器呼叫openDOMWindow function，並賦予自訂的屬性值，就能使用了。詳細的屬性值可以詳見DOMWindow官網，但值得一提的是windowSource屬性。它允許我們指定跳出來的子頁面是以何種方式呼叫，有ajax、iframe、inline三種方式。如果選用ajax的話，當你的子頁面有用到submit回後端的button時，背景遮罩效果會失效，會變成連結到子頁面的畫面。但如果像這次的例子中，我要在子頁面中作新增資料的動作，資料得送回後端，使用$.ajax()以非同步方式送回後端是一種方法，另一種就是把windowSource設為iframe，子頁面將會以iframe tag方式，內嵌在父頁面中，所以即使submit回後端，背景遮罩效果仍在。至於inline方式，還沒研究過，知道的看倌們也可以告知小弟一下，thx!
五、布置child.aspx，如下圖所示，並在FormView產生時，預先帶入OrderID，可以在FormView1_DataBound加入以下程式:
protected void FormView1_DataBound(object sender, EventArgs e)
{
TextBox txtbox = FormView1.FindControl("OrderIDTextBox") as TextBox;
txtbox.Text = Request.QueryString["id"].ToString();
}
六、當使用者點選插入後，我們可以將呼叫父頁面do something的動作寫在子頁面中，因為子頁面是以iframe內嵌在父頁面，所以用jQuery語法找父頁面的控制項，再呼叫控制項去作資料重整的動作，就能實現我們要的效果了。所以可以在父頁面的UpdatePanel中，埋一個隱藏按鈕，觸發它讓GridView重新綁定一次DataSource，製造資料同步更新的效果:
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" value="Button1" style="display:none"/>
Button1_Click後端程式碼:
protected void Button1_Click(object sender, EventArgs e)
{
GridView1.DataSourceID = "SqlDataSource1";
GridView1.DataBind();
}
而在child.aspx中，我們布置以下程式碼來尋找parent.aspx的隱藏按鈕Button1:
<script src="jquery-1.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
//因為DOMWindow預設是當點擊遮罩範圍時，即取消遮罩效果回到父頁面，故可在點擊時，去找父頁面的Button1並驅動它的click event。
var DOMWindowOverlay = parent.document.getElementById("DOMWindowOverlay"); //找遮罩效果的元素
jobj = $(DOMWindowOverlay); //轉成jQuery物件
jobj.click(function() {
var Button1 = $('#Button1', window.parent.document); //以window.parent.document找父頁面的Button1
Button1.click(); //驅動Button1執行click事件
})
</script>
所以當點擊背景遮罩範圍時，遮罩效果消失，畫面回到父頁面，並且Button1執行後端程式重新綁定資料來源，就能造成資料同步異動的效果了。原始碼下載 : http://ifile.it/1g4ra8j/slnGridViewToDOMWindow.rar
留言列表
前端網頁相關技術 (5)
