MVC 4获取所选单选按钮的值

时间:2015-07-01 14:59:26

标签: c# asp.net asp.net-mvc asp.net-mvc-4 umbraco7

我只是冒险进入MVC(v4)的世界,而我在获取无线电按钮列表列表的实际选定值时遇到了麻烦。我从Umbraco数据库中提取数据(但我想我尝试做的原则将是相同的),其中每个问题列表都有一个问题列表。我发布了迄今为止我所做的所有事情,希望能比我更聪明的人指出正确的方向:

这是我的内容结构

enter image description here

我的模特

namespace ICASolution.Models
{
    public class MultipleChoiceViewModel
    {
        public int iQuestionID { get; set; }
        public string zQuestionTitle { get; set; }
        public string zQuestionText { get; set; }
        public List<Answers> lAnswers { get; set; }

    }

    public class Answers
    {
        public int iAnswerID { get; set; }
        public string zAnswerText { get; set; }
        public bool bCorrect { get; set; }
        public string selectedAnswer { get; set; }
    }
}

我的表面控制器:

namespace ICASolution.Controllers
{
    public class MultipleChoiceSurfaceController : SurfaceController
    {
        //
        // GET: /MultipleChoiceSurface/

        //public ActionResult Index()
        //{
        //    return PartialView("MultipleChoice", new MultipleChoiceViewModel());
        //}
        [HttpPost]
        public ActionResult Grade(MultipleChoiceViewModel model)
        {

            return RedirectToCurrentUmbracoPage();
        }

        public ActionResult Index()
        {
            var TestPage = Umbraco.Content(CurrentPage.Id);
            var questions = new List<MultipleChoiceViewModel>();

            foreach (var child in TestPage.Children)
            {
                var questionid = child.Id;
                var questiontitle = child.GetPropertyValue("questionTitle");
                var questiontext = child.GetPropertyValue("questionText");

                questions.Add(new MultipleChoiceViewModel { iQuestionID = questionid, zQuestionTitle = questiontitle, zQuestionText = questiontext, lAnswers = answerList(questionid) });

            }

            return PartialView("MultipleChoice", questions);
        }

        public List<Answers> answerList(int iMyQuestionID)
        {
            var questionPage = Umbraco.Content(iMyQuestionID);
            var answers = new List<Answers>();


            foreach(var child in questionPage.Children)
            {
                answers.Add(new Answers { iAnswerID = child.Id, zAnswerText = child.GetPropertyValue("answerTitle"), bCorrect =  child.GetPropertyValue("correctAnswer") });
            }

            return answers;
        }

    }
}

最后我的部分:

@model IEnumerable<ICASolution.Models.MultipleChoiceViewModel>


<div class="ethicsTestContainer">
    <div class="col-md-12">
        <div class="col-md-12 noRPadding">
            @using (Html.BeginUmbracoForm<ICASolution.Controllers.MultipleChoiceSurfaceController>("Grade")) { 

                    foreach (var item in Model)
                    {
                        <div class="form-group">
                            <p><strong>@item.zQuestionTitle</strong></p>
                            <p>@item.zQuestionText</p>

                            @{
                                foreach (var answerItem in item.lAnswers)
                                {
                                    <div class="radio radio-danger">
                                        @Html.RadioButton(answerItem.iAnswerID.ToString(), answerItem.iAnswerID, new { @type = "radio", @id = answerItem.iAnswerID, @name = item.iQuestionID })

                                        @*<input type="radio" name="@item.iQuestionID" id="@answerItem.iAnswerID" value="option1">*@
                                        <label for="@answerItem.iAnswerID">
                                            @answerItem.zAnswerText <span>&nbsp;</span>@answerItem.bCorrect
                                        </label>
                                    </div>
                                }
                            }
                        </div>
                    }


                <div class="col-sm-8 col-sm-push-2">
                    <button type="submit" class="btn btn-default btn-block">CLICK HERE TO COMPLETE YOUR ETHICS TEST</button>
                </div>

            }

        </div>
    </div>
</div>

向用户显示时,一切都呈现正常:

enter image description here

但我无法弄清楚如何获取用户在HTTPPOST上做出的选择(基本上我需要计算他们所做出的正确答案的数量)。

2 个答案:

答案 0 :(得分:2)

您的问题是,您正在MultipleChoiceViewModel循环中为foreach生成控件,并生成重复的name属性,这些属性无法绑定到集合(它们不包含索引器)和重复的id属性是无效的html。您需要在for循环中生成控件(或使用EditorTemplate类型的自定义MultipleChoiceViewModel

您还需要将selectedAnswer属性移至MultipleChoiceViewModel(不在selectedAnswer

使用for循环(模型必须为IList<MultipleChoiceViewModel>

for(int i = 0; i < Model.Count; i++)
{
  @Html.HiddenFor(m => m[i].iQuestionID) // for post back
  @Html.DisplayFor(m => m[i].zQuestionTitle)
  ... 
  foreach(var item in Model[i].lAnswers)
  {
    @Html.RadioButtonFor(m => m[i].selectedAnswer, item.iAnswerID, new { id = item.iAnswerID })
    <label for="@item.iAnswerID">@item.zAnswerText</label>
  }
}

要使用EditorTempate,请在名为/Views/Shared/EditorTemplates的{​​{1}}中创建部分视图

MultipleChoiceViewModel.cshtml

然后在主视图中,用

替换@model yourAssembly.MultipleChoiceViewModel @Html.HiddenFor(m => m.iQuestionID) @Html.DisplayFor(m => m.zQuestionTitle) ... foreach(var item in Model.lAnswers) { @Html.RadioButtonFor(m => m.selectedAnswer, item.iAnswerID, new { id = item.iAnswerID }) <label for="@item.iAnswerID">@item.zAnswerText</label> } 循环
for

@Html.EditorFor(m => m) 方法将根据集合中每个项目的模板生成html。

附注:EditorFor()生成RadioButtonFor(),因此为type="radio"添加html毫无意义。并且在使用html帮助程序时不要覆盖@type = "radio"属性

答案 1 :(得分:0)

您可以使用以下代码创建单选按钮:

<div class="mt-radio-inline">
  <label class="mt-radio">
    <input type="radio" name="q1" value="q1_Chart"> Chart
    <span></span>
  </label>
  <label class="mt-radio">
    <input type="radio" name="q1" value="q1_AnySize"> Any Size 
    <span></span>                                                
  </label>
</div>

并从下面给出的代码中获取选定的单选按钮值:

string q = form["q1"];

上面的代码形式是 FormCollection

的对象

这将为您提供从组中选择的单选按钮的字符串。