How to iterate IEnumerable Model using button in MVC 5 View - entity-framework

Question

I have 30 records in the IEnumerable in the view. I want to iterate each one of them using button. Like when I click "Next" button, the next record of the model should be displayed.
I am using MVC 5 and Entity framework.

Answer 1

Suppose you have 30 records and you want to display 5 records at time in view.
filter 5 records at a time using following manner.
public class StudentDetail
{
string StudentID;
string StudentName;
}
public List<StudentDetail> GetData(List<StudentDetail> lst, int start, int length)
{
List<StudentDetail> result = new List<StudentDetail>();
for(int i = start; i < start + length; i++)
{
result.Add(lst[i]);
}
return result;
}
then return data in view:
<P>
#foreach(lst in Model.Details)
{
<P>lst.StudentID</P>
<P>lst.StudentName</P>
}
<P>
on "Next" click you need to increment the start counter. Now you can take start counter in query string
#Html.ActionLink("Next", "Next", "StudentDetails", new { #start = Model.Start + Model.Length })
Something like that, Please let me know, if any issue found. Thanks :)

Answer 2

The best way I can think of to achieve this is to render them all to the view at once (using a foreach in your view), but hide all but the first one using some simple CSS.
Then use something like jQuery to listen for the button to be pressed, and when it is clicked, use jQuery to hide the currently displayed item, and make the next one visible.
The nice thing about this approach is that the user will not need to wait for the page to re-load after each click.