ASP.NET MVC 5组单选按钮
ASP.NET MVC 5组单选按钮
提问于 2015-01-21 05:16:07
我正在开始我的第一个ASP.NET MVC项目，所以我有一个简单的问题。我有以下代码：
foreach(var question in Model.GeneralQuestions)
{
<div class = "well">
<h3>
<strong>@question.QuestionString</strong>
</h3>
@foreach (var answer in question.PossibleAnswers)
{
@Html.RadioButtonFor(model => question.QuestionString, answer.Answer)
@Html.Label(answer.Answer)
<br />
}
</div>
}Model.GeneralQuestions中的所有问题都是唯一的，因此单选按钮应该按名称属性分组(每个问题对应一组单选按钮)。但是这段代码只产生一个组，所以当我回答第二个问题时，第一个问题变成了取消选择。我需要改变什么？
编辑
我的模型看起来像这样：
public class StudentViewModel
{
public Student Student { get; set; }
public List<Question> GeneralQuestions { get; set; }
public List<SubjectQuestions> SubjectQuestions { get; set; }
}
public class Student
{
public int StudentID { get; set; }
public string Index { get; set; }
public string Name { get; set; }
public string Surname { get; set; }
public virtual ICollection<Subject> Subjects { get; set; }
}
public class Question
{
public int QuestionID { get; set; }
public string QuestionString { get; set; }
public bool IsAssociatedWithSubject { get; set; }
public virtual ICollection<PossibleAnswer> PossibleAnswers { get; set; }
public virtual ICollection<Results> Results { get; set; }
}
public class SubjectQuestions
{
public Subject Subject { get; set; }
public List<Question> Questions { get; set; }
}
public class Results
{
public int ResultsID { get; set; }
public int QuestionID { get; set; }
public int? SubjectID { get; set; }
public int PossibleAnswerID { get; set; }
public virtual Question Question { get; set; }
public virtual PossibleAnswer PossibleAnswer { get; set; }
public virtual Subject Subject { get; set; }
}在StudentViewModel的一个实例中，我保存了一个学生和他应该回答的所有问题(包括一般问题和与他正在学习的科目相关的问题)，并将其传递给查看。有鉴于此，我把所有的问题都放在一个单一的形式，它们都是类型的广播。那么，有没有人可以帮我对单选按钮进行分组并正确地发回这个表单呢？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-01-21 08:13:15
你的代码有许多问题，包括生成重复的id(无效的html)，生成重复的name属性(这就是为什么你只创建了一个组，但更重要的是，这将阻止你在回发时绑定到模型)，而且你实际上并没有绑定到有效的属性。
您将需要创建视图模型来表示要显示和编辑的内容，并在for循环(或使用EditorTemplate)中生成单选按钮，以便使用索引器正确命名它们。
查看模型
public class QuestionVM
{
public int ID { get; set; } // for binding
public string Text { get; set; }
[Required]
public int? SelectedAnswer { get; set; } // for binding
public IEnumerable<AnswerVM> PossibleAnswers { get; set; }
}
public class SubjectVM
{
public int? ID { get; set; }
[DisplayFormat(NullDisplayText = "General")]
public string Name { get; set; }
public List<QuestionVM> Questions { get; set; }
}
public class AnswerVM
{
public int ID { get; set; }
public string Text { get; set; }
}
public class StudentVM
{
public int ID { get; set; }
public string Name { get; set; }
// plus any other properties of student that you want to display in the view
public List<SubjectVM> Subjects { get; set; }
}视图
@model YourAssembly.StudentVM
@using(Html.BeginForm())
{
@Html.HiddenFor(m => m.ID)
@Html.DisplayFor(m => m.Name)
for(int i = 0; i < Model.Subjects.Count; i++)
{
@Html.HiddenFor(m => m.Subjects[i].ID)
@Html.DisplayFor(m => m.Subjects[i].Name) // will display "General" if no name
for (int j = 0; j < Model.Subjects[i].Questions.Count; j++)
{
@Html.HiddenFor(m => m.Subjects[i].Questions[j].ID)
@Html.DisplayFor(m => m.Subjects[i].Questions[j].Text)
foreach(var answer in Model.Subjects[i].Questions[j].PossibleAnswers )
{
<div>
@Html.RadioButtonFor(m => m.Subjects[i].Questions[j].SelectedAnswer, answer.ID, new { id = answer.ID})
<label for="@answer.ID">@answer.Text</label>
</div>
}
@Html.ValidationMessageFor(m => m.Subjects[i].Questions[j].SelectedAnswer)
}
}
<input type="submit" value="save" />
}控制器
public ActionResult Edit(int ID)
{
StudentVM model = new StudentVM();
// populate your view model with values from the database
return View(model);
}
[HttpPost]
public ActionResult Edit(StudentVM model)
{
// save and redirect
}注我对您的模型所隐含的数据库结构感到有点困惑(例如，当null的SubjectID值将Question和SubjectQuestion标识为“一般”问题时，为什么需要为它分别使用不同的模型呢？)我建议你首先在GET方法中硬编码一些值，看看它是如何工作的，然后回发。
StudentVM model = new StudentVM();
model.ID = 1;
model.Name = "bambiinela";
model.Subjects = new List<SubjectVM>()
{
new SubjectVM()
{
Questions = new List<QuestionVM>()
{
new QuestionVM()
{
ID = 1,
Text = "Question 1",
SelectedAnswer = ?, // set this if you want to preselect an option
PossibleAnswers = new List<AnswerVM>()
{
new AnswerVM()
{
ID = 1,
Text = "Answer A"
},
new AnswerVM()
{
ID = 1,
Text = "Answer B"
}
}
},
new QuestionVM()
{
ID = 2,
Text = "Question 2",
PossibleAnswers = new List<AnswerVM>()
{
// similar to above
}
}
}
},
new SubjectVM()
{
ID = 1,
Name = "Math",
Questions = new List<QuestionVM>()
{
// similar to above
}
}
};当您发布时，模型将填充每个主题中每个问题的选定答案的ID。请注意，对某些属性使用了DisplayFor()。这些属性不会回发，因此如果您返回视图(例如，ModelState无效)，则需要重新填充这些属性。或者，您可以生成只读文本框或为这些属性添加隐藏输入。我还建议您检查生成的HTML，特别是name属性，它看起来像这样
<input type="radio" name="Subjects[0].Questions[0].SelectedAnswer" ...使您了解在回发时如何将集合绑定到模型
Stack Overflow用户
发布于 2015-01-21 08:20:12
诀窍是使用一个表达式(Html.RadioButtonFor的第一个参数)，它包含的值每组单选按钮都会改变。在您的例子中，它将是问题列表中的一个索引。
下面是一些示例代码：
@for (int i = 0; i < Model.GeneralQuestions.Count; i++)
{
var question = Model.GeneralQuestions[i];
@Html.Label(question.QuestionString)
<br />
foreach (var answer in question.PossibleAnswers)
{
@Html.RadioButtonFor(model =>
Model.GeneralQuestions[i].SelectedAnswerId, answer.Id)
@Html.Label(answer.Answer)
<br />
}
}这将生成以下HTML：
<label for="Q1">Q1</label>
<br />
<input id="GeneralQuestions_0__SelectedAnswerId"
name="GeneralQuestions[0].SelectedAnswerId" type="radio" value="1" />
<label for="A01">A01</label>
<br />
<input id="GeneralQuestions_0__SelectedAnswerId"
name="GeneralQuestions[0].SelectedAnswerId" type="radio" value="2" />
<label for="A02">A02</label>
<br />
<label for="Q2">Q2</label>
<br />
<input id="GeneralQuestions_1__SelectedAnswerId"
name="GeneralQuestions[1].SelectedAnswerId" type="radio" value="11" />
<label for="A11">A11</label>
<br />
<input id="GeneralQuestions_1__SelectedAnswerId"
name="GeneralQuestions[1].SelectedAnswerId" type="radio" value="12" />
<label for="A12">A12</label>
<br />为了完整起见，以下是所用模型的简化版本：
public class StudentViewModel
{
public List<Question> GeneralQuestions { get; set; }
}
public class Question
{
public int QuestionId { get; set; }
public string QuestionString { get; set; }
public ICollection<PossibleAnswer> PossibleAnswers { get; set; }
public int SelectedAnswerId { get; set; }
}
public class PossibleAnswer
{
public int Id { get; set; }
public string Answer { get; set; }
}下面是action方法的代码：
return View(new StudentViewModel
{
GeneralQuestions =
new List<Question>
{
new Question
{
QuestionString = "Q1",
PossibleAnswers =
new[]
{
new PossibleAnswer {Id = 1, Answer = "A01"},
new PossibleAnswer {Id = 2, Answer = "A02"}
}
},
new Question
{
QuestionString = "Q2",
PossibleAnswers =
new[]
{
new PossibleAnswer {Id = 11, Answer = "A11"},
new PossibleAnswer {Id = 12, Answer = "A12"}
}
},
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28055287
复制相关文章
相似问题
腾讯云开发者
