MVC3 Razor syntax. How do I convert this ASP.NET style to Razor. (also issues with @ within quotes)

Question

Can anyone convert this ASP.NET syntax to RAZOR syntax? I can not convert it "one to one" to Razor syntax.

<% Themes.ThemesAvailable().ForEach(i => 
   {
       if (i.Equals(Themes.ThemeToUse))
       {%>
         <a href="" id="A1" style="font-size:x-large;color:Red"><%:i%></a>
        <%}
       else
       {%>
        <a href="" style="color:Blue" id="ChangeThemeTo_<%:i%>"><%:i%></a>
       <%} %>
    <br />
<% });%>

The following does not work (complains about CS0201: Only assignment, call, increment, decrement, and new object expressions can be used as a statement)

@Themes.ThemesAvailable().ForEach(i => {
       if (i.Equals(Themes.ThemeToUse)){
         @:<a href="" id="A1" style="font-size:x-large;color:Red"> + @i + </a>
       ;}else{
         @:<a href="" style="color:Blue" id='ChangeThemeTo_@i'>@i</a>
       ;}   })

and this does not work (suddenly it expects '}' at top of the page line1 col1)

@Themes.ThemesAvailable().ForEach(i => 
   {
       if (i.Equals(Themes.ThemeToUse)){
         @<text><a href="" id="A1" style="font-size:x-large;color:Red"> + @i + </a></text>
        ;} else {
         @<text><a href="" style="color:Blue" id='ChangeThemeTo_@i'>@i</a></text>
       ;}
})

Seems The @i within id='ChangeThemeTo_@i' stops the end text-tag from working. If I remove the '@' the element works. But get the same error as the first conversion try (CS0201).

Removing the usage of lambda, this works, but ONLY if I remove the '@' from id='ChangeThemeTo_i'

        @foreach (var i in Themes.ThemesAvailable()){
            if (i.Equals(Themes.ThemeToUse)){

                <a href="" id="A1" style="font-size:x-large;color:Red"> + @i + </a>
            } else {

                <a href="" style="color:Blue" id='ChangeThemeTo_i'>@i</a>
            }
        }

Steve Hobbs · Accepted Answer · 2010-11-25T11:21:29.140

2

For one thing I think your over-use of the @ symbol is giving you issues. Try:

@foreach(var i in Themes.ThemesAvailable()) 
{
    if (i.Equals(Themes.ThemeToUse))
    {
        <text><a href="" id="A1" style="font-size:x-large;color:Red"> + @i + </a></text>
    } 
    else 
    {
       <text><a href="" style="color:Blue" id='ChangeThemeTo_@i'>@i</a></text>
    }
}

Edit

For your latest problem where it's not writing out the id attributes properly, try using string.Format instead:

<a href="" style="color:Blue" id="@(string.Format("ChangeThemeTo_{0}", i))">@i</a>

Or simply concatenate them:

<a href="" style="color:Blue" id="@("ChangeThemeTo_" + i)">@i</a>

edited Nov 25 '10 at 11:21

answered Nov 25 '10 at 10:42

Steve Hobbs

3,296
1
22
21

No. Seems everything within the i=>{...} is considered code. So to break out it seems @ has to be put in front of . Like my second example. That does not work either... Seems like the Razor intellisense/compiler does not work very well within lambda expressions...? – Wolf5 Nov 25 '10 at 10:50
Yes I've just seen that myself. Have you tried using a traditional for..each construct instead of using the ForEach() method to loop through your data? – Steve Hobbs Nov 25 '10 at 10:53
The code vs tags works much better when I do foreach() instead of the lambda expression. But does not if I have the @i within the quotes on the id tag. That breaks it. And I get errors of missing '}' on line 1, column 1 of the code. – Wolf5 Nov 25 '10 at 11:00
I got a local example of setting attributes using literals and variables working and updated my original answer, hopefully this helps. – Steve Hobbs Nov 25 '10 at 11:15
Just a note - it's not necessary to wrap your `anchor` tags with `text` tags in this case. Razor is smart enough to know the difference between html and code so your text tags are unnecessary. – Buildstarted Nov 25 '10 at 17:49
Aslo, it's unnecessary to use the `string.format` or the `@(..)` for the `@i` – Buildstarted Nov 25 '10 at 17:55

score 0 · Answer 2 · answered Nov 25 '10 at 18:49

So apparently you need text before the code to make the markup parser work

@foreach(var theme in Themes.ThemesAvailable()) {
    if (theme.Equals(Themes.ThemeToUse))
        <a href="" id="a1" style="font-size:x-large;color:Red">@theme</a>
    else
        <a href="" style="color:Blue" id="ChangeThemeTo_@(theme)">@theme</a>
}

The above is all that is necessary for your code to work. The reason you don't need to use the text tag is because text is just a mockup html tag that looks like html so that it forces the parser to go into html mode. Since a real html tag does the same thing you don't need to use text. The reason you need to use the @(theme) in your id tag for the second anchor tag is probably because it looks similar to an email address and the parser is told to ignore anything that looks like an email address. You can verify this by trying ChangeThemeTo_ @theme with a space between and you'll see that it works. the @() is there to force the compiler to recognize what is between the () as code. I hope this helps your understanding of the parser a bit more.

Thanks. I got my code to work, but even after understanding the parser better I can not find a way to make it work nicely with Lambda expressions as those expressions are between '(' and ')', and everything between is automatically parsed as code unless you break it with @. But even then it does not seem to work as the compiler (at runtime) looks for code to execute and it does not understand the HTML tags. You get a nice CS0201 error (expected code error). Today when "everything is to be done" with lambdas and linq it would be nice to know how to actually use that with Razor. — Wolf5, Nov 26 '10 at 08:49

MVC3 Razor syntax. How do I convert this ASP.NET style to Razor. (also issues with @ within quotes)

2 Answers2

Linked