c# - IEnumerable 模型中的多个 DropDownList

Question

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

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

下面是我的问题模型

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; }             
}

这是我的问题类别模型

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);
    }

最后下面是显示问题的 View

@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>

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

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"
    }
};

将 View 中的代码更改为:

@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)" })

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

查看此 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>