zoukankan      html  css  js  c++  java
  • 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    }
  • 相关阅读:
    test
    dd 命令 sd卡系统迁移
    关于庖丁分词
    Linux source命令
    Linux系统查看系统是32位还是64位方法总结 in 创新实训
    总结这两天连续干掉的bug In 创新实训 智能自然语言交流系
    穷举法应用——搬砖块
    判断素数类问题汇总
    统计计算学生成绩类问题汇总
    C语言简明数据类型指南
  • 原文地址:https://www.cnblogs.com/skywind/p/904284.html
Copyright © 2011-2022 走看看