ASP.NET with JQuery AJAX causing "Bad Request" error

Question

I'm getting a "bad request" error when I try to HTTP post to the "Home" controller using the following JQuery/AJAX. Does anyone see the cause?

This is pretty much a copy of the example obtained from here, except greatly simplified: JQUERY ajax passing value from MVC View to Controller. It seems it's not finding the controller, which confuses me -- I've fiddled with this a lot, and with no success.

Button in the view that throws a "bad request" error, and does not reach the controller:

<td> <input type="submit" class="btn-default" name="submit" value="Start Simulating-Jquery" id="btnSaveComments" />
            <script>     $('#btnSaveComments').click(function () {
                    $.ajax({
                        url: '<%:Url.Action("SaveComments")%>',
                        type: "post",
                        cache: false,
                        success: function (savingStatus) {
                            alert("save")
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert(xhr.toString())
                            alert(ajaxOptions.toString())
                            alert(thrownError.toString())
                        }
                    });
                });
            </script>
        </td>

Example of a button in the view that does work:

                     @Ajax.ActionLink("ActonLinkTest", "SaveComments", "Home",
                                new AjaxOptions
                                {
                                    HttpMethod = "POST"
                                }
                            )

Controller (Home):

    [HttpPost]
    public ActionResult SaveComments()
    {
        return new EmptyResult();
    }

EDIT: This also fails.

View:

<td>
            <input type="submit" class="btn-default" name="submit" value="Start Simulating-Jquery #2" id="btnSaveComments2" />
            <script>
                $('#btnSaveComments2').click(function () {
                    var comments = 'a';
                    var selectedId = '1';

                    $.ajax({
                        url: '<%: Url.Action("SaveComments")%>',
                        data: { 'id': selectedId, 'comments': comments },
                        type: "post",
                        cache: false,
                        success: function (savingStatus) {

                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert('failed')//$('#lblCommentsNotification').text("Error encountered while saving the comments.");
                        }
                    });
                });
            </script>
        </td>

Replacing the previous savecomments function with this one in the controller:

 [HttpPost]
    public ActionResult SaveComments(int id, string comments)
    {
        return new EmptyResult();
    }

It looks like you are missing the data portion of your ajax call. — Popo
– Popo, Commented Feb 19, 2014 at 16:43
cache: false adds an additional url param to your request (and isn't needed for post requests), could that be causing your problem? I'm not too familiar with asp.net, but the error you are getting is likely caused either by the url, or the post vars you are sending (or not sending). — user400654
– user400654, Commented Feb 19, 2014 at 16:44
I'm new with Jquery ajax, so it may have been stupid, but I ripped out the data segment of the call as part of a last ditch attempt at getting it to work. I'll edit & put it back in another example that does not work. — John
– John, Commented Feb 19, 2014 at 16:47
@KevinB, thank you for the suggestion - I tried removing cache:false from my examples, although that did not solve the problem either. — John
– John, Commented Feb 19, 2014 at 17:01
One problem is that the signature of SaveComments shows an Id (int) and a message (string) as parameters; however, your test is sending 2 strings, which the framework won't map correctly due to the mismatch of data types. — Icarus
– Icarus, Commented Feb 19, 2014 at 17:03

Pragnesh Khalas · Accepted Answer · 2014-02-19 17:36:28Z

1

Try Like this

var id = 1;
var comments = 'abc';
    $.ajax({
        data: { 'id': id, 'comments': comments },
        url: '/Home/SaveComments1',
        cache: false,
        success: function (savingStatus) {
            alert("save")
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.toString())
            alert(ajaxOptions.toString())
            alert(thrownError.toString())
        }
    });
});

edited Feb 19, 2014 at 17:36

answered Feb 19, 2014 at 16:55

Pragnesh Khalas

2,8982 gold badges15 silver badges26 bronze badges

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

7 Comments

Icarus Over a year ago

Yeah, but you are doing a GET not a POST.

John Over a year ago

Good idea! I tried this already before posting the question, but I tried it again. It's not working - although that is indeed the correct URL to the controller. What are your javascript includes? Maybe there's something obvious that I'm missing? -- jquery-1.10.2.js, jquery-1.10.2.intellisense.js, jquery.unobtrusive-ajax.js

Pragnesh Khalas Over a year ago

not more then <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>

Pragnesh Khalas Over a year ago

please look at the answer

Pragnesh Khalas Over a year ago

Yes this is the secure way to communicate with ajax so I have update the my answer.

|

Popo · Accepted Answer · 2014-02-19 17:01:30Z

0

Please try:

url: '<%= Url.Action("SaveComments") %>',

I think you have the wrong inline tag.

answered Feb 19, 2014 at 17:01

Popo

2,4606 gold badges36 silver badges57 bronze badges

2 Comments

John Over a year ago

Tried this change, it's still failing, unfortunately.

Popo Over a year ago

add an alert('<%= Url.Action("SaveComments") %>'); to see what url you are trying to call, also was it the same error? and plz put semi colons at the end of your javascript statements :)

Collectives™ on Stack Overflow

ASP.NET with JQuery AJAX causing "Bad Request" error

2 Answers 2

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related