ASP.NET使用div runat=server取代showModalDialog

最新推荐文章于 2018-07-19 16:36:45 发布

zhxwen1

最新推荐文章于 2018-07-19 16:36:45 发布

阅读量1.2k

点赞数 1

文章标签： server div asp.net textbox button asp

以往小喵寫ASP的時候，由於都是HTML與JavaScript的配合，有時候會需要開啟一個視窗，然後取得Server端的資料，再帶入畫面中，例如：瀏覽→下拉選取使用者→傳回

這個時候，開新視窗的方式可以用window.open或者window.showModalDialog，其中showModalDialog可以避免使用者點選到別的畫面造成新視窗沉到下面，感覺還蠻好用的。

隨著時光飛逝，目前用ASP.NET開發，而使用者的IE也漸漸的改成IE7，這時候發現showModalDialog有以下幾個問題點

因為ASP.NET都是用Server端控制項與程式配合PostBack。這時要處理像以往的動作就沒麼好用了
IE7中的showModalDialog運作submit的時候會出現問題

我們舉個例子來看，我安排兩個aspx分別為t1.aspx,t2.aspx

要用t1.aspx按了個按鈕，使用showModalDialog開啟t2.aspx
t2.aspx中透過Server端的按鈕取得時間放入TextBox1裡面，然後透過第二顆按鈕把資料傳回t1.aspx
t1.aspx接收到資料後，透過Client端的Script寫到Table裡面的某個td裡面

t1.aspx內容

<%@ Page Language="VB" AutoEventWireup="false" codefile="t1.aspx.vb" Inherits="t1" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>未命名頁面</title> <mce:script language="javascript" type="text/javascript"></mce:script> </head> <body> <form id="form1" runat="server"> <table> <tr> <td>資料回填這裡</td> </tr> <tr> <td id="td1"></td> </tr> </table> <div id="div1"> <input id="btnNewWin" type="button" value="開啟showModalDialog等待資料傳回" οnclick="return btnNewWin_onclick()" /> </div> </form> </body> </html>

t2.aspx內容

<%@ Page Language="VB" AutoEventWireup="false" codefile="t2.aspx.vb" Inherits="t2" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>未命名頁面</title> <mce:script language="javascript" type="text/javascript"></mce:script> </head> <body> <base target="_self" /> <form id="form1" runat="server"> <div> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /> <asp:Button ID="btnS1" runat="server" Text="Server端取得資料" />  <input id="btnC2" type="button" value="Client端傳回，關閉視窗" οnclick="rtnValue('TextBox1');" /> </div> </form> </body> </html>

t2.aspx.vb內容

Partial Class t2 Inherits System.Web.UI.Page Protected Sub btnS1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnS1.Click Me.TextBox1.Text = Now.ToString End Sub End Class

其中t2.aspx裡面設定了<base target="_self">是為了解決Server控制項會造成開啟視窗，
因為Server控制項的按鈕，編譯之後一律都是submit，而這會讓他又開啟另外一個新視窗
不過如果您使用的是IE7的話，您會發現在IE7的時候，無論是否有<base target="_self">都會開啟新視窗，當然這個問題也不是不能解決(有個大絕招，請看備註1)

這樣的過程還蠻麻煩的，因此小喵建議可以用div加上runat=server的方式來替代，以下舉個例子

tdiv1.aspx內容如下

<%@ Page Language="VB" AutoEventWireup="false" codefile="tdiv1.aspx.vb" Inherits="tdiv1" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>未命名頁面</title> </head> <body> <form id="form1" runat="server"> <table> <tr> <td> 資料回填這裡</td> </tr> <tr> <td id="td1"> <asp:Label ID="Label1" runat="server" Text=""></asp:Label> </td> </tr> </table> <div id="div1"> <asp:Button ID="btn1" runat="server" Text="開啟div處理" /> </div> <div id="divS1" runat="server" style="left: 182px; width: 247px; position: absolute; top: 89px; height: 108px; background-color: #99ccff" visible="false" > <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /> <asp:Button ID="btnGetData" runat="server" Text="取得資料" /> <asp:Button ID="btnRtnCls" runat="server" Text="傳回，關閉div" /></div> </form> </body> </html>

其中的<div id=divS1 runat="server">透過style的設定把它設定為絕對位置，並且預設visiable="false"

接著看tdiv1.aspx.vb的內容

Partial Class tdiv1 Inherits System.Web.UI.Page Protected Sub btnGetData_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnGetData.Click Me.TextBox1.Text = Now.ToString End Sub Protected Sub btnRtnCls_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnRtnCls.Click Me.Label1.Text = Me.TextBox1.Text Me.divS1.Visible = False End Sub Protected Sub btn1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btn1.Click Me.divS1.Visible = True End Sub End Class

透過divS1的visiable設定來模擬showModalDialog的開啟與關閉，而且所有動作都是Server端的，程式簡潔易懂

如果本來的動作有很多畫面都會用到的話，那麼還可以搭配WebUserControl來達到程式共用的目的
也可以避免showModalDialog控制不易以及IE7的問題。

提供大家參考

備註1.在IE7中解決Submit會開啟新視窗的方式，就是使用切frame的網頁，例如，本來開啟的是t2.aspx，現在改為t2m.html裡面切frame一個是本來的t2.aspx另外一個隱藏起來t2p.html