生成 HTML DOM 元素并将其插入 Razor 页面

Question

I currently am working on a asp.net MVC web application in which I have to generate a more or less complex HTML structure and then insert it into a Razor Page. Currently I generate the HTML with string concatenation and then add the string to the ViewBag in my controller, like this:

public class SomeController : Controller
{
    public IActionResult Index()
    {
        string htmlString = "<div id=\"example-div\">Some more Stuff</div>" + "Some more HTML strings";
        Viewbag.htmlString = htmlString;
            
        return View();
    }
}

And then I access and render that String into HTML inside of my Razor Page like this:

@Html.Raw(ViewBag.htmlString)

But this can't be best practice. Is there a better way to actually generate a HTML DOM element inside my controller and then load that element into the razor page like a template? If so how?

Thanks

Answer 1

Here you can create your own custom extension helper.

• Create static class

• Create a static method

• Register namespace in the web.config view folder for global access in all pages

1. Create one class

public static class HtmlHelpers   
{   
     public static MvcHtmlString RenderTemplate(this HtmlHelper helper, string moreHtml=default(string))   
     {   
        MvcHtmlString ohtml = null;
        StringBuilder builder=new StringBuilder();
        builder.Append("<div id=\"example-div\">");
        builder.Append("Some more Stuff");
        builder.Append(moreHtml);
        builder.Append("</div>");
        ohtml =new MvcHtmlString(builder.ToString());
        
        return ohtml;
     }  
 } 

2. Register your class namespace in the web.config inside namespaces attribute

<add namespace="YOURNAMESPACE"/>

3. Open any cshtml page and try to type this keyword.

@Html.RenderTemplate() // Default template
@Html.RenderTemplate("<span>More stuff</span>") // Customized template