我使用视图组件创建窗体的一部分但模型绑定器无法绑定

Question

我的表单的一部分包含许多下拉列表，并在数据库的“查看组件”部分中填充它们。

这是我的观点

@page
@model Site.Web.Pages.Admin.CourseManagement.CreateModel

<div class="row">
    <form method="post" asp-page="/Admin/CourseManagement/Create" enctype="multipart/form-data">
        <div class="well col-md-7 col-sm-7">
            <div class="form-group">
                <div class="form-group">
                    <label asp-for="Model.CourseTitle" class="control-label"></label>&nbsp;:&nbsp;
                    <input asp-for="Model.CourseTitle" type="text" class="form-control" required />
                    <span asp-validation-for="Model.CourseTitle" class="text-danger"></span>
                </div>

                @await Component.InvokeAsync("FillCourseDetail")

                <div class="form-group">
                    <label asp-for="Model.CoursePrice" class="control-label"></label>&nbsp;:&nbsp;
                    <input asp-for="Model.CoursePrice" class="form-control" min="1000" value="1000" placeholder="قیمت به ریال" type="number" required />
                    <span asp-validation-for="Model.CoursePrice" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <span class="form-group glyphicon glyphicon-tags"> </span>
                    <input asp-for="Model.Keywordkeys" class="form-control " id="basic" data-role="tagsinput" placeholder="جداسازی تگ ها با کاما(,)" required>
                </div>
            </div>
            <div class="form-group">
                <input type="submit" class="btn glyphicon glyphicon-send" value="ذخیره اطلاعات" />
            </div>
        </div>

        <div class="well col-md-5 col-sm-5">
            <div class="form-group">
                <div class="form-group">
                    <label asp-for="Model.UploadedImage" class="control-label"></label>
                    <div class="form-group">
                        <img class="img-responsive img-rounded" id="imgAvatar" src="~/images/UserProfile/index.png" />
                    </div>
                    <input asp-for="Model.UploadedImage" type="file" class="btn glyphicon glyphicon-open-file" required />
                    <span asp-validation-for="Model.UploadedImage" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Model.DemoFileName" class="control-label"></label>
                    <input asp-for="Model.DemoFileName" type="file" class="btn glyphicon glyphicon-open-file" required />
                    <span asp-validation-for="Model.DemoFileName" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Model.CourseDescription" class="control-label"></label>&nbsp;:&nbsp;
                    <textarea asp-for="Model.CourseDescription" class="form-control total_area" type="text" required></textarea>
                    <span asp-validation-for="Model.CourseDescription" class="text-danger"></span>
                </div>
            </div>
        </div>
    </form>
</div>

这是我的View Component的视图

@model CourseCreateVm

<div class="form-group">
    <label asp-for="@Model.CourseGroupId" class="control-label"></label>
    <select asp-for="@Model.CourseGroupId" class="form-control" asp-items="@(new SelectList(Model.CourseGroups, "Id", "Title"))" required><option class="text-danger">لطفا انتخاب کنید</option></select>
    <span asp-validation-for="@Model.CourseGroupId" class="text-danger"></span>
</div>
<div class="form-group">
    <label asp-for="@Model.CustomUserId" class="control-label"></label>
    <select asp-for="@Model.CustomUserId" class="form-control" asp-items="@(new SelectList(Model.CustomUsers,"Id","ShowUserName"))" required><option class="text-danger">لطفا انتخاب کنید</option></select>
    <span asp-validation-for="@Model.CustomUserId" class="text-danger"></span>
</div>
<div class="form-group">
    <label asp-for="@Model.CourseLevelId" class="control-label"></label>
    <select class="form-control" asp-for="@Model.CourseLevelId" asp-items="@(new SelectList(Model.CourseLevels, "Id", "Title"))"><option class="text-danger">لطفا انتخاب کنید</option></select>
    <span asp-validation-for="@Model.CourseLevelId"></span>
</div>
<div class="form-group">
    <label asp-for="@Model.CourseStatusId" class="control-label"></label>
    <select class="form-control" asp-for="@Model.CourseStatusId" asp-items="@(new SelectList(Model.CourseStatuses, "Id", "Title"))" required><option class="text-danger">لطفا انتخاب کنید</option></select>
    <span asp-validation-for="@Model.CourseStatusId"></span>
</div>

这是在View Component和主视图中使用的viewmodel

public class CourseCreateVm
{
    public virtual int? CourseStatusId { get; set; }
    public List<CourseStatusVm> CourseStatuses { get; set; }

    public virtual int? CourseLevelId { get; set; }
    public List<CourseLevelVm> CourseLevels { get; set; }

    public virtual string CustomUserId { get; set; }
    public List<CustomUserVm> CustomUsers { get; set; }

    public virtual int? CourseGroupId { get; set; }
    public List<CourseGroupVm> CourseGroups { get; set; }

    public string CourseTitle { get; set; }

    public string CourseDescription { get; set; }

    public decimal CoursePrice { get; set; }

    public IFormFile UploadedImage { get; set; }

    public IFormFile DemoFileName { get; set; }

    public List<string> Keywordkeys { get; set; }
}

但是当我提交表格时。下拉式模型绑定器中的选定项目无法将它们绑定到模型中。

我该如何解决这个问题？

Answer 1

尝试在视图组件中使用select标记帮助的name属性而不是asp-for，如下所示：

div class="form-group">
  <label asp-for="@Model.CourseGroupId" class="control-label"></label>
  <select name="CourseCreateVm.CourseGroupId" class="form-control" asp-items="@(new 
  SelectList(Model.CourseGroups, "Id", "Title"))" required><option class="text-danger">لطفا انتخاب کنید</option></select>
  <span asp-validation-for="@Model.CourseGroupId" class="text-danger"></span>
</div>
<div class="form-group">
  <label asp-for="@Model.CustomUserId" class="control-label"></label>
  <select name="CourseCreateVm.CustomUserId" class="form-control" asp-items="@(new 
  SelectList(Model.CustomUsers,"Id","ShowUserName"))" required><option class="text-danger">لطفا انتخاب کنید</option></select>
  <span asp-validation-for="@Model.CustomUserId" class="text-danger"></span>
</div>
<div class="form-group">
  <label asp-for="@Model.CourseLevelId" class="control-label"></label>
  <select name="CourseCreateVm.CourseLevelId" class="form-control"  asp-items="@(new 
  SelectList(Model.CourseLevels, "Id", "Title"))"><option class="text-danger">لطفا انتخاب کنید</option></select>
  <span asp-validation-for="@Model.CourseLevelId"></span>
</div>
<div class="form-group">
  <label asp-for="@Model.CourseStatusId" class="control-label"></label>
  <select name="CourseCreateVm.CourseStatusId" class="form-control"  asp-items="@(new 
  SelectList(Model.CourseStatuses, "Id", "Title"))" required><option class="text-danger">لطفا انتخاب کنید</option></select>
  <span asp-validation-for="@Model.CourseStatusId"></span>
</div>