Binding Gridview with drop down list selection MVC 5

Question

I have a drop down list (Cities) and on selection it should be able to bind a Grid View in MVC 5

i am able to bind the drop down list and grid view but unable to handle the select event of Drop Down list. I dont know how to proceed on this I dont want to use Jquery. Below is my code

// BELOW IS THE DROP DOWN LIST CODE


            @using (Html.BeginForm("BindGridView", "FacebookConfig", FormMethod.Post, new { id = "Id" }))
            {
                @Html.DropDownList("Cities")    
            }

// ON SELECTION OF ABOVE I SHOULD BE ABLE TO BIND THE BELOW GRID VIEW





    @if (Model != null)
    {

        foreach (var item in Model)
        {
        
            
                @Html.DisplayFor(modelItem => item.Keywords)
            
            
                @Html.ActionLink("Edit", "Edit", new { id = item.Id })
            
            
                @Html.ActionLink("Delete", "Delete", new { id = item.Id })

// BELOW IS THE CODE IN CONTROLLER

  public ActionResult Index()
    {
        var cities = So.BL.City.GetCities();

        ViewBag.Cities = new SelectList(cities, "Id", "Name");

        return View();
    }
      [HttpPost]
    public ActionResult BindGridView(int id)
    {
        var filter = So.BL.FacebookFilter.SelectFBApprovalFilters(id);
        return View(filter);
    }

Venkat Venkat · Accepted Answer · 2014-10-15T18:42:03

If you want to perform an operation on dropdown on change event you must go for javascript/jquery for handling the element events. To satisfy your requirement you may do as,

Create a <div> to hold the new grid view to be created with the id to select.
Create a partial view that generate the grid view.
Create a function either in jquery/javascript for dropdown list on change event.
From the function call an action method using ajax.
Create an action method which would do what ever the functionality you want to do and return the partial view with the model required for generating the grid view.
Finally on success method of ajax call, write the output response to the inner html of the <div>.

If definitely not going for jquery or javascript then do a post back and from the selected dropdown value in the post method fetch the data for grid view and bind it to the grid. Note here the form submission will not occur on dropdown selection must use a submit button. Also show the grid based Model if not null.

Choose which one you likely to adopt.

Binding Gridview with drop down list selection MVC 5

1 Answers