JQuery / MVC / ajax how to post data to controller using ajax?

Question

I am tring to pass data using ajax and trigger conteroller in my mvc project

this is my controller

public class FileController : Controller
{
    [HttpPost]
    public ActionResult Index(string data)
    {
        return View();
    }
}

this is the js

 $('#getmessage').on('click', function () {
        var text = '';
        $('#discussion>li').each(function () {
            text += $(this).text();
            text += '\n'
        })
        console.log(text)

        $.ajax({
            url: 'http://localhost:22828/File/Index',
            type: 'POST',
            data: text,
            success: function (result) {
                console.log("data sended");
            }
        })
    })

I need to pass the text to the controller, but in my controller I get NULL
Can someone please put some light on this?
Thanks in advance

score 2 · Answer 1 · answered Aug 02 '16 at 13:32

2

Change your Javascript to this:

$('#getmessage').on('click', function () {
        var text = '';
        $('#discussion>li').each(function () {
            text += $(this).text();
            text += '\n'
        })
        console.log(text)

        $.ajax({
            url: 'http://localhost:22828/File/Index',
            type: 'POST',
            data: { data: text }, // This is all you have to change
            success: function (result) {
                console.log("data sended");
            }
        })
    })

answered Aug 02 '16 at 13:32

Morgs

1,558
3
19
34

controller still gets data = null – barak Aug 02 '16 at 13:52
When you do `console.log(text)`, is there anything? Also please remember to close your lines with `;` so it makes it easier for everyone to know where a line starts and stops. – Morgs Aug 02 '16 at 13:54
Ok, open your /App_Start/RouteConfig.cs and paste here in the comment the contents of the method `public static void RegisterRoutes( RouteCollection routes )` please... – Morgs Aug 02 '16 at 14:08
it's working now, I changed my type to 'GET' insted of post but now I have to send it in the url but its ok for now. – barak Aug 02 '16 at 14:13
Ok great...You can also just change `type: 'GET'` – Morgs Aug 02 '16 at 14:16
But i think Just changing type to `GET` is not a proper solution. – Smit Patel Aug 03 '16 at 05:50

score 0 · Answer 2 · answered Aug 02 '16 at 13:36

0

Pass the record data like this,

url: 'File/Index?data=' + text, // Just make change here..

You just need to change the URL that you are passing to the controller Action like this.

$('#getmessage').on('click', function () {
    var text = '';
    $('#discussion>li').each(function () {
        text += $(this).text();
        text += '\n'
    })
    console.log(text)

    $.ajax({
        url: 'File/Index?data=' + text, // Just make change here..
        type: 'POST',
        data: text,
        success: function (result) {
            console.log("data send");
        }
    })
})

answered Aug 02 '16 at 13:36

Smit Patel

2,992
1
26
44

still not working, getting text = null in my conteroller – barak Aug 02 '16 at 13:49
Check your text in JavaScript first by putting 'debugger' into it. And also check by put static value... – Smit Patel Aug 02 '16 at 15:16

score 0 · Answer 3 · edited May 23 '17 at 12:03

0

You're missing the [FromBody] tag in your controller. By default, ASP.NET will try to bind simple parameters from the URL, and only complex ones from the body.

Try it like this:

public class FileController : Controller
{
    [HttpPost]
    public ActionResult Index([FromBody] string data)
    {
        return View();
    }
}

For more details see this related answer.

edited May 23 '17 at 12:03

Community

1
1

answered Aug 02 '16 at 14:37

Szilard Muzsi

1,881
2
16
20

JQuery / MVC / ajax how to post data to controller using ajax?

3 Answers3