IEnumerable 模型中的多个 DropDownList

Question

我正在使用 ASP.NET MVC 开发一个小型调查。我创建了我的模型 Question、QuestionCategory、Response、ResponseCategory 并用种子数据填充它们。

问题模型的索引视图运行良好，但我需要添加一个额外的字段，其中包含每个问题的下拉列表，用户可以使用下拉列表中选择的选项回答问题列表。

下面是我的问题模型

public class Question
{
    [Key]
    public byte Id { get; set; }
    [Required]
    [Display(Name = "Survey Question")]
    public string SurveyQuestion { get; set; }
    public QuestionCategory QuestionCategory { get; set; }
    [Display(Name = "Question Category")]
    public byte QuestionCategoryId { get; set; }             
}

这是我的 QuestionCategory 模型

public class QuestionCategory
{
    public byte Id { get; set; }
    public string QuestionCat { get; set; }
}

这是响应模型

public class Response
{
    public byte Id { get; set; }
    public string ResponseName { get; set; }
    public byte Weight { get; set; }
    public ResponseCategory ResponseCategory { get; set; }
    public byte ResponseCategoryId { get; set; }
}

这里是 ResponseCategory 模型

public class ResponseCategory
{
    public byte Id { get; set; }
    public string ResponseCat { get; set; }
}

下面是 QuestionController 的 Index Action。

    public ActionResult Index()
    {
        var questions = _context.Question.Include(q => q.QuestionCategory).ToList();
        return View(questions);
    }

最后下面是显示问题的视图

@model IEnumerable<WorkPlaceBullying.Models.Question>
@{
    ViewBag.Title = "Survey Questions";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Questions</h2>
@if (!Model.Any())
{
    <p>We don't have any Questions yet!.</p>
}

@Html.ActionLink("Question", "New", "Question", "", new { @class = "btn btn-primary" })

<table class="table table-striped table-hover ">
    <thead>
        <tr>
            <td>ID</td>
            <td>Questions</td>
            <td>Response Category</td>
        </tr>
    </thead>
    @foreach (var question in Model)
    {
        <tr>
            <td>@question.Id</td>
            <td>
                @Html.ActionLink(@question.SurveyQuestion, "Edit", "Question", new { id = @question.Id }, null)
            </td>
            <td>
                @question.QuestionCategory.QuestionCat
            </td>
            <td>               
                @*@Html.DropDownListFor(q => q.Question.QuestionCategoryId, new SelectList(Model.QuestionCategory, "Id", "QuestionCat"), "Select Question Category", new { @class = "form-control" })*@
            </td>
        </tr>
    }
</table>

我似乎无法将问题控制器的索引视图中的响应放入下拉列表中。我们将不胜感激所有帮助。

Answer 1

SelectList Constructor 采用 IEnumerable，而不是类。

在您的模型中创建一个 Model.QuestionCategory 的列表，并从中创建一个 SelectList。

public static IEnumerable<QuestionCategory> QuestionCategoryList = new List<QuestionCategory> { 
    new QuestionCategory {
        Id = 1,
        QuestionCat = "Red"
    },
    new QuestionCategory {
        Id = 2,
        QuestionCat = "Blue"
    }
};

将视图中的代码改为：

@Html.Hidden(@question.Id + "_QuestionCategoryId", @question.QuestionCategoryId)
@Html.DropDownList(@question.Id + "_QuestionCategoryId", new SelectList(QuestionCategoryList, "Id", "QuestionCat"), "Select Question Category", new { @class = "form-control", onchange="setQuestionCategoryId(this)" })

当OnChange 事件触发时，您可能需要一些javascript 来更新hidden input。

请参阅此jsfiddle，了解如何使用 javascript 更新 QuestionCategoryId 值。

function setQuestionCategoryId(selectObject) 
{   
   $("input#" + selectObject.id).val(selectObject.value);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="1_QuestionCategoryId" name="1_QuestionCategoryId" value="0" />
            
<select class="form-control" id="1_QuestionCategoryId" name="1_QuestionCategoryId" onchange="setQuestionCategoryId(this)">
    <option>Select Question Category</option> 
    <option value="1">Red</option> 
    <option value="2">Blue</option> 
</select>

Answer 2

下拉列表的语法：

MvcHtmlString Html.DropDownListFor(Expression<Func<dynamic,TProperty>> expression, IEnumerable<SelectLestItem> selectList, string optionLabel, object htmlAttributes)

例如：

@Html.DropDownListFor(m => m.StudentGender, 
                    new SelectList(Enum.GetValues(typeof(Gender))), 
                    "Select Gender")

在上面的示例中，DropDownListFor() 方法中的第一个参数是一个 lambda 表达式，它指定要与 select 元素绑定的模型属性。我们已经指定了枚举类型的 StudentGender 属性。第二个参数使用 SelectList 指定要显示到下拉列表中的项目。第三个参数是 optionLabel，它将是下拉列表的第一项。所以现在，它会生成 id 和 name 设置为属性名称的元素 - StudentGener 和两个列表项 - Male 和 Female ，如下所示。

来源：http://www.tutorialsteacher.com/mvc/htmlhelper-dropdownlist-dropdownlistfor