WebGrid not refreshing inside Partial View

Question

I have a WebGrid inside a Partial View as follows:

<div class="box box-primary" id="gridSharedPractice">
    <div class="box-header with-border col-sm-12">
        <h3 class="box-title" id="PracticeAreasSharedHeading" name="ShareTemplateHeading">Practice Areas Shared </h3>
    </div>
<div class="box-body">
    <div id="PracticeGrid">
        @{
            var TestModel = Model.STAllPractice;
            var grid3 = new WebGrid(TestModel as IEnumerable<ASP_Upload_Version_1.Models.Share_Template>, canPage: false, canSort: false, ajaxUpdateContainerId: "PracticeGrid");
        }
    </div>

        @grid3.GetHtml(tableStyle: "table table-sm table-striped table-condensed",
                          htmlAttributes: new { @id = "GridSharedPractice", @class = "table table-sm table-striped table-bordered table-condensed", @style = "width:100%" },
                          columns: grid3.Columns(
                             grid3.Column("ShareID", "Share ID", null, "hidden-column"),
                             grid3.Column("TemplateName", "Template Name"),
                             grid3.Column("PracticeAreaAll", "Practice Area"),
                             grid3.Column(format: @<text>
                                    <a data-title="Are you sure to deactivate this Input?" onclick="DeleteRow(@item.ShareID)" class="delete"><i class="fa fa-trash" style="color:red"></i></a></text>, header: "Remove")));

</div>  
</div>

and a ajax call to delete any row from the webgrid.

    function DeleteRow(ShareID) {
        $.ajax({
            url: '/ShareTemplate/UnShare/',
            data: "{ 'Type': 'Practice','ShareID': '" + ShareID + "'}",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                alert(data);
                $('#GridSharedPractice').html(data);                
                alert("disnt bind");
            },
            error: function (response) {
                //alert(response.responseText);
            },
            failure: function (response) {
                //alert(response.responseText);
            }
        });
    }

</script>

The deletion part works fine, but after deletion, I can not get to refresh the WebGrid.

This is how the partial view is called in the main view:

@{Html.RenderAction("PracticeGridPartialView", "ShareTemplate");}

Answer 1

You can use this in your ajax call to load the Partial View

success: function (data) {
                $('#PartialGridsPractice').load('/<Controller>/<Action returning Partial View>');
            },