通过创建一个简单的会议室预订系统学习 C# 和 .NET：第 3 部分

引言

现在你已经掌握了 ASP.NET WebForms 的基础知识以及 如何连接数据库和使用数据集。但我们必须承认，代码和用户界面都很丑陋。所以让我们在脑海中构思一个会议室预订系统的概念，然后从头开始创建一个新项目。

在开始新项目之前，你应该始终采取这些步骤，但最起码，你应该对你要做的事情有一个用户界面的草图。

考虑到这一点，让我们创建一个新的 WebForms 项目，并将其命名为 MRooms。现在，在点击确定之前，请确保你已将“单个用户帐户”选为身份验证模式。（这将生成登录和帐户管理所需的代码，从而为你节省大量时间。）

要编写干净的代码，你应该养成将数据访问代码与逻辑代码和用户界面代码分离的习惯。（这称为分层架构，你可以阅读更多相关信息。）但现在，我们至少应该有一个新的数据访问层，以便在将来需要时可以在其他项目中重用它。别担心，在 Visual Studio 中这实际上非常简单，你只需要为每个层创建一个项目并添加对它们的引用。

让我们添加一个新项目，在 Visual C# 部分选择“类库 (.NET Framework)”。确保你没有选择“类库(标准)”或“旧版”。将其命名为 DataAccessLayer 并点击确定。

添加一个 dataset

创建更多查询以方便以后访问

添加对 DataAccessLayer 的引用

重新生成解决方案。

添加一个名为 Rooms 的新文件夹，并添加一个带有主视图的窗体，名为 default.aspx。

添加 GridView 并创建一个新的 Datasource，将其链接到 DataAccessLayer 中的 dataset 和 tableAdapter。

添加一个新窗体 (NewRoom.aspx) 用于插入房间。拖放三个 TextBox 和一个 Button。

重命名 ID（你的 aspx 文件应如下所示）

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" 
    AutoEventWireup="true" CodeBehind="NewRoom.aspx.cs" Inherits="MRooms.Rooms.NewRoom" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <asp:TextBox ID="TextBoxName" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBoxLocation" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBoxDescription" runat="server"></asp:TextBox>
    <asp:Button ID="ButtonNewRoom" runat="server" Text="Save Room" OnClick="Button1_Click" />
</asp:Content>

在设计视图中，双击按钮，并添加表适配器字段，如下所示：

   DataAccessLayer.MRoomsDatasetTableAdapters.roomsTableAdapter rta = 
    new DataAccessLayer.MRoomsDatasetTableAdapters.roomsTableAdapter();

并在 Button1_Click 处理程序中添加：

protected void Button1_Click(object sender, EventArgs e)
        {
            rta.Insert(TextBoxName.Text, TextBoxLocation.Text, TextBoxDescription.Text);
            Response.Redirect("/rooms ");
        }

打开 Rooms/default.aspx

在末尾添加此行，以便显示添加新房间的链接

    <a href="NewRoom.aspx" class="btn btn-primary">Add New Room</a>

好的，你可以运行它并测试添加新房间。

添加窗体的 UI 仍然很丑陋，所以让我们做些改变。幸运的是，Microsoft 添加了 Bootstrap（一个漂亮的 CSS UI 库）。如果你不熟悉，请阅读更多。所以我们可以使用它。

用此内容替换 NewRoom.aspx（我只添加了一些 CSS 元素）

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" 
    AutoEventWireup="true" CodeBehind="NewRoom.aspx.cs" Inherits="MRooms.Rooms.NewRoom" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <div class="form-horizontal">
        <h4>Add New Room</h4>
        <hr />

        <asp:ValidationSummary runat="server" CssClass="text-danger" />
        <div class="form-group">
            <asp:Label runat="server" AssociatedControlID="TextBoxName" 
             CssClass="col-md-2 control-label">Room Name</asp:Label>
            <div class="col-md-10">
                    <asp:TextBox ID="TextBoxName" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator runat="server" 
                     ControlToValidate="TextBoxName"
                    CssClass="text-danger" ErrorMessage="The Name field is required." />
            </div>
            </div>

            <div class="form-group">
            <asp:Label runat="server" AssociatedControlID="TextBoxLocation" 
             CssClass="col-md-2 control-label">Room Location</asp:Label>
            <div class="col-md-10">
                     <asp:TextBox ID="TextBoxLocation" runat="server"></asp:TextBox>
                     <asp:RequiredFieldValidator runat="server" 
                      ControlToValidate="TextBoxLocation"
                    CssClass="text-danger" 
                    ErrorMessage="The Room location field is required." />
            </div>
            </div>
            <div class="form-group">
            <asp:Label runat="server" AssociatedControlID="TextBoxDescription" 
             CssClass="col-md-2 control-label">Room Description</asp:Label>
            <div class="col-md-10">
                       <asp:TextBox ID="TextBoxDescription" runat="server"></asp:TextBox>
            </div>
            </div>

     <asp:Button CssClass="btn btn-primary" ID="ButtonNewRoom" runat="server" 
                 Text="Save Room" OnClick="Button1_Click" />
        </div>
