asp.net ajax1.0基礎回顧(七)：綜合應用

本文将通過學生資訊管理來介紹asp.net ajax的綜合應用執行個體，包括“浏覽”、“查詢”、“添加”和“多選删除”功能，以及其它相關設計。

本示例中，程式架構參考Petshop，前端基于jQuery基礎庫，資料庫采用SqlExpress，具體如下：

1．子產品設計

程式結構參考PetShop，并根據實際情況進行裁切，結構圖如下：

<a target="_blank" href="http://blog.51cto.com/attachment/201107/154820683.png"></a>

其中，

Student：Web應用程式，包括使用者界面；

Student.Object：類庫，包括業務對象；

Student.Entiy：類庫，包括業務實體；

GXSN.DAL.Util：類庫，包括通用資料通路。

2．學生表

<b>字段名</b>

<b></b>

<b>類型(</b><b>長度)</b>

<b>可空</b>

<b>描述</b>

PK

SID

NVARCHAR2(48)

N

GUID編号

UQ

NO

NVARCHAR2(32)

學号

NAME

NVARCHAR2(128)

姓名

AGE

INT

年齡

SEX

NVARCHAR2(2)

性别

CREATED

SMALLDATETIME

注冊時間

3．vs解決方案

<a target="_blank" href="http://blog.51cto.com/attachment/201107/154905349.png"></a>

4．界面互動

i.清單浏覽

<a target="_blank" href="http://blog.51cto.com/attachment/201107/154918421.png"></a>

<a target="_blank" href="http://blog.51cto.com/attachment/201107/154953120.png"></a>

ii.添加

<a target="_blank" href="http://blog.51cto.com/attachment/201107/155044566.png"></a>

iii.修改

<a target="_blank" href="http://blog.51cto.com/attachment/201107/155056817.png"></a>

5．程式設計

i.首頁前端

&lt;head runat="server"&gt;

    &lt;title&gt;學生資訊管理 - Asp.Net Ajax應用示例&lt;/title&gt;

    &lt;link href="css/student.css" rel="stylesheet" type="text/css" /&gt;

    &lt;script src="js/jquery-1.5.1.min.js" type="text/javascript"&gt;&lt;/script&gt;

    &lt;script src="js/student.js" type="text/javascript"&gt;&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

    &lt;form id="frmStudent" runat="server"&gt;

    &lt;div&gt;

        &lt;asp:ScriptManager ID="smStudent" runat="server"&gt;

        &lt;Scripts&gt;

            &lt;asp:ScriptReference Path="~/js/ajaxmanager.js" /&gt;

        &lt;/Scripts&gt;

        &lt;/asp:ScriptManager&gt;

        &lt;h3&gt;

            學生資訊管理 - Asp.Net Ajax應用示例

        &lt;/h3&gt;

        &lt;asp:UpdateProgress ID="UpdateProgressStudent" runat="server" 

            AssociatedUpdatePanelID="upStudent" DisplayAfter="50"&gt;

            &lt;ProgressTemplate&gt;

                &lt;div style="line-height:32px; vertical-align:middle;"&gt;

                    &lt;img alt="" src="img/loading.gif" style="width: 32px; height: 32px" /&gt;資料加載中...

                &lt;/div&gt;

            &lt;/ProgressTemplate&gt;

        &lt;/asp:UpdateProgress&gt;

        &lt;asp:UpdatePanel ID="upStudent" runat="server"&gt;

            &lt;ContentTemplate&gt;

                &lt;asp:HiddenField ID="hfAction" runat="server" /&gt;

                &lt;asp:HiddenField ID="hfResult" runat="server" /&gt;

                &lt;asp:MultiView ID="mvStudent" runat="server" ActiveViewIndex="0"&gt;

                    &lt;asp:View ID="vwList" runat="server"&gt;

                        &lt;!--學生清單 GridView --&gt;

                    &lt;/asp:View&gt;

                    &lt;asp:View ID="vwEdit" runat="server"&gt;

                        &lt;!--學生資訊錄入，完成添加或修改 --&gt;

                &lt;/asp:MultiView&gt;

            &lt;/ContentTemplate&gt;

        &lt;/asp:UpdatePanel&gt;

    &lt;/div&gt;

&lt;/form&gt;

&lt;/body&gt;

ii.Student業務單件類

<a target="_blank" href="http://blog.51cto.com/attachment/201107/155122599.png"></a>

iii.StudentInfo實體類

<a target="_blank" href="http://blog.51cto.com/attachment/201107/155135664.png"></a>

iv.SqlServer資料通路輔助類

<a target="_blank" href="http://blog.51cto.com/attachment/201107/155144557.png"></a>

6．結語：程式設計簡單最好，僅供參考，互相交流。

本文轉自 彭金華  51CTO部落格，原文連結:http://blog.51cto.com/pengjh/601997