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 class = "table" > @Html.DisplayNameFor(model => model.FName) @Html.DisplayNameFor(model => model.LName) @Html.DisplayNameFor(model => model.Email) @Html.DisplayNameFor(model => model.address.Details) @Html.DisplayNameFor(model => model.address.Country) @Html.DisplayNameFor(model => model.address.State) @foreach ( var item in Model) { "hidden" name= "stid" id= "stid" value= "@item.Id" /> @Html.DisplayFor(modelItem => item.FName) @Html.DisplayFor(modelItem => item.LName) @Html.DisplayFor(modelItem => item.Email) @Html.DisplayFor(modelItem => item.address.Details) @Html.DisplayFor(modelItem => item.address.Country) @Html.DisplayFor(modelItem => item.address.State) @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" }) } 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" ; } AllStudents @Html.ActionLink( "Create New" , "Create" ) "strecord" name= "strecord" > @{ Html.RenderPartial( "_StudentData" );} 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.

Sachin Singh · Answer

Do as follows step 1. Instead of creating a partial view retun view for all student list. // controller public ActionResult GetStudents() { var res = stude.GettAllStudents(); return View(res); } //view @model IEnumerable class = "table" > @Html.DisplayNameFor(model => model.FName) @Html.DisplayNameFor(model => model.LName) @Html.DisplayNameFor(model => model.Email) @Html.DisplayNameFor(model => model.address.Details) @Html.DisplayNameFor(model => model.address.Country) @Html.DisplayNameFor(model => model.address.State) @foreach (var item in Model) { "hidden" name= "stid" id= "stid" value= "@item.Id" /> @Html.DisplayFor(modelItem => item.FName) @Html.DisplayFor(modelItem => item.LName) @Html.DisplayFor(modelItem => item.Email) @Html.DisplayFor(modelItem => item.address.Details) @Html.DisplayFor(modelItem => item.address.Country) @Html.DisplayFor(modelItem => item.address.State) "btnDelete" data-Id= "@item.Id" >Delete "btnEdit" data-Id= "@item.Id" >Edit "btnDetails" data-Id= "@item.Id" >Details } Now for each action perform Ajax request , For Edit load a partial view , for Details load a partial view , for Delete just delete and load the whole html. // For Edit Ajax $( "#Edit" ).click(function () { var id = $( this ).attr( "data-Id" ); $.ajax({ method: "POST" , url: "Home/Edit/" + id, contentType: "application/json; charset=utf-8" , cache: false , success: function (data) { $( "#EditArea" ).html(data); }, error: function (err) { console.log( 'Failed to get data' + err); } }); }); // controller action for Edit public ActionResult Edit( int id) { var res = stude.GettAllStudents().Where(x=>x.Id==id); return partiaView(res); } // partial view for edit @model MyAppModels.StudentModel "/home/update" > Name: "text" value= "@model.Name" > .......other fields..... "submit" >Update // Ajax for Delete $( "#Delete" ).click(function () { var id = $( this ).attr( "data-Id" ); $.ajax({ method: "POST" , url: "Home/Delete/" + id, contentType: "application/json; charset=utf-8" , cache: false , success: function (data) { $( "#wrapper" ).Html(data); }, error: function (err) { console.log( 'Failed to get data' + err); } }); }); // Action for Delete public ActionResult Delete( int id) { var Student= stude.GettAllStudents().Where(x=>x.Id==id); _context.Students.Remove(Student); _context.SaveChanges(); return View( "GetStudents" ,res); }

Sachin Singh · Answer

@Zaffar , as long as it is about html or js , it is always visible in console because they are browser dependent and there is no way to hide html. i.e the reason sensitive information are stored on backend like in a configuration file. and yes the code is safe , if you will click ctrl+u in this page (c# corner) then you can check all it's html and JS , this doesn't mean it is not safe. for authorization we have different things like OAuth, windows auth, forms auth etc.

Zaffar Khan · Answer

Sachin Singh, The solution you provide worked but there is another issue, like when we open the console then we can see that on click the whole page and its code is showing. Is this the correct way? as I am new and confuse about the whole code is moving and showing in Console. Thanks.