Inserting html tags between C# block code in cshtml file
Solution 1
For inline escape from C# codeblock in cshtml
use @:
. For example:
@{
Func<List<Comment>, Comment, HelperResult> ShowTree = null;
ShowTree = (items, node) =>
{
@:<ul>
foreach (var comment in items)
{
}
@:</ul>
return null;
};
}
Solution 2
As I see you want to render some content by mixing Html with C# code, instead of inserting your C# code in cshtml file you can create custom Html helper, it will be something like this:
public static class CustomHtmlHelper
{
public static IHtmlContent ShowTree(this IHtmlHelper htmlHelper)
{
Func<List<Comment>, Comment, HelperResult> ShowTree = null;
var builder = new StringBuilder();
ShowTree = (items, node) =>
{
builder.Append("<ul>");
foreach (var comment in items)
{
builder.Append("<li>"+comment.Content+"</li>");
}
builder.Append("</ul>");
return null;
};
//Just for testing purposes only
var comments = new List<Comment> { new Comment { Content = "Comment 1" }, new Comment { Content = "Comment 2" } };
ShowTree(comments, new Comment());
//
return new HtmlString(builder.ToString());
}
}
In cshtml
@Html.ShowTree()
x19
Updated on June 15, 2022Comments
-
x19 almost 2 years
I want to use html tags between C# block code, I've tried it but I got errors. How can I insert html tags between C# block code in cshtml file?
The error is:
only assignment call increment decrement and new object expressions can be used as a statement
only assignment call increment decrement await and new object expressions can be used as a statement
@{ Func<List<Comment>, Comment, HelperResult> ShowTree = null; ShowTree = (items, node) => { @<text> <ul> @foreach (var comment in items) { } </ul> </text>; return null; }; }
Update:When I move the text outside the {}, I encountered some errors, too. Look at this picture.
Update 2: I've used
@:
but still there is a problem. that is;expected
How can I solve this problem?
@{ Func<List<Comment>, Comment, int, HelperResult> ShowTree = null; ShowTree = (items, parentItem, parentId) => { var count = items.Count(p => p.ParentId == parentId); if (count > 0) { @:<ul> foreach (var item in items.Where(p => p.ParentId == parentId).ToList()) { @:<li> string collapseId = string.Format("collapse_{0}", item.Id); @:<a class="btn btn-link" data-toggle="collapse" href="#@{collapseId}" aria-expanded="True" aria-controls="@{collapseId}"> @:<span class="fa fa-minus" aria-hidden="true"> Commenter Name</span> @:</a> @:<div class="collapse show" id="@{collapseId}"> @:<div class="card"> @:<p>item.Description</p> @:</div> ShowTree(items, item, item.Id); @:</div> @:</li> } @:</ul> } return null; }; };
Update 3: Latest codes with error messages in browser
@using Jahan.Beta.Web.App.Helper @using Jahan.Beta.Web.App.Models @using Microsoft.AspNetCore.Mvc.Razor @using Jahan.Beta.Web.App.Helper @model List<Comment> @{ Func<List<Comment>, Comment, int, HelperResult> ShowTree = null; ShowTree = (items, parentItem, parentId) => { var count = items.Count(p => p.ParentId == parentId); if (count > 0) { @:<ul> @<text>@{ foreach (var item in items.Where(p => p.ParentId == parentId).ToList()) { string collapseId = string.Format("collapse_{0}", item.Id); <li> <a class="btn btn-link" data-toggle="collapse" href="@collapseId" aria-expanded="True" aria-controls="@collapseId"> <span class="fa fa-minus" aria-hidden="true"> Commenter Name</span></a> <div class="collapse show" id="@collapseId"><div class="card"><p>@item.Description</p></div> @ShowTree(items, item, item.Id); </div> </li> } }</text> @:</ul> } return null; }; } @{ Func<List<Comment>, HelperResult> CreateTree = null; CreateTree = commentList => new Func<List<Comment>, HelperResult>( @<text>@{ List<Comment> nodesRoot = commentList.Where(p => p.ParentId == null).ToList(); <ul> @foreach (var comment in nodesRoot) { <li> <p>@comment.Description</p> @ShowTree(commentList, comment, comment.Id); </li> } </ul> } </text>)(null); } <div class="media mb-4"> <div class="media-body"> @CreateTree(Model) </div> </div>
An error occurred during the compilation of a resource required to process this request. Please review the following specific error details and modify your source code appropriately. Generated Code
; expected