Razor View Engine and jQuery

Question

does anybody know how to force Razor View engine to print exact line which is under foreach loop. Code follows :

@section head{
<script type="text/javascript" src="@Url.Content("~/Content/Scripts/jquery-1.4.1.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/Scripts/jquery.progressbar.min.js")"></script>

<script type="text/javascript">

    $(document).ready(function() {
        @foreach(var player in Model)
        {
            jQuery("#pb@PlayerID").progressBar();
        }
    });
</script>

}

I tried using $() and jQuery() but in both case razor don't know what to do. Is there any way to force him to print exact this : jQuery("#pb@PlayerID").progressBar(); . I want to have something like this :

$(document).ready(function() {
    $("#pb1").progressBar();
    $("#pb2").progressBar();
    $("#pb3").progressBar();

});

Thank you in advance!

Answer 1

Inside the @foreach block, the content is code by default unless you switch back to markup. So the "jQuery(...).progressBar()" line is considered C#. In cases like this, where you want markup that isn't HTML, you can use the <text> tag, which is not actually rendered OR the "@:" directive which instructs Razor to treat the rest of the line as markup, no matter what it contains (of course, you can then use "@" within the line to nest further code blocks).

Also, the "pb@PlayerID" looks like an email address to Razor so it ignores it. You can avoid that by using the @() explict expression syntax. So the @foreach block should look like this:

@foreach(var player in Model)
{
    @: jQuery("#pb@(PlayerID)").progressBar();
}

Answer 2

This very helpful article by Scott Gu explains all you need to know - and has pretty much every situation covered.

Here's the explicit <text> style mentioned by @Manticore - there's a lot more examples in the article.