界面层UI实现过程(Web版)

不多说，还是直接看最终的效果：(没有选中记录的初始效果)

选中的效果：

 

切换数据库的效果：

对应的设计视图：(Default.aspx主要就是：GridView控件+DetailsView控件+ObjectDataSource控件)

实现了部门和用户的管理(增/删/改)，而后置代码(default.aspx.cs只有七行代码，就实现了！)可以说，三层的开发尤其是BLL业务域对象的封装，使得UI的开发变得简易多了，由于WebUI控件的数据绑定和相互良好的关联，比起UI桌面版开发更显简单。文章的后面再讲解数据分页的实现功能。

最后一个<切换数据库ImageButton> 也是仅仅为了演示方便，实现动态更改配置文件web.config对应节点的功能。

下面介绍实现的过程：

DAL和BLL文件夹的编码过程参考DAL编码实现和BLL编码实现，这里不再重复。

设计视图GridView和DetailsView是没有应用样式的(看起来也清爽些)，运行的时候的样式应用来自于主题文件夹SkinGrid下的Controls.skin设置。

(关于主题方面的应用请参考主题设计)

Controls.skin的设置：

 

<asp:TextBox runat="server" BorderStyle="dashed" BorderWidth="1px" /> 

<asp:GridView runat="server" Width="100%" CellPadding="4" ForeColor="#333333" GridLines="None">
   <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
   <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
   <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
   <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
   <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
   <AlternatingRowStyle BackColor="White" />
</asp:GridView> 

<asp:DetailsView runat="server" CellPadding="4"
   ForeColor="#333333" GridLines="None" Height="50px" Width="100%">
   <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
   <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />      
   <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
   <AlternatingRowStyle BackColor="White" />
   <CommandRowStyle BackColor="#fbfbd9" Font-Bold="True" HorizontalAlign="Right" />
   <RowStyle BackColor="White" />
   <FieldHeaderStyle BackColor="#fbfbd9" Font-Bold="True" />
</asp:DetailsView>

 

 

显示部门列表的GridView控件gvDepts的设置过程：(注意序号的顺序)

上图主要针对数据源的配置(ObjectDataSource)---接下来针对GridView控件本身的列进行设置。

 

 

 

gvDepts一共3列，一列模板字段(可以自己定义显示)，后两列命令按钮的ButtonType都设置为图片类型。

在模板列Column[0]中放置两个Literal控件(Label控件也行)，设置Text的绑定为Name和Desc。

 

 

 

 

为了能马上运行看到效果：还要在web.config配置一下，和桌面版UI的app.config配置相同，见图：

运行的效果：

接下来实现：当选中一行部门记录时(这里的选择按钮(笔状的图标))，用DetailsView控件(dvDept)显示对应的详细信息。

其odsDept的设计视图对应为：

<asp:ObjectDataSource ID="odsDept" runat="server" 
    InsertMethod="InsertDepartmentObj" SelectMethod="GetDepartmentById" 
    TypeName="抽象工厂模式.BLL.DepartmentObj" UpdateMethod="UpdateDepartmentObj">
    <InsertParameters>
        <asp:Parameter Name="name" Type="String" />
        <asp:Parameter Name="desc" Type="String" />
    </InsertParameters>
    <SelectParameters>
        <asp:ControlParameter ControlID="gvDepts" Name="id" 
            PropertyName="SelectedValue" Type="Int32" />
    </SelectParameters>
    <UpdateParameters>
        <asp:Parameter Name="id" Type="Int32" />
        <asp:Parameter Name="name" Type="String" />
        <asp:Parameter Name="desc" Type="String" />
    </UpdateParameters>
</asp:ObjectDataSource>

 

后续的GridView控件gvUsers和DetaisView控件dvUser的类似设置不再给出图片，直接给代码设置，相信能看明白了。

这些控件的EmptyDataText属性用来显示当没有记录时的文本信息！如果需要更丰富的显示，可使用EmptyDataTemplate定制。

 

 

 

每个GridView的DataKeyNames=Id和DetailsView的DataField=Id。

考虑到显示主键没有意义，所以Id字段的visible属性设置为False(或则去掉该列)。Name字段必须要进行非空验证，所以该列应转换为模板列。

