使用 JavaScript、LINQ 和 SqlDataAdapter 创建菜单

基本硬编码的级联菜单s

从技术上讲，你的菜单不需要使用 JavaScript。只需要一些基本的 CSS 来帮助处理所有内容，并且可以无缝支持所有浏览器，除了 IE6 和可能还有 IE7。

步骤 1：首先，我们需要创建包含菜单内容的 HTML。

<form id="form1" runat="server">
    <ul id="MainMenu" class="menu">
        <li>Home</li>
        <li>Other Homes
            <ul class="SubMenu">
                <li>Home 1</li>
                <li>Home 2</li>
                <li>Home 3</li>
            </ul>
        </li>
    </ul>
</form>

这里的结构应该很直接。MainMenu 将在你的浏览器中显示为菜单。SubMenu 将在点击/悬停主菜单项时下拉显示的菜单。我将 SubMenu 定义为一个类，这样我们就可以在主菜单中创建多个子菜单。如果你有不止一个菜单，你也可以将 MainMenu 改为类。

步骤 2：现在我们将定义一些将放在样式表中并在 HTML 中包含的样式。

/* 移除列表项目符号 */
.Menu{
    list-style-type: none;
}
/* 设置初始菜单水平浮动 */
.Menu li{
    float:left;
    list-style-type: none;
    width: 75px;
    height: 20px;
    border: 1px solid #CCCCCC;
    margin: 0px;
    padding: 3px 8px;
    background-color: #777777;
}
/* 清除浮动方法：在最后一个主菜单项后清除浮动效果 */
.Menu li:last{
    clear:both;
}
/* 隐藏主菜单下的所有子菜单 */
.Menu .SubMenu{
    display:none;
    position: relative;
    margin-top: 10px;
    margin-left:-9px;
}
/* 鼠标悬停时显示当前菜单项的子菜单 */
.Menu li:hover > .SubMenu{
    display:block;
}
/* 定义子菜单的列表项 */
.Menu .SubMenu li{
    display:block;
}
/* 定义悬停子菜单的列表项 */
.Menu li:hover{
    background-color: #007700;
}
/* 神奇的样式:: 影响子菜单下的任何子菜单，并将其定位在当前悬停的菜单项的右侧 */
.Menu .SubMenu .SubMenu{
    position:relative;
    left: 90px;
    top: -27px;
}

步骤 3：继续处理我们网站的其余部分，这样我们就不用担心菜单会花费十亿年了。

步骤 4 (可选)：你的老板过来让你添加很多额外的菜单级别。你怎么办？由于我们有了神奇的样式，这非常简单。以下是我们最初拥有的，我们需要让 Home 3 弹出另一个子菜单。

<form id="form1" runat="server">
    <ul id="MainMenu" class="menu">
        <li>Home</li>
        <li>Other Homes
            <ul class="SubMenu">
                <li>Home 1</li>
                <li>Home 2</li>
                <li>Home 3</li>
            </ul>
        </li>
    </ul>
</form>

Our additional Menu is now ready. 

 <ul id="MainMenu" class="Menu">
    <li>主页</li>
    <li>其他主页
        <ul class="SubMenu">
            <li>主页 1</li>
            <li>主页 2</li>
            <li>主页 3
                <ul class="SubMenu">
                    <li>子主页 1</li>
                    <li>子主页 2</li>
                    <li>子主页 3</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

请注意，你只需要向列表中添加一个额外的菜单。你不需要更新 CSS，也不需要像上一个例子那样更新 JavaScript。很简单。

LINQ 级联菜单

步骤 1：首先，我们需要创建包含菜单内容的 HTML。我们将使用一个简单的，因为我们将创建一个特殊的集合来生成一个锯齿状列表用于菜单，并在代码隐藏页面上进行处理。这只是演示如何将 SubMenu 加载到“Other Homes”MainMenu 项中。

<form id="form1" runat="server">
    <ul id="MainMenu" class="Menu">
        <li>Home</li>
        <li>Other Homes
            <asp:Literal ID="SubMenu" runat="server"></asp:Literal>
        </li>
    </ul>
    <asp:GridView ID="GridView1" runat="server" Visible="False">
    </asp:GridView>
</form>

步骤 2：现在我们需要设置代码隐藏来处理从数据库生成菜单。就本例而言，我们假设我们的 SQL 类已定义在一个名为 MenuDataClass.dbml 的文件中。

protected void Page_Load(object sender, EventArgs e)
{
    Query();
    Literal1.Text = "<ul class\"SubMenu\">" +
        "<li>" + GridView1.Rows[0].Cells[1].Text; + "</li>" +
        "<li>" + GridView1.Rows[1].Cells[1].Text; + "</li>" +
        "<li>" + GridView1.Rows[2].Cells[1].Text; + "</li>" +
        "<li>" + GridView1.Rows[3].Cells[1].Text; + "</li>" +
        "</ul>";
}
private void Query()
{
    DataClassesDataContext db = new DataClassesDataContext();
    var a = from b in db.GetTable<home>() select b;
    GridView1.DataSource = a;
    GridView1.DataBind();
}

注意：-> 这里我们使用 DataContext (DataClassesDataContext)，因为它用于管理对数据库的访问以及跟踪从数据库检索的实体的更改。

 

使用 SqlDataAdapter 通过数据库实现级联菜单

步骤 1：首先，我们需要创建包含我们菜单的 HTML。

<form id="form1" runat="server">
    <ul id="MainMenu" class="Menu">
        <li>Home</li>
        <li>Other Homes
            <asp:Literal ID="SubMenu" runat="server"></asp:Literal>
        </li>
    </ul>
</form>

步骤 2：现在我们将为我们的菜单创建一个数据库表。

create table Home
{
    ID int Identity(1,1),
    MenuName varchar(30)
}

插入我们将需要的子菜单值

insert into Home(MenuName) values("Home 1");
insert into Home(MenuName) values("Home 2");
insert into Home(MenuName) values("Home 3");

步骤 3：现在我们将这一切与数据库连接结合起来，该连接查询值并将它们编码到我们的菜单中。

连接字符串：(请使用您自己的数据库连接字符串。这只是一个示例)

SqlConnection conn1 = new SqlConnection("data source=MA\\SQLEXPRESS;initial catalog=menu1;integrated security=true;");

代码后台页面

protected void Page_Load(object sender, EventArgs e)
{ 
    SqlDataAdapter da1 = new SqlDataAdapter("select * from home", conn1);
    DataSet ds1 = new DataSet();
    da1.Fill(ds1, "home");
       
    Literal1.Text = "<ul class\"SubMenu\">" +
    "<li>" + GridView1.Rows[0].Cells[1].Text; + "</li>" +
    "<li>" + GridView1.Rows[1].Cells[1].Text; + "</li>" +
    "<li>" + GridView1.Rows[2].Cells[1].Text; + "</li>" +
    "<li>" + GridView1.Rows[3].Cells[1].Text; + "</li>" +
    "</ul>";
}

 

结论

我希望这能为您使用 ASP.NET 代码创建动态菜单提供一个良好的起点。之前的示例提供了 JavaScript，它没有提供可维护的代码结构，也不会为最终用户提供友好的菜单。如果禁用 JavaScript，所有子菜单都将无法访问。