I have a form and this form can dynamically have 1 - n records added to it before it's passed to the controller with data.
This is the ViewModel of the form
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; }
}
...and the view
@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>
What I would like to achieve is have a button next to the Previous and Next buttons Much like this article and have that button add new steps to the form that have new ViewModel properties. What I can't figure out is how to add new ViewModel properties to the form via the add method from JQuery-steps seen here in the Wiki. I've tried following the Dynamic Manipulation example but I am still not able to add a new form/new set of properties. What I have tried is taking all of the properties from the view model out into their own cshtml file and in the add method try to reference them via @Html.Partial("_FieldDataProperties") but this breaks the link in the example below. The only thing that shows up on the page is ))">Add. If I remove the Partial view HTML helper and leave the add method by itself I'm able to add blank steps to the form.
<a href="javascript:void(0);"onclick="$('#steps-form').steps
('add',@Html.Partial("_FieldDataProperties"));">Add</a></div>
This is the ViewModel properties in their standalone view
@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>`
I have been able to create a list of objects using LINQ and have JQuery-Steps iterate over the list and create forms that way and it works perfectly. However, I am not able to create steps dynamically with the properties. Am I missing something or doing something incorrectly? I'm rather new(ish) when it comes to JavaScript.
