如何验证的形式在此方案 [英] How to validate the form in this scenario
问题描述
@model Contoso.MvcApplication.ViewModels.QuizCompletedViewModel＆LT; H2＆GT;测验1 LT; / H＆GT;＆LT;形式方法=邮报＆GT;
@for（INT I = 0; I＆LT; Model.Questions.Count;我++）{
@ Html.EditorFor（型号=＆GT; model.Questions [I]，问题/ _MultipleChoiceAnswerView）
}＆LT; DIV＆GT;
＆LT; p =风格浮动：左;＆GT;问题@ViewData [CurrentNumber] @ViewData的[TotalQuestions]＆LT; / P＆GT;
＆LT;输入类型=提交值=继续的风格=浮动：权利; /＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;
正如你所看到的，我展示通过循环中的所有问题。但我真的想显示在页面的问题问题。这是实现它的一个相关的帖子。
<一个href=\"http://stackoverflow.com/questions/14386395/hide-current-element-and-show-the-next-one/14386431#14386431\">Hide当前元素，并显示下一个
如果我不包括JQuery的功能，它看起来像这样
和问题是，随着最后JQUERY功能，我将显示在同一时间只有一个问题，所以我只需要校验这个问题，而这部分我真的不知道。
我的意思是，假设我已经是jQuery函数，因此当用户preSS继续，它必须验证，如果当前的问题是有效的，但仅此，不是全部。
我该怎么办？
进展：code，我创建单选按钮：
@using Contoso.MvcApplication.Extensions
@model Contoso.MvcApplication.ViewModels.MultipleChoiceQuestionViewModel＆LT; DIV CLASS =问题容器＆GT;
＆LT;＆H5 GT; @ Model.Question.QuestionText＆LT; / H5＆GT;
＆LT; / DIV＆GT;＆LT; DIV CLASS =回答容器＆GT;
@ Html.RadioButtonForSelectList（M = GT; Model.Question.SelectedAnswer，Model.AnswerRadioList）
@ Html.ValidationMessageFor（M = GT; m.Question.SelectedAnswer）
＆LT; / DIV＆GT;
和我使用HtmlExtensions：
公共静态类HtmlExtensions
{
公共静态MvcHtmlString RadioButtonForSelectList＆LT;的TModel，TProperty＆GT;（
这与的HtmlHelper LT;的TModel＆GT;的HtmlHelper，
防爆pression＆LT;＆Func键LT;的TModel，TProperty＆GT;＆GT;前pression，
IEnumerable的＆LT; SelectListItem＆GT; listOfValues，
IDictionary的＆LT;字符串对象＆gt; htmlAttributes）
{
VAR元= ModelMetadata.FromLambdaEx pression（如pression，htmlHelper.ViewData）;
VAR SB =新的StringBuilder（）; 如果（htmlAttributes == NULL）
{
htmlAttributes =新RouteValueDictionary（）;
}
如果（！htmlAttributes.ContainsKey（ID））
{
htmlAttributes [ID] = NULL;
}
的foreach（在listOfValues SelectListItem项）
{
VAR ID =的String.Format（
{0} _ {1}，
htmlHelper.ClientIdFor（如pression）
item.Value
）;
htmlAttributes [ID] = ID;
VAR无线电= htmlHelper.RadioButtonFor（如pression，item.Value，htmlAttributes）.ToHtmlString（）;
VAR labelId = htmlHelper.ClientIdFor（如pression）;
sb.AppendFormat（
＆LT; DIV CLASS ='弧度'＆GT; {0}＆LT;标签= \\{1} \\＆GT; {2}＆LT; /标签＆gt;＆LT; / DIV＆gt;中，
无线电，
ID，
HttpUtility.HtmlEn code（item.Text）
）;
} 返回MvcHtmlString.Create（sb.ToString（））;
}
}
看看使用类似以下内容。它采用可视DIV作为当前步骤，并查找包含在无效的元素。
这是一个粗糙集code，并且一直没有的测试，但希望它可能给你如何参考程序的想法
//附加继续按钮处理
$（＃继续）。点击（函数（）
{ 变量$步= $（：可见）; //获取当前步骤 VAR验证= $（形式）验证（）。 //得到验证
VAR anyError = FALSE; //找到当前步骤是无效内的任何元素。
$ step.find（输入）。每个（函数（）
{
如果（！validator.element（本））{//验证这一步里每个输入元素
anyError = TRUE;
} }）; 如果（anyError）
返回false; //退出，如果发现任何错误 //在这种情况下使用类确认（或使用步数的隐藏字段的值）
如果（$ step.next（）。hasClass（确认））{//是它的确认？
//显示确认异步
$。员额（/精灵/确认，$（形式）。序列化（），功能（R）
{
//注入在确认步骤响应
$（确认），HTML（R）。
}）;
}
//锻炼如果这是最后一个步骤。
//如果不是去下一个问题
//如果是提交表单
如果（$ step.next（）。hasClass（完整））{//有什么下一步？
$ step.hide（）next（）的显示（）。 //显示它和隐藏当前步骤
$（＃回步）显示（）。 //记得显示后退前进按钮
} else {//这是最后一步，提交表单
$（形式）提交（）。
}
}）;
@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>
As you can see, I'm showing all the questions through the loop. But I really want to show question by question in the page. This is the a related post to implement it.
Hide current element and show the next one
If I don't include that JQuery feature, it looks like this
And the problem is, with the last JQUERY feature, I'm going to show only one question at a time, so I need to validate only that question, and that's the part I really have no idea.
I mean, suppose that I've already that JQUERY function, so when the user press CONTINUE, it has to validate if the current question is valid, but only this, not all.
What can I do?
UPDATE: The code where I create the radio buttons:
@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>
And I'm using 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());
}
}
Look at using something like the following. It uses the visible div as the current step and looks for invalid elements contained within.
This is a rough set of code and has not been tested but hopefully it might give you an idea on how to proce
// 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();
}
});
这篇关于如何验证的形式在此方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
