导航条的重构

原本Insus.NET已经写好：

代码如下：

View Code

<style type="text/css">    .fsoverstyle {        border-color: #3599ff;    }    .divoverstyle {        background-color: #3399ff;        color: #fff;    }    .fsoutstyle {    }    .divoutstyle {    }   </style><script type="text/javascript">    function onOver(id, sid) {        var fs = document.getElementById(id);        var div = document.getElementById(sid);        if (fs)            fs.className = 'fsoverstyle';        if (div)            div.className = 'divoverstyle';    }    function onOut(id, sid) {        var fs = document.getElementById(id);        var div = document.getElementById(sid);        if (fs)            fs.className = 'fsoutstyle';        if (div)            div.className = 'divoutstyle';    }</script><table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#3599ff;" >    <tr align="center" valign="middle" style="height:35px;">        <td>            <fieldset id="fs8" style="margin:3px; padding: 7px; width: 75px; text-align: center;"                onmouseover="onOver('fs8','div8')" onmouseout="onOut('fs8','div8')">                <div id="div8">                                        <asp:HyperLink ID="HyperLink8" runat="server" NavigateUrl="~/Index.aspx" Text="网站首页" Target="_blank"></asp:HyperLink>                </div>            </fieldset>        </td>         <td>            <fieldset id="fs1" style="margin:3px; padding: 7px; width: 75px; text-align: center;"                onmouseover="onOver('fs1','div1')" onmouseout="onOut('fs1','div1')">                <div id="div1">                                        <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/ArticleList.aspx?ID=2" Text="教育动态" Target="_blank"></asp:HyperLink>                </div>            </fieldset>        </td>        <td>            <fieldset id="fs2" style="margin: 3px; padding: 7px; width: 75px; text-align: center;"                onmouseover="onOver('fs2','div2')" onmouseout="onOut('fs2','div2')">                <div id="div2">                                        <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/ArticleList.aspx?ID=1" Text="校园风采" Target="_blank"></asp:HyperLink>                </div>            </fieldset>        </td>        <td>            <fieldset id="fs3" style="margin: 3px; padding: 7px; width: 75px; text-align: center;"                onmouseover="onOver('fs3','div3')" onmouseout="onOut('fs3','div3')">                <div id="div3">                                        <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/ArticleList.aspx?ID=3" Text="教育教学" Target="_blank"></asp:HyperLink>                </div>            </fieldset>        </td>        <td>            <fieldset id="fs4" style="margin: 3px; padding: 7px; width: 75px; text-align: center;"                onmouseover="onOver('fs4','div4')" onmouseout="onOut('fs4','div4')">                <div id="div4">                                        <asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/ArticleList.aspx?ID=5" Text="实习实训" Target="_blank"></asp:HyperLink>                </div>            </fieldset>        </td>        <td>            <fieldset id="fs5" style="margin: 3px; padding: 7px; width: 75px; text-align: center;"                onmouseover="onOver('fs5','div5')" onmouseout="onOut('fs5','div5')">                <div id="div5">                    <asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="~/ArticleList.aspx?ID=6" Text="招生就业" Target="_blank"></asp:HyperLink>                </div>            </fieldset>        </td>        <td>            <fieldset id="fs6" style="margin: 3px; padding: 7px; width: 75px; text-align: center;"                onmouseover="onOver('fs6','div6')" onmouseout="onOut('fs6','div6')">                <div id="div6">                                        <asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="~/ArticleList.aspx?ID=7" Text="教育资源" Target="_blank"></asp:HyperLink>                </div>            </fieldset>        </td>        <td>            <fieldset id="fs7" style="margin: 3px; padding: 7px; width: 75px; text-align: center;"                onmouseover="onOver('fs7','div7')" onmouseout="onOut('fs7','div7')">                <div id="div7">                                         <asp:HyperLink ID="HyperLink7" runat="server" NavigateUrl="~/ArticleList.aspx?ID=8" Text="职业培训" Target="_blank"></asp:HyperLink>            </fieldset>        </td>    </tr></table>

没有办法了，作为开发者来说，朋友也是客户，让客户满意，一句话，就是改。

在数据库中，创建一个表，让用户在后台能管理这些导航条的内容，添加，编辑与删除等。

View Code

-- =============================================-- Author:        Insus.NET-- Create date: 2013-01-12-- Description:    create table [navigate bar]-- =============================================CREATE TABLE [dbo].[NavigateBar](    [nbr] TINYINT IDENTITY(1,1) PRIMARY KEY NOT NULL,    [MenuName] NVARCHAR(30) NOT NULL,    [Url] NVARCHAR(100) NOT NULL)

 从上面的源来HTML来看，它只是一个表格，而且有几列。因此把它放在一个Repeater控件上。而实现动态生成显示：

View Code

<asp:Repeater ID="RepeaterNavigateBar" runat="server">    <HeaderTemplate>        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #3599ff;">            <tr align="center" valign="middle" style="height: 35px;">    </HeaderTemplate>    <ItemTemplate>        <td>            <fieldset id='<%# "fs" & Eval("nbr")%>'                 onmouseover="onOver('<%# "fs" & Eval("nbr")%>','<%# "div" & Eval("nbr")%>')" onmouseout="onOut('<%# "fs" & Eval("nbr")%>','<%# "div" & Eval("nbr")%>')">                <div id='<%# "div" & Eval("nbr")%>'>                    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("Url")%>' Text='<%# Eval("MenuName")%>' Target="_blank"></asp:HyperLink>                </div>            </fieldset>        </td>    </ItemTemplate>    <FooterTemplate>            </tr>        </table>    </FooterTemplate></asp:Repeater>

vb.net:

View Code

Imports Insus.NETPartial Class AscxControls_Menu    Inherits System.Web.UI.UserControl    Dim objNavigateBar As New NavigateBar()    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load        If Not IsPostBack Then            Data_Binding()        End If    End Sub    Private Sub Data_Binding()        Me.RepeaterNavigateBar.DataSource = objNavigateBar.GetAll()        Me.RepeaterNavigateBar.DataBind()    End SubEnd Class