Hello there! Currently, I am working on a straightforward online shopping MVC application. Within this application, there is a table containing three categories: Laptops, Mobiles, and Consoles. I have created a partial view that fetches these categories from the database and displays them in a list, with each category name inside a button.
Partial View: _Categories
@model OnlineShopping.MyViewModel
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
@foreach (Category item in Model.CategoriesV)
{
<button type="button" class="btn btn-secondary">
@item.CategoriesName
</button>
}
</div>
</div>
To display this partial view on the index page, I use the following code:
Index.cshtml
<div class="catmenu" style="display: none;">
@Html.Partial("_Categories", Model)
</div><br />
In addition, there is another table in the database called Products, which contains the product names and their corresponding category IDs from the category table.
For example:
Category table:
CategoryID = 1
CategoryName = Mobiles
Product table:
ProductID = 1
ProductName = Apple
CategoryID = 1
My goal is to create a functionality where clicking on a specific category button (e.g. laptops, consoles, mobiles) would redirect to the respective partial view showing all products with the same category ID. For instance, clicking on the laptops button would display all laptop products, while clicking on the consoles button would show products such as Xbox and PS, as they share the same category ID for consoles.
I hope my explanation was clear enough. Thank you for your assistance!