Pass model as list from view to controller with ajax call
I am having trouble submitting my entire model, which is actually List<Account>
using an ajax call.
Providing the following code:
@model List<ValidationAccount>
<input type="button" id="SubmitAccounts" value="Final Proceed">
$("#SubmitAccounts").click(function () {
$.ajax({
url: '/setupAccounts/ActivateAccounts',
type: 'POST',
contentType: 'application/json; charset=utf-8',
cache: false,
dataType: 'json',
data: JSON.stringify(Model),
success: function (data) {
$(body).html(data);
}, error: function (data) {
}
});
});
I've tried using simple Model and @Model but doesn't work. What can I do in this situation? (So I want to pass my model (my list) as data ).
Update
Method signature:
[HttpPost]
public string ActivateAccounts(List<ValidationAccount> Accounts)
{
return "Success";
}
Update 2
My model:
public class ValidationAccount
{
public string Faculty { get; set; }
public string Programme { get; set; }
public string Year { get; set; }
public string Email { get; set; }
}
Thank.
source to share
Usage @Model
will return the name of the collection, for example "System.Collections.Generic.List[YourAssembly.ValidationAccount]"
, not the objects in the collection. You could serialize the collection to a ViewBag and then post it back (not tested), but unnecessary performance seems to be causing data to be sent in both directions.
Instead, you can keep the filtered results from your method Proceed
in the session and get it in the method ActivateAccounts
to avoid posting anything back.
source to share
Do it like this:
data: { Accounts: JSON.stringify('@Model') }
and also set the property to a traditional
value true
:
data: { Accounts: JSON.stringify('@Model') },
traditional:true
UPDATE:
var accounts= { Accounts: '@Model' };
and
$.ajax({
type: 'POST',
url: '/{controller}/{action}',
cache: false,
data: JSON.stringify(accounts),
dataType: 'json',
contentType: 'application/json; charset=utf-8'
});
source to share
You need to parse the data as json
first
try it
var parsedData = @Html.Raw(Json.Encode(Model)); // This will change the model to json
then pass parsedData
in ajax call
$("#SubmitAccounts").click(function () {
$.ajax({
url: '/setupAccounts/ActivateAccounts',
type: 'POST',
contentType: 'application/json; charset=utf-8',
cache: false,
dataType: 'json',
data: parsedData,
success: function (data) {
$(body).html(data);
}, error: function (data) {
}
});
});
hope this helps.
source to share
The best way to pass the whole model back to the controller is to serialize the form, something like below ...
$(document).ready( function() {
var form = $('#Form1');
$('#1stButton').click(function (event) {
$.ajax( {
type: "POST",
url: form.attr( 'action' ),
data: form.serialize(),
success: function( response ) {
console.log( response );
}
} );
} );
}
NB: the button you are using to fire the event that triggers the form to be submitted via the ajax message must not be of type submit! Otherwise it will always fail.
source to share