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.

Answer 1

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   
        }
    });

Answer 2

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) {

                    }
                });