pass form using ajax get to controller method

Question

I'm new in MVC programming so please excuse any possible stupidity in this question.

$(document).ready(function () {
            $("#btnGenerate").click(function () {

                $.ajax({
                    type: "GET",
                    url: '/Main/MyMethod',  
                    data: JSON.stringify($('#searchForm').serializeArray()),                
                    dataType: 'json',
                    error: function (XMLHttpRequest, textStatus, errorThrown) {

                        alert(errorThrown);
                    }
                })
                return false;
            });
        });

And my method in the controller:

        [HttpGet]
        public FileStreamResult MyMethod(MyModel r)
        {
          return null;
        }

I do get 500 Internal server error.

Answer 1

Try using serialize() instead of serializeArray()

$.ajax({
    type: "GET",
        url: '/Main/MyMethod',  
        data: JSON.stringify($('#searchForm').serialize()),                
        dataType: 'json',
        error: function(XMLHttpRequest, textStatus, errorThrown) {

        alert(errorThrown);
    }
})

Also you could try changing the method attribute to HttpPost :

[HttpPost]
public FileStreamResult MyMethod(MyModel r)
{
    return null;
}

Answer 2

If you're doing post,

$.ajax({
    type: "POST",
        url: '/Main/MyMethod',  
        data: {
//your MyModel properties e.g. name
name: "MyName",
age: 1
    },


        success: function(data){
    },
        error: function(XMLHttpRequest, textStatus, errorThrown) {

        alert(errorThrown);
    }
})

Answer 3

$(function(){
    $("#_frmId").submit(function(){
        event.preventDefault();    // Prevent the default behaviour of the form.

        var formdata = $("#_frmId").serialize();    // Serializes the form

        $.ajax({
            url: '@Url.Action("// Method", "// Controller")',
            type:'POST',
            data: formdata,
            success: function(result){
                // Do whatever
            }
        });
    });
})

_frmId the ID of the form.

When the form is submitted, it will call this method.

Also, there is no need to stringify the data passed to the controller as you are serialising it.

What you are passing to the controller is the View's model not the form model.

So your controller action should be something like

public FileStreamResult MyMethod(//<The View model> r)

Finally you are posting data to the controller so remove the [HttpGet]

Answer 4

If serialize doesn't work, This approach can also be tried.

$("#my_form").submit(function(event){
event.preventDefault(); //prevent default action 
var post_url = $(this).attr("action"); //get form action url
var request_method = $(this).attr("method"); //get form GET/POST method
var form_data = $(this).serialize(); //Encode form elements for submission

`$.ajax({
    url : post_url,
    type: request_method,
    data : form_data
}).done(function(response){ //
    $("#server-results").html(response);
});

})`