ASP.NET使用div runat=server取代showModalDialog
以往小喵寫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內容
<head runat="server">
<title>未命名頁面</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
function btnNewWin_onclick() {
var strURL = 't2.aspx';
var rc = window.showModalDialog(strURL);
if(rc!='undefined')
window.document.getElementById('td1').innerText=rc;
window.alert('test1');
}
// ]]>
</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等待資料傳回" onclick="return btnNewWin_onclick()" />
</div>
</form>
</body>
</html>t2.aspx內容
<head runat="server">
<title>未命名頁面</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
function rtnValue(itmId){
var t1=window.document.getElementById(itmId);
if(t1!=null)
window.returnValue=t1.value;
window.close();
return false;
}
// ]]>
</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端取得資料" />
<!--<asp:Button ID="btnC1" runat="server" Text="Client端傳回，關閉視窗" />-->
<input id="btnC2" type="button" value="Client端傳回，關閉視窗" onclick="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內容如下
<head 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會開啟新視窗的方式，就是
1.使用切frame的網頁，例如，本來開啟的是t2.aspx，現在改為t2m.html裡面切frame一個是本來的t2.aspx另外一個隱藏起來t2p.html
2.一樣設定<base target="_self">,但是放的位置一定要放在<Head></Head>之間
以下是簽名：
- 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
| Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |