从 SQL 数据库获取数据到 Bootstrap MVC 中的 html 悬停下拉列表

Posted 2023-04-13

【中文标题】从 SQL 数据库获取数据到 Bootstrap MVC 中的 html 悬停下拉列表

【英文标题】：Fetching data from SQL database to html hover dropdown list in Bootstrap MVC

【发布时间】：2017-12-20 08:38:39

【问题描述】：

我正在开发我的 MVCOnlineShop ，这是我目前所做的： 我之前在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>

这是来自SQL、Category.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; 
    

【问题讨论】：

希望这对你有所帮助 :) --> Answer

【参考方案1】：

你的 foreach 循环应该是：

@foreach(var category in Categories)
   
      @Html.LabelFor(category.CategoryName)
      @foreach(var product in category.Products)
      
         <div class="dropdown">
            <div class="dropdown-content">
             <button class="dropbtn">@Html.ActionLink(product.ProductName, "ActionName", "ControllerName", new  id = Product.CategoryID, title = Product.ProductName , null)</button>
            </div>
         </div>
      
   

【讨论】：

您在类别中有值吗？

添加您的类别模型

我要求检查 @foreach 视图上的断点（类别中的 var 类别），您是否获得值

收到此错误：解析器错误说明：解析服务此请求所需的资源时出错。请查看以下特定的解析错误详细信息并适当地修改您的源文件。解析器错误消息：“@”字符后出现意外的“foreach”关键字。进入代码后，您无需在“foreach”之类的结构前面加上“@”。

【参考方案2】：

我做了一个CategoryLayout.cshtmlPartial 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>