Ajax中,ModalPopup与UpdatePanel结合,实现局部刷新的登录效果 (调用cs服务)

简介:

最近研究Ajax,突然想起有些网站有局部刷新的登陆效果,而Ajax提供了ModalPopup,刚好有类似效果。 因为登陆要调用后台cs页面中的部分功能,所以,结合UpdatePanel实现了这一功能。不知道谁还有更好的实现方式,欢迎共享。 我的源码:SupLogin.rar



Aspx页面主要代码:

 1      <!--  the update controls  -->
 2      < asp:UpdatePanel  ID ="UpdatePanel1"  runat ="server" >
 3          < ContentTemplate >
 4             Welcome back:
 5              < asp:Label  runat ="server"  ID ="lbWelcome"  Text ="Label"  CssClass ="RedAlert" ></ asp:Label >
 6          </ ContentTemplate >
 7          < Triggers >
 8              < asp:AsyncPostBackTrigger  ControlID ="btnOK"  EventName ="Click"   />
 9              < asp:AsyncPostBackTrigger  ControlID ="btnLogout"  EventName ="Click"   />
10          </ Triggers >
11      </ asp:UpdatePanel >
12     
13      <% -- The login panel-- %>
14      < asp:Panel  ID ="Panel1"  runat ="server"  CssClass ="modalPopup"  Style ="display: none"
15         Width ="200px" >
16         User:
17          < asp:TextBox  ID ="txtAlias"  runat ="server"  BackColor ="transparent"  Text ="Jack" ></ asp:TextBox >< br  />
18         Pwd:
19          < asp:TextBox  ID ="TextBox1"  runat ="server"  BackColor ="transparent" ></ asp:TextBox >< br  />
20          < hr  />
21          < asp:Button  ID ="btnOK"  runat ="server"  Text ="OK"  Width ="80px"  OnClick ="btnOK_Click"  ValidationGroup ="Login"   /> &nbsp;
22          < asp:Button  ID ="btnCancel"  runat ="server"  Text ="Cancel"  Width ="80px"  CausesValidation ="False"   />
23      </ asp:Panel >
24      < br  />
25     
26      <% --login and logout panel-- %>
27      < asp:Button  ID ="btnLogin"  runat ="server"  Text ="login"   />< asp:Button  ID ="btnLogout"
28         runat ="server"  Text ="Logout"  OnClick ="btnLogout_Click"   />
29         
30      < AjaxControl:ModalPopupExtender  ID ="ModalPopupExtender1"  runat ="server"  
31         TargetControlID ="btnLogin"
32         PopupControlID ="Panel1"  
33         CancelControlID ="btnCancel"
34         BackgroundCssClass ="modalBackground" >
35      </ AjaxControl:ModalPopupExtender >

CS文件中主要代码:
 1   protected   void  Page_Load( object  sender, EventArgs e)
 2      {
 3        lbWelcome.Text = UserName;
 4    }

 5      protected   void  btnOK_Click( object  sender, EventArgs e)
 6      {
 7        this.UserName = txtAlias.Text;
 8        lbWelcome.Text = this.UserName;
 9        this.ModalPopupExtender1.Hide();
10    }

11      private   string  UserName
12      {
13        get
14        {
15            if (Session["ModalPopup_Users"== null || string.IsNullOrEmpty(Session["ModalPopup_Users"].ToString()))
16                return "Anonymous";
17            else
18                return Session["ModalPopup_Users"].ToString();
19        }

20        set
21        {
22            Session["ModalPopup_Users"= value;
23        }

24    }

25      protected   void  btnLogout_Click( object  sender, EventArgs e)
26      {
27        UserName = "Anonymous";
28        lbWelcome.Text = this.UserName;
29    }
本文转自Jack Niu博客园博客,原文链接:http://www.cnblogs.com/skywind/archive/2007/09/24/904284.html,如需转载请自行联系原作者
相关文章
|
6月前
|
Web App开发 JSON 前端开发
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
|
2月前
|
XML 前端开发 JavaScript
php中Ajax的简单使用,登录表单调用Ajax判断是否正确登录利用layer.msg进行提示
本文介绍了在PHP中如何使用Ajax进行登录表单的数据提交,并利用jQuery的$.post()方法与后端通信,以及使用layer.msg进行前端提示。
php中Ajax的简单使用,登录表单调用Ajax判断是否正确登录利用layer.msg进行提示
|
前端开发 JavaScript 数据库
mui中使用ajax实现登录功能
mui中使用ajax实现登录功能
159 0
|
XML JSON 前端开发
异步请求,局部更新页面------Ajax
异步请求,局部更新页面------Ajax
88 0
|
前端开发
mui中使用ajax实现登录功能demo
mui中使用ajax实现登录功能demo
152 3
|
11月前
|
前端开发 JavaScript PHP
【PHP学习】—利用ajax原理实现登录功能(八)
【PHP学习】—利用ajax原理实现登录功能(八)
|
前端开发 JavaScript 关系型数据库
宝塔设置PHP定时任务实战记录(定时任务、ajax异步刷新API、shell脚本、访问url)
宝塔设置PHP定时任务实战记录(定时任务、ajax异步刷新API、shell脚本、访问url)
721 0
|
前端开发 数据可视化 JavaScript
ajax刷新php后台实现定时任务的执行解决方案
ajax刷新php后台实现定时任务的执行解决方案
94 0
|
XML JSON 前端开发
【Spring MVC学习笔记 六】SpringMVC框架整合AJAX完成局部刷新
【Spring MVC学习笔记 六】SpringMVC框架整合AJAX完成局部刷新
98 0
|
XML JSON JavaScript
原生AJAX实现异步请求
原生AJAX实现异步请求
127 0