Refresh ASP.NET MVC partial view using ajax

See more:

C#

ASP.NET

Ajax

MVC5

C#7.0

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.

What I have tried:

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 load the View as I want but the issue is that When I clicked on other record then it show an error" record not found" and this is because 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 Partialview on the already loaded view and because of that the error occur and stays until I refresh the page.

Any help will be appreciated.