Search code examples
asp.net-mvcrazorengine

creating dynamic id for divs in MVC with Razor... with a twist

The twist being, all answers that I found on the topic simply do not seem to work. I tried just about all formattings I found in answers to this question and made a few desperate attempts on my own, but none of them have any effect. It's almost as if razor wasn't there, but other razor synthax in the same cshtml file executes without trouble. As most of the time, the div is declared in a loop and its name should be appended by i. Here's some things I tried, not in the order I tried them in. The order can be deduced by the decreasing sanity of the synthax:

<div id="accord@(i)">

<div id="@("accord" + i)>

<div id="@{@("accord" + i)}">

with:

string fName = "accord" + i;        //fName is filled correctly, that much I could verify

I tried some things:

<div id=@fName>

<div id="@fName">

<div id="@(fName)">

<div id="@{fName}">

<div id=@(fName)>

<div id="@{@fName}">

<div id=@{@fName}>

I also tried several combinations of the two approaches, like for example

string fName = "accord";
<div id="@(fName + i)">

aso...

All of these attempts have not yielded any results... the id of the div is ALWAYS #Literaly_Whatever_Comes_after_=

So... can anybody venture a guess at what I'm doing wrong?

In the interest of completion, since you never know what might be involved, here's the entire loop. It doesn't have any actual logic in it, that comes after I made the concept work:

<div id="yearaccord">

    @for (int i = 0; i < 4; ++i)
    {
        //add a nested months accordion for every year
        <h3>i = @i</h3>
        string fName = "accord" + i;
        <div id="@{@fName}">

            @for (int j = 0; j < 4; ++j)
            {
                //add an accordion displaying the blog titles for each month
                <h3>j = @j</h3>
                <div>
                    @for (int w = 0; w < 6; ++w)
                    {
                        //add blog titles
                        <h4>JabbadaJba @w</h4>
                    }
                </div>
            }
        </div>
    }
</div>

Note that ALL other razor synthax in this loop behaves the way I expected it to... only when it's used as an id, things go wonky.

Solution

  • Ok, got it figured out... The problem was that I was only very convinced that it didn't work, while it actually worked. The result didn't look as expected, but that's not what convinced me that it didn't work. But I always checked the id of the div in the debugger inside visual studio... turns out that visual studio does not show the actual name of the div, but the uninterpreted code with which it was declared. The id when I examined the element in the browser was correct, in the end.

    Only that I'm pretty new to this whole web-thing, exclusively working with C++ (non .NET) before now, so I don't yet know where all the things are and how they behave... it's part of the learning process I guess.

    Thanks for the answers. They all worked once I knew where to look if they work.

    @dawidr: Your line was missing a closing bracket, so that's what produced the error. I noticed it once I took a closer look at it ;)