JQuery-шаги динамически добавляют шаги в форму и передают все объекты в контроллер - PullRequest
Новая
       25

JQuery-шаги динамически добавляют шаги в форму и передают все объекты в контроллер

0 голосов
/ 09 апреля 2019

У меня есть форма, и эта форма может динамически иметь 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>

Чего я хотел бы добиться, так это иметь кнопку рядом с кнопками «Назад» и «Далее» Как и в этой статье , и эта кнопка добавляет новые шаги в форму с новыми свойствами ViewModel. Чего я не могу понять, так это как добавить новые свойства ViewModel в форму с помощью метода add из JQuery-steps , который можно увидеть в вики . Я пытался следовать примеру Dynamic Manipulation , но я все еще не могу добавить новую форму / новый набор свойств. Я попробовал перенести все свойства из модели представления в их собственный файл cshtml и в методе add попытаться ссылаться на них через @Html.Partial("_FieldDataProperties"), но это разрывает ссылку в примере ниже. Единственное, что появляется на странице - это ))">Add. Если я удалю вспомогательный HTML-код Partial view и оставлю метод 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.

1 Ответ

0 голосов
/ 09 апреля 2019

Итак, я изменил 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>
...