Filtering records in WebGrid using dropdownlist in MVC4

 Description:-

In this example we explain that how to Filtering records in WebGrid using dropdownlist in MVC or search record in Gridview based on Dropdown Selection.this post contains a dropdownlist with all country  names and a webgrid that will contain student’s details including their country that will be changed on the dropdownlist  selection change.

So when user select country India from dropdownlist then all record are bind into webgrid that country are India same as if user select country Pakistan from dropdown then all record of Pakistan country are bind into the webgrid.

Here we use Partial view for webgrid when dropdown change by user then partial view for student webgrid are showing with data.

To Show Example of How to Upload File in MVC Application then click here upload Image and bind to Gridview in MVC


How to upload File and Fetch file from SqlServer and bind to Gridview fetch file from Sqlserver and bind to Gridview

Student.cs:-

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace MvcApplication1.Models

{

    public class student

    {

        public List<SelectListItem> country_List { get; set; }

        public List<student> student_Grid { get; set; }

        public int studentId { get; set; }

        public string stud_Name { get; set; }

        public Nullable<int> Age { get; set; }

        public Nullable<decimal> Salary { get; set; }

        public Nullable<int> country_id { get; set; }

        public string country { get; set; }

    }

}

studentController.cs:-

using System;

using System.Collections.Generic;

using System.Data;

using System.Data.Entity;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MvcApplication1.Models;

namespace MvcApplication1.Controllers

{

    public class studentController : Controller

    {

        private studentDatabaseEntities1 db = new studentDatabaseEntities1();

        //

        // GET: /student/

        public ActionResult Index()

        {

            student _model = new student();

            //_model.student_Grid = db.tbl_student.ToList();

            var countrylist = db.tbl_country.ToList();

            _model.country_List = (from d in countrylist

                                   select new SelectListItem

                                   {

                                       Value = d.country_id.ToString(),

                                       Text = d.country_name

                                   }).ToList();

            var qq = (from e in db.tbl_student

                      join d in db.tbl_country on e.country_id equals d.country_id

                      select new student

                      {

                          country_id = e.country_id,

                          studentId = e.studentId,

                          stud_Name = e.stud_Name,

                          Age = e.Age,

                          country = d.country_name

                      }).ToList();

            _model.student_Grid = qq;

            return View("Index", _model);

        }

        public ActionResult Filter(string country)

        {

            int? country_id = Convert.ToInt32(country);

            var qq = (from e in db.tbl_student

                      join d in db.tbl_country on e.country_id equals d.country_id

                      where e.country_id == country_id

                      select new student

                      {

                          country_id = e.country_id,

                          studentId = e.studentId,

                          stud_Name = e.stud_Name,

                          Age = e.Age,

                          country = d.country_name

                      }).ToList();

            return PartialView("studentView", qq);

        }

    }

}

Index.cshtml:-

@model MvcApplication1.Models.student

@{

    ViewBag.Title = "Index";

}

<h2>Index</h2>

<table>

    <tr>

        <td>

            @Html.DropDownList("lstcountry", Model.country_List)

        </td>

    </tr>

    <tr>

        <td>

            <div id="studentViewGrid">

               @Html.Partial("studentView",Model.student_Grid)

            </div> 

        </td>

    </tr>

</table>

<script type="text/javascript">

    $('#lstcountry').change(function (e) {

        e.preventDefault();

        var url = '@Url.Action("Filter")';

        $.get(url, { country: $(this).val() }, function (result) {

            debugger;

            $('#studentViewGrid').html(result);

        });

    });

</script>

studentview.cshtml:-

@model List< MvcApplication1.Models.student>

@{

    ViewBag.Title = "studentView";

}

<h2>EmployeeView</h2>

<div id="gridposition" style="overflow: scroll; height: 300px; overflow-x: hidden;">

    @{

        var grid1 = new WebGrid(source: Model, canPage: true, rowsPerPage: 5, ajaxUpdateContainerId: "gridContent");

  

        @grid1.GetHtml(mode: WebGridPagerModes.All, tableStyle: "webGrid",

            headerStyle: "header",

            alternatingRowStyle: "alt",

            selectedRowStyle: "select",

            rowStyle: "description",

            htmlAttributes: new { id = "positionGrid" },

            fillEmptyRows: false,

            columns: grid1.Columns(

             grid1.Column("studentId", header: "studentId"),

             grid1.Column("stud_Name", header: "stud_Name"),

             grid1.Column("Age", header: "Age"),

             grid1.Column("country", header: " country "),

             grid1.Column("Salary", header: "Salary")))

    }

</div>