How to refresh a page after update
Question
Answers
All replies
-
User665608656 posted
Hi Baze,
I have a view (index) with a partial view. I have created a standard update page - but when I click edit on the index page - after I make a change and hit save it returns to the index page but I don't see my changes on the partial view until I hit refresh. How can I see these changes upon the page reloading from the save?Based on your description ,I created a functional page that is the same as what you need.
Because I don't know your detailed code, I'm not sure why you didn't refresh the data, however you could refer to my example.
In my example, I used bootstrap modal popup to display the part I was trying to edit data.
At the same time, I use ajax to call edit method in controller :
This is my controller:
public class C_1010_2160513Controller : Controller { // GET: C_1010_2160513 private EntityData db = new EntityData(); public ActionResult Index() { return View(db.Personal_Details.ToList()); } public PartialViewResult Edit(int PersonID) { Personal_Details persontable = db.Personal_Details.Find(PersonID); return PartialView(persontable); } [HttpPost] public ActionResult Edit(Personal_Details persontable) { if (ModelState.IsValid) { Personal_Details persontable_new = db.Personal_Details.Find(persontable.ID); persontable_new.ItemName = persontable.ItemName; persontable_new.Rate = persontable.Rate; persontable_new.Supplier = persontable.Supplier; db.SaveChanges(); return RedirectToAction("Index"); } return View(persontable); } }Index view:
@model IEnumerable<MVC_Cases.Models.Personal_Details> @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <script src="~/Scripts/jquery-3.3.1.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> <script type="text/javascript"> $(function() { $('#editModal').modal(); $(".edit").click(function(){ event.preventDefault(); $.ajax({ url: '/C_1010_2160513/Edit?PersonID=' + $(this).attr("id"), // The method name + paramater success: function(data) { $('#modalWrapper').html(data); // This should be an empty div where you can inject your new html (the partial view) $('#editModal').modal("show"); } }); }); }); </script> </head> <body> <div id="main_div"> <h2>Employees Data</h2> <table style="width:500px;text-align:center;border-collapse:collapse" border="1" class="table-primary"> <tr> <th> @Html.DisplayNameFor(model => model.ID) </th> <th> @Html.DisplayNameFor(model => model.ItemName) </th> <th> @Html.DisplayNameFor(model => model.Rate) </th> <th> @Html.DisplayNameFor(model => model.Supplier) </th> <th></th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.ID) </td> <td> @Html.DisplayFor(modelItem => item.ItemName) </td> <td> @Html.DisplayFor(modelItem => item.Rate) </td> <td> @Html.DisplayFor(modelItem => item.Supplier) </td> <td> <a id="@item.ID" class="edit btn btn-primary"> Edit </a> </td> </tr> } </table> </div> <div id="modalWrapper"> </div> </body> </html>Edit partial view:
@model MVC_Cases.Models.Personal_Details @using (Html.BeginForm("Edit", "C_1010_2160513", FormMethod.Post)) { <div class="modal fade" id="editModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Edit</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <form> <div class="editor-label"> @Html.LabelFor(model => model.ID): @Html.DisplayFor(model => model.ID) @Html.HiddenFor(model => model.ID) </div> <div class="editor-label"> @Html.LabelFor(model => model.ItemName) </div> <div class="editor-field"> @Html.EditorFor(model => model.ItemName) @Html.ValidationMessageFor(model => model.ItemName) </div> <div class="editor-label"> @Html.LabelFor(model => model.Rate) </div> <div class="editor-field"> @Html.EditorFor(model => model.Rate) @Html.ValidationMessageFor(model => model.Rate) </div> <div class="editor-label"> @Html.LabelFor(model => model.Supplier) </div> <div class="editor-field"> @Html.EditorFor(model => model.Supplier) @Html.ValidationMessageFor(model => model.Supplier) </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button> <button type="submit" class="btn btn-primary">Save</button> </div> </div> </div> </div> }
Here is the result of this work demo:
Best Regards,
YongQing.