</asp:Content>

在 Rooms/default.aspx 上，只需在 gridview 上添加 CssClass="table table-striped"，这样 GridView 就会变成

<asp:GridView CssClass="table table-striped" ID="GridView1" runat="server" 
AutoGenerateColumns="False" DataSourceID="ObjectDataSource1">

你也可以在（gridview 上方）顶部添加一个标题，例如

     <h4>Meeting Rooms</h4>
        <hr />

所以整个代码变成

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" 
    AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="MRooms.Rooms.Rooms" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
     <h4>Meeting Rooms</h4>
        <hr />
    <asp:GridView CssClass="table table-striped" ID="GridView1" 
     runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSource1">
        <Columns>
            <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" 
             ReadOnly="True" SortExpression="ID" />
            <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
            <asp:BoundField DataField="Location" HeaderText="Location" 
             SortExpression="Location" />
            <asp:BoundField DataField="Description" HeaderText="Description" 
             SortExpression="Description" />
        </Columns>
    </asp:GridView>
    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
     InsertMethod="Insert" OldValuesParameterFormatString="original_{0}" 
     SelectMethod="GetData" 
     TypeName="DataAccessLayer.MRoomsDatasetTableAdapters.roomsTableAdapter">
        <InsertParameters>
            <asp:Parameter Name="Name" Type="String" />
            <asp:Parameter Name="Location" Type="String" />
            <asp:Parameter Name="Description" Type="String" />
        </InsertParameters>
    </asp:ObjectDataSource>
    <p>
    </p>
    <a href="NewRoom.aspx" class="btn btn-primary">Add New Room</a>
</asp:Content>

运行并查看它，你会发现它有所改进。

还有一件事，让我们更改 web.config 中的默认连接字符串，指向你之前创建的数据库

Data Source=.;Initial Catalog=MRooms;Integrated Security=True

当我们创建项目时添加了“单个用户帐户”身份验证，Microsoft 添加了一个本地数据库连接来存储用户和其他帐户信息。只需将连接字符串更改为我们的数据库，它就可以自动重新创建登录所需的表（如用户、角色…）。运行应用程序并尝试注册新用户。（注册链接在顶部。）

好的，现在让我们为会议室预订添加另一个表。你可以按照自己的方式进行。一种方法是使用 Visual Studio 内置的数据库编辑器。找到“服务器资源管理器”窗口（通常在“解决方案资源管理器”旁边的一个选项卡）。找到你的连接，右键单击表，然后选择添加新表。

或者，你也可以在（点击新查询后）运行此查询

CREATE TABLE RoomReservation
(
    [Id] [int] IDENTITY(1,1000) NOT NULL,
    [Description] VARCHAR(MAX) NULL,
    [RoomId] INT NOT NULL,
    [UserId] NVARCHAR(128) NULL,
    [ReservationDate] DATETIME NULL,
    [DateCreated] DATETIME NULL,
    CONSTRAINT [FK_RoomReservation_Room] FOREIGN KEY ([RoomId]) REFERENCES [Rooms]([Id]),
    CONSTRAINT [FK_RoomReservation_User] _
                FOREIGN KEY ([UserId]) REFERENCES [AspNetUsers]([Id])
)

现在让我们将表添加到数据集文件中，以便生成 tableAdabpter 和其他代码。

在 DataAccessLayer 项目中打开 Dataset.xsd。

在“服务器资源管理器”窗口中，展开你的数据库，然后将 RoomReservation 表拖到数据集窗口。右键单击适配器并为 insert、delete 和 update 添加查询。

重新生成项目（转到生成菜单 -> **重新生成**）。每次对 DataAccessLayer 进行更改时，可能都需要重新生成。这样，当你添加 datasource 时，你可能就能看到对象了。）

