Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Razor - how to render content into a variable

How to render a piece of Html into a variable in Razor? In Spark I used to write the following code:

<content var="t">
    <a class="tab" href="">Tab name</a>
</content>

<content var="tc">
    <div class="tabcontent">
        <p>Here goes tab content</p>
    </div>
</content>

!{tabs(t, tc)}

two variables get passed to a macro that does all the nice wrapping of the content into the tab sheet.

What's the best way to do the same in Razor?

Update: I think I got it..

In Razor, the @<text>...</text> construct can be user to produce lambda expressions, which can be reused later, which is an extended equivalent of assigning a piece of HTML to a variable. The above example can be implemented in the following way:

Func<int, object> t =
    @<text>
        <a class="tab" href="">Tab name</a>
    </text>;

Func<int, object> tc =
    @<text>
        <div class="tabcontent">
            <p>Here goes tab content</p>
        </div>
    </text>;


@tabs(t(0), tc(0))

I just can't figure out how to write parameterless lambdas (Func<object>). the int parameter in both lambdas above is a dummy. Razor seems to require one parameter (and already creates a variable "item" to denote it within the expression).

like image 860
Andy Avatar asked Nov 28 '10 09:11

Andy


People also ask

How do I assign a variable to a Razor?

To declare a variable in the View using Razor syntax, we need to first create a code block by using @{ and } and then we can use the same syntax we use in the C#. In the above code, notice that we have created the Code block and then start writing C# syntax to declare and assign the variables.

Which type of content is observed on a Razor Web page?

In a web page that uses the Razor syntax, there are two kinds of content: client content and server code. Client content is the stuff you're used to in web pages: HTML markup (elements), style information such as CSS, maybe some client script such as JavaScript, and plain text.

Which of the following represents Razor syntax?

The Razor syntax consists of Razor markup, C#, and HTML.


2 Answers

Basically the OP already answered the problem in that you could do something like:

@{
   Func<dynamic, object> a = @<text>
       Some Text        
   </text>;
   @a(new object())
}    

If the text is for a single line only you could even use the "@:" operator, just remmebr to have a semicolon (or if it needs any closing brackets or parenthesis) on the next line, as in the following example:

@{
   Func<dynamic, object> a = @: Some Text
   ;    
   @a(new object())
}

However you can capture it directly as a string if you want

@{
    string a = ((Func<dynamic, object>)(@<text>
                    Some Text
                </text>))("").ToString();
    @a //Output directly as a string        
}

You could even encapsulate it in a function:

@functions{
     public string ToString(Func<dynamic, object> input)
     {
          return input("").ToString();
     }
}

@{
    string a = ToString(@<text>
                    Some Text
               </text>);
    @a //Output directly as a string        
 }
like image 96
yoel halb Avatar answered Oct 14 '22 13:10

yoel halb


Just in case anyone else finds this post (as I did), Andy's Update is almost there. In addition to the example given, all you have to do to access the 'int' in the example given is reference @item. In @<text></text> blocks, the variable item contains the model it was called on.

Here's an example of how it can be used:

@model PageData

@{
    Func<Customer, object> sayHi = 
        @<text>
             <li>Hello @(item.FirstName)!</li>
         </text>;
}

<ul>
    @foreach(var customer in Model.Customers)
    {
        sayHi(customer);
    }
</ul>

In most instances you should probably use a partial view instead of a function like this. But in the rare instances that a partial view is not possible (such as when using the RazorEngine library), this works.

like image 27
Matt Avatar answered Oct 14 '22 14:10

Matt