title: Passing value through Ajax to controller MVC 4
body: <p>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.</p>
  
  <p>//Edit:Possible Cause:</p>
  
  <p>Down below is code taken from a tutorial from <a href="http://dotnetawesome.blogspot.ca/2013/12/how-to-implement-5-star-rating-system-inside-gridview.html" rel="nofollow">here</a>. This originally was done in a webform, but I am doing it in a view.</p>
  
  <p>In the tutorial this line of code was used, </p>
  
  <pre><code>&lt;div class="rating-star-block" id='div_&lt;%#Container.DataItemIndex %&gt;'&gt;
  </code></pre>
  
  <p>I didn't know how to handle it so I substituted with,</p>
  
  <pre><code>&lt;div class="rating-star-block" id="div_@Html.DisplayFor(model =&gt; model.ID)"&gt; 
  </code></pre>
  
  <p>this is called in the ajax, as updateP is equal to the id of class="rating-star-block":</p>
  
  <pre><code>var updateP = "#" + $(this).parent().attr('id') + ' .CurrentScore';
  </code></pre>
  
  <p>which is grabbing the id:</p>
  
  <pre><code>id="div_@Html.DisplayFor(model =&gt; model.ID)"&gt;  
  </code></pre>
  
  <p>Also... in my error alert, I get "undefined".</p>
  
  <p>Here is my Ajax:</p>
  
  <pre><code>        $.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);
              }
          });
  </code></pre>
  
  <p>Here is my controller:    </p>
  
  <pre><code>[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 =&gt; a.Score) / aa.Count()
                              }).FirstOrDefault();
              result = newScore.Score;
          }
          return result;
      }
  </code></pre>
  
  <p>ADDED THE REST OF THE VIEW:</p>
  
  <pre><code>@model LearningEnterprises.Models.Article
  
  ...
  
  &lt;style&gt;
      .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;
      }
  &lt;/style&gt;    
  
      &lt;div class="rating-star-block" id="div_@Html.DisplayFor(model =&gt; model.ID)"&gt;
          &lt;input type ="hidden" class="articleID" value = "@Html.DisplayFor(model =&gt; model.ID)" /&gt;
          Current Score: &lt;span class="CurrentScore"&gt;@Html.DisplayFor(model =&gt; model.Score)&lt;/span&gt;&lt;br /&gt;&lt;div class="yourScore"&gt;Your Score : &lt;/div&gt;
          &lt;a class="star outline" href="#" rating="1" title="vote 1"&gt; vote 1&lt;/a&gt;
          &lt;a class="star outline" href="#" rating="2" title="vote 2"&gt; vote 2&lt;/a&gt;
          &lt;a class="star outline" href="#" rating="3" title="vote 3"&gt; vote 3&lt;/a&gt;
          &lt;a class="star outline" href="#" rating="4" title="vote 4"&gt; vote 4&lt;/a&gt;
          &lt;a class="star outline" href="#" rating="5" title="vote 5"&gt; vote 5&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="myElem" style="position:absolute; top:10px; left:50%; display:none; background-color:yellow; padding:5px; border: 1px solid red"&gt;
          Thank you for your rating!
      &lt;/div&gt;
  
  ...
  
  &lt;script&gt;
  
  
  
      $(".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 : &amp;nbsp;&lt;b style='color:#ff9900; font-size:15px'&gt;" + v + "&lt;/b&gt;");
              $.ajax({ ...
                  }
              });
          });
  
      function setNewScore(container, data) {
          $(container).html(data);
          $("#myElem").show('1000').delay(2000).queue(function (n) {
              $(this).hide(); n();
          });
      }
  &lt;/script&gt;
  @section Scripts {
      @Scripts.Render("~/bundles/jqueryval")
  }
  </code></pre>