javascript showmodaldialog-优快云博客

本文介绍了一个使用ASP.NET实现模态窗口的应用案例，包括前后端代码示例。通过按钮触发，可以打开一个带有城市和国家标签的模态窗口，并能够通过交互完成数据提交。

1)主页

a)主页后台(default.aspx.cs)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ModalDialog
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
        protected void btnAdd_Click(object sender, EventArgs e)
        {
            string city = txtCity.Text;
            string country = txtCountry.Text;
            Page.ClientScript.RegisterStartupScript(this.GetType(), "to_add_page", "ToAddPage('" + country + "','" + city + "');", true);
        }
    }
}

b)主页前台(default.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ModalDialog.Default" %>
<!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>
    <script language="javascript" type="text/javascript">
        function ToAddPage(country,city) {
            var windstyle = "dialogWidth=530px; dialogHeight=530px;center=YES;scroll=OFF;status=NO;edge=raised;titlebar:no;";
            var myCountry = escape(country);
            var myCity = escape(city);
            var url = 'modal.aspx?time=<% = DateTime.Now.ToString("yyyyMMddhhmmss") %>&myCountry=' + myCountry + '&myCity=' + myCity;
            //window.location.href = url;
            //唤出模态窗体并用Request方式传参数
            var returnValue = window.showModalDialog(url, null, windstyle);
            if (returnValue == "ok") {
                window.location.href = window.location.href;
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtCountry" runat="server"></asp:TextBox>
        <asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
        <asp:Button ID="btnAdd" runat="server" Text="add" onclick="btnAdd_Click" />
    </div>
    </form>
</body>
</html>

2)模态页

a)模态页前台(modal.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="modal.aspx.cs" Inherits="ModalDialog.modal" %>
<!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>
    <script language="javascript" type="text/javascript">
        function addSuccess() {
            alert("add success");
            closeForm();
        }
        function closeForm() {
            returnValue = "ok";
            window.opener = null;
            window.open("", "_self");
            window.close();
        }
    </script>
    <base target="_self" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="lblCountry" runat="server"></asp:Label>
        <asp:Label ID="lblCity" runat="server"></asp:Label><br />
        <asp:Button ID="btnAdd" runat="server" Text="add" onclick="btnAdd_Click" />
        <asp:Button ID="btnCancel" runat="server" Text="cancel" OnClientClick="closeForm();" />
    </div>
    </form>
</body>
</html>

b)模态页后台

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ModalDialog
{
    public partial class modal : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if(Request.QueryString["myCountry"]!=null)
            {
                lblCountry.Text = Request.QueryString["myCountry"].ToString();
            }
            if(Request.QueryString["myCity"]!=null)
            {
                lblCity.Text = Request.QueryString["myCity"].ToString();
            }
        }
        protected void btnAdd_Click(object sender, EventArgs e)
        {
            Page.ClientScript.RegisterStartupScript(this.GetType(), "add_success", "addSuccess();", true);
        }
    }
}