ASP.NET開子視窗方法

-
在開發網頁中，常需要做開子視窗勾選東西，按下儲存後，回到父視窗，並把剛儲存的資料顯示出來，這篇就記錄一個方法可以達到這個功能。

前端
用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)
{
//子視窗關掉後對應的動作
} 大致上就是這樣

留言

張貼留言

這個網誌中的熱門文章

Python-相關係數矩陣實作(python-correlation matrix )

-
圖片
相關係數被用來 用於度量兩個變數X和Y之間的相關 程度（線性相依），其值介於-1與1之間。在自然科學領域中，該係數廣泛用於度量兩個變數之間的線性相依程度。 再資料科學中，前處理步驟可先用來觀察參數間的關係，可幫助找到對目標參數影響較大的變數。 下面就用python實作係數矩陣視覺化。 import pandas as pd import matplotlib.pyplot as mp, seaborn #讀資料 xls_file = pd.ExcelFile('A.xlsx') df = xls_file.parse('sheet1') data=df print(df) #視覺化 df_corr = df.corr() seaborn.heatmap(df_corr, center=0, annot=True) mp.show() dataframe長這樣 相關係數矩陣
閱讀完整內容

ASP.NET-後端將值傳給javascript

-
這邊介紹兩個基礎但很常會用到的技巧。 首先要如後將後端的值傳給前端的javascript。 首先在前端(aspx)設一個HiddenField物件 <asp:HiddenField ID="hf_time" runat="server" /> 後端(aspx.cs)給值 hf_time.Value = "TEST"; 前端(aspx)javascript取值         <script type="text/javascript">             function getValue {                 var value = document.getElementById("<%=hf_time.ClientID%>").value;             }         </script> 再來是進階應用，按鈕點擊呼叫jquery的blockUI並且顯示特定值。 上個階段有的東西這邊都要另外再拉一個button的物件。 <asp:Button ID="btn_test" class="genbtn" runat="server" Text="測試" OnClick="btn_test_Click" OnClientClick="markpage1();" /> 可以看到在按下按鈕時前端會去呼叫markpage1()這個function，接下來就是在javascript寫這個function。         <script type="text/javascript" src="../js/jquery.blockUI.js"></script>         <script type="text/javascript"> ...
閱讀完整內容

ASP.NET-FileUpload上傳後自動觸發button click(FileUpload upload auto trigger button click)

-
在ASP.NET中FileUpload很常都需要配一個button，上傳檔案一個動作，上傳後還需點擊按鈕才能觸發後續的儲存等等功能。 這邊要實作上傳檔案後自動觸發後續功能，不用再多一步點擊按鈕。 前端: 當fileUpload的值不為空自動找到button做click動作     <script type="text/javascript">     function UploadFile(fileUpload) {         if (fileUpload.value != '') {             document.getElementById("<%=btn_upload.ClientID %>").click();         }     }     </script> 新增FileUpload跟button並把button隱藏 <asp:FileUpload ID="FileUpload1" runat="server" /> <asp:Button ID="btn_upload" runat="server" OnClick="btn_upload_Click" Style="display: none" /> 後端: using System.IO; //新增屬性當onchange時觸發javascript function protected void Page_Load(object sender, EventArgs e) {       FileUpload1.Attributes["onchange"] = "UploadFile(this)";        } //完成自動觸發button click protected void btn_upload_Click(object sender, EventArgs e)...
閱讀完整內容