How to access Http Post values in Action Method when posting using jQuery

Question

I am just exploring asp.net mvc as I want to switch from Webforms. I was just experimenting by trying to post a string using jQuery and getting that string back in the response. However, I am not sure how to access the the post parameter within the action method of the controller.

I tried using the FormCollection but it is empty (which I guess is obvious since I am posting using a jQuery ajax call and not a form)

 $(function () {
        $("#GetReport").click(function () {
            $.ajax({
                type: 'POST',
                url: '/Reports/GetReport',
                data: 'Abracadabra Mercedes',
                contentType: 'application/text;charset=utf-8',
                dataType: 'text',
                success: function (result) {
                    alert(result);
                }


            });
        });
    });

//Controller Code
public class ReportsController : Controller
    {
        //
        [HttpPost]
        public ActionResult GetReport(string query)
        {


            ViewBag.Result = "Hello";

            ViewBag.Geronimo = query;

            return View();

        }

    }

        //View Code
@{
    Layout = null;
}

@ViewBag.Result + @ViewBag.Geronimo

Dave Walker · Accepted Answer · 2012-02-02 17:28:08Z

1

Your 'data' needs to be a list of key/values like on a URL. Then you will get that information coming through into the query param of your Action method.

e.g.

$(function () {
    $("#GetReport").click(function () {
        $.ajax({
            type: 'POST',
            url: '/Reports/GetReport',
            data: 'query=Abracadabra Mercedes',
            success: function (result) {
                alert(result);
            }


        });
    });
});

see http://www.tugberkugurlu.com/archive/working-with-jquery-ajax-api-on-asp-net-mvc-3-0-power-of-json-jquery-and-asp-net-mvc-partial-views for more information.

In that example you can see he is doing this. Look for:

var d = "itemId=" + itemId;

Edit: I just tried here now

<input type="button" value="Click" id="GetReport" />
<input type="text" id="tester"/>

<h2>Index</h2>
<script type="text/javascript">
$(function () {
    $("#GetReport").click(function (e) {
        var d = "input=" + $('#tester').val();
        debugger;
        $.ajax({
            type: 'POST',
            url: '/Home/test',
            data: d,
            success: function (result) {
                alert(result);
            }

        });

        if (e && e.preventDefault) {
            e.preventDefault();
        }
    });
});

and

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult Test(string input)
    {
        return new ContentResult() { Content = input };
    }

edited Feb 2, 2012 at 17:28

answered Feb 2, 2012 at 16:47

Dave Walker

3,5231 gold badge26 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dave Walker Over a year ago

Ok had a go and you have to remove the contenttype and data type and it works fine.

shashi Over a year ago

Yup, works well now. Thanks a bunch! I wonder what effect do those two parameters have that it wasn't working earlier.

Collectives™ on Stack Overflow

How to access Http Post values in Action Method when posting using jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related