Question

我正在尝试自定义一个JQuery Wizard代码，该代码当前正在处理静态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标签中抓取的步骤名称，内容取自每个标签后面的section标签。只有在用户访问该部分时，才能单击选项卡。因此，如果我在步骤1，则步骤2选项卡不可点击。如果我在步骤2，则可以点击步骤1和步骤2。

目前这一切都是静态完成的，所有步骤都在同一页面上。我创建了每个Step作为局部视图，每个Step都有不同的视图模型。如何在此方案中实现我的部分视图？

我想简单一点。所以每个Partial View都有自己的形式＆＃34; Ajax.BeginForm＆＃34;这将指向自己的控制器方法。我可以处理验证。我不明白的是如何在这个JQuery向导中使用所有部分视图。我应该打电话给＃34; @ Html.Partial（＆＃34; Respective_Step＆＃34;）＆＃34;在每个部分标签下？

Answer 1

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

我为所有标签制作模型而不使用部分视图。这个向导对我来说很好。

如果您需要使用partial，您可以从模型中发送数据

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

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

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

谢谢，

自定义JQuery向导以合并部分视图

1 个答案: