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    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值