Navigating between multiple views using ( Prev-Next )

Question

My site has information on 30+ cities around the world. I am converting the site from Coldfusion to asp.net MVC. The user first displays a list of all of the cities on my site, then selects a city and the information is displayed. Once they have displayed the city they are interested in, I want to allow them to display the next or previous city that was on the list. The list can be sorted in 1 of 3 ways. Any suggestions?

Example: List: Kure Beach, NC - Columbia, SC - Roswell, GA - Hokes Bluff, AL

The user selects Roswell, access is by the id (public ActionResult CitiesDetails(int? id)) Once the page for Roswell is displayed, if the user selects Next, then display Hokes Bluff. From Hokes Bluff, prev back to Roswell, prev again displays Columbia.

List can also be sorted by state, so Hokes Bluff - Roswell - Kure Beach - Columbia

User select Roswell, next is Kure Beach, prev would be Hokes Bluff.

I can think of a way to do this with an array built when the list of city is displayed. Question is, now to pass the array from the fist view, to the next view and keep it during the users’ session? Would viewbag work for this?? Would it be persistent across multiple views??

--------- Controller ----------
--------- list all cities -------

namespace Lat34North.Controllers
{
    public class CitiesController : Controller
    {
        private Lat34NorthContext db = new Lat34NorthContext();

        // GET: Cities
        public ActionResult CitiesIndex(string sortOrder)
        {

            ViewBag.EastWestSortParm = string.IsNullOrEmpty(sortOrder)? "eastwest_desc" : "";
            ViewBag.CountrySortParm = sortOrder == "Country" ? "Country_Desc" : "Country";
            ViewBag.NameSortParm = sortOrder == "Name" ? "Name_Desc" : "Name";
            ViewBag.PopulationSortParm = sortOrder == "Population" ? "Population_Desc" : "Population";
            ViewBag.EastWestSortParm = sortOrder == "eastwest" ? "eastwest_Desc" : "eastwest";


        
            var cities = from s in db.Cities
                         where s.Display == true
                         select s;

            switch (sortOrder)
            {
                case "Country":
                    {
                        cities = cities.OrderBy(s => s.Country);
                        ViewBag.header = " ascending order by Country.";
                        break;
                    };

                case "Country_Desc":
                    {
                        cities = cities.OrderByDescending(s => s.Country);
                        ViewBag.header = " descending order by the Country.";
                        break;
                    };
               
               
                case "Name":
                    {
                        cities = cities.OrderBy(s => s.Name);
                        ViewBag.header = " ascending order by name of the city.";
                        break;
                    };

                case "Name_Desc":
                    {
                        cities = cities.OrderByDescending(s => s.Name);
                        ViewBag.header = " descending order by name of the city.";
                        break;
                    };
                case "eastwest_Desc":
                    {
                        cities = cities.OrderByDescending(s => s.EastWest);
                        ViewBag.header = " descending order from east (Bougtob, Algeria) to west (Fes, Morocco).";
                        break;
                    };
                case "eastwest":
                default:
                    {
                        cities = cities.OrderBy(s => s.EastWest);
                        ViewBag.header = " ascending order from west (Fes, Morocco) to east (Bougtob, Algeria).";
                        break;
                    };


             
            }



            //cities = cities.OrderBy(s => s.EastWest); 

            return View(cities.ToList());
        }



------------------- City Detail ------------
  public ActionResult USCitiesAL_Hokes_Bluff(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Cities cities = db.Cities.Find(id);
            if (cities == null)
            {
                return HttpNotFound();
            }
            return View(cities);
        }

Answer 1

I don't know how exactly you want to structure this, but a basic design might be:

[HttpGet("/City/Details/{id:int}")]
public IActionResult CitiesDetails(int id)
{
    var list = GetMyCityList();

    var currentIndex = list.FindIndex(x => x == id);

    var model = new CityDetailsViewModel
    {
        CurrentCityId = id,
        PreviousCityId = list.ElementAtOrDefault(currentIndex - 1),
        NextCityId = list.ElementAtOrDefault(currentIndex + 1)
    };

    return View("CityDetails", model);
}

//replace this with your data source (database, file, or maybe you just want to keep it as a private list)
private List<int> GetMyCityList()
{
    //6, 3, and 5 are random numbers I chose to represent the city ids
    return new List<int> { 6, 3, 5 };
}

The model could be:

public class CityDetailsViewModel
{
    public int? PreviousCityId { get; set; }
    public int CurrentCityId { get; set; }
    public int? NextCityId { get; set; }
}

The view could be:

@model MyProject.Models.CityDetailsViewModel

<a asp-controller="CityController" asp-action="CitiesDetails" asp-route-id="@Model.PreviousCityId">Previous</a>
<a asp-controller="CityController" asp-action="CitiesDetails" asp-route-id="@Model.NextCityId">Next</a>

I didn't handle any edge cases like what to do if the current city is the first or last in the list...etc. But this should give you an idea for how to start.