使用 ASP.NET 核心 MVC 通过类别更改视图

Question

我正在做一个书店项目我试图根据类别更改查看的书籍，但我完全迷路了我是一个绝对的初学者，这是我有史以来的第一个网络项目，我真的需要帮助.

这是我的 Book 模型 class:

using BookStore1.Models.Comments;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace BookStore1.Models
{
    public class Book
    {
        [Key]
        public int Id { get; set; }
        [Required]
        [ForeignKey("Category")]
        public int CategoryId { get; set; }
        [Required]
        public string? Name { get; set; }
        [Required]
        public string? Author { get; set; } = "Unknown";
        [Required]
        public int Price { get; set; }
        public string? imageURL { get; set; }
        public List<MainComment>? MainComments { get; set; }
        [NotMapped]
        public IFormFile? Image { set; get; }
    }
}

这是我的 Category 模型 class:

using System.ComponentModel.DataAnnotations;

namespace BookStore1.Models
{
    public class Category
    {
        [Key]
        public int Id { get; set; }
        [Required]
        public string? CategoryName { get; set; }
        public List<Book>? Books { get; set; } 
    }
}

如何制作带有类别下拉列表的视图，以及当我选择一个类别时，它所包含的书籍会被查看吗？我不需要完整的答案或代码来复制我只需要有人让我走上正确的道路。

谢谢。

Answer 1

我想你可以在DropdownList中设置一个onchange()方法，然后当用户select一个Category时，Ajax会将Category的Id发送给post方法，在post方法中，可以select图书按CategoryId和return图书分页，最后。我写了一个简单的演示来更详细地展示我的方法。

控制器

//For testing convenience, I just hard code here
        List<Category> categories = new List<Category>()
        {
            new Category()
            {
                Id = 1,
                CategoryName = "TypeA"
            },
            new Category()
            {
                Id = 2,
                CategoryName = "TypeB"
            }
            
        };

        List<Book> books = new List<Book>()
        {
            new Book()
            {
                Id = 1,
                Name = "BookA",
                Author = "AuthorA",
                CategoryId = 1,
            },
            new Book()
            {
                Id = 2,
                Name = "BookAA",
                Author = "AuthorAA",
                CategoryId = 1,
            },
            new Book()
            {
                Id = 3,
                Name = "BookB",
                Author = "AuthorB",
                CategoryId = 2,
            },
            new Book()
            {
                Id = 4,
                Name = "BookAAA",
                Author = "AuthorAAA",
                CategoryId = 1,
            }
        };

        public IActionResult Index()
        {
            //set the dropdownlist
            List<SelectListItem> list = new List<SelectListItem>();
            foreach(var item in categories)
            {
                list.Add(new SelectListItem() {Value = item.Id.ToString(),Text = item.CategoryName });
            }
            //use viewbag to pass the dropdownlist from controller to view
            ViewBag.book = list;
            return View();
        }



        [HttpPost]
        public async Task<IActionResult> Index(int ID)
        {
            //select books by CategoryId
            var result = books.Where(x => x.CategoryId == ID).ToList();
            return Json(result);
        }

查看

<div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label  class="control-label"> Choose Category</label>

                <select name="products" class="form-control" asp-items="@ViewBag.book" onchange="select(this.value)"></select>


            </div>
        </div>
    </div>

<div class="text-center" id="Test"></div>
  
@section Scripts{
    <script>
        function select(Id){
           
            var data = {
                'ID' : Id
            };
            $.ajax({
                type: "Post",
                url: "/Home/index",
                data: data,              
                success: function (res) { 
                     result = '';
                  for(var i = 0; i < res.length; i++ ){
                      result = result +'<tr><td>'+res[i].name+'</td><td>'+res[i].author+'</td></tr>';
                  }  
                        
                    
                    document.getElementById("Test").innerHTML = '<table class="table table-striped table-bordered zero-configuration dataTable" role="grid">'
                                                                 +'<thead><tr><th>Name</th><th>Author</th></tr></thead>'                                                                
                                                                 +'<tbody>'+result+'</tbody>'
                                                                 +'</table>';
                }
            });
        }
    </script>
}

演示

希望是你想要的

使用 ASP.NET 核心 MVC 通过类别更改视图

Changing view via category with ASP.NET Core MVC

c#

asp.net-core-mvc