Question

我有一个列表，列表中的每个元素都包含一个星级评分控件，允许用户设置他们对该元素的偏好。评级控制基本上只有5个单选按钮。我遇到的问题是当我检索用户之前做过的偏好时，只显示最后一个偏好，之前所有元素的单选按钮都是未选中的。

这是它的外观，显示最后一个元素的4颗星，但它也应该显示第一个和第三个星的一个：

这是视图的代码：

@foreach (var item in Model.TaskEntities)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Code)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.AspNetUser.Forename)
            @Html.DisplayFor(modelItem => item.AspNetUser.Surname)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.AspNetUser.Email)
        </td>
        <td>
            @{
                var list = new TaskEntityAndPreferencesModel(item, Model.Preferences);
            }
            @Html.Partial("_Rating", list)
        </td>
        <td>
            @*@Html.ActionLink("Edit", "Edit", new { id = item.CourseID }) |
                @Html.ActionLink("Details", "Details", new { id = item.CourseID }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.CourseID })*@
        </td>
    </tr>
<tr>

    <td colspan="5">
        @Html.DisplayFor(modelItem => item.Description)
    </td>
</tr>
}

这是评级控制的代码（_Rating）：

@using Microsoft.AspNet.Identity
@model AssignerWebTool.Models.TaskEntityAndPreferencesModel

@{
var checkedOne = false;
var checkedTwo = false;
var checkedThree = false;
var checkedFour = false;
var checkedFive = false;


foreach (var preference in Model.Preferences)
{
    if (preference.UserID == User.Identity.GetUserId() && preference.TaskEntityID == Model.Task.ID)
    {
        if (preference.Rating == 1)
        {
            checkedOne = true;
        }
        else if (preference.Rating == 2)
        {
            checkedTwo = true;
        }
        else if (preference.Rating == 3)
        {
            checkedThree = true;
        }
        else if (preference.Rating == 4)
        {
            checkedFour = true;
        }
        else if (preference.Rating == 5)
        {
            checkedFive = true;
        }
    }
}
}
<div class="ratting-item" data-pid="@Model.Task.ID">
@{
    if (checkedOne)
    {
        <input class="rating" name="vote" type="radio" checked="checked" value="1"/>
    }
    else
    {
        <input class="rating" name="vote" type="radio" value="1" />
    }
    if (checkedTwo)
    {
        <input class="rating" name="vote" type="radio" checked="checked" value="2" />
    }
    else
    {
        <input class="rating" name="vote" type="radio" value="2" />
    }
    if (checkedThree)
    {
        <input class="rating" name="vote" type="radio" checked="checked" value="3" />
    }
    else
    {
        <input class="rating" name="vote" type="radio" value="3" />
    }
    if (checkedFour)
    {
        <input class="rating" name="vote" type="radio" checked="checked" value="4" />
    }
    else
    {
        <input class="rating" name="vote" type="radio" value="4" />
    }
    if (checkedFive)
    {
        <input class="rating" name="vote" type="radio" checked="checked" value="5" />
    }
    else
    {
        <input class="rating" name="vote" type="radio" value="5" />
    }
}

</div>
<span class="result"></span>

我不确定为什么这只适用于最后一个元素而不是之前的元素，所以任何帮助都会非常感激。

编辑：

型号：

public class TaskEntityAndPreferencesModel
{

    public TaskEntity Task { get; set; }
    public IEnumerable<UserTaskEntityPreference> Preferences { get; set; }

    public TaskEntityAndPreferencesModel(TaskEntity task, IEnumerable<UserTaskEntityPreference> preferences)
    {
        Task = task;
        Preferences = preferences;
    }
}


public partial class TaskEntity
{
    public TaskEntity()
    {
        this.UserAssignedToTaskEntities = new HashSet<UserAssignedToTaskEntity>();
        this.UsersUserPreferences = new HashSet<UsersUserPreference>();
        this.UserTaskEntityPreferences = new HashSet<UserTaskEntityPreference>();
    }

    public int ID { get; set; }
    public string Name { get; set; }
    public string Code { get; set; }
    public string Description { get; set; }
    public string RelatedSubjects { get; set; }
    public int MaxNumberOfUsers { get; set; }
    public int TaskGroupID { get; set; }
    public string SupervisorID { get; set; }

    public virtual Task_Group Task_Group { get; set; }
    public virtual ICollection<UserAssignedToTaskEntity> UserAssignedToTaskEntities { get; set; }
    public virtual ICollection<UsersUserPreference> UsersUserPreferences { get; set; }
    public virtual ICollection<UserTaskEntityPreference> UserTaskEntityPreferences { get; set; }
    public virtual AspNetUser AspNetUser { get; set; }
}


public partial class UserTaskEntityPreference
{
    public string UserID { get; set; }
    public int TaskEntityID { get; set; }
    public int Rating { get; set; }
    public int ID { get; set; }

    public virtual AspNetUser AspNetUser { get; set; }
    public virtual TaskEntity TaskEntity { get; set; }
}

Answer 1

仅选择最后一个单选按钮的原因是因为所有单选按钮具有相同的name（组），并且您只能从组中选择一个单选按钮。

在循环的第一次迭代中，为value="1"选择了Preference的单选按钮。在第二次迭代中，选择了带有value="3"的单选按钮，但由于只能选择一个单选按钮，所以checked属性将从前一个属性中删除。每次迭代都会继续此过程，并且只选择与上一个Preference匹配的单选按钮。

要解决此问题，您需要为每个“分组”设置不同的name属性，以便第一个Preference的5个单选按钮具有（例如）name="vote1"和第二个（比如说）name="vote2"等等。

但是，如果你只是通过绑定到你的模型来正确地生成视图，那么你的javascript是不必要的，在你的情况下你应该使用[view model] [1]（我不想看到发布值时必须使用的脚本将它们全部转换回模型。

列表中的最后一个单选按钮控件被设置为已选中

1 个答案: