How to set jQuery property from Model in ASP.NET MVC (razor)

Question

I'm using jQuery raty plugin for rating customers. I have following jQuery code for creating raty objects:

$('.customerRating').raty({

            path: '/Content/jQueryRaty/img/',

            click: function (score, evt) {
                var id = this.attr("ID");
                $('input[name="' + id + '"]').val(score);
            }
        });

Html structure is following (using razor):

@{                  
foreach (var customer in (IEnumerable<BL.Model.Customer>)ViewData["Customers"])
{
  var id = "bRate_" + customer.ID;          
  @Html.Hidden(id);
  <div id="leftcolumn"><span>@customer.Name</span></div>
  <div id="rightcolumn"><span class="customerRating" id="@id"></span</div>                  
  <br/>
}                       
}

This is the solution for creating new ratings. My question is how can I do the solution for editing ratings. I mean I want to set the existing ratings from the model to the html.

My current solution is:

 @{
   foreach (var item in Model.CustomerRating)
            {
                <text>                                                                          
                    if (@item.RatingID >= 1)
                    {
                        $("#bRate_" + '@item.CustomerID' + "-1").attr("src", "/Content/jQueryRaty/img/star-on.png");
                    }
                    if (@item.RatingID >= 2)
                    {
                        $("#bRate_" + '@item.CustomerID' + "-2").attr("src", "/Content/jQueryRaty/img/star-on.png");
                    }
                    if (@item.RatingID >= 3)
                    {
                        $("#bRate_" + '@item.CustomerID' + "-3").attr("src", "/Content/jQueryRaty/img/star-on.png");
                    }
                    if (@item.RatingID >= 4)
                    {
                        $("#bRate_" + '@item.CustomerID' + "-4").attr("src", "/Content/jQueryRaty/img/star-on.png");
                    }
                    if (@item.RatingID >= 5)
                    {
                        $("#bRate_" + '@item.CustomerID' + "-5").attr("src", "/Content/jQueryRaty/img/star-on.png");
                    }
                </text> 
            }               
        }

This works fine, but it seems to me too dumy solution (eg too much redundant generated javascript code).

The generated jQuery raty code for one element is:

<span id="bRate_123" class="customerRating">
<img title="bad" alt="1" src="/Content/jQueryRaty/img/star-on.png" id="bRate_123-1">&nbsp;
<img title="poor" alt="2" src="/Content/jQueryRaty/img/star-on.png" id="bRate_123-2">&nbsp;
<img title="regular" alt="3" src="/Content/jQueryRaty/img/star-on.png" id="bRate_123-3">&nbsp;
<img title="good" alt="4" src="/Content/jQueryRaty/img/star-on.png" id="bRate_123-4">&nbsp;
<img title="gorgeous" alt="5" src="/Content/jQueryRaty/img/star-off.png" id="bRate_123-5">
<input type="hidden" id="bRate_123-score" name="score" value="4">
</span>

Jquery raty has the property start which can set the default number of selected stars. It looks like:

  $('.customerRating').raty({           

                            start: @Model.RatingID          

        });

In this way I can set the default number of stars from the model. I can do this for concrete ID, but how can I set this start property for values from IEnumerable...

   @foreach (var item in Model.CustomerRating)

         ?????? set start property .....

I hope it is understandable. I will appreciate any help or another hints or ideas how to solve this problem.

thanks.

Answer 1

Hmm not much of a RAZOR whizzz but couldnt you just do:

for (int i = 0; i < @item.RatingID; i++)
{
$("#bRate_" + '@item.CustomerID' + i).attr("src", "/Content/jQueryRaty/img/star-on.png");
}

but setting it directly from raty is ofcourse smarter, like you said :/

---

Won't this work?

 @{
   foreach (var item in Model.CustomerRating)
            {
           <text> 
               $('.customerRating').raty({  start: @Model.RatingID });
           </text> 
            }               
        }