时间戳

首页 > 解决方案 > 使用 ( Prev-Next ) 在多个视图之间导航

asp.net-mvc - 使用 ( Prev-Next ) 在多个视图之间导航

问题描述

我的网站上有全球 30 多个城市的信息。我正在将该站点从 Coldfusion 转换为 asp.net MVC。用户首先显示我网站上所有城市的列表，然后选择一个城市并显示信息。一旦他们显示了他们感兴趣的城市，我想让他们显示列表中的下一个或上一个城市。该列表可以按 3 种方式中的 1 种方式排序。有什么建议么？

示例：列表：Kure Beach, NC - Columbia, SC - Roswell, GA - Hokes Bluff, AL

用户选择 Roswell，访问是通过 id (public ActionResult CitiesDetails(int? id)) 显示 Roswell 的页面后，如果用户选择 Next，则显示 Hokes Bluff。从 Hokes Bluff，prev 回到 Roswell，prev 再次显示 Columbia。

列表也可以按州排序，所以霍克斯布拉夫 - 罗斯威尔 - 吴海滩 - 哥伦比亚

用户选择 Roswell，下一个是 Kure Beach，上一个是 Hokes Bluff。

我可以想办法在显示城市列表时使用构建的数组来做到这一点。问题是，现在要将数组从第一个视图传递到下一个视图并在用户会话期间保留它？viewbag 会为此工作吗？它会在多个视图中持续存在吗？

--------- 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);
        }

标签： asp.net-mvc

解决方案

我不知道您到底想如何构建它，但基本设计可能是：

[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 };
}

该模型可以是：

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

视图可能是：

@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>

我没有处理任何边缘情况，比如如果当前城市是列表中的第一个或最后一个……等等。但这应该让您了解如何开始。

推荐阅读