searching the data based on the selected value from drop downlist

Question

How can I search data in a grid view based on the value selected from a drop down list in asp.net MVC architecture? Please see code below:

 List<SelectListItem> monthlist = new List<SelectListItem>();
         monthlist.Add(new SelectListItem { Text = "Select Month", Value = "0" });
         monthlist.Add(new SelectListItem { Text = "1", Value = "1" });
         monthlist.Add(new SelectListItem { Text = "2", Value = "2" });
         monthlist.Add(new SelectListItem { Text = "3", Value = "3" });
         monthlist.Add(new SelectListItem { Text = "4", Value = "4" });
         monthlist.Add(new SelectListItem { Text = "5", Value = "5" });
         monthlist.Add(new SelectListItem { Text = "6", Value = "6" });
         monthlist.Add(new SelectListItem { Text = "7", Value = "7" });
         monthlist.Add(new SelectListItem { Text = "8", Value = "8" });
         monthlist.Add(new SelectListItem { Text = "9", Value = "9" });
         monthlist.Add(new SelectListItem { Text = "10", Value = "10" });
         monthlist.Add(new SelectListItem { Text = "11", Value = "11" });
         monthlist.Add(new SelectListItem { Text = "12", Value = "12" });
         ViewBag.month = monthlist;

         List<SelectListItem> yearlist = new List<SelectListItem>();
         yearlist.Add(new SelectListItem { Text = "Select Year", Value = "0" });
         yearlist.Add(new SelectListItem { Text = "2010", Value = "1" });
         yearlist.Add(new SelectListItem { Text = "2011", Value = "2" });
         yearlist.Add(new SelectListItem { Text = "2012", Value = "3" });
         yearlist.Add(new SelectListItem { Text = "2013", Value = "4" });
         yearlist.Add(new SelectListItem { Text = "2014", Value = "5" });
         yearlist.Add(new SelectListItem { Text = "2015", Value = "6" });
         yearlist.Add(new SelectListItem { Text = "2016", Value = "7" });
         yearlist.Add(new SelectListItem { Text = "2017", Value = "8" });
         yearlist.Add(new SelectListItem { Text = "2018", Value = "9" });
         yearlist.Add(new SelectListItem { Text = "2019", Value = "10" });
         yearlist.Add(new SelectListItem { Text = "2020", Value = "11" });

Answer 1

Not sure if you want to load data into the grid based on the values selected in drop down list box or you want to filter the items in the grid.

For case 1, one approach is:

a. Create a controller get action and corresponding view. Controller action will return view and it will render two combo box with a submit button. User will select values in each combo box and press submit button.

In below example I am passing a list of Organizations and asking user to select one. Based on selection I will display data for selected organization.

public class SelectOrganizationViewModel
{
    public int OrganizationId { get; set; }

    public IEnumerable<SelectListItem> Organizations { get; set; }
}

    public ActionResult SelectOrganizationForDataAccess()
    {
        var model = new SelectOrganizationViewModel();
        var list = this.organizationService.GetAllOrganizations();

            model.Organizations =
                list.Select(
                    o =>
                    new SelectListItem
                        {
                            Value = o.OrganizationId.ToString(CultureInfo.InvariantCulture),
                            Text = o.Name
                        });


        return View(model);
    }

b. Define a POST action and receive values. These values will be ids of selected items. In example below I am accepting selected value in model OrganizationId property.

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult SelectOrganizationForDataAccess(SelectOrganizationViewModel selectOrganizationViewModel)
    {
        return this.RedirectToAction("LoadGrid", new { organizationId = selectOrganizationViewModel.OrganizationId });
    }

c. Define a Get method that receives selected month and year value. Read the data to be displayed in grid based on selected values and return it to a view that displays the grid data.

    [HttpGet]
    public ActionResult LoadGrid(string selectedMonth, string selectedYear)
    {
       // Load data to be displayed in grid
       var model = new GridViewModel();
       return View(model);
    }

For case 2, I have used Kendo Grid and it is pretty efficient in terms of filtering. In your case you will still need to submit selected values (you can send Ajax request as well) and load filtered data.