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

最新推荐文章于 2014-04-15 13:14:39 发布
原创 最新推荐文章于 2014-04-15 13:14:39 发布 · 3.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ajax #button #asp #server #webform #object

本文介绍了一个使用 ASP.NET 实现的网页示例，该示例包括了弹窗、更新面板等组件的应用，并展示了如何通过按钮触发前后台代码交互来实现页面的动态更新，特别关注于 AJAX 技术的运用。

 前台代码

 

<%@ 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";
        }
    }
}
AJAX弹出窗口 ModalPopupExtender例子
11-11
AjaxControlToolkit里面ModalPopupExtender例子
ajaxToolkit:ModalPopupExtender演示及实现代码
10-27
ajaxToolkit:ModalPopupExtender可以让用户模拟新开一个窗口,就是在模拟新开窗口作多项选项的功能,感兴趣的朋友可以了解下，希望此文对你有所帮助
AJAX Control Toolkit——ModalPopupExtender（弹出对话框&蒙板）
weixin_33751566的博客
08-02 146
ModalPopupExtender，该控件的直观效果就是，当单击页面上的关联的控件时弹出对话框的同时页面出现蒙板效果，通过确定（执行一定的操作）和取消返回原页面。其实博客园“插入代码”就有点类似该控件。 TargetControlID -激活弹出框的元素的ID PopupControlID - 弹出控件的ID BackgroundCssClass - 当弹出对话框时，背景的CSS样式 ...
ModalPopupExtender UpdatePanel 完整无刷新 传值
xxhcust的专栏
06-29 1803
ModalPopupExtender UpdatePanel 完整无刷新 传值
UpdatePanel 无刷新弹出窗口
baixiong9801的博客
03-19 203
UpdatePanel 无刷新弹出窗口 UpdatePanel下解决提示框不弹出的方法 用户体验上既想页面不刷新，也希望同时能够看到操作的效果（弹出提示框）！ ①不刷新，我们可以使用UpdatePanel ②弹出消息框，这个有很多的方式...
使用AJAX ModalPopupExtender的登录/注册屏幕
04-11
此技术主要应用于ASP.NET环境中，它允许我们实现无刷新的交互体验，提高网页的响应速度和用户体验。 AJAX（Asynchronous JavaScript and XML）是一种通过JavaScript进行异步数据交换的技术，它使得页面部分更新成为...
经典实例解析：Ajax实现动态模态窗口弹出
1. **客户端动态弹出**：指的是不需要刷新整个页面，仅通过客户端的脚本（通常是JavaScript）就能实现模态窗口的弹出。 2. **模态窗口**：强调了窗口的模态性质，即在模态窗口打开时，用户不能与页面的其它部分进行...
Web中实现类似Windows弹出窗口的C#与VB源码
也可以利用UpdatePanel实现局部异步更新，结合ModalPopupExtender（来自Ajax Control Toolkit）快速搭建模态弹窗。此外，还可以通过RegisterStartupScript等方式在服务器代码中动态注入客户端脚本，实现服务端逻辑...
ASP.NET实现弹出层缩放菜单式交互效果
根据提供的文件信息，我们将重点探讨ASP.NET中实现弹出层以及缩放菜单式设计的概念、技术和可能的实现方法。由于提供的标题、描述和标签内容重复，我们主要关注“asp.net 弹出层_缩放菜单式(1)”这一主题。此外，...
掌握ModalPopupExtender的嵌套弹出技术
根据给定的文件信息，我们可以总结，源码涉及的是在Web开发中如何利用ModalPopupExtender控件实现模态层的弹出效果，并且能够在这些模态层之间创建嵌套关系。要实现这样的效果，开发者需要具备对HTML、CSS、...
AjaxToolKit学习笔记 之 ModalPopupExtender
cuibinmo3519的博客
05-17 168
1.控件功能描述 以模式窗口的方式弹出客户或服务器控件,以突出显示! 弹出的一般是DIV或PANEL. 2.控件属性描述 TargetControlID : 触发弹出操作的控件ID. PopupDragHandleCo...
Ajax Toolkit 控件学习系列(8) ——ModalPopupExtender 示例
weixin_34376986的博客
10-31 143
ModalPopupExtender  这个控件就是，对一个按钮或者Linkbutton等等，进行监控，以达到点击之后，弹出窗口的效果。而弹出的窗口可以自己定义，定义为panel，或者其他的。而panel中的效果可以自己设置，甚至于这个窗口的操作，操作之后有什么事件。在这个例子中，模仿了Kaixin网中奴隶买卖的例子，进行说明。 先看效果。 　　　　 　　　　这是一个用Gridvie...
ajaxToolkit:ModalPopupExtender演示与应用
weixin_34270865的博客
09-07 163
ajaxToolkit:ModalPopupExtender可以让用户模拟新开一个窗口，以下演示，就是在模拟新开窗口作多项选项的功能。    演示例子中，是Repeater结合CheckBox进行多选，此功能实现，可以参考：http://www.cnblogs.com/insus/archive/2011/09/07/2169742.html 选择的小图片，它将要被ajaxToolkit...
使用 ModalPopupExtender 和 UpdatePanel 应注意的问题
weixin_30252709的博客
11-18 130
项目中使用 ASP.NET Ajax，也使用了 AjaxToolkit 中的 ModalPopupExtender 控件。 在开发中遇到了这个错误信息：Sys.InvalidOperationException: Handler was not added through the Sys.UI.domEvent.addHandler method。通过 Google 找到了这个帖子，按照老外的方...
ajaxToolkit:ModalPopupExtender 使用
weixin_30672019的博客
12-08 194
<asp:HiddenField ID="hf3" runat="server"></asp:HiddenField> <ajaxToolkit:ModalPopupExtender ID="popupChangeStatus" runat="server" PopupControlID="panelStatus" T...
webform使用ajaxToolkit:ModalPopupExtender异步查询，未完成版（1）
烂笔头
04-15 1230
2010 2011 2012 2013 January February
AjaxControlToolKit--ModalPopup控件的介绍
我的博客新地址： http://www.n-pei.com
06-28 4127
1.      introduction:ModalPopup控件允许一个asp页面的部分内容以对话框的模式显示给用户,同时会限制用户于页面的其他部分交互。对话框显示的内容可以是一个层级,这个层级的背景可以使用户自定义的格式,简单的理解好比是一个对话框弹出来后,主页面会显示灰色,且不可操作。 当用户对这个弹出框内容进行操作后,需要点击一个OK/Cancel的按钮来运行某些客户端
局部刷新 与 点击按钮弹出窗口 （ajax 控件 updatepanel ModalPopupExtender ）
kk5595的专栏
02-25 4052
引用 ajaxcontroltookit的程序集（dll）。 bin文件夹里显示有，但是控件却没有。此时需要重新引用。   切记用ajax控件首先 需要   ....           脚本控制器，放在Body最上面，form之后。  updatepanel 放 要更新数据的控件。   ModalPopupExtender （要弹出的窗口）  设置属性  target
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值