AJAX扩展控件ModalPopupExtender([代码控制]弹出模式对话框)的使用方法总结

最新推荐文章于 2019-06-30 18:48:18 发布

原创最新推荐文章于 2019-06-30 18:48:18 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #扩展 #textbox #server #asp #button

AJAX 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用 ASP.NET 实现的弹窗登录功能示例，包括页面布局、表单验证及登录逻辑等关键部分。通过 ModalPopupExtender 控件实现登录窗口的弹出与关闭，并利用 UpdatePanel 实现局部刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运行后的页面如下：

页面代码：

<head runat="server"> <title>无标题页</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">.fontStyle{ font-family:"宋体"; font-weight:bold; text-align:center; color:#660099; } .bgcss{ background-color:Gray; filter:alpha(opacity=70); opacity:0.7;} </style> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Panel ID="Panel1" runat="server" Height="138px" Width="209px" BackColor="#d0F7DE" Visible ="true"> <table width="470" height="148" border="0"> <tr> <td class="fontStyle">需输入用户名和密码</td> </tr> <tr> <td align="center"> <asp:Label ID="Label1" runat="server" Text="用户名"></asp:Label> :<asp:TextBox ID="TextBox1" runat="server" Width="133px"></asp:TextBox></td> </tr> <tr> <td align="center"> <asp:Label ID="Label2" runat="server" Text="密　码"></asp:Label> :<asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox></td> </tr> <tr> <td align="center"> <asp:Button ID="Button1" runat="server" Text="确定" OnClick="Button1_Click" /></td> </tr> <tr> <td align="center" style="height: 24px"> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="Label3" runat="server"></asp:Label> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID ="Button1" EventName ="click" /> </Triggers> </asp:UpdatePanel> </td> </tr> </table> </asp:Panel> <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="hid" PopupControlID ="Panel1" Drag="true" PopupDragHandleControlID="Panel1" DropShadow="true" BackgroundCssClass="bgcss" > </cc1:ModalPopupExtender> </div> <asp:Panel ID="Panel2" runat="server" Height="185px" Width="321px"> <asp:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <asp:Label ID="Label4" runat="server" Text="Label"></asp:Label> </ContentTemplate> </asp:UpdatePanel> </asp:Panel> <input type ="hidden" id ="hid" runat ="server" /> </form> </body>

后台代码：

public partial class ModalPopupLianXi : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack )
        {
            ModalPopupExtender1.Show();//控制模式对话框显示
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        if (TextBox1 .Text =="zhangjiajia"&&TextBox2 .Text =="780320380")
        {
            ModalPopupExtender1.Hide();//控制模式对话框隐藏
            Label4.Text = ">>欢迎zhangjiajia进入!";
        }
        else
        {
            Label3.ForeColor = System.Drawing.Color.Red;
            Label3.Text = "用户名或密码不正确!";
        }
    }
}