ASP.NET開子視窗方法
在開發網頁中，常需要做開子視窗勾選東西，按下儲存後，回到父視窗，並把剛儲存的資料顯示出來，這篇就記錄一個方法可以達到這個功能。
前端
用JS開窗，有用到jquery.colorbox.js要先把它吃進來，接著寫一個叫openwindow的function，他去開你要開的頁面並且設定一些寬高等屬性，其中在網址後面+pk是看你有沒有要在網址後藏東西，這樣子視窗可以做一些對應的動作(例如藏主鍵值，在子視窗你就可以知道你編輯的資料是哪筆)，最後在關窗的地方寫一個function去做等等postback的動作。
</script> 記得拉一個LinkButton ID取剛剛postback要叫的ID，在寫一個OnClick事件，這樣子視窗關窗後就會回父頁面找到這LinkButton並且執行他的OnClick事件，因此你想再回傳後做的動作就寫在OnClick事件裡面。
後端
接著講要怎麼從後端呼叫剛剛那段JS code，假設我們是點擊一個button做開窗的，靠這兩行就可以呼叫前面的code了，其中openwindow這邊假設你沒有要藏東西給子視窗就傳個空值，若有就像我下面的寫法給他主鍵值，另外要怎麼去抓某欄位的主鍵值可以參考我上一篇Gridview刪除欄位作法
前端
用JS開窗，有用到jquery.colorbox.js要先把它吃進來，接著寫一個叫openwindow的function，他去開你要開的頁面並且設定一些寬高等屬性，其中在網址後面+pk是看你有沒有要在網址後藏東西，這樣子視窗可以做一些對應的動作(例如藏主鍵值，在子視窗你就可以知道你編輯的資料是哪筆)，最後在關窗的地方寫一個function去做等等postback的動作。
<script type="text/javascript">
function openwindow(pk) {
$.colorbox({ href: '要開的網頁.aspx?pk=' + pk, title: "我要開子視窗", iframe: true, width: "650px", height: "300px", scrolling: false, transition: "elastic", opacity: "0.5", onClosed: function () { __doPostBack("lbtn_postback", ""); }, overlayClose: false });
}
</script> 記得拉一個LinkButton ID取剛剛postback要叫的ID，在寫一個OnClick事件，這樣子視窗關窗後就會回父頁面找到這LinkButton並且執行他的OnClick事件，因此你想再回傳後做的動作就寫在OnClick事件裡面。
<asp:LinkButton ID="lbtn_postback" runat="server" OnClick="postback_Click"></asp:LinkButton>
後端
接著講要怎麼從後端呼叫剛剛那段JS code，假設我們是點擊一個button做開窗的，靠這兩行就可以呼叫前面的code了，其中openwindow這邊假設你沒有要藏東西給子視窗就傳個空值，若有就像我下面的寫法給他主鍵值，另外要怎麼去抓某欄位的主鍵值可以參考我上一篇Gridview刪除欄位作法
protected void Button_Click(object sender, EventArgs e)
{
string script = "openwindow('" + pk.Value + "');";
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "送出", script, false);
}
最後子視窗關掉後回傳的動作就寫在
protected void postback_Click(object sender, EventArgs e)
{
//子視窗關掉後對應的動作
}
大致上就是這樣
留言
張貼留言