就像 Rooms 一样，添加一个名为 Reservations 的文件夹，并添加一个带有主视图的窗体，名为 default.aspx。

打开 Reservations/default.aspx 并从工具箱拖动 GridView，添加一个新的 datasource，就像之前一样选择对象，这次使用 Reservations Adapter。

添加新预订

在 reservations 文件夹中创建一个名为 NewReservation 的新窗体。用户应从下拉列表中选择一个 Room，添加 description 和 Date 来预订房间。

拖放一个 Dropdown 和两个文本框。一个用于 description，另一个用于 Date。我们只需要将 Textmode 设置为 DateTimeLocal（TextMode="DateTimeLocal"），大多数浏览器会将其识别为日期输入。

在 Dropdown 上，创建一个 datasource 并使用 object 和 RoomTable 适配器。

还添加一个按钮并双击以处理程序，并在处理程序中添加此内容。（我们刚刚实例化了 ReservationAdapter 并使用 insert 函数从输入中插入。）

DataAccessLayer.MRoomsDatasetTableAdapters.RoomReservationTableAdapter rrta = 
     new DataAccessLayer.MRoomsDatasetTableAdapters.RoomReservationTableAdapter();
        protected void Button1_Click(object sender, EventArgs e)
        {
            rrta.Insert(TextBoxDescription.Text, int.Parse(DropDownRoom.SelectedValue), 
                        null, DateTime.Parse(TextBoxDate.Text), DateTime.Now);
            Response.Redirect("/reservations ");
        }

在周围添加一些验证 Bootstrap 主体。

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" 
    AutoEventWireup="true" CodeBehind="NewReservation.aspx.cs" 
    Inherits="MRooms.Reservations.NewReservation" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
     <div class="form-horizontal">
        <h4>Add Reservation</h4>
        <hr />

        <asp:ValidationSummary runat="server" CssClass="text-danger" />
        <div class="form-group">
            <asp:Label runat="server" AssociatedControlID="DropDownRoom" 
             CssClass="col-md-2 control-label">Room</asp:Label>
            <div class="col-md-10">
                    <asp:DropDownList ID="DropDownRoom" runat="server" 
                     DataSourceID="ObjectDataSource1" DataTextField="Name" 
                     DataValueField="ID"></asp:DropDownList>
                    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
                     InsertMethod="Insert" OldValuesParameterFormatString="original_{0}" 
                     SelectMethod="GetData" 
                     TypeName="DataAccessLayer.MRoomsDatasetTableAdapters.roomsTableAdapter">
                        <InsertParameters>
                            <asp:Parameter Name="Name" Type="String" />
                            <asp:Parameter Name="Location" Type="String" />
                            <asp:Parameter Name="Description" Type="String" />
                        </InsertParameters>
                    </asp:ObjectDataSource>
                    <asp:RequiredFieldValidator runat="server" 
                     ControlToValidate="DropDownRoom"
                     CssClass="text-danger" ErrorMessage="The Room field is required." />
            </div>
            </div>

            <div class="form-group">
            <asp:Label runat="server" AssociatedControlID="TextBoxDate" 
             CssClass="col-md-2 control-label">Reservation Date</asp:Label>
            <div class="col-md-10">
                     <asp:TextBox ID="TextBoxDate" TextMode="DateTimeLocal" 
                      runat="server"></asp:TextBox>

            <asp:RequiredFieldValidator runat="server" ControlToValidate="TextBoxDate"
                    CssClass="text-danger" ErrorMessage="The Date field is required." />
            </div>
            </div>
            <div class="form-group">
            <asp:Label runat="server" AssociatedControlID="TextBoxDescription" 
             CssClass="col-md-2 control-label">Room Description</asp:Label>
            <div class="col-md-10">
                       <asp:TextBox ID="TextBoxDescription" runat="server"></asp:TextBox>
            </div>
            </div>

     <asp:Button CssClass="btn btn-primary" ID="ButtonNewReservation" 
      runat="server" Text="Save Reservation" OnClick="Button1_Click" />
        </div>
</asp:Content>

运行并测试添加新预订。

这就是如何使用 TypedDataset 和 Webforms 创建数据驱动的应用程序。

在下一部分，我们将了解如何使用 .NET 的默认 Identity Authentication 来授权用户添加房间或预订。
第 4 部分 -> 授权和清理（即将推出）

历史

• 2020年2月5日：初始版本