C# ASP.Net Core 3.1 MVC-具有对象列表的MultiSelect

因此，基本目标是：

用户从选择列表中为一本书（流派）选择多个“类别”。例如：

• 行动与冒险
• 经典
• 漫画书还是图画小说

在用户选择1个或多个（如此多个）后，他们将书籍保存到数据库中

就功能而言，当我处理单一类型（该类型保存为单个字符串）时，一切正常，但我需要支持多个类型

我做的第一件事就是简单地将

字符串类别

更改为

列表类别

，但这导致了此处所示的错误： 我尝试了“TuPack”提供的解决方案，错误消失了。。。但这导致了一个全新的问题

你了解我现在的处境： 为了从我的

中获得任何结果，我必须执行以下操作：

<select asp-for="CategoryIds[0].CategoryId" asp-items="ViewBag.Language"
        class="form-control" multiple="multiple">
   <option value="">Please choose book language</option>                    
</select>

请选择图书语言

那当然行。。获取用户选择的第一个类别。就是这样

至于到目前为止的代码，相关性方面。。。我将切断与db相关的内容，因为问题早在出现之前就出现了：

控制器：

public async Task<ViewResult> AddNewBookAsync(bool isSuccess = false, int bookId = 0)
        {
            var model = new BookModel();
            
            ViewBag.Language = new SelectList(await _languageRepository.GetLanguages(), "Id", "Name");

            ViewBag.IsSucess = isSuccess;
            ViewBag.BookId = bookId;            
            return View(model);
        }

        [HttpPost]
        public async Task<IActionResult> AddNewBook(BookModel bookModel)
        {


            if (ModelState.IsValid)
            {
                int id = await _bookRepository.AddNewBook(bookModel);
                if(id > 0)
                {
                    return RedirectToAction(nameof(AddNewBook), new { isSuccess = true, bookId = true });
                }
            }



            ViewBag.Language = new SelectList(await _languageRepository.GetLanguages(), "Id", "Name");
            return View();
        }

public异步任务AddNewBookAsync（bool issucess=false，int bookId=0）
{
var模型=新的BookModel（）；
ViewBag.Language=new SelectList（wait_languageRepository.GetLanguages（），“Id”，“Name”）；
ViewBag.isSuccess=isSuccess；
ViewBag.BookId=BookId；
返回视图（模型）；
}
[HttpPost]
公共异步任务AddNewBook（BookModel BookModel）
{
if（ModelState.IsValid）
{
int id=await\u bookRepository.AddNewBook（bookModel）；
如果（id>0）
{
返回RedirectToAction（nameof（AddNewBook），new{isSuccess=true，bookId=true}）；
}
}
ViewBag.Language=new SelectList（wait_languageRepository.GetLanguages（），“Id”，“Name”）；
返回视图（）；
}

图书模型：

public class BookModel
    {
        public int Id { get; set; }
        [StringLength(100, MinimumLength = 5)]
        [Required(ErrorMessage ="Please enter the title of your book")]
        public string Title { get; set; }
        [Required(ErrorMessage = "Please enter the author's name")]
        public string Author { get; set; }
        [StringLength(500)]
        public string Description { get; set; }
        
        [Required(ErrorMessage = "Please choose the language of your book")]
        public string Language { get; set; }
        [Display(Name = "Genre")]
        public List<Categories> CategoryIds { get; set; } = new List<Categories>();

        [Required(ErrorMessage = "Please enter the total pages")]
        [Display(Name = "Total pages of book")]
        public int? TotalPages  { get; set; }
    }

公共类图书模型
{
公共int Id{get；set；}
[StringLength（100，最小长度=5）]
[必需（ErrorMessage=“请输入您的书的标题”）]
公共字符串标题{get；set；}
[必需（ErrorMessage=“请输入作者姓名”）]
公共字符串作者{get；set；}
[长度（500）]
公共字符串说明{get；set；}
[必需（ErrorMessage=“请选择您的书的语言”）]
公共字符串语言{get；set；}
[显示（Name=“流派”）]
公共列表类别ID{get；set；}=new List（）；
[必需（ErrorMessage=“请输入总页数”）]
[显示（Name=“书籍总页数”）]
公共整型？总页数{get；set；}
}

