jquery - 自定义 JQuery 向导以合并部分 View

Question

我正在尝试自定义一个 JQuery 向导代码，该代码当前正在以不同的步骤处理静态 html 并生成这样的选项卡，

<form class="form-horizontal" role="form">
<div class="section add-alert">
    <div class="box2">
        <div id="my-steps">

       <h3>Step 1</h3>
            <section>
        <!-- Want to replace static Content for Step 1 with a Partial View -->
    </section>

    <h3>Step 2</h3>
            <section>
        <!-- Want to replace static Content for Step 2 with a Partial View -->
    </section>

    <h3>Step 3</h3>
            <section>
        <!-- Want to replace static Content for Step 3 with a Partial View -->
    </section>

    <h3>Step 4</h3>
            <section>
        <!-- Want to replace static Content for Step 4 with a Partial View -->
    </section>

    <h3>Summary</h3>
            <section>
        <!-- Want to replace static Content for Summary with a Partial View -->
    </section>

        <div>         
    <div>
<div>

我正在使用以下 javascript 文件和 css 文件来创建步骤并格式化它。

<script src="@Url.Content("~/assets/js/app/jquery.steps.js")"></script>
<link rel="stylesheet" href="@Url.Content("~/css/jquery.steps.css")"/>
<link rel="stylesheet" type="text/css" href="@Url.Content("~/css/tabs.css")" />
<link rel="stylesheet" type="text/css" href="@Url.Content("~/css/tabstyles.css")" />

这是从标题标签自动创建步骤并从部分选项卡创建内容的功能，

<script>


$("#my-steps").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "fade",
    stepsOrientation: "vertical",
 });

(function () {

    [].slice.call(document.querySelectorAll('.tabs')).forEach(function (el) {
        new CBPFWTabs(el);
    });

})();

现在这一切生成的是它创建了一个向导。左侧有一个垂直栏，所有选项卡均在其上创建。每个选项卡都有从 h3 标记中获取的步骤名称，内容取自每个标记后面的部分标记。仅当用户访问该部分时，这些选项卡才可单击。因此，如果我处于第 1 步，则第 2 步选项卡不可单击。如果我在步骤 2，那么步骤 1 和步骤 2 都是可点击的。

目前这一切都是静态完成的，所有步骤都在同一页面上。我将每个步骤创建为部分 View ，每个步骤都有不同的 View 模型。在这种情况下如何实现我的部分 View ？

我想让事情变得简单。因此，每个部分 View 都有自己的表单“Ajax.BeginForm”，它将指向自己的 Controller 方法。我可以处理验证。我不明白的是如何通过此 JQuery 向导使用所有部分 View 。我应该在每个部分标签下调用“@Html.Partial("Respective_Step")”吗？

Answer 1

我正在处理同样的问题，我已经这样解决了。

我为所有选项卡制作了一个模型，而不使用部分 View 。这个向导对我来说效果很好。

如果您需要使用部分，您可以像这样从模型发送数据

 @Html.Partial("_EmailIndex", Model.Emails)

在模型中你应该有这样的属性

    public List<Email> Emails { get; set; }

谢谢