title: Fetching data from SQL database to html hover dropdown list in Bootstrap MVC
body: <p>i am working on my <strong>MVCOnlineShop</strong> , this what i made so far:
  <a href="https://i.stack.imgur.com/IRY1W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IRY1W.png" alt="Image"></a>
  i wrote a code before in a <code>View</code> so i can link the products to their category and it worked , all categories and products database are in an <code>SQL server</code>. this is the code:</p>
  
  <pre><code>@model MVCOnlineShop.Models.Category
  
  @{
      ViewBag.Title = "Browse";
  }
  &lt;h2&gt;Browsing Category: @Model.CategoryName&lt;/h2&gt;
  &lt;ul&gt;
      @foreach (var Product in Model.Products)
      {
          &lt;li&gt;
              @Html.ActionLink(Product.ProductName,
  "Details", new { id = Product.CategoryID })
          &lt;/li&gt;
      }
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Question:</strong> Now how can i use this code to show products under their category in a <code>bootstrap</code> drop down list? so i want to <strong>click</strong> or <strong>hover</strong> on games for example and i want to get a drop down list that have game 1, game 2, game 3. thanks! and this is what i tried in my <code>_Layout.cshtml</code>:</p>
  
  <pre><code>@using MVCOnlineShop.Models;
  
  @{
      // stores the Session content in a var
      var Categories = Session["Categories"] as List&lt;Category&gt;;
  }
  
  @*Checks if the Session variable is correct*@
  @if (Categories != null)
  {
      &lt;ul class="nav navbar-nav"&gt;
          @*For each category in the Session var, display the link*@
  
              @foreach (var Category in Categories)
              {
                  &lt;div class="dropdown"&gt;
                      &lt;button class="dropbtn"&gt;@Html.ActionLink(Category.CategoryName, "Browse", new { Category = Category.CategoryName })&lt;/button&gt;
                  &lt;div class="dropdown-content"&gt;
      &lt;a href="#"&gt;Link 1&lt;/a&gt;
      &lt;a href="#"&gt;Link 2&lt;/a&gt;
      &lt;a href="#"&gt;Link 3&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
              }
  
  &lt;/ul&gt;
  }
  </code></pre>
  
  <p>and this is the category class from <code>SQL</code>, <code>Category.cs</code>:</p>
  
  <pre><code>namespace MVCOnlineShop.Models
  {
      using System;
      using System.Collections.Generic;
  
      public partial class Category
      {
          public Category()
          {
              this.Products = new HashSet&lt;Product&gt;();
          }
  
          public int CategoryID { get; set; }
          public string CategoryName { get; set; }
          public string Description { get; set; }
  
          public virtual ICollection&lt;Product&gt; Products { get; set; }
      }
  }
  </code></pre>