這篇文章我們會從頭開始使用ExtAspNet，最終完成一個模擬用戶登錄的界面，最終的效果圖如下所示：
項目准備
1. 新建一個ASP.NET Web應用程序項目。
2. 從開源網站下載最新版本的ExtAspNet，並在新建項目中添加對ExtAspNet.dll的引用。
新建一個ASPX頁面
1. 在<html>標簽上面添加聲明
<%@ Register Assembly="ExtAspNet" Namespace="ExtAspNet" TagPrefix="ext" %>
2. 在<form>標簽中添加PageManager控件
<ext:PageManager ID="PageManager1" runat="server" />
每個使用ExtAspNet控件的頁面都必須包含一個PageManager控件，此控件用來控制頁面級別的全局參數。比如控制頁面樣式、語言、表單參數、AJAX參數以及布局的參數，后面會有一篇文章專門介紹這個控件。
3. 設計登陸表單
由於我們想讓登錄表單居中顯示，所以在表單外部嵌套了一個Window控件，並讓Window控件居中（其實是左右居中，上下位於黃金分割點的位置）顯示。
<ext:Window ID="Window1" runat="server" Title="登錄表單" IsModal="false" EnableClose="false" WindowPosition="GoldenSection" Width="350px"> </ext:Window>
這個所謂的黃金分割點是通過 WindowPosition="GoldenSection" 設置的，這也是ExtAspNet的一個創新點（據說人眼在查看網頁時，視線偏上一點大致位於黃金分割點的位置，而不是正中心）。
實現這一功能的代碼在/ExtAspNet/js/X/X.wnd.js中的_calculateGoldenPosition函數：
1: function _calculateGoldenPosition(bodySize, windowSize) {
2: var top = (bodySize.height - (bodySize.height / 1.618)) - windowSize.height / 2;
3: if (top < 5) {
4: top = 5;
5: }
6: var left = (bodySize.width - windowSize.width) / 2;
7: if (left < 0) {
8: left = 5;
9: }
10: return { left: left, top: top };
11: };
4. 在Window中添加SimpleForm控件
最終的ASPX中的Window標簽如下所示：
1: <ext:Window ID="Window1" runat="server" Title="登錄表單" IsModal="false" EnableClose="false"
2: WindowPosition="GoldenSection" Width="350px">
3: <Items>
4: <ext:SimpleForm ID="SimpleForm1" runat="server" ShowBorder="false" BodyPadding="10px"
5: LabelWidth="60px" EnableBackgroundColor="true" ShowHeader="false">
6: <Items>
7: <ext:TextBox ID="tbxUserName" Label="用戶名" Required="true" runat="server">
8: </ext:TextBox>
9: <ext:TextBox ID="tbxPassword" Label="密碼" TextMode="Password" Required="true" runat="server">
10: </ext:TextBox>
11: <ext:Button ID="btnLogin" Text="登錄" Type="Submit" ValidateForms="SimpleForm1" ValidateTarget="Top"
12: runat="server" OnClick="btnLogin_Click">
13: </ext:Button>
14: </Items>
15: </ext:SimpleForm>
16: </Items>
17: </ext:Window>
這個示例涉及PageManager、Window、SimpleForm、TextBox、Button幾個控件，很多屬性都是不言自明的，后面我們也會詳細介紹。
后台代碼
1: protected void btnLogin_Click(object sender, EventArgs e)
2: {
3: if (tbxUserName.Text == "admin" && tbxPassword.Text == "admin")
4: {
5: Alert.ShowInTop("成功登錄！");
6: }
7: else
8: {
9: Alert.ShowInTop("用戶名或密碼錯誤！", MessageBoxIcon.Error);
10: }
11: }
這里的邏輯很簡單，如果用戶名和密碼正確，就彈出對話框顯示“成功登錄！”，否則顯示錯誤信息。
小結
整個示例雖然看似簡單，卻實現了很多普通ASP.NET無法實現或難以完成的任務：
1. 不用一行JavaScript代碼完成表單的居中顯示
2. 一個可拖動的窗體
3. 用戶名和密碼輸入框的客戶端驗證
4. 表單回發不是整個頁面的回發，而是AJAX（這也是ExtAspNet所特有的原生AJAX，無需任何配置和特殊的代碼就默認擁有AJAX特性）
5. 漂亮的提示框是通過C#代碼生成的（並且可以在當前頁面框架或者父頁面框架中顯示，這也是ExtAspNet所特有的基於IFrame的框架）
下一篇文章我們會關注對Web.config的修改，來配置ExtAspNet所需的全局參數。