BeginCollectionItem Maintaining MVC 5 Page Position

Question

I am trying to find a better method (any at the moment) in which I can save the scroll position of the page when removing an item from the list using beginCollectionItem.

Initially, I thought this was due to my other javascript / jQuery code in my main project (this can still be a factor), but when I recreated the situation in a new project using only BCI code (index, two partial, controller and model) , when you delete an item from one of the lists, the page will return to the top again, I really need (need) to stop this, how can I achieve this?

I saw this question and the main answer, which I do not know how to implement correctly or even if it is still valid, the second answer using the below JS I tested in my _Layout , in budles , which did not budles problem.

JQuery test

 $(document).scroll(function () { localStorage['page'] = document.URL; localStorage['scrollTop'] = $(document).scrollTop(); }); $(document).ready(function () { if (localStorage['page'] == document.URL) { $(document).scrollTop(localStorage['scrollTop']); } }); 

Part-time student

 @model UsefulCode.Models.Person <div class="editorRow"> @using (Html.BeginCollectionItem("students")) { <div class="ui-grid-c ui-responsive"> <div class="ui-block-a"> <span> @Html.TextBoxFor(m => m.firstName) </span> </div> <div class="ui-block-b"> <span> @Html.TextBoxFor(m => m.lastName) </span> </div> <div class="ui-block-c"> <span> <span class="dltBtn"> <a href="#" class="deleteRow">X</a> </span> </span> </div> </div> } </div> 

Private teacher

 @model UsefulCode.Models.Person <div class="editorRow"> @using (Html.BeginCollectionItem("teachers")) { <div class="ui-grid-c ui-responsive"> <div class="ui-block-a"> <span> @Html.TextBoxFor(m => m.firstName) </span> </div> <div class="ui-block-b"> <span> @Html.TextBoxFor(m => m.lastName) </span> </div> <div class="ui-block-c"> <span> <span class="dltBtn"> <a href="#" class="deleteRow">X</a> </span> </span> </div> </div> } </div> 

Index

 @{ Layout = "~/Views/Shared/_Layout.cshtml"; } @model UsefulCode.Models.Register <div id="studentList"> @using (Html.BeginForm()) { <div id="editorRowsStudents"> @foreach (var item in Model.students) { @Html.Partial("StudentView", item) } </div> @Html.ActionLink("Add", "StudentManager", null, new { id = "addItemStudents", @class = "button" }); } </div> <div id="teacherList"> @using (Html.BeginForm()) { <div id="editorRowsTeachers"> @foreach (var item in Model.teachers) { @Html.Partial("TeacherView", item) } </div> @Html.ActionLink("Add", "TeacherManager", null, new { id = "addItemTeachers", @class = "button" }); } </div> @section scripts { <script type="text/javascript"> $(function () { $('#addItemStudents').on('click', function () { $.ajax({ url: '@Url.Action("StudentManager")', cache: false, success: function (html) { $("#editorRowsStudents").append(html); } }); return false; }); $('#editorRowsStudents').on('click', '.deleteRow', function () { $(this).closest('.editorRow').remove(); }); $('#addItemTeachers').on('click', function () { $.ajax({ url: '@Url.Action("TeacherManager")', cache: false, success: function (html) { $("#editorRowsTeachers").append(html); } }); return false; }); $('#editorRowsTeachers').on('click', '.deleteRow', function () { $(this).closest('.editorRow').remove(); }); }); </script> } 

Answer 1

Besides the fact that I hurt myself for how tight I feel, I feel relieved. Addition return false; to the deletion action allows this, it was present in the add action, but looking at it for several hours, I simply assumed that it exists.

If there is a better answer, turn it on, as this will only work in this section of code.

Below is the response code:

 $('#addItemStudents').on('click', function () { $.ajax({ url: '@Url.Action("StudentManager")', cache: false, success: function (html) { $("#editorRowsStudents").append(html); } }); return false; }); $('#editorRowsStudents').on('click', '.deleteRow', function () { $(this).closest('.editorRow').remove(); return false; // add this });