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

}

Answer 1

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