How to create dynamic IDs from loop in MVC 3

I have a loop of records, and I want to create a div with unique ID for each record.  I want the div name to be appended with the ID of the record.  For example:

<div id="jquery_jplayer_1"  class="cp-jplayer"></div>
<div id="jquery_jplayer_2"  class="cp-jplayer"></div>
<div id="jquery_jplayer_3"  class="cp-jplayer"></div>

I'm new to MVC.  My code here is rendering literally, not as the ID value.  Please advise:


                @foreach (var result in group)
                {                                
                <tr>
                    <td>
                        <div id="jquery_jplayer_@result.ID"  class="cp-jplayer"></div>
                    </td>
                 </tr>
JT_SIROAsked:
Who is Participating?
 
BardobraveConnect With a Mentor Commented:
First of all... you'll need to use dashes ("-") instead of underscores ("_") for your elements ids. For a reason I don't know, when you build ids like this on Razor using underscores the @ and it's following definition is treated as a literal.

Also keep in mind that you are defining your result variable as "var" on the loop:

@foreach(var result in group)

This made difficult that your code later can find an .ID attribute that surely inherits from your model.

If you have a model class for your records you should use it on the loop:

@foreach(myGroupRecordsDefinedClass result in group) {
    <tr>
      <td>
        <div id="jquery-jplayer-@result.ID"  class="cp-jplayer"></div>
      </td>
    </tr>
}

This way, supossing that your myGroupRecordsDefinedClass class contains an ID attribute on it's definition your elements should create correctly.
0
 
JT_SIROAuthor Commented:
Ah, that's a little MVC quirk that I didn't know about.  Thanks!

I also changed the var type to my models type.

One more quick question that should be simple, yet I'm unable to figure out.  I simply want to create a counter within my foreach, so I can use the loop count to dynamically create the div id, instead of using result.ID.  How do I simply create an int variable and increment it?  I can't seem to get the syntax to build without error.  I've tried this:  

@int i
@foreach(myGroupRecordsDefinedClass result in group) {
@i++
    <tr>
      <td>
        <div id="jquery-jplayer-@i"  class="cp-jplayer"></div>
      </td>
    </tr>
}
0
 
BardobraveCommented:
Mmm.... have you tried this?

@int i
@foreach(myGroupRecordsDefinedClass result in group) {
@{i++}
    <tr>
      <td>
        <div id="jquery-jplayer-@i"  class="cp-jplayer"></div>
      </td>
    </tr>
}

Razor syntax could be a bit weird sometimes.
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
JT_SIROAuthor Commented:
Even @int i    Causes an error: Invalid expression term 'int'

Shouldn't that work?  I think I'm going to go buy a book on Razor / MVC3, because even this simple stuff isn't working...  hmmmm.
0
 
BardobraveConnect With a Mentor Commented:
Maybe you have this code inside a Razor block? "@{ }", suposedly in this case you don't need to use the @ (you can also try to make a block with it @{int i}
0
 
JT_SIROAuthor Commented:
Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.