ExtAspNet应用技巧（十二） - 系统登录

界面效果








一步一步创建界面

1. 首先每个使用ExtAspNet控件的页面都需要引入ext:PageManager控件。

2. 页面上放置一个没有关闭按钮的ext:Window，并且指定宽度为350px。

<ext:PageManager ID="PageManager1" runat="server">
</ext:PageManager>
<ext:Window ID="Window1" runat="server" IsModal="true" Popup="true" EnableClose="false"
Title="系统登陆" Width="350px">
</ext:Window>

3. 在ext:Window内部放置一个ext:SimpleForm控件（ext:SimpleForm用来呈现那些只有一列的表单，如果需要更复杂的表单可以使用ext:From控件）。

<ext:Window ID="Window1" runat="server" IsModal="true" Popup="true" EnableClose="false"
Title="系统登陆" Width="350px">
<ext:SimpleForm ID="SimpleForm1" runat="server" LabelWidth="45px" BodyPadding="10px 20px"
EnableBackgroundColor="true" ShowBorder="false" ShowHeader="false">
<ext:TextBox ID="tbxUserName" FocusOnPageLoad="true" runat="server" Label="帐号" Required="true"
ShowRedStar="true" Text="">
</ext:TextBox>
<ext:TextBox ID="tbxPassword" TextMode="Password" runat="server" Required="true"
ShowRedStar="true" Label="密码" Text="">
</ext:TextBox>
<ext:Button ID="btnSubmit" Type="Submit" runat="server" ValidateForms="SimpleForm1"
OnClick="btnSubmit_Click" Text="登陆">
</ext:Button>
</ext:SimpleForm>
</ext:Window>

注意这里有几个应用技巧：

默认的ext:SimpleForm中控件的Label占据60px的宽度（在Web.config中定义），这里我们可以通过LabelWidth="45px"来覆盖这种设置。
为了让用户名文本框在页面加载完毕后自动获取焦点，我们设置属性FocusOnPageLoad="true"
点击按钮时需要对文本框进行客户端验证，这里只需为ext:Button设置ValidateForms="SimpleForm1"属性即可（如果需要验证多个表单，比如ValidateForms="SimpleForm1,Form2"）。
文本框的ShowRedStar="true"用来在标签旁边显示一个红色的星号，这个需要和Required="true"配合使用。
为了达到在表单内任意一个文本框内点击回车按键都能激发按钮的OnClick事件，需要设置ext:Button的Type="Submit"。

Asp.net表单身份验证

由于在AppBox中使用的Asp.net的表单身份验证，所以我们有必要来看一下Web.config配置文件：
在system.web配置节中：

<authentication mode="Forms">
<forms name=".ASPXFORMSAUTH" loginUrl="~/default.aspx" timeout="120" defaultUrl="~/main.aspx" protection="All" path="/"/>
</authentication>
<authorization>
<deny users="?"/>
</authorization>

同时由于Asp.net的表单身份验证在内部使用Response.Redirect进行页面跳转。为了使ExtAspNet兼容Response.Redirect，我们还必须在system.web下做如下配置：

<httpModules>
<add name="ScriptModule" type="ExtAspNet.ScriptModule, ExtAspNet"/>
</httpModules>

具体原因可以参考这篇博客：ExtAspNet应用技巧（三） - 302与Asp.Net Ajax

后台登陆代码

其中我们使用SubSonic作为ORM的工具，使用log4net作为日志记录的工具，代码很简单就不解释了。

protected void btnSubmit_Click(object sender, EventArgs e)
{
string userName = tbxUserName.Text.Trim();
string password = tbxPassword.Text.Trim();
XUser user = new Select().From<XUser>()
.Where(XUser.NameColumn).IsEqualTo(userName)
.And(XUser.EnabledColumn).IsEqualTo(true)
.ExecuteSingle<XUser>();

if (user != null)
{
if (PasswordUtil.ComparePasswords(user.Password, password))
{
// 登录成功
logger.Info(String.Format("登录成功：用户“{0}”", user.Name));
FormsAuthentication.RedirectFromLoginPage(userName, true);
return;
}
else
{
logger.Warn(String.Format("登录失败：用户“{0}”密码错误", userName));
Alert.Show("密码错误！");
return;
}
}
else
{
logger.Warn(String.Format("登录失败：用户“{0}”不存在", userName));
Alert.Show("用户名不存在！");
return;
}
}

如果你想运行本章中使用的代码，可以从 http://appbox.codeplex.com/SourceControl/ListDownloadableCommits.aspx 下载全部源代码。