I have parent view with a form (Ajax.BeginForm) wrapped around a holding div that I want to render partial views in.
On page load I render an initial partial view which consumes my Model.
I need to submit this form client side via ajax and pass the Model and FormCollection to my controller, where I update my model and then return a different partial view
My question - is this even possible? I basically need to mimic the the submit function of the form button submit click - but in javascript - I have failed so many time at what would appear to be a simple thing.
My View
@Using (Ajax.BeginForm("Submit", "Invest", New AjaxOptions With {.HttpMethod = "Post", .UpdateTargetId = "partialView"}, New With {.id = "formSubmit", .name = "formSubmit"}))
<ul class="tabs list-unstyled">
<li class="active" data-tab-target="accountType" data-js="tabSelect">
<span>Account Type</span>
<span id="lblAccountType">Choose an account</span>
</li>
</ul>
<div id="partialView">@Html.Partial("_AccountType", Model)</div>
End Using
My js
$('*[data-js="tabSelect"]').on().off().on('click', function () {
var dto = {
data: $('#formSubmit').serialize(), * I tried this but didnt work
}
GlobalFunctions.callAjaxMethod("/QuickInvestment/SaveAccountType", dto, callback)
function callback(data) {
$('#partialView').html(data);
}
});
my Controller
Function SaveAccountType(data As Model) As ActionResult
//Update model and pass to next partial
Return PartialView("_ModelAcc", Model)
End Function
Any help to solve this would be greatly appreciated.
Thank you
