How to apply rating in ASP.NET MVC

Question

i am trying to implement star rating in MVC but find it very difficult, because most rating on the internet uses jquery where the querystring of current rating value is inside jquery code.i want to be able to rate each movie on my site, but cannot be able to pass my movieID to MovieRating action. this because the query string that is being pass has already been taken by rating. i also try by using FormCollection to collect my movieID but was recieving null value. i also want to display each user rating when they logon on to the site. Please any help will be highly appreciate.

public ActionResult MovieRating(int id, int rating, MovieRating MovieRating)
{
    MovieRating.Rating= rating;
    MovieRating.ProfileID = "duru";

    MovieRating.MovieID =id;
    //save change not yet implemented    
}

this is the code in my view: this Url.RequestContext.RouteData.Values["id"] help me get the query string of the current movieID

@using (Html.BeginForm("MovieRating", "Movie", FormMethod.Post, new { id =          Url.RequestContext.RouteData.Values["id"] }))
{
    <p>
      <img src="../../Content/RatingImages/EmptyStar.png"  class="MovieRating"  alt="Star Rating" align="middle" id="1" />
      <img src="../../Content/RatingImages/EmptyStar.png" class="MovieRating" alt="Star Rating" align="middle" id="2" />
      <img src="../../Content/RatingImages/EmptyStar.png" class="MovieRating" alt="Star Rating" align="middle" id="3" />
      <img src="../../Content/RatingImages/EmptyStar.png" class="MovieRating" alt="Star Rating" align="middle" id="4" />
      <img src="../../Content/RatingImages/EmptyStar.png" class="MovieRating" alt="Star Rating" align="middle" id="5" />
   </p>
   <div id="result"></div>
}

this the jquery code

/// <reference path="jquery-1.5.1-vsdoc.js" />
/// <reference path="jquery-ui-1.8.11.js" />
/*(document).(function(){*/
$(function () {
    $('.MovieRating').mouseover(function () {
        giveRating($(this), "FilledStar.png");
        $(this).css("cursor", "pointer");
    });

    $('.MovieRating').mouseout(function () {
        giveRating($(this), "EmptyStar.png");
    });

    $('.MovieRating').click(function () {
        $('.MovieRating').unbind("mouseout mouseover click");

        // call ajax methods to update database
        var url = "/Movie/MovieRating?rating=" + parseInt($(this).attr("id"));
        $.post(url, null, function (data) {
            $("#result").text(data);
        });
    });
});

function giveRating(img, image) {
    img.attr("src", "/Content/RatingImages/" + image)
        .prevAll('.MovieRating').attr("src", "/Content/RatingImages/" + image);
}

Answer 1

I would assume that when you're building the jQuery call that posts the rating to your action that you have the ability to specify the url that the rating should be posted to. If there is no way to extend the jquery plugin to allow additional parameters, I would post to the route 'Controller/MovieRating/@Model.MovieId' and then allow the jQuery plugin to post whatever query string arguments that it needs. Once you receive this in your controller, id will be populated and you can continue assigning your rating to the movie

NOTE: the route provided assumes you're using razor syntax and since you didn't post much code regarding your view or your controller, that your viewmodel has the Movie Id as MovieId, you will obviously have to change this to suit your needs

EDIT after seeing your code, if you change this line

var url = "/Movie/MovieRating?rating=" + parseInt($(this).attr("id"));

to this:

var url = "/Movie/MovieRating/@Url.RequestContext.RouteData.Values["id"]?rating=" + parseInt($(this).attr("id"));

it should get you in the correct direction. This will allow your MovieRating action to accept the id parameter that it's expecting.

However, another question that I have for you, are you passing a viewmodel to your page? Why wouldn't you be passing the Id of the Movie through on your viewmodel rather than grabbing it from the RouteData each time? Just curious