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,如需转载请自行联系原作者
相关文章
|
1月前
|
Web App开发 JSON 前端开发
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
34 1
|
6月前
|
前端开发 JavaScript 数据库
mui中使用ajax实现登录功能
mui中使用ajax实现登录功能
99 0
|
4月前
|
前端开发 JavaScript PHP
【PHP学习】—利用ajax原理实现登录功能(八)
【PHP学习】—利用ajax原理实现登录功能(八)
|
6月前
|
前端开发
mui中使用ajax实现登录功能demo
mui中使用ajax实现登录功能demo
|
9月前
|
前端开发 JavaScript 关系型数据库
宝塔设置PHP定时任务实战记录(定时任务、ajax异步刷新API、shell脚本、访问url)
宝塔设置PHP定时任务实战记录(定时任务、ajax异步刷新API、shell脚本、访问url)
477 0
|
9月前
|
前端开发 数据可视化 JavaScript
ajax刷新php后台实现定时任务的执行解决方案
ajax刷新php后台实现定时任务的执行解决方案
71 0
|
10月前
|
XML JSON 前端开发
【Spring MVC学习笔记 六】SpringMVC框架整合AJAX完成局部刷新
【Spring MVC学习笔记 六】SpringMVC框架整合AJAX完成局部刷新
64 0
|
前端开发
$.ajax()的实现方式
$.ajax()的实现方式
|
前端开发 JavaScript
【jquery ajax】实现文件上传提交
【jquery ajax】实现文件上传提交
233 0
【jquery ajax】实现文件上传提交
|
前端开发
使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?
使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?
81 0
使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?