Are there any alternatives of ASP Panels to insert html from code?

Question

I'm using an ASP panel as a placeholder to create things like menus that come from the database. For this I created a class with a function that returns a Panel.

Is there an alternative to this? I would like my code to be completly independed of the project. Maby some classic ASP function?

Code that creates the menu:

public static Panel createMenu(Panel panel)
    {
        List<menu> menuItems = menu.selectMenuitems();
        panel.Controls.Add(new LiteralControl("<ul>"));

        for (int i = 0; i < menuItems.Count; i++)
        {
            string menuPath = menuItems[i].virtualpath;
            string menuName = menuItems[i].name;

            panel.Controls.Add(new LiteralControl("<li>"));
            // Get the full URL
            string url = HttpContext.Current.Request.Url.AbsoluteUri;

            // Get last part of the URL
            string path = url.Split('/').Last().ToLower();

            // If the url is the same as the menu-item, add class active.
            if (path == menuPath || (path == "default.aspx" && i==0))
                panel.Controls.Add(new LiteralControl("<a class='active' href='/" + menuPath + "'>"));
            else
                panel.Controls.Add(new LiteralControl("<a href='/" + menuPath + "'>"));

            panel.Controls.Add(new LiteralControl(menuName));
            panel.Controls.Add(new LiteralControl("</a>"));
            panel.Controls.Add(new LiteralControl("</li>"));
        }
        panel.Controls.Add(new LiteralControl("</ul>"));

        return panel;
    }

Answer 1

Your menu structure appears to be something like this:

<ul>
  <li><a class href>name</a></li>
</ul>

Why not just create a routine that outputs a string. You can pass the string over to a literal control to load the menu. Something like:

myLiteral.Text = createMenu();

This code is not tested, but hopefully gives you a start:

   public static string createMenu()
{
    List<menu> menuItems = menu.selectMenuitems();
    var m = new StringBuilder();

    m.AppendLine("<ul>");

    for (int i = 0; i < menuItems.Count; i++)
    {
        string menuPath = menuItems[i].virtualpath;
        string menuName = menuItems[i].name;

        m.AppendLine("<li>");

        // Get the full URL
        string url = HttpContext.Current.Request.Url.AbsoluteUri;

        // Get last part of the URL
        string path = url.Split('/').Last().ToLower();

        // If the url is the same as the menu-item, add class active.
        m.AppendLine("<a " + setActiveClass(path, menuPath, i) + " href=\"/" + menuPath + "\">");
        m.AppendLine(menuName);
        m.AppendLine("</a>");
        m.AppendLine("</li>");

    }
    m.AppendLine("</ul>");
    return m.toString();
} 

private static string setActiveClass(string path, string menuPath, int i) {

  if (path.Equals(menuPath, StringComparison.OrdinalIgnoreCase) || (path.Equals("default.aspx", StringComparison.OrdinalIgnoreCase) && i==0)) {
     return "class=\"active\"";
  }
  else {
     return "";
  }
}

You can also expand upon this to include sub-menus.

Answer 2

To be "independent" you could create the menu via Javascript/Jquery.

You can create a .ashx page or something like this that returns a JSON than you create the menu asynchronously. Your JSON should return a two keys structure like this

[{"menuName": "menu1","menuLink": "http://www.google.com"}, {   "menuName": "menu2",    "menuLink": "http://www.yahoo.com"}, {  "menuName": "menu3",    "menuLink": "http://www.pudim.com"}]';

Your JS/jQuery function would be like this

function createMenuAsync()
{
    var menuContainer = $("#menuContainer");
    var listRoot = $("<ul></ul>");
    $.getJSON(callString, function (response) {
        $.each(JSON.parse(response), function(key,value){
             var listItem = $("<li></li>");
             var itemLink = $("<a>" + value.menuName + "</a>").attr("href",value.MenuUrl);
             itemLink.appendTo(listItem);
             listItem.appendTo(listRoot);
        })
    });

    listRoot.appendTo(menuContainer);
}

The code will be cleaner and will be lighter to your webserver, since the html tags elements will be created on client side instead of server side.

I create a fiddle with this code working

https://jsfiddle.net/h4ywwxm8/2/