Why am I getting json response page after ajax post call?

Question

I have an aps.net MVC5 web app, I have a controller action post method that looks like this,

   [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Set(int id)
        {
            DbHelper dbHelper = new DbHelper();
            dbHelper.Update<News>("update news set ispublished = 1, publishdate = @PublishDate  where newsid = @NewsId", new { NewsId = id, PublishDate = DateTime.Now });
            return Json(new { success = true, message = "added successfully!", redirectToUrl = Url.Action("NewsList", "Home") }, JsonRequestBehavior.AllowGet);
        }

Now, when I call this method from my View ,

 $(document).on("click", ".set", function () {

        var mId = $(this).attr("data-model-id");
        $.ajax({
            url: "@Url.Action("Set","Home")",
            data: { "id": mId },
            contentType: 'application/json',
            type: 'POST',
            dataType:'json',
            success: function (response) {
                if (response.success) {
                    window.location.href = response.redirectToUrl;
                    dt.ajax.reload();

                    $.notify(data.message, {
                        globalPosition: "top center",
                        className: "success"
                    });
                }
            },
            error: function (response) {
                $.notify(response.message, {
                    globalPosition: "top center",
                    className: "success"
                });
            }
        });
    });

I am always getting this enter image description here

I expect to be redirected to home/newslist url. I tried changing all the parameters of ajax call , adding and removing them, still no matter what I do, I always land at this page.

try `window.location.replace(response.redirectToUrl)` rather than `window.location.href = response.redirectToUrl;` — Umang, Aug 24 '20 at 04:24
Still same thing, as soon as the call finishes, it lands at this page, the success callback method is not even fired. Where I am setting this value. — Vladimir Arshavin, Aug 24 '20 at 04:29
@Umang because the success callback is never called , it has not impact whatsover, I tested that. — Vladimir Arshavin, Aug 24 '20 at 04:43
@devNull no, because there is no error, maybe I should emulate an error and check — Vladimir Arshavin, Aug 24 '20 at 04:44
@devNull no, none of the callback methods seem to get called, the response page loads before any method gets called. — Vladimir Arshavin, Aug 24 '20 at 04:48
how did you test 'the success callback is never called'? Can you 'console.log(response)' before the if statement in success? — Umang, Aug 24 '20 at 04:52
@Umang, it does not log. Yes, it was called before if statement, of course! — Vladimir Arshavin, Aug 24 '20 at 04:58
Might be a token issue. Seems like you need to manually add it when using ajax to post: https://stackoverflow.com/a/4074289/5803406 — devNull, Aug 24 '20 at 05:01
Basically, I am at this url ```/home/newslist/``` when making ajax post call to ```/home/set``` after updating a news item in the database. Ideally, the page should not change, and I should see a notification whether the updation succeeded or failed.. — Vladimir Arshavin, Aug 24 '20 at 05:03
I think you need to change your success function signature to : function (response,status,xhr) — Umang, Aug 24 '20 at 05:05
@devNull it could be a token issue, as I have multiple form elements on the page, I will check. — Vladimir Arshavin, Aug 24 '20 at 05:05

score 0 · Answer 1 · answered Aug 24 '20 at 05:01

0

Try to check after remove the "error" function from your ajax. Also you can try this:

$(document).on("click", ".set", function () {

    var mId = $(this).attr("data-model-id");
    $.ajax({
        url: "@Url.Action("Set","Home")",
        data: { "id": mId },
        contentType: 'application/json',
        type: 'POST',
        dataType:'json',
        success: function (response) {
            if (response.success) {
                window.location.href = response.redirectToUrl;
                dt.ajax.reload();

                $.notify(data.message, {
                    globalPosition: "top center",
                    className: "success"
                });
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            $.notify(errorThrown, {
                globalPosition: "top center",
                className: "success"
            });
        }
    });
});

Check if success function is calling or not.

answered Aug 24 '20 at 05:01

LilFlower

61
6

This makes no difference at all. – Vladimir Arshavin Aug 24 '20 at 05:08
Have you checked if the backend method `ActionResult Set(int id)` is getting hit after ajax request? Also make sure that ".set" button in your html must not be the Submit type. – LilFlower Aug 24 '20 at 05:25
Yes, it is getting hit, and the that's why the json response is being returned – Vladimir Arshavin Aug 24 '20 at 05:27
Also make sure that ".set" button in your html must not be the Submit type. – LilFlower Aug 24 '20 at 05:28
I changed the button type still getting the same response. – Vladimir Arshavin Aug 24 '20 at 05:43
You should try to change the vesion of jQuery js file Also it's a suggestion you can try [$.post](https://api.jquery.com/jquery.post/) in place of $.ajax. – LilFlower Aug 25 '20 at 04:59

score 0 · Answer 2 · answered Aug 24 '20 at 05:33

0

If you need return the full HTML page in ajax response then you need to change Controller method with some changes.

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Set(int id)
{
       DbHelper dbHelper = new DbHelper();
       dbHelper.Update<News>("update news set ispublished = 1, publishdate = @PublishDate  where newsid = @NewsId", new { NewsId = id, PublishDate = DateTime.Now });
       //return Json(new { success = true, message = "added successfully!", redirectToUrl = Url.Action("NewsList", "Home") }, JsonRequestBehavior.AllowGet);
       return view("ViewName");
}

answered Aug 24 '20 at 05:33

Purvesh Patel

86
10

Will it not reload the whole page again? – Vladimir Arshavin Aug 24 '20 at 05:44
Then you need to return json response is the best option or partial view. – Purvesh Patel Aug 24 '20 at 06:08

Why am I getting json response page after ajax post call?

2 Answers2