How to pass the value when I am clicking the Star in Rating control?

Question

When i am rating the star to 5 the id value should be passed as 10. It is passing the value as 1. If i rate the star to 4, the same value(1) is passing to the Controller. This is repeating for all the rated values,
I have delete all my previous code and added my updated code. Please check it out This is my View Code:

<form method="post" id="ratethecommand" action="@Url.Action("rated", "Rating")">
<table width="100%" cellspacing="10"> <tr>
  <td valign="top" width="">
   <table width="100%">
    <tr>
     <td width="50%">

     <a href="@Url.Action("rated/1", "Rating")"><input class="star {split:2}" type="radio" name="test-4-rating-3" /></a>
      <a href="@Url.Action("rated/2", "Rating")"><input class="star {split:2}" type="radio" name="test-4-rating-3" /></a>
       <a href="@Url.Action("rated/3", "Rating")"><input class="star {split:2}" type="radio" name="test-4-rating-3"/></a>
        <a href="@Url.Action("rated/4", "Rating")"><input class="star {split:2}" type="radio" name="test-4-rating-3" /></a>
         <a href="@Url.Action("rated/5", "Rating")"><input class="star {split:2}" type="radio" name="test-4-rating-3" /></a>
          <a href="@Url.Action("rated/6", "Rating")"><input class="star {split:2}" type="radio" name="test-4-rating-3" /></a>
           <a href="@Url.Action("rated/7", "Rating")"><input class="star {split:2}" type="radio" name="test-4-rating-3" /></a>
            <a href="@Url.Action("rated/8", "Rating")"><input class="star {split:2}" type="radio" name="test-4-rating-3" /></a>
             <a href="@Url.Action("rated/9", "Rating")"><input class="star {split:2}" type="radio" name="test-4-rating-3" /></a>
              <a href="@Url.Action("rated/10", "Rating")"><input class="star {split:2}" type="radio" name="test-4-rating-3" value="5.0"/></a>

<input type="text" name="rating"/>
    </td>

  <td valign="top" width="5">&nbsp;</td>  <td valign="top" width="160">
   <u>Test results</u>:<br/><br/>
   <div class="test Smaller">

    <span style="color:#FF0000">Results will be displayed here</span>
   </div>
  </td>
 </tr>
</table>

This is my Controller Code:

public ActionResult rated(int id)
        {
            double ratedvalue = Convert.ToDouble(id*0.5);
            Tbl_Rating tb = new Tbl_Rating();
            var value = new Tbl_Rating
            {
                Rating = ratedvalue,
                TaskId = 1,
                UserId = 1,
                DReportID = 1,
                CreatedBy = 1,
                CreatedOn = DateTime.Now,
                ModifiedBy = 1,
                ModifiedOn = DateTime.Now
            };

            db.Tbl_Rating.Add(value);
            db.SaveChanges();

            return View();
        }

Answer 1

This was the first solution, when the question was different.

It's trivial using jQuery: when user clicks on your radio/star you submit the form.

$(".star").click(function() {
   //your logic on star click
   $("#ratethecommand").submit();
});

You can also change your actual filosofy, doing a simple redirect instead of sumbitting the form: in this case you should transform your actual radio inputs (the stars) to A elements pointing to your controller/action and having the value as parameter (better if integer):

<a href="@Url.Action("rated/3", "Rating")">icon of your star</a>

If you have default routing then you can retrieve rate from id in your action (by the way: capitalize it!).

One last idea: you can also choose the asynchronous way, again with jQuery post and get methods it will be easy to implement!

Final solution (answer to last question edit)

Remove INPUT elements from A elements content. Insted put text / icons of stars.

Hope this helps,

Alberto