Ajax中,ModalPopup与UpdatePanel结合,实现局部刷新的登录效果 (调用cs服务)-阿里云开发者社区

开发者社区> 开发与运维> 正文

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,如需转载请自行联系原作者

版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章