how to bind the dropdown list with Webgrid in ASP.NET MVC3, Razor

In this tutorial i will show you that how can we create the dynamic webgrid on dropdown selected index change in MVC & razor using JSON ....



What we will do is that on dropdown change event we will call the jquery which will take the value of the selected item of dropdown list & will pass it to Action....


DropDown list is ...

@Html.DropDownListFor

(model => @Model.ListId, new SelectList(Model.Lists, "ListId", "Name"), "--Select a list--")

also we have to one empty Div like this...
<div id="grid">   </div>

Jquery is ....

    <script type="text/javascript">
        $(function() {
            $('#ListId').change(function() {
                var customDataListId = $("#ListId").val();
     $.getJSON('@Url.Action("Data")', { id: ListId}, function (result) {
                    var customDataList = $('#grid');
                    customDataList.empty();
                    customDataList.append(result.Data);
                });
            });
        });
    </script>

Where....  "#ListId" is Name property of the Dropdown list...

     ......    "Data" is action name 

     .....    "result" is result returned from the action .....  see bellow for action method

      .......   "#grid" is id of the empty grid

Now We will write ActionMethod....

[AcceptVerbs(HttpVerbs.Get)] 
        public JsonResult CustomData(int id)
        {
            // here I get the data from the database in result
            var result = _customDataListRepository.GetCustomDataWithId(id).ToList(); 

//now I create the new webgrid ,also i will pass result as it parameter
            var grid = new WebGrid(result);

//now i create the columns of the grid ....
var htmlString = grid.GetHtml

(tableStyle: "paramTable", htmlAttributes: new {id = "grid"},
                                          columns: grid.Columns(
                                              grid.Column("Name", "MyName"),
                                              grid.Column("CustomValue", "MyCustomValue")
                                              ));

// while returning i am passing this grid as htmlstring...
            return Json(new
                            {
                                Data = htmlString.ToHtmlString()
                            }
                , JsonRequestBehavior.AllowGet);
        } 

By doing this .... every time new grid will be created & old grid will be deleted .....

Also if you want to show whole table which u get from the database  then....

[AcceptVerbs(HttpVerbs.Get)] 
        public JsonResult CustomData(int id)
        {
            // here I get the data from the database in result
            var result = _customDataListRepository.GetCustomDataWithId(id).ToList();   

//now I create the new webgrid ,also i will pass result as it parameter
            var grid = new WebGrid(result); //now i create the columns of the grid ....
var htmlString = grid.GetHtml();// while returning i am passing this grid as htmlstring...
            return Json(new
                            {
                                Data = htmlString.ToHtmlString()
                            }
                , JsonRequestBehavior.AllowGet);
        }

Like this we can create dynamic webgrid using JSON with dropdown list