本文将通过学生信息管理来介绍asp.net ajax的综合应用实例,包括“浏览”、“查询”、“添加”和“多选删除”功能,以及其它相关设计。

本示例源代码下载地址:http://down.51cto.com/data/220541

本示例中,程序架构参考Petshop,前端基于jQuery基础库,数据库采用SqlExpress,具体如下:

1.模块设计

程序结构参考PetShop,并根据实际情况进行裁切,结构图如下:

asp.net ajax1.0基础回顾(七):综合应用_休闲

其中,

Student:Web应用程序,包括用户界面;

Student.Object:类库,包括业务对象;

Student.Entiy:类库,包括业务实体;

GXSN.DAL.Util:类库,包括通用数据访问。

2.学生表

 

字段名

类型(长度)

可空

描述

PK

SID

NVARCHAR2(48)

N

GUID编号

UQ

NO

NVARCHAR2(32)

N

学号

 

NAME

NVARCHAR2(128)

N

姓名

 

AGE

INT

N

年龄

 

SEX

NVARCHAR2(2)

N

性别

 

CREATED

SMALLDATETIME

N

注册时间

 

3.vs解决方案

asp.net ajax1.0基础回顾(七):综合应用_休闲_02

4.界面交互

i.列表浏览

asp.net ajax1.0基础回顾(七):综合应用_职场_03

asp.net ajax1.0基础回顾(七):综合应用_职场_04

ii.添加

asp.net ajax1.0基础回顾(七):综合应用_职场_05

iii.修改

asp.net ajax1.0基础回顾(七):综合应用_asp.net_06

5.程序设计

i.主页前端

<head runat="server">

    <title>学生信息管理 - Asp.Net Ajax应用示例</title>

    <link href="css/student.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>

    <script src="js/student.js" type="text/javascript"></script>

</head>

<body>

    <form id="frmStudent" runat="server">

    <div>

        <asp:ScriptManager ID="smStudent" runat="server">

        <Scripts>

            <asp:ScriptReference Path="~/js/ajaxmanager.js" />

        </Scripts>

        </asp:ScriptManager>

        <h3>

            学生信息管理 - Asp.Net Ajax应用示例

        </h3>

        <asp:UpdateProgress ID="UpdateProgressStudent" runat="server" 

            AssociatedUpdatePanelID="upStudent" DisplayAfter="50">

            <ProgressTemplate>

                <div style="line-height:32px; vertical-align:middle;">

                    <img alt="" src="img/loading.gif" style="width: 32px; height: 32px" />数据加载中...

                </div>

            </ProgressTemplate>

        </asp:UpdateProgress>

        <asp:UpdatePanel ID="upStudent" runat="server">

            <ContentTemplate>

                <asp:HiddenField ID="hfAction" runat="server" />

                <asp:HiddenField ID="hfResult" runat="server" />

                <asp:MultiView ID="mvStudent" runat="server" ActiveViewIndex="0">

                    <asp:View ID="vwList" runat="server">

                        <!--学生列表 GridView -->

                    </asp:View>

                    <asp:View ID="vwEdit" runat="server">

                        <!--学生信息录入,完成添加或修改 -->

                    </asp:View>

                </asp:MultiView>

            </ContentTemplate>

        </asp:UpdatePanel>

    </div>

</form>

</body>

ii.Student业务单件类

asp.net ajax1.0基础回顾(七):综合应用_ajax_07

iii.StudentInfo实体类

asp.net ajax1.0基础回顾(七):综合应用_ajax_08

iv.SqlServer数据访问辅助类

asp.net ajax1.0基础回顾(七):综合应用_ajax_09

6.结语:程序设计简单最好,仅供参考,相互交流。