POST from edit/create partial views loaded into Twitter Bootstrap modal
- by mare
I'm struggling with AJAX POST from the form that was loaded into Twitter Bootstrap modal dialog.
Partial view form goes like this:
@using (Html.BeginForm())
{
// fields
// ...
// submit
<input type="submit" value="@ButtonsRes.button_save" />
}
Now this is being used in non AJAX editing with classic postbacks. Is it possible to use the same partial for AJAX functionality? Or should I abstract away the inputs into it's own partial view?
Like this:
@using (Ajax.BeginForm())
{
@Html.Partial("~/Views/Shared/ImageEditInputs.cshtml")
// but what to do with this one then?
<input type="submit" value="@ButtonsRes.button_save" />
}
I know how to load this into Bootstrap modal but few changes should be done on the fly:
the buttons in Bootstrap modal should be placed in a special container (the modal footer),
the AJAX POST should be done when clicking Save
which would
first, validate the form and keep the modal opened if not valid (display the errors of course)
second, post and close the modal if everything went fine
in the view that opened the modal, display some feedback information at the top that save was succesful.
I'm mostly struggling where to put what JS code. So far I have this within the List view, which wires up the modals:
$(document).ready(function () {
$('.openModalDialog').click(function (event) {
event.preventDefault();
var url = $(this).attr('href');
$.get(url, function (data) {
$('#modalContent').html(data);
$('#modal').modal('show');
});
});
});
The above code, however, doesn't take into the account the special Bootstrap modal content placeholder (header, content, footer).
Is it possible to achieve what I want without having multiple partial views with the same inputs but different @using and without having to do hacks with moving the Submit button around?
