Model object not getting values in controller actionMethod

Question

I'm new to Asp.Net MVC. I am facing this issue that I have strongly typed input fields in view file. When I send ajax call to controller acion-method, model objects do not get any value. My code is attached.

View Code

@model Swift_MT_103.Models.MT102_Dynamic
@{
ViewBag.Title = "MT102Appl";
}

  @Html.TextBoxFor(m=>m.accountNo_50k_1, "accountNo_50k_1", new { @class="form-control",@name= "accountNo_50k_1", @id= "accountNo_50k_1" })
  @Html.TextBoxFor(m => m.accountTitle_50k_2, "accTitle", new {@name = "accTitle", @id = "accountTitle1"})                                  
  @Html.TextBoxFor(m => m.branchCode_50k_3, "branchcode", new { @name = "accountNo", @id = "branchcode1"})
  @Html.TextBoxFor(m => m.misc_150k_4, "MiscInfo1", new { @class = "form-control",@name = "MiscInfo1", @id = "MiscInfo1" })
  @Html.TextBoxFor(m => m.misc_250k_5, "MiscInfo2", new { @class = "form-control"@name = "MiscInfo2", @id = "MiscInfo2" })
  @Html.TextBoxFor(m => m.accountNo_59_1, "BenAccNo", new { @class = "form-control" @name = "BenAccNo", @id = "BenAccNo" })
  @Html.TextBoxFor(m => m.accountTitle_59_2, "BenAccTitle", new {  @class = "form-control", @name = "BenAccTitle", @id = "BenAccTitle" })
  @Html.TextBoxFor(m => m.branchCode_59_3, "BenBranchCode", new { @class = "form-control"@name = "BenBranchCode", @id = "BenBranchCode" })
  @Html.TextBoxFor(m => m.misc_159_4, "BenMiscInfo1", new { @class = "form-control",@name = "BenMiscInfo1", @id = "BenMiscInfo1" })
  @Html.TextBoxFor(m => m.misc_259_5, "BenMiscInfo2", new { @class = "form-control", @name = "BenMiscInfo2", @id = "BenMiscInfo2" })

Button Code

 <button type="button" class="btn btn-success" id="add">Add</button>

jQuery Code

  $("#add").click(function () {
            $.ajax({
                type: "POST",
                url: "/MT102/SaveData",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
            });
        });

Controller Code

 MT102_Dynamic obj = new MT102_Dynamic();
   [HttpPost]
    public void SaveData(MT102_Dynamic model) {
        var tmp = obj.accountNo_50k_1;

    }

When I use debugger and try to watch values it only shows null values. Help needed.

First thing: when using `@Html.TextBoxFor` don't also specify `@name=` and `@id=` as these will be set to the correct values automatically (there are scenarios when this is required, but not for a basic form). Use just: `@Html.TextBoxFor(m => m.accountNo_50k_1, new { @class="form-control" })` — freedomn-m, Dec 14 '17 at 12:05
Next thing: your POST doesn't post the form. You could either serialise the form or just use `$("form").submit()` (assuming you put your controls in a form, which you haven't in this example) **edit** What @charlietfl said... — freedomn-m, Dec 14 '17 at 12:06
@charlietfl How to send model object through ajax? I am using model Swift_MT_103.Models.MT102_Dynamic. Isn't it supposed to implicitly map values to controller object? — Ahmad Bin Shafaat, Dec 14 '17 at 12:08
No model exists in the browser...just the html your view generates. The browser has no idea what back end technology you use and doesn't care. Suggest you study some ajax tutorials — charlietfl, Dec 14 '17 at 12:11
@charlietfl plz guide me how to send this model object containing values through ajax request. — Ahmad Bin Shafaat, Dec 14 '17 at 12:13
As a side note - its just `@Html.TextBoxFor(m => m.accountNo_50k_1, new { @class="form-control" })` etc. - the rest of your arguments are pointless - you really need to understand what the `HtmlHelper` methods overloads are and what html they generate — , Dec 14 '17 at 21:32

score 0 · Answer 1 · edited Jan 09 '18 at 11:00

You're ajax code nothing post to the server. Either you can include the controls inside a form tag (@Html.BeginForm) and you can submit the form else read the values from jQuery and post with your ajax.

See the ajax example.

 var task = {
        ProjectId: $('#ddlProjects').val(),
        TaskNumber: $('#txtTaskNumber').val(),  
    };
    $.ajax({
        url: '/Tasks/UpdateTask',
        type: 'POST',
        data: task,
        success: function (result) {
            // success result here
        },
        error: function () {
            // error result here   
        }
    });

score 0 · Answer 2 · edited Dec 14 '17 at 13:49

In your Ajax you are not passing data , use this it will help you

  var req = {
                    accountNo_50k_1: "50", //The property name 
                    branchCode_50k_3:"300"
                }

$.ajax({
                    url: '/MT102/SaveData', //Hope Your URL Is Correct 
                    type: 'POST',
                    data: req,
                    dataType: "json",
                   // async: true, By default,  all requests are sent asynchronously
                    success: function (result) {

                        if (result != null) {



                        }
                    },
                    error: function (e) {

                    }
                });

Model object not getting values in controller actionMethod

2 Answers2