How to bind the Web Grid based on selection of Item from Dropdown in MVC4

OnChange Event of Dropdown code in JQuery:-

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $(".Main1").show();
        $(".Main2").hide();
    });


    $(document).ready(function () {
        $('#AddressList').change(function (e) {
            $(".Main1").hide();
            $(".Main2").show();
            var url = '@Url.Action("BindCompleteAddressDetailsbyAddressId")';
            $.get(url, { AddressId: $(this).val() }, function (result) {
                $('#MainData').children().remove();
                $('#output').html(result);
               
            });
        });

    });

 

In the View:-

<div id="divData">

    <table>

        <tr>

            <td>

                <table>

                    <tr>

                      

                        <td>

                            @Html.Label("Form Category", "Please select Category", htmlAttributes: new { @class = "tdLabel" })

                        </td>

                        <td>

                            @Html.DropDownList("AddressList", ViewBag.AddressTypes as SelectList, "----- Select Category -----")

                        </td>

                        <td>

                            @{

                                string message = TempData["Message"] as string;

                                if (TempData["Error"] != null)

                                {

                                    <div class="red">

                                        <p style="color:red;font-size:12px; font-family:Calibri;"><strong style="color:red;font-size:12px; font-family:Calibri;">Error:</strong> @TempData["Error"].ToString()</p>

                                    </div>

                                }

                                if (TempData["Success"] != null)

                                {

                                    <div class="green">

                                        <p style="color:blue;font-size:12px; font-family:Calibri;"><strong style="color:blue;font-size:12px; font-family:Calibri;">Success:</strong> @TempData["Success"].ToString()</p>

                                    </div>

                                }

                            }

                        </td>

                    </tr>

                </table>

            </td>

        </tr>

        <tr>

            <td>

                <div id="MainData" class="Main1">

                    @{

                        var grid = new System.Web.Helpers.WebGrid

                            (

                                source: Model,

                                canPage: true,

                                rowsPerPage: 10

                            );

                        grid.Pager(WebGridPagerModes.NextPrevious);

                        grid.SortDirection = SortDirection.Ascending;

                    }

                    @grid.GetHtml(

                        tableStyle: "webgrid-table",

                        headerStyle: "webgrid",

                        footerStyle: "webgrid-footer",

                        alternatingRowStyle: "webgrid-alternating-row",

                        rowStyle: "webgrid-row-style",

                    columns:

                    grid.Columns

                    (

                        grid.Column(columnName: "CompletedFormId", header: "CompletedFormId", canSort: true, style: "col-sm"),

                        grid.Column("FormName", "FormName", format: (i) => @Html.Raw("<span  title='" + i.FormDescription + "'>" + i.FormName + "</span>")),

                        grid.Column("Address1", "Address1"),

                        grid.Column("Address2", "Address2"),

                        grid.Column("Place", "Place"),

                        grid.Column("City", "City"),

                        grid.Column("State", "State"),

                        grid.Column("PostCode", "PostCode"),

                        grid.Column("CountryName", "CountryName"),

                        grid.Column("UserLogin", "UserLogin"),

                        )

                    )

                </div>

            </td>

        </tr>

       

        

         <tr>

            <td>

                <div id="output" class="Main2">

                    @Html.Partial("BindCompleteFormDetasilByCategoryId", Model)

                </div>

            </td>

        </tr>

    </table>

In C# Code :-

public ActionResult BindCompleteAddressDetailsbyAddressId(int AddressId)

        {

            var AddressReporsitory = new

AddressReporsitory 

();

            var AddressForms = new List<

AddressForms 

>();

         

                using (var db = new AddressContext())

                {

                   

AddressForms

=

AddressReporsitory 

.GetComppleteAddressDetailsByAddressId(AddressId);

                }

                return PartialView("BindCompleteFormDetasilByCategoryId", AddressForms);

               

            }

            

        }

BindCompleteAddressDetailsbyAddressId -- This is partial view which i have created   Then we have to add the same grid code in that Partial form.

Please find the Grid code in partial view (

BindCompleteAddressDetailsbyAddressId )

<table>

    <tr>

        <td align="left" style="vertical-align:top;">

            <div id="divgrid">

             

                 @{

                        var grid = new System.Web.Helpers.WebGrid

                            (

                                source: Model,

                                canPage: true,

                                rowsPerPage: 10

                            );

                        grid.Pager(WebGridPagerModes.NextPrevious);

                        grid.SortDirection = SortDirection.Ascending;

                    }

                    @grid.GetHtml(

                        tableStyle: "webgrid-table",

                        headerStyle: "webgrid",

                        footerStyle: "webgrid-footer",

                        alternatingRowStyle: "webgrid-alternating-row",

                        rowStyle: "webgrid-row-style",

                    columns:

                    grid.Columns

                    (

                        grid.Column(columnName: "CompletedFormId", header: "CompletedFormId", canSort: true, style: "col-sm"),

                        grid.Column("FormName", "FormName", format: (i) => @Html.Raw("<span  title='" + i.FormDescription + "'>" + i.FormName + "</span>")),

                        grid.Column("Address1", "Address1"),

                        grid.Column("Address2", "Address2"),

                        grid.Column("Place", "Place"),

                        grid.Column("City", "City"),

                        grid.Column("State", "State"),

                        grid.Column("PostCode", "PostCode"),

                        grid.Column("CountryName", "CountryName"),

                        grid.Column("UserLogin", "UserLogin"),

                        )

                    )

   

            </div>

        </td>

    </tr>

 

</table>