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>
<asp:Button ID="Button1" runat="server" Text="前台代码显示" />
<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="取消" />
<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" />
<script language="javascript" type="text/javascript" src="/Script/ModalPopup.js"></script>
</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>
<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>
<asp:Button ID="Button1" runat="server" Text="前台代码显示" />
<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="取消" />
<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" />
<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";
}
}
}
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";
}
}
}
- AJAX ModalPopupExtender实现弹出窗体效果 结合UpdatePanel实现完全无刷新
- Ajax中,ModalPopup与UpdatePanel结合,实现局部刷新的登录效果 (调用cs服务)
- Ajax中,ModalPopup与UpdatePanel结合,实现局部刷新的登录效果 (调用cs服务)
- Ajax中,ModalPopup与UpdatePanel结合,实现局部刷新的登录效果 (调用cs服务)
- ModalPopupExtender UpdatePanel 完整无刷新 传值
- Ajax的ModalPopupExtender实现弹出框.txt
- UpdatePanel实现无刷新DropdownList
- 局部刷新 与 点击按钮弹出窗口 (ajax 控件 updatepanel ModalPopupExtender )
- AJAX 实现页面无刷新效果
- Ajax实现无刷新分页效果
- Ajax+PHP实现无刷新分页效果
- ajax实现无刷新弹幕效果
- jquery实现ajax无刷新效果
- 用AjaxPro和ASP.NET结合实现无刷新AJAX效果
- 局部刷新 与 点击按钮弹出窗口 (ajax 控件 updatepanel ModalPopupExtender ) 今天怎么老出问题呢
- 使用UpdatePanel实现页面无刷新
- UpdatePanel控件实现无刷新级联
- SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传
- 多媒体动画课件集
- (原创)OGRE主要渲染流程简介
- 英文星期月份缩写
- (原创)后置++在不同编译器中的行为
- 关于POJO
- AJAX ModalPopupExtender实现弹出窗体效果 结合UpdatePanel实现完全无刷新
- 简单了解下POJO和PO
- 把C++类成员方法直接作为线程回调函数
- Assignment2
- 在Solaris下使笔记本连接到投影仪的解决办法
- JasperReport初级教程(2.0.3)图文详解_绝对原创
- as中编译时加载外部图片的办法
- 矩阵之路
- LiMo手机平台 和 LiPS手机标准 对待Android手机平台的态度