Question Create <ul> and <li> dynamically

[TechAspirant]

Hello,

I am trying to create <ul> and <li> tags dynamically using C#. I my case I want to read Catalog table from SSRS where I do get all the folders, subfolders and report file path from the table. Based on the received data from the SQL Catalog table wanted to create an algorithm which creates UL and LI tag as HTML string.
Cases :
Can be sub folders in parent folder
Can be folders and a report file in a folder

Below is the piece of code I tried but somehow nested subfolders are not getting created.

//Subfolder
List<FolderInfo> subFolders = new List<FolderInfo>();
for (var i = 0; i < folderDataTable.Rows.Count; i++)
{
    var path = folderDataTable.Rows[i]["Path"].ToString();
    var name = folderDataTable.Rows[i]["Name"].ToString();
    if (path.Count(c => c == '/') > 1)
    {
        //Reports
        var rows = dataTable.AsEnumerable()
            .Where(r => r.Field<string>("Path") == path + "/" + r.Field<string>("Name"));
        DataTable reportTableFiltered = rows.Any() ? rows.CopyToDataTable() : new DataTable();
        var reports = string.Empty;
        for (var k = 0; k < reportTableFiltered.Rows.Count; k++)
        {
            reports += "<li class=\"\"><a href=\"/MiReport/Report/ViewReport?ReportPath=" + reportTableFiltered.Rows[k]["Path"].ToString() + "\" id=\"" + reportTableFiltered.Rows[k]["Path"].ToString() + "\"><i class=\"fa fa-file-text-o\"></i><span> " +
                reportTableFiltered.Rows[k]["Name"].ToString().Replace("/", string.Empty) + "</span></a></li>";
        }

        subFolders.Add(new FolderInfo
                       {
                           folderKey = path,
                           folderValue = "<li class=\"treeview\">" +
                               "<a>" +
                               "<i class=\"fa fa-folder-open\"></i><span>" + name + "</span>" +
                               "<span class=\"pull-right-container\"><i class=\"fa fa-angle-left pull-right\"></i></span></a>" +
                               "<ul class=\"treeview-menu\">" +
                               reports +
                               "</ul>" +
                               "</li>",
                           parentFolder = "/" + path.Split('/')[1]
                           });
    }
}

//Folder
List<FolderInfo> folders = new List<FolderInfo>();
for (var i = 0; i < folderDataTable.Rows.Count; i++)
{
    var path = folderDataTable.Rows[i]["Path"].ToString();
    var name = folderDataTable.Rows[i]["Name"].ToString();
    if (path.Count(c => c == '/') == 1)
    {
        //Sub Folders
        DataTable tblFiltered = folderDataTable.AsEnumerable()
            .Where(r =>r.Field<string>("Path").StartsWith(path))
            .CopyToDataTable();
        var subFolderPlaceHolder = string.Empty;
        for (var j = 0; j < tblFiltered.Rows.Count; j++)
        {
            var subFolder = subFolders.Where(item => item.parentFolder == path && item.folderKey == tblFiltered.Rows[j]["Path"].ToString());
            if (subFolder.Any())
            {
                subFolderPlaceHolder += subFolder.First().folderValue;
            }
        }

        //Reports
        var rows = dataTable.AsEnumerable()
            .Where(r => r.Field<string>("Path") == path + "/" + r.Field<string>("Name"));
        DataTable reportTableFiltered = rows.Any() ? rows.CopyToDataTable() : new DataTable();
        var reports = string.Empty;
        for (var k = 0; k < reportTableFiltered.Rows.Count; k++)
        {
            reports += "<li class=\"\"><a href=\"/MiReport/Report/ViewReport?ReportPath=" + reportTableFiltered.Rows[k]["Path"].ToString() + "\" id=\"" + reportTableFiltered.Rows[k]["Path"].ToString() + "\"><i class=\"fa fa-file-text-o\"></i><span> " +
                reportTableFiltered.Rows[k]["Name"].ToString().Replace("/", string.Empty) + "</span></a></li>";
        }

        folders.Add(new FolderInfo
                    {
                        folderKey = path,
                        folderValue = "<ul class=\"treeview-menu\" style=\"display:block;\"><li class=\"treeview\">" +
                            "<a>" +
                            "<i class=\"fa fa-folder-open\"></i><span>" + name + "</span>" +
                            "<span class=\"pull-right-container\"><i class=\"fa fa-angle-left pull-right\"></i></span></a>" +
                            "<ul class=\"treeview-menu\">" +
                            subFolderPlaceHolder +
                            reports +
                            "</ul>" +
                            "</li></ul>",
                        parentFolder = null
                        });
    }
}
for (var i = 0; i < folders.Count; i++)
{
    htmlString += folders[i].folderValue;
}

 

[Skydiver]

Step through the code with a debugger instead of just running it to see the results. As you are stepping through the code, where is the code diverging from your expectations? At which line are you expecting it to go in and create a nested folder, but the debugger steps to another place instead bypassing the nested folder creation?

As an aside, have you considered using the HtmlTextWriter class to help make composing the HTML a little bit more readable?

Also your code would be more readable if after you query your data table, you put the retrieved information into a list of objects instead of into a new data table.