Passing value through Ajax to controller MVC 4

Question

Trying to pass two values through ajax to my SaveRating method in my ArticleController. Both values being passed into ajax (artID, v) do check out to be the correct values. I always get the error alert from ajax and can't figure out why.

//Edit:Possible Cause:

Down below is code taken from a tutorial from here. This originally was done in a webform, but I am doing it in a view.

In the tutorial this line of code was used,

<div class="rating-star-block" id='div_<%#Container.DataItemIndex %>'>

I didn't know how to handle it so I substituted with,

<div class="rating-star-block" id="div_@Html.DisplayFor(model => model.ID)"> 

this is called in the ajax, as updateP is equal to the id of class="rating-star-block":

var updateP = "#" + $(this).parent().attr('id') + ' .CurrentScore';

which is grabbing the id:

id="div_@Html.DisplayFor(model => model.ID)">  

Also... in my error alert, I get "undefined".

Here is my Ajax:

        $.ajax({
            type: "POST",
            url: "/Article/SaveRating",
            data: "{articleID: '" + artID + "',rate: '" + v + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                setNewScore(updateP, data.d);
            },
            error: function (data) {
                alert(data.d);
            }
        });

Here is my controller:

[WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static int SaveRating(int articleID, int rate)
    {
        LearningEnterprises.DAL.ArticleEntities db = new LearningEnterprises.DAL.ArticleEntities();

        int result = 0;

        {

            db.ArticleScores.Add(new ArticleScore
            {
                ArticleID = articleID,
                ScoreID = 0,
                Score = rate,
                ScoreCreated = DateTime.Now
            });
            db.SaveChanges();

            var newScore = (from a in db.ArticleScores
                            where a.ArticleID.Equals(articleID)
                            group a by a.ArticleID into aa
                            select new
                            {
                                Score = aa.Sum(a => a.Score) / aa.Count()
                            }).FirstOrDefault();
            result = newScore.Score;
        }
        return result;
    }

ADDED THE REST OF THE VIEW:

@model LearningEnterprises.Models.Article

...

<style>
    .rating-star-block .star.outline {
        background: url("/images/star-empty-lg.png") no-repeat scroll 0 0 rgba(0,0,0,0);
    }
    .rating-star-block .star.filled {
        background: url("/images/star-fill-lg.png") no-repeat scroll 0 0 rgba(0,0,0,0);
    }
    .rating-star-block .star {
        color: rgba(0,0,0,0);
        display: inline-block;
        height: 24px;
        overflow: hidden;
        text-indent: -999em;
        width: 24px;
    }
    a {
        color: #005782;
        text-decoration: none;
    }
</style>    

    <div class="rating-star-block" id="div_@Html.DisplayFor(model => model.ID)">
        <input type ="hidden" class="articleID" value = "@Html.DisplayFor(model => model.ID)" />
        Current Score: <span class="CurrentScore">@Html.DisplayFor(model => model.Score)</span><br /><div class="yourScore">Your Score : </div>
        <a class="star outline" href="#" rating="1" title="vote 1"> vote 1</a>
        <a class="star outline" href="#" rating="2" title="vote 2"> vote 2</a>
        <a class="star outline" href="#" rating="3" title="vote 3"> vote 3</a>
        <a class="star outline" href="#" rating="4" title="vote 4"> vote 4</a>
        <a class="star outline" href="#" rating="5" title="vote 5"> vote 5</a>
    </div>
    <div id="myElem" style="position:absolute; top:10px; left:50%; display:none; background-color:yellow; padding:5px; border: 1px solid red">
        Thank you for your rating!
    </div>

...

<script>



    $(".rating-star-block .star").mouseleave(function () {
            $("#" + $(this).parent().attr('id') + " .star").each(function () {
                $(this).addClass("outline");
                $(this).removeClass("filled");

            });
        });
        $(".rating-star-block .star").mouseenter(function () {
            var hoverVal = $(this).attr('rating');
            $(this).prevUntil().addClass("filled");
            $(this).addClass("filled");
            $("#RAT").html(hoverVal);

        });
        $(".rating-star-block .star").click(function () {

            var v = $(this).attr('rating');
            var newScore = 0;
            var updateP = "#" + $(this).parent().attr('id') + ' .CurrentScore';
            var artID = $("#" + $(this).parent().attr('id') + ' .articleID').val();


            $("#" + $(this).parent().attr('id') + " .star").hide();
            $("#" + $(this).parent().attr('id') + " .yourScore").html("Your Score is : &nbsp;<b style='color:#ff9900; font-size:15px'>" + v + "</b>");
            $.ajax({ ...
                }
            });
        });

    function setNewScore(container, data) {
        $(container).html(data);
        $("#myElem").show('1000').delay(2000).queue(function (n) {
            $(this).hide(); n();
        });
    }
</script>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Answer 1

Use:

data: { articleID: artID,
        rate: v
      },

You're sending a string that contains the formatting of a Javascript object. You need to supply a Javascript object, and jQuery will encode it properly as POST data.