JQuery-steps 动态地将步骤添加到表单并将所有对象传递给控制器答案

【问题标题】：JQuery-steps dynamically add steps to a form and pass all of the objects to the controllerJQuery-steps 动态地将步骤添加到表单并将所有对象传递给控制器
【发布时间】：2019-04-08 23:43:46
【问题描述】：

我有一个表单，该表单可以动态添加 1 - n 条记录，然后将其与数据一起传递给控制器。

这是表单的 ViewModel

public class AddFieldDataViewModel
{

    public int SampleID { get; set; }
    public DateTime StartCollectionDate { get; set; }
    public DateTime StartCollectionTime { get; set; }
    public DateTime StopCollectionDate { get; set; }
    public DateTime StopCollectionTime { get; set; }
    public double FlowVolume { get; set; }

}

...和视图

@model MyApplication.Areas.FP.Models.AddFieldDataViewModel

@{
Layout = null;
string name = "Field Data";
string id = "steps-form";
string action = "AddFieldDataLog";
string target = "FieldDatasContent";
string ajax = "FieldDataLoader";
}
<div class="modal-header">
@MyHelper.ModalCloseButton()
<h3 class="modal-title">
    Add <small>@name</small>
</h3>
</div>
<div class="modal-body">
@using (Ajax.BeginForm(actionName: action, routeValues: null, 
htmlAttributes: new { id = id, @class = "form-horizontal" }, ajaxOptions: new AjaxOptions
{
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = target,
    OnSuccess = "closeModal",
    LoadingElementId = ajax
}))
{  @Html.AntiForgeryToken()
    <h3>Step One</h3>
    <section>
        <div class="form-group">
            @Html.LabelFor(m => m.SampleID, "SampleID", new { @class = "col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                @Html.TextBoxFor(m => m.SampleID, "SampleID", new { @class = "form-control date", type = "text" })
                @Html.ValidationMessageFor(m => m.SampleID, null, new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.StartCollectionDate, "Start Collection Date", new { @class = "col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                @Html.TextBoxFor(m => m.StartCollectionDate, "{0:MM/dd/yyyy}", new { @class = "form-control date", type = "text" })
                @Html.ValidationMessageFor(m => m.StartCollectionDate, null, new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.StartCollectionTime, "Start Collection Time", new { @class = "col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                @Html.TextBoxFor(m => m.StartCollectionTime, "{0:hh\\:mm}", new { @class = "form-control time", type = "text" })
                @Html.ValidationMessageFor(m => m.StartCollectionTime, null, new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.StopCollectionDate, "Stop Collection Date", new { @class = "col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                @Html.TextBoxFor(m => m.StopCollectionDate, "{0:MM/dd/yyyy}", new { @class = "form-control date", type = "text" })
                @Html.ValidationMessageFor(m => m.StopCollectionDate, null, new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.StopCollectionTime, "Stop Collection Time", new { @class = "col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                @Html.TextBoxFor(m => m.StopCollectionTime, "{0:hh\\:mm}", new { @class = "form-control time", type = "text" })
                @Html.ValidationMessageFor(m => m.StopCollectionTime, null, new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.FlowVolume, "Flow Volume", new { @class = "col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                @Html.TextBoxFor(m => m.FlowVolume, new { @class = "form-control time", type = "text" })
                @Html.ValidationMessageFor(m => m.FlowVolume, null, new { @class = "text-danger" })
            </div>
        </div>
</section>
</div>

<script>
    $('#steps-form').steps({
        headerTag: "h3",
        bodyTag: "section",
        enableAllSteps: true,
        enablePagination: true,
        autoAdjustHeight: true,
        showFinishButtonAlways: true,
        enableKeyNavigation: true,
        enableCancelButton: true,
        stepsOrientation: "vertical",
        transitionEffect: "slide",
        labels: {
            finish: "Submit"
        },

        onCanceled: function (event) {
            var modal = $(this).closest('.modal');
            modal.modal('hide');
            clearModal(modal);
        },
        onFinished: () => $("form#steps-form").submit()
    });

</script>

我想要实现的是在“上一个”和“下一个”按钮Much like this article 旁边有一个按钮，并让该按钮向具有新 ViewModel 属性的表单添加新步骤。我想不通的是如何通过 JQuery-steps seen here in the Wiki 中的 add 方法将新的 ViewModel 属性添加到表单中。我已经尝试关注Dynamic Manipulation example，但我仍然无法添加新表单/新属性集。我所尝试的是将视图模型中的所有属性提取到它们自己的cshtml 文件中，并在add 方法中尝试通过@Html.Partial("_FieldDataProperties") 引用它们，但这会破坏下面示例中的链接。页面上唯一显示的是))">Add。如果我删除部分视图 HTML 帮助程序并自行保留 add 方法，我可以向表单添加空白步骤。

<a href="javascript:void(0);"onclick="$('#steps-form').steps
('add',@Html.Partial("_FieldDataProperties"));">Add</a></div>

这是独立视图中的 ViewModel 属性

@model MyApplication.Areas.FP.Models.AddFieldDataModel
@{ Layout = null;}
title:  ``,
content: `<section>
 <div class="form-group">
    <div>@Html.LabelFor(m => m.SampleID, "SampleID", new { @class = "col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">@Html.DropDownListFor(m => m.SampleID, Model.SIDs, "Select SampleId", new { @class = "form-control select-chosen" })@Html.ValidationMessageFor(m => m.SampleID, null, new { @class = "text-danger" })
    </div>
</div>
<div class="form-group">
    @Html.LabelFor(m => m.StartCollectionDate, "Start Collection Date", new { @class = "col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
        @Html.TextBoxFor(m => m.StartCollectionDate, "{0:MM/dd/yyyy}", new { @class = "form-control date", type = "text" })
        @Html.ValidationMessageFor(m => m.StartCollectionDate, null, new { @class = "text-danger" })
    </div>
</div>
<div class="form-group">
    @Html.LabelFor(m => m.StartCollectionTime, "Start Collection Time", new { @class = "col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
        @Html.TextBoxFor(m => m.StartCollectionTime, "{0:hh\\:mm}", new { @class = "form-control time", type = "text" })
        @Html.ValidationMessageFor(m => m.StartCollectionTime, null, new { @class = "text-danger" })
    </div>
</div>
<div class="form-group">
    @Html.LabelFor(m => m.StopCollectionDate, "Stop Collection Date", new { @class = "col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
        @Html.TextBoxFor(m => m.StopCollectionDate, "{0:MM/dd/yyyy}", new { @class = "form-control date", type = "text" })
        @Html.ValidationMessageFor(m => m.StopCollectionDate, null, new { @class = "text-danger" })
    </div>
</div>
<div class="form-group">
    @Html.LabelFor(m => m.StopCollectionTime, "Stop Collection Time", new { @class = "col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
        @Html.TextBoxFor(m => m.StopCollectionTime, "{0:hh\\:mm}", new { @class = "form-control time", type = "text" })
        @Html.ValidationMessageFor(m => m.StopCollectionTime, null, new { @class = "text-danger" })
    </div>
</div>
<div class="form-group">
    @Html.LabelFor(m => m.FlowVolume, "Flow Volume", new { @class = "col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
        @Html.TextBoxFor(m => m.FlowVolume, new { @class = "form-control time", type = "text" })
        @Html.ValidationMessageFor(m => m.FlowVolume, null, new { @class = "text-danger" })
    </div>
</div>
</section>`

我已经能够使用 LINQ 创建一个对象列表，并让 JQuery-Steps 遍历该列表并以这种方式创建表单，并且效果很好。但是，我无法使用属性动态创建步骤。我是否遗漏了什么或做错了什么？谈到 JavaScript，我还是个新手。

【问题讨论】：

标签： javascript jquery asp.net-mvc jquery-steps

【解决方案1】：

所以我更改了 JavaScript，并创建了我需要的步骤。

<script>
    $('#steps-form').steps({
        headerTag: "h3",
        bodyTag: "section",
        enableAllSteps: true,
        enablePagination: true,
        autoAdjustHeight: true,
        showFinishButtonAlways: true,
        enableKeyNavigation: true,
        enableCancelButton: true,
        stepsOrientation: "vertical",
        transitionEffect: "slide",
        titleTemplate: '#title#',
        labels: {
            finish: "Submit"
        },
        onInit: function(event, currentIndex){

                var addA = $("<a>").attr("href", "#").addClass("btn btn-primary").text("Add");
                var addBtn = $("<li>").attr("aria-disabled", false).append(addA);
                $(document).find(".actions ul").prepend(addBtn)
                addBtn.on("click", function () { $('#steps-form').steps('add', {@Html.Partial("_FieldDataProperties") }).steps("next"); });

        },
        onCanceled: function (event) {
            var modal = $(this).closest('.modal');
            modal.modal('hide');
            clearModal(modal);
        },
        onFinished: () => $("form#steps-form").submit()

    });

</script>

【讨论】：