Refresh Asp.Net MVC Partial View using Ajax

Question

I am using ajax call for deleting the record, and after success I want to refresh the table record but without loading the whole page. So I have created a Partial View for that.

 

My Partial View Code:

@model IEnumerable<MyAppModels.StudentModel>

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.FName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.LName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Email)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.address.Details)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.address.Country)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.address.State)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                <input type="hidden" name="stid" id="stid" value="@item.Id" />
                @Html.DisplayFor(modelItem => item.FName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.LName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Email)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.address.Details)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.address.Country)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.address.State)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.Id }, new { Id = item.Id, Name = "del" })
            </td>
        </tr>
    }

</table>

My Controller Code:

public ActionResult AStudents()
{
var res = stude.GettAllStudents();
return PartialView("_StudentData",res);
}

My Ajax/Js Code:

// Delete record
var name=document.getElementsByName( "del" );
$(name).click(function (e) {
    e.preventDefault();
    var id = this.id;
    var url="Home/AStudents"
    $.ajax({
        method: "POST",
        url: "Delete/" + id,
        contentType: "application/json; charset=utf-8",
        cache: false,
        async: true,
          data: JSON.stringify(id),
        success: function (data) {

            $("#strecord").load("AStudents");
            console.log(data);

        },
        error: function (err) {
            console.log('Failed to get data' + err);

        }
    });
});

My View where I am calling the Partial View:

@{
    ViewBag.Title = "AllStudents";
}

<h2>AllStudents</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<div id="strecord" name="strecord">
    @{ Html.RenderPartial("_StudentData");}
</div>

Output:

 

When I clicked the delete link, it deletes the record and loads the View as I want but the issue is that When I clicked on another record then it shows an error" record not found" and this is because of the view overload on the First view instead of refreshing it. I don't know how to refresh it, instead of overload. From overload, I mean that my ajax code load a Partial view on the already loaded view, and because of that the error occurs and stays until I refresh the page.

 

Any help will be appreciated.