CODEWITHSUNDEEP
asp.net-mvcjsonformsmodel-binding
e4rthdog
e4rthdog

Reputation: 5233

ASP.NET MVC action does not recognise post json data

I have this form with 3 fields that i want to pass to a controller action:

<form role="form" class="form-inline" name="frmUserData" id="frmUserData">
    <div class="form-group">
        <label for="txtlitm">Item Code:</label>
        <input type="text" class="form-control" id="txtlitm" name="txtlitm">
    </div>
    <div class="form-group">
        <label for="txtmcu">Branch Plant (filter):</label>
        <input type="text" class="form-control" id="txtmcu" name="txtmcu">
    </div>
    <div class="form-group">
        <label for="txtlocn">Location (filter):</label>
        <input type="text" class="form-control" id="txtlocn" name='txtlocn'>
    </div>
    <button type="button" class="btn btn-default" id="btnGO">Search</button>
</form>

My javascript: Version 1:

$.ajax({
    type: "POST",
    data: JSON.stringify($('#frmUserData').serializeArray()),
    contentType: "application/json; charset=utf-8",
    url: action,
    dataType: 'html',
    success: function(data) {
        $(dataContainer).html(data);
        $(what).hide();
    }

Version 2:

$.ajax({
    type: "POST",
    data: '{"frmData":' + JSON.stringify($('#frmUserData').serializeArray()) + '}',
    contentType: "application/json; charset=utf-8",
    url: action,
    dataType: 'html',
    success: function(data) {
        $(dataContainer).html(data);
        $(what).hide();
    }

My MVC Action:

public PartialViewResult GetAvailability(FormModel frmData)
{
    var vm = Bll.GetAvailabilityWithHolds(frmData.txtlitm, frmData.txtmcu, frmData.txtlocn);
    return PartialView(new GetAvailabilityModel{Availability = vm});
}

My Form class:

public class FormModel
{
    public string txtlitm { get; set; }
    public string txtmcu { get; set; }
    public string txtlocn { get; set; }
}

No matter what i do, i get null values in controller action.

What am i doing wrong?

Upvotes: 0

Views: 214

Answers (1)

Slicksim
Slicksim

Reputation: 7172

have you tried this? You don't need to use Json, you can go with standard form-encoding

$.ajax({
type: "POST",
data: $('#frmUserData').serialize(),
url: action,
dataType: 'html',
success: function(data) {
    $(dataContainer).html(data);
    $(what).hide();
}

I can't test any of these fixes, but what about trying this to fix your original solution:

Attempt 1

$.ajax({
    type: "POST",
    data: '{"frmData":' + JSON.stringify($('#frmUserData').serializeArray()[0]) + '}',
    contentType: "application/json; charset=utf-8",
    url: action,
    dataType: 'html',
    success: function(data) {
        $(dataContainer).html(data);
       $(what).hide();
}

Attempt 2

$.ajax({
    type: "POST",
    data: JSON.stringify($('#frmUserData').serializeArray()[0]),
    contentType: "application/json; charset=utf-8",
    url: action,
    dataType: 'html',
    success: function(data) {
        $(dataContainer).html(data);
        $(what).hide();
}

Upvotes: 2

Related Questions