Using JQuery/JavaScript to post and then return value using MVC

Question

I am new to MVC coming frm webforms and I am trying to get my head around AJAX.

I want to click a button in my partial view, call a stored proc which updates a count, and then returns the current total count which is returned from the stored proc.

My Jquery looks like this.

function setLikeStatus(id) {
    var param = {
        dayId: id
    };

    $.ajax({
        url: "/YourDay/LiveHeartClicked",
        contentType: "application/x-www-form-urlencoded",
        type: "POST",
        datatype: "json",
        data: param,
        error: function (xmlHttpRequest, errorText, thrownError) {
            alert(xmlHttpRequest + "," + errorText + "," + thrownError);
        },
        success: function (data) {
            alert(data);
        }
    });
}

My method looks like this in my controller, I wasn't sure if I sould be using an action result or a JsonResult here. I have tired both but failed.

    [HttpPost]
    [ValidateAntiForgeryToken]
    [Authorize]
    public JsonResult LiveHeartClicked(int dayId)
    {
        YourDayEntities3 context = new YourDayEntities3();
        string userId = getUserId();
        var countLikes = context.CreateDayLike(dayId, userId);
        return Json(countLikes);
    }

When I click the button I am just getting the response '[object Object]|error|Internal Server Error'.

Any help would be apprieciated.

score 1 · Accepted Answer · 2016-03-12 09:16:34Z

1

It does not matter if you use ActionResult or JsonResult, although using the more specific JsonResult make it clearer just what your method does.

You get an error because the method is marked with the [ValidateAntiForgeryToken] and you have not sent the token. Remove the attribute from the method. In addition, remove the contentType: "application/x-www-form-urlencoded", option.

You should also use url: '@Url.Action("LiveHeartClicked", "YourDay")', to ensure your url's are correctly generated.

edited Mar 12, 2016 at 9:16

answered Mar 12, 2016 at 9:10

user3559349

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

6 Comments

user3284707 Over a year ago

Thats great tank you so much. This now runs the stored procedure and updates the databse. However I am not getting anything showing in the alert. when debugging the "data" element is an empty string in Chrome...?

user3559349 Over a year ago

That just sounds like a problem with the code in your method. Start by just hard coding a value for testing - e.g. return Json('test data'); to make sure everything else is working

user3284707 Over a year ago

I've tried that, it works fine on Firefox but not Chrome?

user3559349 Over a year ago

That makes no sense. There is no difference (and I have just tested it on Chrome and it works fine) Are you getting any other errors in the browser console?

user3284707 Over a year ago

i've taken the authorize off and now its returning an object. Although annoyingly its not bringing back the value I want.. but thats another matter I think. Thank you for all your help.

|

Collectives™ on Stack Overflow

Using JQuery/JavaScript to post and then return value using MVC

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related