将数据从SQL数据库提取到Bootstrap MVC中的html hover下拉列表

时间:2017-07-15 09:24:50

标签: c# jquery html twitter-bootstrap asp.net-mvc-4

我正在研究 MVCOnlineShop ,这是我到目前为止所做的: Image 我之前在View编写了一个代码,因此我可以将产品链接到他们的类别并且它可以工作,所有类别和产品数据库都在SQL server。这是代码:

@model MVCOnlineShop.Models.Category

@{
    ViewBag.Title = "Browse";
}
<h2>Browsing Category: @Model.CategoryName</h2>
<ul>
    @foreach (var Product in Model.Products)
    {
        <li>
            @Html.ActionLink(Product.ProductName,
"Details", new { id = Product.CategoryID })
        </li>
    }
</ul>

问题:现在,我如何使用此代码在bootstrap下拉列表中显示其类别下的产品?所以我想在游戏中点击悬停,我希望得到一个下拉列表,其中包含游戏1,游戏2,游戏3.谢谢!这就是我在_Layout.cshtml中尝试的内容:

@using MVCOnlineShop.Models;

@{
    // stores the Session content in a var
    var Categories = Session["Categories"] as List<Category>;
}

@*Checks if the Session variable is correct*@
@if (Categories != null)
{
    <ul class="nav navbar-nav">
        @*For each category in the Session var, display the link*@

            @foreach (var Category in Categories)
            {
                <div class="dropdown">
                    <button class="dropbtn">@Html.ActionLink(Category.CategoryName, "Browse", new { Category = Category.CategoryName })</button>
                <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

            }

</ul>
}

这是SQLCategory.cs的类别类:

namespace MVCOnlineShop.Models
{
    using System;
    using System.Collections.Generic;

    public partial class Category
    {
        public Category()
        {
            this.Products = new HashSet<Product>();
        }

        public int CategoryID { get; set; }
        public string CategoryName { get; set; }
        public string Description { get; set; }

        public virtual ICollection<Product> Products { get; set; }
    }
}

2 个答案:

答案 0 :(得分:1)

你的foreach循环应该是:

chr

答案 1 :(得分:0)

我制作了一个CategoryLayout.cshtml Partial View,现在我可以看到其中包含产品的类别来自SQL的所有数据,这就是代码:

@model IEnumerable<MVCOnlineShop.Models.Category>
@{
    ViewBag.Title = "CategoryLayout";
}

@foreach (var Category in Model)
{
    <li>
        <div class="dropdown">
            <button class="dropbtn">
                @Html.ActionLink(Category.CategoryName,
"ProductList", new { Category = Category.CategoryID }, new { @style = "color:#1ABC9C;text-decoration:none;" })
        </button>

        <div class="dropdown-content">
            @foreach (var Product in Category.Products)
            {
                @Html.ActionLink(Product.ProductName,
     "Details", new { id = Product.CategoryID }, new { style = "text-decoration:none;" })
            }
        </div>
    </div>
</li>
}