ViewComponent 导航按钮不起作用

Question

我正在使用 .NET Core MVC。我尝试创建的导航链接似乎无法正常工作。我有以下型号：

public class Model
    {
        public long ModelID { get; set; }
        public string Name { get; set; }
        public string SolverType { get; set; } 
        public string ProgramType { get; set; } 

    }

传递的这个 ViewModel 是：

public class ModelsListViewModel
    {
        public IEnumerable<Model> Models { get; set; }
        public PagingInfo PagingInfo { get; set; }
        public string CurrentProgramType { get; set; }
    }

视图是：

@model IEnumerable<string>

    <a class="btn btn-block btn-outline-secondary"asp-action="Index"
       asp-controller="Home" asp-route-type="">
        Home
    </a>
    //THESE DON'T LINK APPROPRIATELY TO THE CONTROLLER
    @foreach (string type in Model)
    {
        <a class="btn btn-block btn-outline-secondary"
           asp-action="Index" asp-controller="Home"
           asp-route-type="@type"
           asp-route-modelPage="1">
            @type
        </a>
    }

Home 控制器的动作是：

 public ViewResult Index(string type, int modelPage = 1)
            => View(new ModelsListViewModel
            {
                Models = repository.Models
                    .Where(m => type == null || m.ProgramType == type)
                    .OrderBy(m => m.ModelID)
                    .Skip((modelPage - 1) * PageSize)
                    .Take(PageSize),
                PagingInfo = new PagingInfo
                {
                    CurrentPage = modelPage,
                    ItemsPerPage = PageSize,
                    TotalItems = type == null ?
                        repository.Models.Count() :
                        repository.Models.Where(e =>
                            e.ProgramType == type).Count()
                },
                CurrentProgramType = type
            });

当页面呈现视图组件按钮时显示，但链接不起作用或悬停时显示。他们似乎没有在控制器中调用任何操作。

编辑：这是我的Startup.cs 文件中定义的路由：

app.UseEndpoints(endpoints => {
                endpoints.MapControllerRoute("typepage",
                    "{type}/Page{modelPage:int}",
                    new { Controller = "Home", action = "Index" });

                endpoints.MapControllerRoute("page", "Page{modelPage:int}",
                    new { Controller = "Home", action = "Index", modelPage = 1 });

                endpoints.MapControllerRoute("type", "{type}",
                    new { Controller = "Home", action = "Index", modelPage = 1 });

                endpoints.MapControllerRoute("pagination",
                    "Models/Page{modelPage}",
                    new { Controller = "Home", action = "Index", modelPage = 1 });
                endpoints.MapDefaultControllerRoute();
            });

EDIT2：这是呈现按钮的 ViewComponent：

public IViewComponentResult Invoke()
        {
            return View(repository.Models
                .Select(x => x.ProgramType)
                .Distinct()
                .OrderBy(x => x)); ;
        }

编辑3： 这是 PageingInfo 类来解决评论左：

 public class PagingInfo
    {
        public int TotalItems { get; set; }
        public int ItemsPerPage { get; set; } 
        public int CurrentPage { get; set; }

        public int TotalPages => (int)Math.Ceiling((decimal)TotalItems / ItemsPerPage);
    }

Answer 1

问题似乎在于您生成链接 URL 的方式。生成的 URL 类似于 /home/index/my-type/1，其中 my-type 是模型的假定值。

由于您在服务器中的映射需要以单词 Page 为前缀的页面，因此您永远不会找到匹配的路由。您需要将创建链接的代码更改为：

<!-- 
Check modelPage value is now "Page1". Here is the change which generates the URL like
"/home/index/my-type/Page1" as you mapped server side.
-->
<a class="btn btn-block btn-outline-secondary"
           asp-action="Index" asp-controller="Home"
           asp-route-type="@type"
           asp-route-modelPage="Page1">
            @type
        </a>

另外，请确保导入标签助手

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers