Click here to Skip to main content
14,843,683 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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:

C#
@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.
Posted
Comments
F-ES Sitecore 2-Mar-21 20:36pm
   
You need to find out exactly what the error is, if you look at the ajax call in the network section of the browser tools you can probably get more info. Your url is going to "/Delete/123", are you sure that resolves to an action?
msz900 2-Mar-21 20:39pm
   
The data is deleted but what I found is that issue is Page reloading, as it reloads but not completely.. because when I reload it manually "which I don't want" then no issue occurs.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900