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).
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.
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.
The Razor syntax consists of Razor markup, C#, and HTML.
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
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With