本博文,教大家做一个轻量级的小型网站的导航条。
在网站的后台管理界面,就是可以管理这些导航内容。添加,删除,更新等,在后台能够预览到导航条效果。
做到信息存储,需要在数据库创建相关的表。对表进行操作,添加编辑等,需要运用存储过程。
SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO SET ANSI_PADDING ON GO -- ============================================= -- Author: Insus.NET -- Create date: 2013-07-20 -- Description: Navigation bar table. -- ============================================= CREATE TABLE [dbo].[NavigationBar]( [NavigationBar_nbr] [smallint] IDENTITY(1,1) NOT NULL, [Title] [nvarchar](40) NOT NULL, [Url] [varchar](200) NULL, [CreateBy] [nvarchar](30) NOT NULL, [CreateDate] [datetime] NOT NULL, [UpdateBy] [nvarchar](30) NOT NULL, [UpdateDate] [datetime] NOT NULL, CONSTRAINT [PK__Navigati__B5B5D0884589517F] PRIMARY KEY CLUSTERED ( [NavigationBar_nbr] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] GO SET ANSI_PADDING OFF GO ALTER TABLE [dbo].[NavigationBar] ADD CONSTRAINT [DF__Navigatio__Creat__477199F1] DEFAULT (getdate()) FOR [CreateDate] GO ALTER TABLE [dbo].[NavigationBar] ADD CONSTRAINT [DF__Navigatio__Updat__4865BE2A] DEFAULT (getdate()) FOR [UpdateDate] GO[dbo].[NavigationBar]
Insus.NET写了一个触发器,就是第一笔(默认)记录不被删除,但可以更改。
SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO -- ============================================= -- Author: Insus.NET -- Create date: 2013-07-20 -- Description: Default navigation bar do not allow delete. -- ============================================= CREATE TRIGGER [dbo].[tri_NavigationBar_Delete] ON [dbo].[NavigationBar] FOR DELETE AS BEGIN IF @@ROWCOUNT = 0 RETURN SET NOCOUNT ON; DECLARE @nb_nbr TINYINT SELECT @nb_nbr = [NavigationBar_nbr] FROM deleted IF @nb_nbr = 1 BEGIN RAISERROR(N'默认导航条不允许删除。',16,1) ROLLBACK TRANSACTION END END[dbo].[tri_NavigationBar_Delete]
SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO -- ============================================= -- Author: Insus.NET -- Create date: 2013-07-20 -- Description: get all navigation bar. -- ============================================= CREATE PROCEDURE [dbo].[usp_NavigationBar_GetAll] AS SELECT [NavigationBar_nbr],[Title],[Url] FROM [dbo].[NavigationBar] GO[dbo].[usp_NavigationBar_GetAll]
SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO -- ============================================= -- Author: Insus.NET -- Create date: 2013-07-20 -- Description: add navigation bar. -- ============================================= CREATE PROCEDURE [dbo].[usp_NavigationBar_Insert] ( @Title NVARCHAR(40), @Url VARCHAR(200), @CreateBy NVARCHAR(30) ) AS DECLARE @UpdateBy NVARCHAR(30) = @CreateBy INSERT INTO [dbo].[NavigationBar] ([Title],[Url],[CreateBy],[UpdateBy]) VALUES (@Title,@Url,@CreateBy,@UpdateBy) GO[dbo].[usp_NavigationBar_Insert]
SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO -- ============================================= -- Author: Insus.NET -- Create date: 2013-07-20 -- Description: update navigation bar. -- ============================================= CREATE PROCEDURE [dbo].[usp_NavigationBar_Update] ( @NavigationBar_nbr SMALLINT, @Title NVARCHAR(40), @Url VARCHAR(200), @UpdateBy NVARCHAR(30) ) AS UPDATE [dbo].[NavigationBar] SET [Title] = @Title,[Url] = @Url,[UpdateBy] = @UpdateBy,[UpdateDate] = CURRENT_TIMESTAMP WHERE [NavigationBar_nbr] = @NavigationBar_nbr GO[dbo].[usp_NavigationBar_Update]
SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO -- ============================================= -- Author: Insus.NET -- Create date: 2013-07-20 -- Description: delete navigation bar. -- ============================================= CREATE PROCEDURE [dbo].[usp_NavigationBar_Delete] ( @NavigationBar_nbr SMALLINT ) AS DELETE FROM [dbo].[NavigationBar] WHERE [NavigationBar_nbr] = @NavigationBar_nbr GO[dbo].[usp_NavigationBar_Delete]
有了数据表,还要写一个类别:
using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Text; namespace Insus.NET { public class NavigationBar { private short? _NavigationBar_nbr; private string _Title; private string _Url; private string _CreateBy; private string _UpdateBy; public short? NavigationBar_nbr { get { return _NavigationBar_nbr; } set { _NavigationBar_nbr = value; } } public string Title { get { return _Title; } set { _Title = value; } } public string Url { get { return _Url; } set { _Url = value; } } public string CreateBy { get { return _CreateBy; } set { _CreateBy = value; } } public string UpdateBy { get { return _UpdateBy; } set { _UpdateBy = value; } } BusinessBase objBusinessBase = new BusinessBase(); public DataTable GetAll() { return objBusinessBase.GetDataToDataSet("usp_NavigationBar_GetAll").Tables[0]; } public void Insert() { Parameter[] parameter = { new Parameter ("@Title",SqlDbType.NVarChar,-1,_Title), new Parameter ("@Url",SqlDbType.VarChar,-1,_Url), new Parameter ("@CreateBy",SqlDbType.NVarChar,-1,_CreateBy) }; objBusinessBase.ExecuteProcedure("usp_NavigationBar_Insert", parameter); } public void Update() { Parameter[] parameter = { new Parameter ("@NavigationBar_nbr",SqlDbType.SmallInt,2,_NavigationBar_nbr), new Parameter ("@Title",SqlDbType.NVarChar,-1,_Title), new Parameter ("@Url",SqlDbType.VarChar,-1,_Url), new Parameter ("@UpdateBy",SqlDbType.NVarChar,-1,_UpdateBy) }; objBusinessBase.ExecuteProcedure("usp_NavigationBar_Update", parameter); } public void Delete() { Parameter[] parameter = { new Parameter ("@NavigationBar_nbr",SqlDbType.SmallInt,2,_NavigationBar_nbr) }; objBusinessBase.ExecuteProcedure("usp_NavigationBar_Delete", parameter); } } }NavigationBar
在网站的后台,创建一个网页以作添加记录
<asp:Table ID="Table1" runat="server" CellPadding="3" CellSpacing="0" Width="100%"> <asp:TableHeaderRow Height="25px" BackColor="#efebde" BorderWidth="1" BorderColor="#c0c0c0"> <asp:TableHeaderCell BackColor="#efebde" BorderWidth="1" BorderColor="#c0c0c0" Width="15%"> 菜单名称 </asp:TableHeaderCell> <asp:TableHeaderCell BackColor="#efebde" BorderWidth="1" BorderColor="#c0c0c0"> 链接 </asp:TableHeaderCell> <asp:TableHeaderCell BackColor="#efebde" BorderWidth="1" BorderColor="#c0c0c0" Width="8%"> 操作 </asp:TableHeaderCell> </asp:TableHeaderRow> <asp:TableRow Height="25px"> <asp:TableCell BorderWidth="1" BorderColor="#c0c0c0"> <asp:TextBox ID="TextBoxTitle" runat="Server" /> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBoxTitle" Display="none" ErrorMessage="名称栏位请求值。" ValidationGroup="vg_btnAdd"></asp:RequiredFieldValidator> </asp:TableCell><asp:TableCell BorderWidth="1" BorderColor="#c0c0c0"> <asp:TextBox ID="TextBoxUrl" runat="Server" Width="300"/> </asp:TableCell><asp:TableCell BorderWidth="1" BorderColor="#c0c0c0"> <asp:ValidationSummary ID="ValidationSummary1" runat="server" EnableClientScript="true" ShowMessageBox="true" ShowSummary="false" ValidationGroup="vg_btnAdd" /> <asp:ImageButton ID="InsertButton" runat="server" OnClick="InsertButton_Click" ImageAlign="absmiddle" ImageUrl="~/SiteMgt/Images/i.gif" ToolTip="Insert" ValidationGroup="vg_btnAdd" /> </asp:TableCell></asp:TableRow></asp:Table>View Code
去网页.aspx.vb,实例化刚才创建好的NavigationBar类别:
Dim objNavigationBar As New NavigationBar()
添加铵钮Click事件。
有了添加记录功能,我们还需要把添加在数据表的记录显示出来,还要能够对它们编辑,更新或删除。
<asp:GridView ID="GvNavigationBar" runat="server" DataKeyNames="NavigationBar_nbr" CellPadding="3" CellSpacing="0" BorderWidth="0" BorderColor="#c0c0c0" AutoGenerateColumns="false" ShowHeader="false" OnRowEditing="GvNavigationBar_RowEditing" OnRowCancelingEdit="GvNavigationBar_RowCancelingEdit" OnRowUpdating="GvNavigationBar_RowUpdating" OnRowDeleting="GvNavigationBar_RowDeleting" Width="100%"> <Columns> <asp:TemplateField> <ItemStyle BorderWidth="1" BorderColor="#c0c0c0" Width="15%" Height="25" /> <ItemTemplate> <%# Eval("Title")%> </ItemTemplate> <EditItemTemplate> <asp:TextBox ID="TextBoxTitle" runat="server" Text='<%# Eval("Title")%>'></asp:TextBox><asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBoxTitle" Display="none" ErrorMessage="名称段请求值。" ValidationGroup="vg_Edit"></asp:RequiredFieldValidator></EditItemTemplate></asp:TemplateField><asp:TemplateField> <ItemStyle BorderWidth="1" BorderColor="#c0c0c0" /> <ItemTemplate> <%# Eval("Url")%> </ItemTemplate> <EditItemTemplate> <asp:TextBox ID="TextBoxUrl" runat="Server" Text=' <%# Eval("Url")%>' Width="300" /> </EditItemTemplate> </asp:TemplateField> <asp:TemplateField> <ItemStyle Width="4%" Wrap="false" BorderWidth="1" BorderColor="#c0c0c0" /> <ItemTemplate> <asp:ImageButton ID="EditButton" runat="server" CommandName="Edit" ImageAlign="absmiddle" ImageUrl="~/SiteMgt/Images/e.gif" ToolTip="Edit" CausesValidation="false" /> </ItemTemplate> <EditItemTemplate> <asp:ValidationSummary ID="ValidationSummary2" runat="server" EnableClientScript="true" ShowMessageBox="true" ShowSummary="false" ValidationGroup="vg_Edit" /> <asp:ImageButton ID="UpdateButton" runat="server" CommandName="Update" ImageAlign="absmiddle" ImageUrl="~/SiteMgt/Images/u.gif" ToolTip="Update" ValidationGroup="vg_Edit" /> <asp:ImageButton ID="CancelButton" runat="server" CommandName="Cancel" ImageAlign="absmiddle" ImageUrl="~/siteMgt/Images/c.gif" ToolTip="Cancel" CausesValidation="false" /> </EditItemTemplate> </asp:TemplateField> <asp:TemplateField> <ItemStyle Width="4%" BorderWidth="1" BorderColor="#c0c0c0" /> <ItemTemplate> <asp:ImageButton ID="DeleteButton" runat="server" CausesValidation="false" CommandName="Delete" ImageAlign="absmiddle" ImageUrl="~/SiteMgt/Images/d.gif" ToolTip="Delete" /> <ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server" TargetControlID="DeleteButton" ConfirmText="你确定要删除此菜单栏?"> </ajaxToolkit:ConfirmButtonExtender> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>View Code
绑定数据:
GridView控件的Edit事件:
GridView控件的Update事件:
GridView控件的取消事件:
GridView控件的删除事件:
看看运行的效果:
开发阶段,由于还没有做到前台,但需要看到效果。Insus.NET想到,使用用户控件来显示。到时开发到前台时,只要拉用户控件至需要网页的地方去即可。创建一个用户控件NavigationBar.ascx:
去用户控件NavigationBar.ascx.cs代码页中,把数据表的呈现至用户控件。
在开发前端时,把此用户控件拉至网页即可。如果网站有使用母版页,只要拉至masterpage去。这个整个站点即共用此导航条。
最终导航条运行时效果:
本演示算是完成了。