[小技術應用]框架下動態調用用戶控件的模態彈出窗體
主要原理：是通過js的方法showModalDialog來實現的，2個窗體頁面之間使用的是Session傳遞，在主窗體頁面上放置一個隱藏的按鈕。
<asp:LinkButton ID="LinkButton1" runat="server" style="display:none">刷新</asp:LinkButton>
在后臺CS文件調用方法打開模式窗體，所以寫一個簡單的類，如下：
public class ModalPage
{
private static string ModalWindow(string openAspxPage, int width, int height)
{
string js = string.Format("javascript:window.showModalDialog(\"{0}\",window,\"status:false;dialogWidth:{1}px;dialogHeight:{2}px\");javascript:__doPostBack('LinkButton1','');", openAspxPage, width, height);//window.location.href=window.location.href
return js;
}
private static void RegisterJavaScript(Page p, string js)
{
p.RegisterStartupScript("", "<script>" + js + "</script>");
}
private static void RegisterJavaScript(UpdatePanel up, string js, bool b)
{
ScriptManager.RegisterStartupScript(up, up.GetType(), "", js, true);
}
/// <summary>
/// 顯示模態窗體
/// </summary>
/// <param name="page">包含的模態頁面</param>
/// <param name="width"></param>
/// <param name="height"></param>
/// <param name="p">主窗體</param>
public static void ShowDialog(string page, int width, int height, Page p)
{
string js = ModalWindow(page, width, height);
RegisterJavaScript(p, js);
}
public static void ShowDialog(string page, int width, int height, UpdatePanel up)
{
string js = ModalWindow(page, width, height);
RegisterJavaScript(up, js, true);
}
}
{
private static string ModalWindow(string openAspxPage, int width, int height)
{
string js = string.Format("javascript:window.showModalDialog(\"{0}\",window,\"status:false;dialogWidth:{1}px;dialogHeight:{2}px\");javascript:__doPostBack('LinkButton1','');", openAspxPage, width, height);//window.location.href=window.location.href
return js;
}
private static void RegisterJavaScript(Page p, string js)
{
p.RegisterStartupScript("", "<script>" + js + "</script>");
}
private static void RegisterJavaScript(UpdatePanel up, string js, bool b)
{
ScriptManager.RegisterStartupScript(up, up.GetType(), "", js, true);
}
/// <summary>
/// 顯示模態窗體
/// </summary>
/// <param name="page">包含的模態頁面</param>
/// <param name="width"></param>
/// <param name="height"></param>
/// <param name="p">主窗體</param>
public static void ShowDialog(string page, int width, int height, Page p)
{
string js = ModalWindow(page, width, height);
RegisterJavaScript(p, js);
}
public static void ShowDialog(string page, int width, int height, UpdatePanel up)
{
string js = ModalWindow(page, width, height);
RegisterJavaScript(up, js, true);
}
}
在模式窗體頁面做一些你想要的操作，比如：輸入一些值，通過session傳遞對象，例如：
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class frame_modal : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Title =Server.UrlDecode( Request.QueryString["t"].ToString());
Label1.Text = Server.UrlDecode(Request.QueryString["s"].ToString());
string s = Request.QueryString["c"].ToString();
UserControl user = (UserControl)LoadControl("../UserControls/" + s);
Page.Controls.Add(user);
}
}
protected void Button1_Click(object sender, EventArgs e)
{
Save s = new Save();
s.Value1 = TextBox1.Text;
s.Value2 = TextBox2.Text;
Session["s"] = (object)s;
Response.Write("<script>window.opener=null;window.close();</script>");
}
}
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class frame_modal : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Title =Server.UrlDecode( Request.QueryString["t"].ToString());
Label1.Text = Server.UrlDecode(Request.QueryString["s"].ToString());
string s = Request.QueryString["c"].ToString();
UserControl user = (UserControl)LoadControl("../UserControls/" + s);
Page.Controls.Add(user);
}
}
protected void Button1_Click(object sender, EventArgs e)
{
Save s = new Save();
s.Value1 = TextBox1.Text;
s.Value2 = TextBox2.Text;
Session["s"] = (object)s;
Response.Write("<script>window.opener=null;window.close();</script>");
}
}
然后是在主窗體頁面，因為是通過javascript:__doPostBack('LinkButton1','');這句實現的刷新方法，所以在主窗體load事件中處理傳遞來的值，如下：
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class frame_main : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
}
else
{
if (Session["s"] != null)
{
Save s = (Save)Session["s"];
TextBox2.Text = s.Value1;
TextBox3.Text = s.Value2;
}
}
}
protected void Button1_Click(object sender, EventArgs e)
{
string i1 = Server.UrlEncode("這是窗體傳遞的字符串");
string i2 = Server.UrlEncode("標題:" + drp.Items[drp.SelectedIndex].Text);
string s = string.Format("modal.aspx?t={0}&s={1}&c={2}",i2 , i1, drp.SelectedValue);
//ModalPage.ShowDialog(s, 600, 400, this);
ModalPage.ShowDialog(s, 600, 400, UpdatePanel1);
}
}
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class frame_main : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
}
else
{
if (Session["s"] != null)
{
Save s = (Save)Session["s"];
TextBox2.Text = s.Value1;
TextBox3.Text = s.Value2;
}
}
}
protected void Button1_Click(object sender, EventArgs e)
{
string i1 = Server.UrlEncode("這是窗體傳遞的字符串");
string i2 = Server.UrlEncode("標題:" + drp.Items[drp.SelectedIndex].Text);
string s = string.Format("modal.aspx?t={0}&s={1}&c={2}",i2 , i1, drp.SelectedValue);
//ModalPage.ShowDialog(s, 600, 400, this);
ModalPage.ShowDialog(s, 600, 400, UpdatePanel1);
}
}
最后就是對象的代碼：
/// <summary>
/// Save 保存值傳遞的對象
/// </summary>
public class Save
{
private string _value1;
private string _value2;
public string Value1
{
get { return _value1; }
set { _value1 = value; }
}
public string Value2
{
get { return _value2; }
set { _value2 = value; }
}
public Save()
{
}
}
/// Save 保存值傳遞的對象
/// </summary>
public class Save
{
private string _value1;
private string _value2;
public string Value1
{
get { return _value1; }
set { _value1 = value; }
}
public string Value2
{
get { return _value2; }
set { _value2 = value; }
}
public Save()
{
}
}
不過實驗過程中，遇到了一個問題：如果把LinkButton1放到UpdatePanel1里的區域內，就無法達到刷新的效果了，再網上也沒找到相應的解決方法，下面是主窗體前臺代碼，希望高手能出手幫忙解決下，我想實現關閉模式窗體后讓UpdatePanel1里的區域內局部刷新，好像UpdatePanel1阻止了自己寫的JS代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="main.aspx.cs" Inherits="frame_main" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
選擇要打開的用戶控件
<asp:DropDownList ID="drp" runat="server" Width="120px">
<asp:ListItem Value="a.ascx">測試控件a</asp:ListItem>
<asp:ListItem Value="b.ascx">測試控件b</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="打 開" Width="80px" ToolTip="服務器Button控件" OnClick="Button1_Click" />
<asp:TextBox ID="TextBox1" runat="server" Text="原來的數據"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
<div>
<asp:LinkButton ID="LinkButton1" runat="server" style="display:none">刷新</asp:LinkButton>
</div>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
選擇要打開的用戶控件
<asp:DropDownList ID="drp" runat="server" Width="120px">
<asp:ListItem Value="a.ascx">測試控件a</asp:ListItem>
<asp:ListItem Value="b.ascx">測試控件b</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="打 開" Width="80px" ToolTip="服務器Button控件" OnClick="Button1_Click" />
<asp:TextBox ID="TextBox1" runat="server" Text="原來的數據"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
<div>
<asp:LinkButton ID="LinkButton1" runat="server" style="display:none">刷新</asp:LinkButton>
</div>
</form>
</body>
</html>
源碼地址：右鍵另存為
浙公網安備 33010602011771號