我之前已经展示了相关的Html代码，所以不会再发布了

视觉效果： 输入示例： 电流输出：

类别Id 1为“行动与冒险”

顺便说一句，我相信这很容易说，但这只是一个“实践项目”。我不想在不知道自己在做什么的情况下，对我正在做的主要项目做出重大改变

更新： 更改

CategoryId[0].CategoryId

并使用与以前完全相同的值运行后，我得到：

---

更新

我曾经在

Book

模型中添加

IList

属性，并在

categoryId

属性中存储多个类别。它对我有效

控制器代码

---

哎呀！这种语言是从我下面的课程中遗留下来的-他们把语言作为一种选择。。。但是选择多种语言没有太大意义，所以我把它换成了categoriesIn，因为使用了“categoriesid”——我在列表中得到了0个对象。将用图片编辑帖子。您好，@MJ，书籍和类别之间的关系已从您的描述更改为。你们可以尝试在新的关系中建立新的模式。如果您有任何问题，请随时提问。谢谢，@Lightman。我已经向前迈进，建立了一种多对多的关系。。在SSMS中打开后，我确认Books和Categories表与BookCategories表都有一对多的关系。当前：

asp for=“Categories”

和“Categories”是

public List Categories{get；set；}

哦，对了，我可能应该提到：类别的来源是一个数据库，而不是枚举或程序中的硬编码。Opps-忘记了重要性位-最终结果看起来与开始时没有什么不同如果我选择某个元素，它会工作，但尝试对整个数组进行操作会返回0个结果

    public IList<SelectListItem> GetCategories()
    {
        var categories = new List<Category>
        {
            new Category {Id = 1, CategoryName = "Action and Adventure"},
            new Category {Id = 2, CategoryName = "Classics"},
            new Category {Id = 3, CategoryName = "Comic Book or Graphic Novel"},
        };  // here you can load categories from DB, this is only for test
        


        var categoryListItem = categories
       .Select(x => new SelectListItem { Text = x.CategoryName, Value = x.Id.ToString() })
       .ToList();

        return categoryListItem;
    }


    [Route("/books/add")]
    public IActionResult _AddNewBooks()
    {
        var model = new BookModel { CategoryList = GetCategories() };

        return View(model);
    }


    [Route("/books/addnewbook")]
    [HttpPost]
    public IActionResult AddNewBook(BookModel model)
    {
        if (ModelState.IsValid)
        {
            //int id = await _bookRepository.AddNewBook(bookModel);
            //if (id > 0)
            //{
            //    return RedirectToAction(nameof(AddNewBook), new { isSuccess = true, bookId = true });
            //}
        }

        //ViewBag.Language = new SelectList(await _languageRepository.GetLanguages(), "Id", "Name");
        model.CategoryList = GetCategories();

        return View();

    }

public class BookModel
{
    public int Id { get; set; }

    public string Title { get; set; }

    public IList<SelectListItem> CategoryList { get; set; }

    [Required(ErrorMessage = "Please select at last 1 Category")]
    public List<int> CategoryIds { get; set; }


    public BookModel(){
        CategoryList = new List<SelectListItem>();
    }
}


public class Category
{
    public int Id { get; set; }
    public string CategoryName { get; set; }
}

<select asp-for="CategoryIds" asp-items="Model.CategoryList" 
           placeholder="Select Categories" 
           onchange="console.log($(this).children(':selected').length)" 
           class="search-box form-control">
</select>

<select asp-for="CategoryIds" asp-items="ViewBag.Language"
        class="form-control" multiple="multiple">
   <option value="">Please choose book language</option>                    
</select>