Inserting html tags between C# block code in cshtml file

11,414

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()

Share:
11,414
x19
Author by

x19

Updated on June 15, 2022

Comments

  • x19
    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 enter image description here

    @{
        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. enter image description here

    Update 2: I've used @: but still there is a problem. that is ;expected

    How can I solve this problem?

    enter image description here

    @{
    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>
    

    Latest codes

    Error messages that shows in browser

    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