通常来说：DetailsView的每一列都转换成TemplateField会更实用方便。(注意模板列字段与绑定字段在图标显示上的不同)

 

注意验证控件及按钮控件都有的ValidationGroup属性，非常有用的！后面会用到。

将开始模式设置为：Insert，这样便于显示。(因为一开始运行并没有选中gvDepts控件。)

当选中gvDepts中的一条记录时，dvDept应该切换为编辑模式(Edit模式)，而且插入新部门和更新当前部门信息时，gvDepts的数据应该刷新。

测试通过，但是点击“垃圾桶”按钮删除时，没有确认提示！

当初数据库设计时，外键关系是层叠更新和删除，这意味着该部门记录删除时其子表User的对应记录一并删除，所以确认不可少，同时为了减少误操作！

将gvDepts的删除命令按钮转为成模板列字段，GridView编辑模板Columns[2]，在ItemTemplate中找到ImageButton，设置其OnClientClick属性。

运行测试正常，后续的gvUsers[GridView]和dvUser类似上面的图形操作。直接看代码截图：

运行的时候，会出现一个问题，如下图所示：

由于dvDept的插入按钮会执行验证激活，所以dvUser的名称文本框被激活，导致插入失效。

通过设置验证控件和命令按钮的ValidationGroup设置实现组区分验证。很显然：dvDept内部和dvUser是两组独立的验证，只要设置该属性不同即可。

 

最后:切换数据库按钮的核心代码

 

页面代码：

default.aspx设计视图主要代码：

