本文将通过学生信息管理来介绍asp.net ajax的综合应用实例,包括“浏览”、“查询”、“添加”和“多选删除”功能,以及其它相关设计。
本示例源代码下载地址:http://down.51cto.com/data/220541
本示例中,程序架构参考Petshop,前端基于jQuery基础库,数据库采用SqlExpress,具体如下:
1.模块设计
程序结构参考PetShop,并根据实际情况进行裁切,结构图如下:
其中,
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解决方案
4.界面交互
i.列表浏览
ii.添加
iii.修改
5.程序设计
i.主页前端
<head runat="server">
<title>学生信息管理 - Asp.Net Ajax应用示例</title>
<link href="css/student.css" rel="stylesheet" type="text/css" />
<script src=\'#\'" /jquery-1.5.1.min.js" type="text/javascript"></script>
<script src=\'#\'" /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=\'#\'" /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业务单件类
iii.StudentInfo实体类
iv.SqlServer数据访问辅助类
6.结语:程序设计简单最好,仅供参考,相互交流。