Model is not getting bind from Ajax Call - .Net core 3.1

kiran a

5y5.2k.NET

Hi Team,

I am working on web application .Net core 3.1 .

after ajax call . model returned is always null .

Please help to get issue resolved. I have tried all options including adding [FromBody] in controller.

and in startup adding "services.AddRazorPages().AddNewtonsoftJson();"

But still not able to resolve issue.

Below is code snippet.

Controller :

public async Task CreateUser([FromBody] UserViewModel viewmodel)
{
try
{
...
}

Startup.cs - Adding services.AddRazorPages().AddNewtonsoftJson();

public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
// services.AddMvc();
services.AddControllers();
//.AddNewtonsoftJson(options =>
//{
// options.SerializerSettings.ContractResolver = new DefaultContractResolver();
//});
services.AddRazorPages().AddNewtonsoftJson();
}

ajax call

var viewModel = {
UserName: $('#UserName').val(),
Password: $('#Password').val(),
FirstName : $('#FirstName').val(),
SurName: $('#SurName').val(),
PhoneNumber: $('#PhoneNuber').val(),
VirtualNumber: $('#VirtualNumber').val(),
IsActive: true,
EmailAddress : $('#EmailAddress').val()
}
//url = "/Users/CreateUser";
//$.post(url, { UserViewModel: JSON.stringify(viewModel) })
// .done(function (response, status, jqxhr) {
// alert("ass");
// })
// .fail(function (jqxhr, status, error) {
// })
$.ajax({
type: "POST",
contentType: "application/json",
data: JSON.stringify(viewModel),
url: "/Users/CreateUser",
success: function (data) {
//return callback(data);
},
error: function (error, statusText) {
// return callback(error);
}
});

Model

public class UserViewModel
{
public Guid UserID { get; set; }
///
/// Db Id - Unique. To be used by for all calls.
///
public int ID { get; set; }
public string UserName { get; set; }
public string Password { get; set; }
public string FirstName { get; set; }
public string SurName { get; set; }
public string PhoneNumber { get; set; }
public string VirtualNumber { get; set; }
public bool IsActive { get; set; }
public bool EmailAddress { get; set; }
}

Please help me out in identifying what am i missing.

Regards,

Kiran

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Accepted answer
your code is working in my machine
copy paste exactly the same and test
$("#btnInsert").click(function () {
        debugger;



        var viewModel = {
UserName: $('#UserName').val(),
Password: $('#Password').val(),
FirstName : $('#FirstName').val(),
SurName: $('#SurName').val(),
PhoneNumber: $('#PhoneNuber').val(),
VirtualNumber: $('#VirtualNumber').val(),
IsActive: true,
EmailAddress : $('#EmailAddress').val()
}

        $.ajax({
            type: "POST",
            url: '/employee/AddEmployees',
            data: JSON.stringify(viewModel),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            cache: false,
            success: function (data) {


            },
        });

    });



[HttpPost]
    public async Task CreateUser([FromBody] UserViewModel viewModel)
    {
    try
    {
    ...
    }
kiran a5y ago
Yeah tried with capital 'M' didnt work.
Sachin Singh5y ago
everything seems good and it should have worked, though your variable name is not same in Action method and ajax call, this might create problem for model binder to work
so change your parameter name from viewmodel to viewModel (capital 'M') in controller
public async Task CreateUser([FromBody] UserViewModel viewModel)
{
try
{
...
}

$.ajax({
type: "POST",
contentType: "application/json";charset-utf8,
dataType:"json",
data: JSON.stringify(viewModel),
url: "/Users/CreateUser",
success: function (data) {
//return callback(data);
},