ASP.NET Core中如何用Kendo UI Wizard结合局部视图实现jQuery验证？

实现步骤 #

• 声明不带验证DataAnnotations特性的主表单
• 每个分步对应的局部视图单独声明表单，用于触发jQuery Validation验证逻辑
• 基于主ViewModel派生各分步专属的ViewModel，给对应字段添加验证用的DataAnnotations特性

完整代码示例 #

主表单代码 #

@model MainViewModel

<form asp-action="Add" asp-controller="MyController"
      id="frmMain"
      name="frmMain"
      method="post"
      data-ajax="true"
      enctype="multipart/form-data"
      data-ajax-success="onAddMainSuccess">

    <!-- Wizard -->
    @(Html.Kendo().Wizard()
        .Name("wizard")
        .Events(ev => ev.Select("onSelect"))
        .Events(ev => ev.Done("onDone"))
        .LoadOnDemand(true)
        .ReloadOnSelect(false)
        .Steps(s =>
        {
            s.Add<MainViewModel>()
            .Title("My Partial 1")
            .ContentUrl(Url.Action("_Partial1", "MyController", Model))
            .Buttons(b =>
            {
                b.Next().Text("Suivant");
            });

            s.Add<MainViewModel>()
            .Title("My Partial 2")
            .ContentUrl(Url.Action("_Partial2", "MyController", Model))
            .Buttons(b =>
            {
                b.Next().Text("Suivant");
            });

            s.Add<MainViewModel>()
            .Title("My Partial 3")
            .ContentUrl(Url.Action("_Partial3", "MyController", Model))
            .Buttons(b =>
            {
                b.Done().Text("Enregistrer");
            });
        })
    )

</form>


<script type="text/javascript">
    var dataPartial1;
    var dataPartial2;
    var currentStep;

    function onSelect(e) {

        var main = $('#frmMain').serialize();
        var form, contentUrl;

        if (e.step.options.index < currentStep) {
            e.preventDefault();
        }
        else {

            if (e.step.options.index == 1) {
                form = $('#frmPartial1');
                dataPartial1 = form.serialize();
                contentUrl = '@Url.Action("_Partial2", "MyController")?' + main + '&' + dataPartial1;
            }
            else if (e.step.options.index == 2) {
                form = $('#frmPartial2');
                dataLesions = form.serialize();
                contentUrl = '@Url.Action("_Partial3", "MyController")?' + main + '&' + dataPartial1 + '&' + dataPartial2;
            }
 
            if (!form.valid()) {
                e.preventDefault();
            }
            else {
                e.step.options.contentUrl = contentUrl;
            }

        }


        currentStep = e.step.options.index;
    }

    function onNextStep(e) {
        if (e.step.options.index == 2) {
            openDoc();
        }  
    }

    function onDone(e) {

        var form = $('#frmMain');

        if (form.valid()) {
            form.submit();
        }
        
    }

    var onAddMainSuccess = function (result) {

        if (result.error) {
            alert(result.error);
        }
    };


</script>

分步1局部视图（_Partial1.cshtml）代码 #

@model Partial1ViewModel
<form id="frmPartial1" name="frmPartial1">
    <div class="row text-small">

        <div class="col-lg-12">
            @Html.ValidationSummary()
        </div>

    </div>

    <!-- 此处添加当前分步的表单字段 -->
</form>

@await Html.PartialAsync("/Views/Shared/_ValidationScriptsPartial.cshtml")

控制器Action方法代码 #

_Partial1 接口

public IActionResult _Partial1(MainViewModel mainViewModel)
{
    Partial1ViewModel model = _mapper.Map<Partial1ViewModel>(mainViewModel);

    return PartialView(model);
}

_Partial2 接口

public IActionResult _Partial2(Partial1ViewModel partial1ViewModel )
{
    Partial2ViewModel model = _mapper.Map<Partial2ViewModel>(partial1ViewModel);

    return PartialView(model);
}

_Partial3 接口

public IActionResult _Partial3(Partial2ViewModel partial2ViewModel )
{
    MainViewModel model = _mapper.Map<MainViewModel>(partial2ViewModel );

    return PartialView(model);
}

内容的提问来源于stack exchange，提问作者Romain