How to bind web grid on dropdown selection!

@using TTF.Unitron.Controllers;
@model IEnumerable<TTF.Unitron.Models.CourseThemePortal>
@{
    ViewBag.Title = "ViewCourse";
    //Layout = "~/Views/Shared/_LayoutContentUpload.cshtml";
    //Layout = "~/Views/Shared/_Layout.cshtml";
    WebGrid grid = new WebGrid(Model);
}

<script type="text/javascript">
    $('.delete-book').live('click', function () {
        $.getJSON('/Methods/GetBook/' + $(this).attr('id'), function (data) {
            var book = data;
            $('#edit-bookId').val(book.BookId);
        });
        $('#action-type').val('delete');
        $("#edit").hide();
        $("#delete").show();
        $('#dialog-form-edit').dialog('open');
    });
</script>

<script type="text/javascript">
    $(function () {
        debugger;
        $('#modTheme_DataValueField').change(function () {
            var selectedValue = $(this).val();


            if (selectedValue != "") {
                $.ajax({
                    type: "GET",
                    contentType: "application/json; charset=utf-8",
                    url: '@Url.Action("CustomData", "ContentUpload")',
                    data: { "themeid": selectedValue },
                    dataType: "json",
                    beforeSend: function () {
                        //alert(id);
                    },
                    success: function (data) {
                        var items = "";
                        var i = 0;
                        //alert(data);
                        ////$.each(data, function (i, theme) {
                        ////    if (i == 0) {
                        ////        items += '<option value="">Please select....</option>';
                        ////        i = 1;
                        ////    }
                        ////    items += "<option value='" + theme.Value + "'>" + theme.Text + "</option>";
                        ////});

                        //$('#grid').html(data);

                    },
                    error: function (result) {
                        //alert('Service call failed: ' + result.status + ' Type :' + result.statusText);
                    }
                });
            }
        });
    });

</script>

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

<h2>ViewCourse</h2>
<div>
    @{
        ContentUploadController objContent = new ContentUploadController();
        var modlanguage = objContent.BindPortals();
        @Html.DropDownListFor(model => modlanguage.DataValueField, modlanguage as SelectList, "Show ALL Languages")

        var modTheme = objContent.BindThemes();
        @Html.DropDownListFor(model => modTheme.DataValueField, modTheme as SelectList, "Show ALL Themes")
        }
  
</div>
<div>
     @*@Html.DropDownListFor(model => mod1.Theme.PortalId, (SelectList)ViewBag.ddlLanguage as SelectList, "Please select....")*@
</div>
<div>
     @*@Html.DropDownListFor(m => m.ThemeId, new SelectList(ViewBag.Theme, "ID", "Name", ViewBag.SelTheme))*@
</div>
@grid.GetHtml(
    fillEmptyRows: true,
    alternatingRowStyle: "alternate-row",
    headerStyle: "grid-header",
    footerStyle: "grid-footer",
    mode: WebGridPagerModes.All,
    firstText: "<< First",
    previousText: "< Prev",
    nextText: "Next >",
    lastText: "Last >>",
    columns: new [] {
    grid.Column("Ordinal"),
    grid.Column("CourseName",header:"Course Name"),
    grid.Column("CourseDisplatTitle",header:"Description"),
    grid.Column("LanguageName",header:"Language"),
    grid.Column("ThemeName",header:"Theme"),
    grid.Column("LinkedCourses"),
    grid.Column("Enabled",header:"Active"),
    //grid.Column("FriendlyId", style:"hidecol",header:""),
    grid.Column(null,null, format: @<input type="hidden" name="IDHidden" value="@item.FriendlyId"/>),
   
    grid.Column("", 
     header: "Actions",
     format: @<text>
     @Html.ActionLink("Edit",   "EditCourse",   new { id=item.CourseId} )
      |
     @Html.ActionLink("Delete", "DeleteCourse", new { id=item.CourseId} , new { onclick="return confirm('Are you sure?');"})
     </text>
        )
        
})

<div id="grid">   </div>

In my code there are two drop downs one for theme and other for language so how to bind webgrid on selection of drop downs