视图中的单选按钮验证

时间:2019-04-09 02:05:48

标签: javascript c# asp.net-mvc

我创建了一个帮助程序方法,该方法使我可以循环浏览字典并进行多项选择题测验。但是,我正在努力寻找一种方法来验证每个问题至少要检查一个单选按钮。

QuizObjects类具有一个字典,该字典具有问题和答案作为值。 helper方法循环浏览此字典并将其呈现为HTML。总体而言,该代码有效,但是我只是不知道如何添加有效期。

public static class QuizObjects
    {       
        public static Dictionary<int, QuizQuesAndAnswers> dictionaryOfQuestions = new Dictionary<int, QuizQuesAndAnswers>()
        {
            { 1, new QuizQuesAndAnswers{ Question = "What is the symbol for Iron?", Option_1 = "Ir", Option_2 = "I", Option_3 = "Fe", Option_4 = "Fm", InputAnswer = null, CorrectAnswer = "Fe"} },
            { 2, new QuizQuesAndAnswers{ Question = "Which one of the following is not a noble gas?", Option_1 = "Helium", Option_2 = "Nitrogen", Option_3 = "Neon", Option_4 = "Argon", InputAnswer = null} },
            { 3, new QuizQuesAndAnswers{ Question = "Cu is the symbol of which element?", Option_1 = "Copper", Option_2 = "Carbon", Option_3 = "Calcium", Option_4 = "Chlorine", InputAnswer = null} },
            { 4, new QuizQuesAndAnswers{ Question = "How many total elements are in the periodic table?", Option_1 = "119", Option_2 = "100", Option_3 = "150", Option_4 = "118", InputAnswer = null} },
            { 5, new QuizQuesAndAnswers{ Question = "Which element has an atomic number 1?", Option_1 = "Lithium", Option_2 = "Hydrogen", Option_3 = "Helium", Option_4 = "Boron", InputAnswer = null } }
        };
    }


@helper ListOfQuestions(int questionNumber)
{
    foreach (KeyValuePair<int, QuizQuesAndAnswers> question in Model.questionsDictionary)
    {
        QuizQuesAndAnswers quesAndAnswers = question.Value;

        if (question.Key == questionNumber)
        {           
            <div>
                <h5>@quesAndAnswers.Question</h5>
            </div>              
                <div class="form-check">
                    <input type="radio" name="Option_@questionNumber" id="Option_@questionNumber" value="@quesAndAnswers.Option_1" class="form-check-input" />
                    <label class="form-check-label" for="Option_@questionNumber">@quesAndAnswers.Option_1</label>
                </div>
                <div class="form-check">
                    <input type="radio" name="Option_@questionNumber" id="Option_@questionNumber" value="@quesAndAnswers.Option_2" class="form-check-input" />
                    <label class="form-check-label" for="Option_@questionNumber">@quesAndAnswers.Option_2</label>
                </div>
                <div class="form-check">
                    <input type="radio" name="Option_@questionNumber" id="Option_@questionNumber" value="@quesAndAnswers.Option_3" class="form-check-input" />
                    <label class="form-check-label" for="Option_@questionNumber">@quesAndAnswers.Option_3</label>
                </div>
                <div class="form-check">
                    <input type="radio" name="Option_@questionNumber" id="Option_@quesAndAnswers" value="@quesAndAnswers.Option_4" class="form-check-input" />
                    <label class="form-check-label" for="Option_@quesAndAnswers">@quesAndAnswers.Option_4</label>
                </div>
                <br />      
        }
    }
}

@using (Html.BeginForm("QuizSelection", "Quiz", FormMethod.Post))
{
    for (int i = 1; i <= Model.questionsDictionary.Count; i++)
    {
        <div>
            @ListOfQuestions(i)
        </div>
    }

    <button type="submit" class="btn btn-outline-success">Submit</button>    
    <a class="btn btn-outline-danger" href="/Home/DisplayElements">Cancel</a>
}

0 个答案:

没有答案