<form id="form1" runat="server">
    <div>
       <div>管理部门</div>
        <asp:GridView ID="gvDepts" runat="server" DataSourceID="odsDepts" 
            EnableModelValidation="True" DataKeyNames="Id" AutoGenerateColumns="False" 
            onselectedindexchanged="gvDepts_SelectedIndexChanged" Width="500px" 
            EmptyDataText="没有部门信息">
            <Columns>  
                <asp:TemplateField>
                    <ItemTemplate>
                      <div><b>
                          <asp:Literal ID="lblName" Text='<%#Eval("Name") %>' runat="server"></asp:Literal></b></div>
                        <asp:Literal ID="lblDesc" Text='<%#Eval("Desc") %>' runat="server"></asp:Literal> 
                        <ItemStyle HorizontalAlign="Center" Width="200px" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:CommandField ButtonType="Image" SelectImageUrl="~/images/Edit.gif" 
                    SelectText="编辑部门" ShowSelectButton="True" >                  
                <ItemStyle HorizontalAlign="Center" Width="20px" />
                </asp:CommandField>
                <asp:TemplateField ShowHeader="False">
                    <ItemTemplate>
                        <asp:ImageButton ID="btnDeleteDept" OnClientClick="return confirm('是否想删除该部门？');" runat="server" CausesValidation="False" 
                            CommandName="Delete" ImageUrl="~/images/Delete.gif" Text="删除部门" />
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Center" Width="20px" />
                </asp:TemplateField>   

            </Columns>
        </asp:GridView>
        <asp:ObjectDataSource ID="odsDepts" runat="server" 
            SelectMethod="GetDepartments" TypeName="抽象工厂模式.BLL.DepartmentObj" 
            DeleteMethod="DeleteDepartmentObj">
            <DeleteParameters>
                <asp:Parameter Name="id" Type="Int32" />
            </DeleteParameters>
        </asp:ObjectDataSource>
    </div>
    <table border="0" width="100%" cellpadding="0" cellspacing="0">
    <tr><td width="30%">
    <asp:ObjectDataSource ID="odsDept" runat="server" 
        InsertMethod="InsertDepartmentObj" SelectMethod="GetDepartmentById" 
        TypeName="抽象工厂模式.BLL.DepartmentObj" UpdateMethod="UpdateDepartmentObj">
        <InsertParameters>
            <asp:Parameter Name="name" Type="String" />
            <asp:Parameter Name="desc" Type="String" />
        </InsertParameters>
        <SelectParameters>
            <asp:ControlParameter ControlID="gvDepts" Name="id" 
                PropertyName="SelectedValue" Type="Int32" />
        </SelectParameters>
        <UpdateParameters>
            <asp:Parameter Name="id" Type="Int32" />
            <asp:Parameter Name="name" Type="String" />
            <asp:Parameter Name="desc" Type="String" />
        </UpdateParameters>
    </asp:ObjectDataSource>
        <asp:DetailsView ID="dvDept" runat="server" AutoGenerateRows="False" 
        DataSourceID="odsDept" EnableModelValidation="True" HeaderText="部门详细信息" 
        Height="50px" Width="207px" DataKeyNames="Id" DefaultMode="Insert" 
            ondatabound="dvDept_DataBound" EmptyDataText="没有部门信息">
        <Fields>
            <asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" 
                SortExpression="Id" Visible="False" />
            <asp:TemplateField HeaderText="名称" SortExpression="Name">
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                        ControlToValidate="TextBox1" ValidationGroup="edtDept" ErrorMessage="名称不能为空！">*</asp:RequiredFieldValidator>
                </EditItemTemplate>
                <InsertItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                        ControlToValidate="TextBox1" ValidationGroup="edtDept" ErrorMessage="名称不能为空！">*</asp:RequiredFieldValidator>
                </InsertItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="Desc" HeaderText="描述" SortExpression="Desc" />
            <asp:CommandField ValidationGroup="edtDept" ShowEditButton="True" ShowInsertButton="True" />
        </Fields>
    </asp:DetailsView></td><td width="2%"></td>
    <td width="68%">
       <div>管理用户</div>
        <asp:GridView ID="gvUsers" runat="server" AutoGenerateColumns="False" 
            DataSourceID="odsUsers" EnableModelValidation="True" DataKeyNames="Id" 
            onselectedindexchanged="gvUsers_SelectedIndexChanged" 
            EmptyDataText="没有用户信息！">
            <Columns>
                <asp:BoundField DataField="Name" HeaderText="名称" SortExpression="Name" />
                <asp:BoundField DataField="DeptTitle" HeaderText="部门" 
                    SortExpression="DeptTitle" />
                <asp:CommandField ShowSelectButton="True" ButtonType="Image" 
                    SelectImageUrl="~/images/Edit.gif" SelectText="编辑用户" />
                <asp:TemplateField ShowHeader="False">
                    <ItemTemplate>
                        <asp:ImageButton ID="ImageButton1" runat="server" CausesValidation="False" 
                            CommandName="Delete" ImageUrl="~/images/Delete.gif" Text="删除用户" 
                            OnClientClick="return confirm('是否删除该用户？');" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:ObjectDataSource ID="odsUsers" runat="server" DeleteMethod="DeleteUserObj" 
            SelectMethod="GetUsers" TypeName="抽象工厂模式.BLL.UserObj">
            <DeleteParameters>
                <asp:Parameter Name="id" Type="Int32" />
            </DeleteParameters>
            <SelectParameters>
                <asp:ControlParameter ControlID="gvDepts" Name="deptId" 
                    PropertyName="SelectedValue" Type="Int32" />
            </SelectParameters>
        </asp:ObjectDataSource><br />
        <asp:DetailsView ID="dvUser" runat="server" Height="50px" Width="218px" 
            AutoGenerateRows="False" DataKeyNames="Id" DataSourceID="odsUser" 
            EnableModelValidation="True" HeaderText="用户信息" DefaultMode="Insert" 
            ondatabound="dvUser_DataBound" EmptyDataText="没有用户信息！">
            <Fields>
                <asp:TemplateField HeaderText="名称" SortExpression="Name">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
                            ControlToValidate="TextBox2" ValidationGroup="edtUser" ErrorMessage="名称不能为空！">*</asp:RequiredFieldValidator>
                    </EditItemTemplate>
                    <InsertItemTemplate>
                        <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
                            ControlToValidate="TextBox2" ValidationGroup="edtUser" ErrorMessage="名称不能为空！">*</asp:RequiredFieldValidator>
                    </InsertItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label2" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="部门" SortExpression="DeptId">
                    <EditItemTemplate>
                        <asp:DropDownList ID="cboDepts" runat="server" DataSourceID="odsSelectDept" 
                            DataTextField="Name" DataValueField="Id" 
                            SelectedValue='<%# Bind("DeptId") %>'>
                        </asp:DropDownList>
                    </EditItemTemplate>
                    <InsertItemTemplate>
                        <asp:DropDownList ID="cboDepts" runat="server" DataSourceID="odsSelectDept" 
                            DataTextField="Name" DataValueField="Id" 
                            SelectedValue='<%# Bind("DeptId") %>'>
                        </asp:DropDownList>
                    </InsertItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("DeptTitle") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:CommandField ValidationGroup="edtUser" ShowEditButton="True" ShowInsertButton="True" />
            </Fields>
        </asp:DetailsView>
        <asp:ObjectDataSource ID="odsUser" runat="server" InsertMethod="InsertUserObj" 
            SelectMethod="GetUserById" TypeName="抽象工厂模式.BLL.UserObj" 
            UpdateMethod="UpdateUserObj">
            <InsertParameters>
                <asp:Parameter Name="deptId" Type="Int32" />
                <asp:Parameter Name="name" Type="String" />
            </InsertParameters>
            <SelectParameters>
                <asp:ControlParameter ControlID="gvUsers" Name="id" 
                    PropertyName="SelectedValue" Type="Int32" />
            </SelectParameters>
            <UpdateParameters>
                <asp:Parameter Name="id" Type="Int32" />
                <asp:Parameter Name="name" Type="String" />
                <asp:Parameter Name="deptId" Type="Int32" />
            </UpdateParameters>
        </asp:ObjectDataSource>
        <asp:ObjectDataSource ID="odsSelectDept" runat="server" 
            SelectMethod="GetDepartments" TypeName="抽象工厂模式.BLL.DepartmentObj">
        </asp:ObjectDataSource>
        </td>
    </tr>
    </table>
    <hr />
    <asp:ImageButton ID="btnChangeDB" runat="server" ImageUrl="~/images/Write.gif" 
        onclick="btnChangeDB_Click" style="height: 16px" />
    切换数据库</form>

 Default.aspc.cs代码：

