ASP.NET 大学场地预约系统[源码+数据库]

这个是我在修专业课《Web应用开发技术》时的结课作业，分组是按5人一组的。结果由于我是大四老学长回来补修的。就自己单干了。采用了asp.net技术开发的，前端用了一些CSS框架进行美化。数据交互采用AJAX，数据库用的SQL Sever。

代码获取

关注公众号【程序猿声】后台回复【WRB】即可获取。

1、目标与应用场景

同学们在进行各类活动时，通常需要一定的场地配合。如果是室外场地，例如操场等无需进行借用预约便可使用。但是大部分活动都需要在室内场地完成，例如开团员大会，开班会，班级联谊等。再者，教师群体需要举办学术交流活动等也需要室内的场地完成。华中科技大学的教室和公用场地十分充足，即使在工作日，也有很多空闲的场地剩余。场地包括启明学院、教学楼、学生公寓内部的公用房、学院内的教室等。为满足广大同学的学习活动需求，促进同学之间的交流，同时更加充分地利用公共教室范围内的场地，我们小组决定设计并实现华中科技大学的场地预约系统，该系统的需求如下：

• 用户可以登录系统，进行教室的预约。
• 系统需要支持多用户使用，用户之间同一教室的预约时间段不能冲突。
• 如果不需要教室了，用户可以选择取消自己的预约。
• 用户能看到自己的历史预约信息。

根据以上的需求，拟实现的系统功能如下：

• 登录注册：新用户可以通过注册页面进行注册，随后使用注册的账号密码进行系统登录并使用。密码采用MD5密文保存到数据库中，确保用户的隐私安全。
• 场地展示：系统从数据库读取当前的场地信息，如场地类型、场地的名称、是否空闲等信息。并将其展示到页面前台，供用户查看选择。
• 预约：用户根据自己需要的场地类型，选择合适的场地，选中后系统显示该场地已被预约的时段，避免产生冲突。用户选择好时间段以后即可进行预约，系统检测预约是否冲突，如果不冲突则预约成功。
• 取消预约：展示用户已经预约成功的场地和时段，用户不需要了可以取消预约。
• 历史展示：显示用户的历史预约记录。

该系统的应用群体主要为大学生和大学教师。场景面向大学校园。旨在打造一个方便的场地预约管理系统。

2、设计思路

系统的设计分为前端、后端和数据库三大块。初步确定的开发平台为微软的.net平台+SQL Sever数据库（当然也是课程设计要求的）。前端对相关的页面进行设计布局，还可以使用现成的CSS框架进行一定的美化。后端可以使用老师封装好的SqlHelper.cs进行数据库的一些请求。前后端交互采用的主要是AJAX技术，实现轻量级的交互。关于前后端主要的思路如下：

• 前端：分页面进行开发，可以使得结构更加清晰。页面可划分为登录注册页面和主功能页面。
• 后端：交互技术使用AJAX进行交互，后端可以使用.ashx文件进行API的编写，采用参数action控制请求的类型，例如action=”login”时表示请求的是登录功能，从而进行判断。
• 数据库：确定系统的功能，提取相应的数据结构，建立数据库表。
  系统功能结构设计图如下：

3、关键问题与实现代码

在该系统中，关键性的问题主要有以下几个：

（1）AJAX接口的设计问题，项目属于轻量级项目，不需要多个后台接口文件(.ashx)，避免造成管理上的不便。采用一个.ashx实现多个请求，需要在请求时加上该请求所需要的功能，即action参数。因此采用了以下的框架：

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string action = context.Request["action"];
            if (!string.IsNullOrEmpty(action))
            {
                switch (action)
                {
                    case "bookRoom":

在开头便判断Request的action参数，确定该请求所需要的功能，然后调用相应的代码进行Response。

（2）利用请求返回的json数据创建相应的HTML代码，显示到页面上。以场地信息的展示为例：

后台代码：

case "flushRoom":
    DataTable dtRoom = SqlHelper.getDataTable("select * from RoomInfo");
    string sJson = JsonConvert.SerializeObject(dtRoom);
    context.Response.Write(sJson);
    break;

使用sql语句获取所有记录，转为json字符串以后返回到前台。前台AJAX请求代码：

function flushRoom() {
   
        $.ajax({
   
            type: 'get',
            url: 'RoomBookHandler.ashx',
            async: true,
            data: {
   
                action: 'flushRoom',
            },
            success: function (result) {
   
                document.getElementById("roomInfo").innerHTML = creatRoomTable(result);
                var footerStr = '<footer id="bookTimeSpan" ></footer >';
                document.getElementById("bookTimeSpan").innerHTML = footerStr;
            },
            error: function () {
   
                alert('获取数据失败!');
            }
        });
    }

将AJAX返回的结果，使用creatRoomTable函数生成HTML表格，并设置到页面的元素上面。creatRoomTable的代码如下：

function creatRoomTable(dataStr) {
   
        var dataList = JSON.parse(dataStr);
        var trStr = '<table class="primary" id="roomInfo" style="width: 100%"><tr>' +
            '<th> 教室号</th> <th>教室类型</th><th>容纳人数</th>' +
            '<th> 教室状态</th> <th>教室说明</th><th>是否预约</th></tr >';
        //循环遍历出json对象中的每一个数据并显示在对应的td中
        for (i = 0; i < dataList.length; i++) {
   
            trStr += '<tr>';
            trStr += '<td>' + dataList[i].RoomNumber + '</td>';
            trStr += '<td>' + dataList[i].RoomType + '</td>';
            trStr += '<td>' + dataList[i].RoomPeople + '</td>';
            trStr += '<td>' + dataList[i]