How can I filter my database records on ASP.NET by a dropdownlist? - asp.net

Question

I'm trying to filter my records from a table created with Entity Framework where I want it to show my records with a specific condition.
I have this controller called ProductoesController, which is from the model Productos, that has the following attributes:
[DatabaseGenerated(DatabaseGeneratedOption.Identity)]
public int idProducto { get; set; }
public String nombre { get; set; }
public String descripcion { get; set; }
public float precio { get; set; }
//ENUMS ---------------------
[EnumDataType(typeof(Talle))]
public Talle talle { get; set; }
[EnumDataType(typeof(ColorProducto))]
public ColorProducto ColorProd { get; set; }
[EnumDataType(typeof(CategoriaProducto))]
public CategoriaProducto CategoriaProd { get; set; }
public int CurrentNegocioId { get; set; }
public Negocio Negocio { get; set; }
This is the Enum I want to use to filter the products I loaded:
namespace MVCShopping.Models {
public enum ColorProducto {
ROJO,
ROSA,
VERDE,
AMARILLO,
NEGRO,
BLANCO,
GRIS
}
}
I had created a Viewbag.colors in the Index method of the controller where it creates a list with the loaded Enums
public async Task<IActionResult> Index()
{
ViewBag.colors = new SelectList(Enum.GetNames(typeof(ColorProducto)), ColorProducto.AMARILLO);
return View(await _context.Producto.ToListAsync());
}
My Index.cshtml has the following content:
#model IEnumerable<MVCShopping.Models.Producto>
#{
ViewData["Title"] = "Index";
}
<h1>Index</h1>
<p>
<a asp-action="Create">Create New</a>
</p>
<table class="table">
#Html.DropDownList("ColorProducto", (ViewBag.colores as SelectList))
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.nombre)
</th>
<th>
#Html.DisplayNameFor(model => model.descripcion)
</th>
<th>
#Html.DisplayNameFor(model => model.precio)
</th>
<th>
#Html.DisplayNameFor(model => model.talle)
</th>
<th>
#Html.DisplayNameFor(model => model.ColorProd)
</th>
<th>
#Html.DisplayNameFor(model => model.CategoriaProd)
</th>
<th>
#Html.DisplayNameFor(model => model.CurrentNegocioId)
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.nombre)
</td>
<td>
#Html.DisplayFor(modelItem => item.descripcion)
</td>
<td>
#Html.DisplayFor(modelItem => item.precio)
</td>
<td>
#Html.DisplayFor(modelItem => item.talle)
</td>
<td>
#Html.DisplayFor(modelItem => item.ColorProd)
</td>
<td>
#Html.DisplayFor(modelItem => item.CategoriaProd)
</td>
<td>
#Html.DisplayFor(modelItem => item.CurrentNegocioId)
</td>
<td>
<a asp-action="Edit" asp-route-id="#item.idProducto">Edit</a> |
<a asp-action="Details" asp-route-id="#item.idProducto">Details</a> |
<a asp-action="Delete" asp-route-id="#item.idProducto">Delete</a>
</td>
</tr>
}
</tbody>
</table>
I added the #Html.DropDownList("ColorProducto", (ViewBag.colores as SelectList)) line, but I don't know how to configure this to filter my records by my selection.
This is a screenshot of how it is showing:
How do I code the records of the table to show up only if ColorProd has the same value than that DropDownList?
Thank you so much!

Answer 1

Table In Html
<div class="table-responsive">
<table class="table table-hover table-bordered mb-0 text-center" id="detailsTable">
<thead style="background-color:#f1f1f1;">
<tr>
<th style="width:10%;">ItemID</th>
<th style="width:40%">Item Name</th>
<th hidden="hidden" style="width:8%;">Unite No</th>
<th style="width:10%">Unite Name</th>
<th hidden="hidden" style="width:10%">F</th>
<th style="width:10%">Count</th>
<th style="width:10%">Price</th>
<th style="width:10%">Total</th>
</tr>
</thead>
<tbody id="contacts"></tbody>
</table>
</div>
Use Ajax in view
$('#BLDItemID').bind('change', function () {
$("#detailsTable tbody tr").remove();
$('#BLDCount').val(1);
$("#ITMNM").val('');
$("#ItemEXP").val('');
$.ajax({
url: '#Url.Action("RefrishItemList", "Manufacturings")',
type: "GET",
contentType: "application/json; charset=utf-8",
data: { id: $("#BLDItemID").val() },
dataType: "json",
success: function (data) {
var row = '';
var PRS = '';
var dtExpert = '';
$.each(data, function (index, item) {
row += '<tr><td>' + item.Id + '</td><td>' + item.Name + '</td><td hidden="hidden">' + item.Unite + '</td><td>' + item.UnitName + '</td><td hidden>' + item.UnTOT + '</td><td>' + item.Count + '</td><td>' + item.Price + '</td><td>' + item.Total + '</td></tr>';
PRS = item.ITPrice;
dtExpert = item.ITDTEXP;
});
$("#contacts").html(row);
$("#BLDPrice").val(PRS);
$("#ItemEXP").val(dtExpert);
$("#ITMNM").val($("#BLDItemID option:selected").text());
},
error: function (result) {
alert("Error");
}
});
})
in Control
public JsonResult RefrishItemList(int? id)
{
string DTExprVL = "";
var ITMPrice = db.TBLItems.Where(s => s.ItemID == id).Select(x => x.ItemInvoicePR).FirstOrDefault();
var EXPDT = db.TBLItems.Where(s => s.ItemID == id).Select(x => x.ItemNoticeDateActive).FirstOrDefault();
if (EXPDT == true)
{
DTExprVL = "1";
}
else
{
DTExprVL = "0";
}
var CusList = db.TBLColecteItems.Include(t => t.TBLItem).Include(t => t.TBLItem1).Where(s => s.TMainItemID == id).Select(x => new
{
Id = x.TBLItem1.ItemID,
Name = x.TBLItem1.ItemName,
Unite = x.TUnite,
UnitName = x.TBLUnite.UnitesName,
UnTOT = x.TUnTOT,
Count = x.TCount,
Price = x.TPrice,
Total = x.TTotal,
ITPrice = ITMPrice,
ITDTEXP = DTExprVL
}).ToList();
return Json(CusList, JsonRequestBehavior.AllowGet);
}
just Change the Parmeters