ASP.NET MVC partial views : auto sorting and AJAX refreshes

I am just starting my ASP.NET MVC journey after years as a WebForms person, so bear with me. I am trying to understand what exactly is happening here, and how to get my intended behaviour.

I have a view, it contains a partial view (just the one for now, but there will be more). The partial view contains a grid only. When the main view is loaded, the partial view is also loaded, and with autoSortAndPage set to true, the grid is automatically sortable.

After an action, such as adding a row or deleting a row, I use ajax to refresh the partial view. After this is done, when a column header is clicked, the sort no longer work, in fact the grid disappears and fails to load entirely. I can see the 'links' for the column headers changed, but I'm trying to under why:

View

<p>
    <button onclick="javascript: RefreshReferenceTypes();">test</button>
</p>
<div id="DivReferenceTypes">
    @Html.Partial("_ReferenceTypes", Model.ReferenceTypesList)
</div>
<script>
    function RefreshReferenceTypes() {
        $.ajax({
            url: '@Url.Action("LoadReferenceTypes", "Configuration")',
            type: 'GET',
            dataType: "html",
            async: false,
            success: function (result) { $('#DivReferenceTypes').html(result); },
            error: function (xhr, status, error) { alert(xhr.responseText);}
        });
    }
</script>

Partial View

@{
    if (Model != null)
    {
        WebGrid grid = new WebGrid(null, rowsPerPage: 10, ajaxUpdateContainerId: "DivReferenceTypes");
        grid.Bind(Model, autoSortAndPage: true, rowCount: 10);
        @grid.GetHtml(tableStyle: "table table-bordered",
            mode: WebGridPagerModes.All,
            firstText: "<< First",
            previousText: "< Prev",
            nextText: "Next >",
            lastText: "Last >>",
            columns: grid.Columns(
            grid.Column("ReferenceTypeKey", "Key"),
            grid.Column("ReferenceTypeName", "Reference Name"),
            grid.Column("AdditionalDetails", "Additional Details"),
            grid.Column(header: "Action", format: @<a data-value="@item.ReferenceTypeKey" class="btnEdit" href="javascript:DeleteEntry('@item.ReferenceTypeKey');">Delete</a>)))
    }
}

Controller:

    [HttpGet]
    public ActionResult Index()
    {
        ConfigurationModel Model = new ConfigurationModel();
        return View(Model);
    }

    [HttpGet]
    public ActionResult LoadReferenceTypes()
    {
        ConfigurationModel Model = new ConfigurationModel();
        return PartialView("_ReferenceTypes", Model.ReferenceTypesList);
    }

Model

public class ConfigurationModel : GameServiceManager.IGameManagerCallback
{
    [AllowHtml]
    public List<GameServiceManager.ReferenceTypes> ReferenceTypesList { get; set; }

    public ConfigurationModel()
    {
        InstanceContext instanceContext = new InstanceContext(this);
        GameServiceManager.IGameManager sc = new GameServiceManager.GameManagerClient(instanceContext);
        ReferenceTypesList = sc.ReferenceTypes_ListAll().ToList();
    }
}

Before AJAX sort link:

After AJAX sort link:

Any help explaining what's going on behind the scenes with this auto sorting would be helpful, and perhaps some direction on the best way to implement sorting for a partial view grid.