[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How to create dynamic IDs from loop in MVC 3

Posted on 2012-08-21
6
Medium Priority
?
3,421 Views
Last Modified: 2012-08-28
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>
0
Comment
Question by:JT_SIRO
  • 3
  • 3
6 Comments
 
LVL 19

Accepted Solution

by:
Bardobrave earned 1000 total points
ID: 38320295
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
 

Author Comment

by:JT_SIRO
ID: 38322942
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
 
LVL 19

Expert Comment

by:Bardobrave
ID: 38323642
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
Get your Disaster Recovery as a Service basics

Disaster Recovery as a Service is one go-to solution that revolutionizes DR planning. Implementing DRaaS could be an efficient process, easily accessible to non-DR experts. Learn about monitoring, testing, executing failovers and failbacks to ensure a "healthy" DR environment.

 

Author Comment

by:JT_SIRO
ID: 38326069
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
 
LVL 19

Assisted Solution

by:Bardobrave
Bardobrave earned 1000 total points
ID: 38328105
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
 

Author Closing Comment

by:JT_SIRO
ID: 38343628
Thanks!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

More often than not, we developers are confronted with a need: a need to make some kind of magic happen via code. Whether it is for a client, for the boss, or for our own personal projects, the need must be satisfied. Most of the time, the Framework…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Please read the paragraph below before following the instructions in the video — there are important caveats in the paragraph that I did not mention in the video. If your PaperPort 12 or PaperPort 14 is failing to start, or crashing, or hanging, …
Whether it be Exchange Server Crash Issues, Dirty Shutdown Errors or Failed to mount error, Stellar Phoenix Mailbox Exchange Recovery has always got your back. With the help of its easy to understand user interface and 3 simple steps recovery proced…
Suggested Courses
Course of the Month17 days, 16 hours left to enroll

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question