AJAX ModalPopupExtender实现弹出窗体效果 结合UpdatePanel实现完全无刷新

来源:互联网 发布:网络监控设备报价 编辑:程序博客网 时间:2024/05/16 05:59

 前台代码

 

<%@ Page Language="C#" AutoEventWireup="true" Codebehind="WebForm6.aspx.cs" Inherits="RepairSystem.WebForm6" %>

<!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>
    
<style type="text/css">
      .watermarked 
{
  background-color
:#f0f7fd;
 filter
:alpha(opacity=60);
 opacity
:0.7;
}

</style>
</head>
<body>
    
<form id="form1" runat="server">
        
<div>
            
<asp:ScriptManager ID="ScriptManager1" runat="server">
            
</asp:ScriptManager>
            
&nbsp;&nbsp;
            
<asp:Button ID="Button1" runat="server" Text="前台代码显示" />
            
&nbsp;
            
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
                
<ContentTemplate>
                    
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
                    
<asp:Button ID="ShowViaServer" runat="server" OnClick="ShowViaServer_Click" Text="通过后台代码调用" />
                
</ContentTemplate>
            
</asp:UpdatePanel>
            
<asp:Panel ID="Panel1" runat="server" BorderStyle="Solid" BorderColor="#CEDDE0" BorderWidth="5"
                Height
="351px" Width="788px" BackColor ="#f0f7fd" >
                
<asp:Button ID="Button2" runat="server" Text="确定" />
                
<asp:Button ID="Button3" runat="server" Text="取消" />&nbsp;
                
<asp:Button ID="HideViaServer" runat="server" Text="无代码的回发事件" OnClick="HideViaServer_Click" />
                
<asp:Label ID="Label2" runat="server" Text="Label2" />
                
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    
<ContentTemplate>
                        
<asp:Button ID="Button4" runat="server" Text="点击实现无刷新" OnClick="Button4_Click" />
                    
</ContentTemplate>
                
</asp:UpdatePanel>
            
</asp:Panel>
            
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1"
                PopupControlID
="Panel1" BackgroundCssClass="watermarked" OkControlID="Button2"
                CancelControlID
="Button3" OnOkScript="okScript()" OnCancelScript="cancelScript()"
                DynamicControlID
="Label2" DynamicContextKey="DynamicContextKey" DynamicServicePath="~/ToolkitTestService.asmx"
                DynamicServiceMethod
="GetContextKey" />

            
&nbsp;

            
<script language="javascript" type="text/javascript" src="/Script/ModalPopup.js"></script>

        
</div>
    
</form>
</body>
</html>

后台代码

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;

namespace RepairSystem
{
    
public partial class WebForm6 : System.Web.UI.Page
    
{
        
protected void Page_Load(object sender, EventArgs e)
        
{

        }

        
protected void Button4_Click(object sender, EventArgs e)
        
{
            Label1.Text 
+= "1";
            ModalPopupExtender1.Hide();
        }

        
protected void ShowViaServer_Click(object sender, EventArgs e)
        
{
            ModalPopupExtender1.Show();
        }

        
protected void HideViaServer_Click(object sender, EventArgs e)
        
{
            ModalPopupExtender1.Hide();
        }

        
protected void Button2_Click(object sender, EventArgs e)
        
{
            Label1.Text 
+= "2";
        }

    }

}

原创粉丝点击