How Do I Display Team Records One By One On A Next Button Click In Asp.Net Mvc

See more:

Javascript

MVC4

MVC5

on details page of my application i have a button named next , on the click of next button records of that table should be display on by one on based of its ids sequence , i am stuck with my code. please help how can i do that and where i am doing wrong. my code is working in case of logical operator but fails when it did not find the next id . for e.g suppose i have 1,2,3,4,5, in my database in such case its working fine but its failed when id 6 is missing. i know it is happening because i have done such as dataid++; please help and suggest

here is my controller for Next button click

public ActionResult Next(int dataid)
       {
           dataid++;
               ViewTeamList viewTeamList = new ViewTeamList();
                   teamService.GetTeamDetails(dataid);
                   return PartialView("_ViewTeamDetails", viewTeamList);
           }

here is my view Model

public class ViewTeamList
    {
public TeamDetails TeamDetails { get; set; }
    }

my view

@model WebApp.ViewModels.ViewTeamList

<script type="text/javascript">
 
    var teamid = '@Html.Raw(Json.Encode(Model.TeamDetails))';
    for (var i = 0; i < teamid.length; i++) {
        var teams = teamid[i];
        alert(teamid[i])
    }
</script>
<div id="DetailPla">
              <div class="row">
                    <div class="col-md-2 col-sm-2 pull-left">
                       @Model.TeamDetails.TeamName
                    </div>
                  <div class="col-md-4 col-sm-4 pull-left" style="color:forestgreen; font:xx-small 100 italic">
                       Active,Since @Html.DisplayFor(m => m.TeamDetails.CreatedOn)
                    </div>
                    <div class="col-md-5 col-sm-5 pull-right">
                        <div class="navi-but">
                            <a href="#" id="btnPrevious" data-id="@Model.TeamDetails.TeamId" class="details"><span class="previous">Previous</span></a>
                            <a href="#" class="details" data-id="@Model.TeamDetails.TeamId" id="btnNext"><span style="padding-right:7px">Next</span><span class="next"></span></a>
                <div class="col-md-1 col-sm-1 pull-right">
                            <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="~/Images/settings.png" /> </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="@Url.Action("Edit", "Team", new { id = Model.TeamDetails.TeamId })">Edit</a></li>
                    </ul>
                </li>
                 </div>
            </div>
                    </div>
                 </div>
            
                 <div class="row">
                    <div class="col-md-4 col-sm-4"> 
                       @Html.CustomLabel("lblTeam","CT Team Name:")
                    </div>
                     <div class="col-md-8 col-sm-8">
                          @Model.TeamDetails.TeamName
                     </div>
                 </div>

                <div class="row">
                   <div class="col-md-4 col-sm-4"> 
                        @Html.CustomLabel("lblDescription","Description:")
                    </div>
                     <div class="col-md-8 col-sm-8">
                           @Model.TeamDetails.Description
                     </div>
                 </div>


                 <div class="row">
                        <div class="col-md-4 col-sm-4"> 
                @Html.CustomLabel("lblCTUserCount","User Count") </div>
                        
                        <div class="col-md-8 col-sm-8 pull-left">
                             @Model.TeamDetails.UserCount
                         </div>
                    
                     </div>
      
</div>

note: TeamDetails is a model based on my stored procedure .