public partial class _Default : System.Web.UI.Page
    {

        protected void gvDepts_SelectedIndexChanged(object sender, EventArgs e)
        {
            dvDept.ChangeMode(DetailsViewMode.Edit);
        }

        protected void dvDept_DataBound(object sender, EventArgs e)
        {
             gvDepts.DataBind();
             dvUser.DataBind();
        }

        protected void gvUsers_SelectedIndexChanged(object sender, EventArgs e)
        {
            dvUser.ChangeMode(DetailsViewMode.Edit);
        }

        protected void dvUser_DataBound(object sender, EventArgs e)
        {
            gvUsers.DataBind();
        }

        protected void btnChangeDB_Click(object sender, ImageClickEventArgs e)
        {
            抽象工厂模式.Helper.ChangeConfiguration();
            DataBind();            
        }
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }

 

Helper.cs代码：

class Helper
    {
        private static string ProviderType = ConfigurationManager.AppSettings["ProviderType"];
        private static string DBConnString =
            ConfigurationManager.ConnectionStrings["DBConnString"].ConnectionString;

        private static void SetConfig()
        {
            if (ProviderType.ToLower() == "sql")
            {
                ProviderType = "Access";
                DBConnString =
                    @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=F:\netStudy\抽象工厂模式\testdb.mdb";
            }
            else
            {
                ProviderType = "Sql";
                DBConnString = @"Data Source=.\sqlexpress;Initial Catalog=testdb;Integrated Security=True";
            }
        }

        public static void ChangeConfiguration()
        {
           
            SetConfig(); //读取程序集的配置文件 
            
            var config = 
                System.Web.Configuration.WebConfigurationManager.OpenWebConfiguration(HttpContext.Current.Request.ApplicationPath);

            //获取appSettings节点
            AppSettingsSection appSettings = (AppSettingsSection)config.GetSection("appSettings");
            appSettings.Settings["ProviderType"].Value = ProviderType;

            var connectionSection = (ConnectionStringsSection)config.GetSection("connectionStrings");
            connectionSection.ConnectionStrings["DBConnString"].ConnectionString = DBConnString;
            
            //保存配置文件
            config.Save();        
        }
    }

 

三层演示版本下载