Получение данных из базы данных SQL в выпадающий список html hover в Bootstrap MVC
Я работаю на моем 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; }
}
}
Ваш цикл 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>
}
}
я сделал 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>
}