Step 1: Set Up Your Model
Create a model that represents the data you want to display. For example, if you have a Product model, it might look like this:
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string Category { get; set; }
}
Step 2: Create a ViewModel
Create a ViewModel that includes both the list of products and the categories for the DropDownList.
public class ProductViewModel
{
public IEnumerable<Product> Products { get; set; }
public IEnumerable<SelectListItem> Categories { get; set; }
public string SelectedCategory { get; set; }
}
Step 3: Populate the DropDownList in the Controller
In your controller, populate the DropDownList with categories and the list of products. Here’s how you might do it:
public ActionResult Index(string selectedCategory)
{
var model = new ProductViewModel
{
Categories = GetCategories(), // Method to get categories
Products = GetProducts(selectedCategory) // Method to get products based on selected category
};
return View(model);
}
private IEnumerable<SelectListItem> GetCategories()
{
// Fetch categories from the database or define them statically
return new List<SelectListItem>
{
new SelectListItem { Value = “”, Text = “All” },
new SelectListItem { Value = “Electronics”, Text = “Electronics” },
new SelectListItem { Value = “Clothing”, Text = “Clothing” },
// Add more categories as needed
};
}
private IEnumerable<Product> GetProducts(string category)
{
// Fetch products from the database, optionally filtering by category
var products = // Fetch from database
if (!string.IsNullOrEmpty(category))
{
products = products.Where(p => p.Category == category);
}
return products.ToList();
}
Step 4: Create the View
In your view, create a DropDownList and a GridView (using a table for simplicity) to display the products. Use jQuery to submit the form when the selection changes.
@model YourNamespace.ProductViewModel
@using (Html.BeginForm(“Index”, “YourController”, FormMethod.Get))
{
@Html.DropDownList(“selectedCategory”, Model.Categories, “Select Category”, new { @id = “ddlCategories” })
<input type=”submit” value=”Filter” />
}
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Category</th>
</tr>
</thead>
<tbody>
@foreach (var product in Model.Products)
{
<tr>
<td>@product.Id</td>
<td>@product.Name</td>
<td>@product.Category</td>
</tr>
}
</tbody>
</table>
@section Scripts {
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script>
$(document).ready(function () {
$(‘ddlCategories’).change(function () {
$(this).closest(‘form’).submit();
});
});
</script>
}
Step 5: Test Your Application
Run your application and try the filtering features. When you select a category from the DropDownList, the page should refresh and show a filtered list of products depending on that category.
Summary
This method filters a GridView (or equivalent table) in ASP.NET MVC using a DropDownList. The important stages are to build up your model, create a ViewModel, populate the DropDownList in the controller, then implement the view with jQuery to handle selection changes.
