mvc and ajax - not hitting models properties

Question

I am trying to auto post the inputs in my beginform, but their values do not reach the model or controller. They remain null (break points never hit.) What could be causing this?

 @model project.Models.data

JAVASCRIPT

   function send()
        {
             $.ajax({
                        type: 'POST',
                        url: this.action,
                        data: {'data1': $('#data1').val(), 
                        'data2': $('#data2').val() },
                        success: function (done) {
                $('#box').html(done.output);
            });
        }

FORM

@using (Html.BeginForm())
{
<input id="data1" value="0" name="data1" onclick="send();" >
<input id="data2" value="0" name="data2" onclick="send();" >

}

MODEL

namespace projects.Models
{
  public class data
    {
  public int data1{ get; set; }
  public int data2 { get; set; }
    }

}

What browser ? With IE this could often be caused by caching issues. For kicks try adding cache: false to your Ajax request and try again. — InspiredBy, Jun 26 '12 at 20:45
Also try running this with Fiddler running in the background and see if the URL is even being hit. — InspiredBy, Jun 26 '12 at 20:47
Doesnt work in IE/Firefox/Chrome. Already tried to set cache to false. Same problem. — user999690, Jun 26 '12 at 20:48
URL isnt being hit. Its only hit when I use: data: $('form').serialize() But I want to be selective in what I submit so I cant use this. — user999690, Jun 26 '12 at 20:49

score 2 · Accepted Answer · answered Jun 26 '12 at 21:01

You don't seem to be canceling the default event of the form. I would recommend you subscribing to the .submit event of the form and stop mixing markup and javascript:

@using (Html.BeginForm())
{
    <input id="data1" value="0" name="data1" />
    <input id="data2" value="0" name="data2" />
}

and then in a separate javascript file you could subscribe to the .submit event of this form:

$(function() {
    $('form').submit(function() {
        $.ajax({
            type: this.method,
            url: this.action,
            data: {
                data1: $('#data1').val(), 
                data2: $('#data2').val() 
            },
            success: function (done) {
                $('#box').html(done.output);
            }
        });

        // It is very important to return false in order to prevent the default action
        return false;
    });
});

score 1 · Answer 2 · edited May 23 '17 at 10:09

For starters, I would recommend not using the onclick attribute. Using jQuery's click or on is much better.

Secondly, the Html.BeginForm() does not work the way in which you are using it. If you want to hit the controller method you need to have a submit button with the value of the controller method you are trying to hit.

If you are trying to hit a method asynchronously with jQuery (using AJAX that is), then I recommend looking at this post here:

Send data with jquery to an MVC controller

To POST to the server you don't need the Html.BeginForm(), if you are using AJAX. However, if you want to POST and Redirect to another action, I would use the Html.BeginForm().

Now if you are trying to POST to the server without using AJAX, then you need that submit button in your Html.BeginForm(). This article below details how a Register Form works and could apply to your situation.

How does the MVC3 Controller retrieve HTTPPOST params?

just a quick fyi...JQuery .live() method is being deprecated. If you need to use it - use .on() instead — InspiredBy, Jun 26 '12 at 20:50

mvc and ajax - not hitting models properties

2 Answers2