asp.net-mvc - このシナリオでフォームを検証する方法

Question

@model Contoso.MvcApplication.ViewModels.QuizCompletedViewModel

<h2>Quiz 1</h2>

<form method="post">
@for (int i = 0; i < Model.Questions.Count; i++) {
    @Html.EditorFor(model => model.Questions[i], "Questions/_MultipleChoiceAnswerView")
}

<div>
    <p style="float: left;">Question @ViewData["CurrentNumber"] of @ViewData["TotalQuestions"]</p>
    <input type="submit" value="Continue" style="float: right;" />
</div>
</form>

ご覧のとおり、ループを通じてすべての質問を表示しています。しかし、ページ内の質問ごとに表示したいのです。これは、それを実装するための関連投稿です。

現在の要素を非表示にして次の要素を表示

その JQuery 機能を含めないと、次のようになります。

問題は、最後の JQUERY 機能では、一度に 1 つの質問しか表示しないため、その質問のみを検証する必要があることです。

つまり、私はすでにその JQUERY 関数を持っているので、ユーザーが CONTINUE を押すと、現在の質問が有効かどうかを検証する必要がありますが、これだけですべてではありません。

私に何ができる？

更新: ラジオ ボタンを作成するコード:

@using Contoso.MvcApplication.Extensions
@model Contoso.MvcApplication.ViewModels.MultipleChoiceQuestionViewModel

<div class="question-container">
    <h5>@Model.Question.QuestionText</h5>
</div>

<div class="answer-container">
@Html.RadioButtonForSelectList(m => Model.Question.SelectedAnswer, Model.AnswerRadioList)
@Html.ValidationMessageFor(m => m.Question.SelectedAnswer)
</div>

そして、私はHtmlExtensionsを使用しています:

public static class HtmlExtensions
{
    public static MvcHtmlString RadioButtonForSelectList<TModel, TProperty>(
        this HtmlHelper<TModel> htmlHelper,
        Expression<Func<TModel, TProperty>> expression,
        IEnumerable<SelectListItem> listOfValues,
        IDictionary<string, object> htmlAttributes)
    {
        var metaData = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
        var sb = new StringBuilder();

        if (htmlAttributes == null)
        {
            htmlAttributes = new RouteValueDictionary();
        }
        if (!htmlAttributes.ContainsKey("id"))
        {
            htmlAttributes["id"] = null;
        }
        foreach (SelectListItem item in listOfValues)
        {
            var id = string.Format(
                "{0}_{1}",
                htmlHelper.ClientIdFor(expression),
                item.Value
            );
            htmlAttributes["id"] = id;
            var radio = htmlHelper.RadioButtonFor(expression, item.Value, htmlAttributes).ToHtmlString();
            var labelId = htmlHelper.ClientIdFor(expression);
            sb.AppendFormat(
                "<div class='rad'>{0}<label for=\"{1}\">{2}</label></div>",
                radio,
                id,
                HttpUtility.HtmlEncode(item.Text)
            );
        }

        return MvcHtmlString.Create(sb.ToString());
    }
}

Answer 1

次のようなものを使用して見てください。表示されている div を現在のステップとして使用し、その中に含まれる無効な要素を探します。

これはコードの大まかなセットであり、テストされていませんが、うまくいけば、処理方法についてのアイデアが得られるかもしれません

// attach continue button handler       
        $("#continue).click(function ()
        {

            var $step = $(":visible"); // get current step

            var validator = $("form").validate(); // obtain validator
            var anyError = false;

            //find any elements within the current step that are invalid.
            $step.find("input").each(function ()
            {
                if (!validator.element(this)) { // validate every input element inside this step
                    anyError = true;
                }

            });

            if (anyError)
                return false; // exit if any error found

                //in this case use class confirm (or use hidden field value for step number)
            if ($step.next().hasClass("confirm")) { // is it confirmation?
                // show confirmation asynchronously
                $.post("/wizard/confirm", $("form").serialize(), function (r)
                {
                    // inject response in confirmation step
                    $(".confirm").html(r);
                });
            }
               //workout if this is the last step.
               //if not go to next question
               // if it is submit the form
            if ($step.next().hasClass("complete")) { // is there any next step?
                $step.hide().next().show();  // show it and hide current step
                $("#back-step").show();   // recall to show backStep button
            }

            else { // this is last step, submit form
                $("form").submit();
            }


        });