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

admin

  • Frank

    thanks for you post, this is what i’m looking for my app =)

  • Ram

    Hi
    I have a question. I have to format one of the column as a checkbox. How do you add the code for that. I was creating the grid in partial view and here is the code for checkbox column.

    columns: grid.Columns(
    grid.Column(header: “Reassign?”, format:
    @

    )