I have a primary form defined and nicely laid out, it does what it needs to do...
@{ Html.BeginForm(); }
@Html.ValidationSummary(false)
@Html.AntiForgeryToken()
@Html.EditorFor(model => model)
<h2>Properties</h2>
<hr />
@* I want to put some stuff here... *@
<br class="space" />
<div class="clearfix">>
<button type="submit" data-bind="click: save">
Save
</button>
</div>
@{ Html.EndForm(); }
Now, then. This model (or ViewModel, rather) has an IList<PropertyViewModel>
attached to it.
A PropertyViewModel
has its own set of validations. They are pretty simple for now, but there is a chance that later there will be more complicated uses for this setup.
I am using KnockoutJS
for my viewModel consistency. Though I suppose it is fairly irrelevent. I want to display a second form in a jQuery UI Dialog
and return the result, essentially..
<script type="text/javascript">
var viewModel = {
name: ko.observable(),
description: ko.observable(),
properties: ko.observableArray(),
save: function () {
alert(ko.toJSON(viewModel));
},
includeProperty: function () {
$("#dialog").dialog({
width: 500,
closeText: '',
resizable: true,
buttons: {
'Submit': function () {
$(this).dialog('close');
callback( @* I want the new data to get sent back *@ );
},
'Cancel': function () {
$(this).dialog('close');
return false;
}
}
});
}
};
function callback(value) {
alert(ko.toJSON(value)); // (I will push the new property to the viewmodel here)
}
ko.applyBindings(viewModel);
</script>
However, I am not really sure how to actually put the EditorTemplate
into the dialog, moreover I am not sure how to get the data back out of it.