我将使用SmartWizard jQuery 插件来创建一个类似向导的 ASP.Net MVC 应用程序。用户将通过多个步骤来填写数据。
[为清晰而编辑]
每一步都应该是一个局部视图。
ViewModel 对所有视图都是通用的:
public class myViewModel
{
[Required]
public int BM { get; set; }
[Required]
public int Cylindre { get; set; }
}
第一个部分视图应该显示字段 BM(当然,为了清楚起见,我在这里简化了一些事情):
@model MvcApplication3.Models.QuoteViewModel
<div class="editor-label">
@Html.LabelFor(model => model.BM)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.BM)
@Html.ValidationMessageFor(model => model.BM)
</div>
第二个局部视图应显示字段 Cylinder(与上面的代码相同)。
现在主视图如下所示:
@model MvcApplication3.Models.QuoteViewModel
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<div id="wizard" class="swMain">
<ul>
<li><a href="#step-1">
<label class="stepNumber">
1</label>
<span class="stepDesc">Step 1<br />
</span></a></li>
<li><a href="#step-2">
<label class="stepNumber">
2</label>
<span class="stepDesc">Step 2<br />
</span></a></li>
</ul>
<div id="step-1">
<h2 class="StepTitle">
Step 1 Content</h2>
<!-- step content -->
@Html.Partial("QuoteStep1", Model)
</div>
<div id="step-2">
<h2 class="StepTitle">
Step 2 Content</h2>
<!-- step content -->
@Html.Partial("QuoteStep2", Model)
</div>
</div>
}
这一切都很好。但正如您所见,两个 Partial View 是同时渲染的。
我想做的是加载第一个局部视图,然后当用户继续下一步时,将使用 AJAX 调用加载第二个局部视图。
问题是如何通过这些步骤保持模型状态?
[编辑 2 - 新版本]
我已经设法使用 AJAX 调用加载部分视图:
$('#wizard').smartWizard({ contentURL: '/home/getstep', transitionEffect: 'slideleft', onLeaveStep: leaveAStepCallback, onFinish: onFinishCallback });
在控制器中,我这样做:
public ActionResult GetStep()
{
ActionResult pv = null;
switch (Convert.ToInt16(Request["step_number"]))
{
case 1:
pv = PartialView("QuoteStep1");
break;
case 2:
pv = PartialView("QuoteStep2");
break;
default:
break;
}
return pv;
}
现在我遇到的问题是,当我点击 SmartWizard 的下一个按钮时,即使我没有填写必填字段,我的控制器实际上也会被点击!这是因为 SmartWizard 插件似乎在 ajax 调用后进行验证以获取内容,这对我来说似乎很愚蠢。
有人遇到过这个问题,还是我在这里做错了什么?