Populating a <asp:literal> with text from backend code

Question

I am trying to populate a .net component with text from the backend .aspx file. However, when I test my web app most of the elements within the table are missing.

Prior to trying to run the code as a long string from the backend in the .aspx file, I ran it from the .aspx.cs file as HTML code to check the output was as expected, it was.

my literal component on the front-end

<asp:Literal ID="DashboardContainer" runat="server">
                    <%-- dashboard stuff --%>
                </asp:Literal>

code to populate literal component from the backend

String TableContents="";
foreach(....){
TableContents += " <table style='width: 100%; border-color:lightgray; border-style:solid; border-top:none; border-left:none; border-right:none; border-width:0.5px;'> "
                    + "<tr>" +

                        " <td style='width: 25%;'> " +
                           " <table style='width:95%;'> " +
                                "<tr>" +
                                   " <td>" +
                                       " <asp:ImageButton ID='ImageButton1' runat='server' CssClass='ImageBtn' ImageUrl='Images/TrackingImg.PNG' /> " +
                                   " </td>" +
                               " </tr> " +
                               " <tr>"+
                                   " <td>"+
                                       " <asp:Label ID='DashboardID' runat='server'></asp:Label>"+
                                    "</td>"+
                               " </tr>"+
                           " </table>"+
                        "</td>"+

                    "    <td style='width: 30%;'>"+
                           " <table style='width:95%;'>"+
                              "  <tr>"+
                                  "  <td>"+
                                      "  <asp:Label ID='Label6' runat='server' CssClass='DashboardLabel' Text='Project Title:'></asp:Label>"+
                                  "  </td>"+
                               " </tr>"+
                               " <tr>"+
                                  "  <td>"+
                                       " <asp:Label ID='ProjectTitleTxt' runat='server'></asp:Label>"+
                                    "</td>"+
                               " </tr>"+
                               " <tr>"+
                                    "<td>"+
                                        "<asp:Label ID='Label7' runat='server' CssClass='DashboardLabel' Text='Created By:'></asp:Label>"+
                                   " </td>"+
                               " </tr>"+
                              "  <tr>"+
                                   " <td>"+
                                 "       <asp:Label ID='CreatedByTxt' runat='server'></asp:Label>"+
                                    "</td>"+
                               " </tr>"+
                               " <tr>"+
                                  "  <td>"+
                                      " <asp:Label ID='Label9' runat='server' CssClass='DashboardLabel' Text='Date Created:'></asp:Label>"+
                                   " </td>"+
                              "  </tr>"+
                               " <tr>"+
                                  "  <td>"+
                                      "  <asp:Label ID='DateTxt' runat='server'></asp:Label>"+
                                   " </td>"+
                               " </tr>"+
                           " </table>"+
                       " </td>"+

                      "  <td style='width: 35%'>"+
                            "<table style=' width:95%;'>"+
                               " <tr>"+
                                   " <td>"+
                                          " <asp:Label ID='Label8' runat='server' CssClass='DashboardLabel' Text='Project Description:'></asp:Label>"+
                                   " </td>"+
                             "   </tr>"+
                              "  <tr>"+
                                  "  <td style=' width:95%;  height:120px;'>"+
                                     "   <asp:Label ID='DescriptionTxt' runat='server'></asp:Label>"+
                                 "   </td>"+
                              "  </tr>"+
                         "   </table>"+
                        "</td>"+
                  "  </tr>"+
                "</table>";
            }
            DashboardContainer.Text = TableContents;

The actual result is just a table with the border and nothing within. The expected result should contain 3 separate tables each with labels and text.

I'm not sure what the problem is. I followed what I'd read here - How to dynamically create an HTML Table?

Answer 1

I would recommend using something like an <asp:ListView /> to accomplish something like this. It's easier to manage the HTML on the aspx page rather than a string in the .cs code-behind.

A simple implementation of this would look like this:

ASPX Page

<asp:ListView runat="server" ID="lvProjects" ItemType="Domain.Models.Project">
        <ItemTemplate>
            <table style="width: 100%; border-color:lightgray; border-style:solid; border-top:none; border-left:none; border-right:none; border-width:0.5px;"> 
                <tr> 

                    <td style="width: 25%;">  
                    <table style="width:95%;">  
                        <tr> 
                            <td> 
                                <asp:ImageButton ID="ImageButton1" runat="server" CssClass="ImageBtn" ImageUrl="Images/TrackingImg.PNG" />  
                            </td> 
                        </tr>  
                        <tr>
                            <td>
                                <asp:Label ID="DashboardID" runat="server"></asp:Label>
                            </td>
                        </tr>
                    </table>
                </td>

                <td style="width: 30%;">
                    <table style="width:95%;">
                        <tr>
                            <td>
                                <asp:Label ID="Label6" runat="server" CssClass="DashboardLabel" Text="Project Title:"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label ID="ProjectTitleTxt" runat="server" Text="<%#Item.ProjectTitle%>"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label ID="Label7" runat="server" CssClass="DashboardLabel" Text="Created By:"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label ID="CreatedByTxt" runat="server" Text="<%#Item.CreatedBy%>"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label ID="Label9" runat="server" CssClass="DashboardLabel" Text="Date Created:"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label ID="DateTxt" runat="server" Text="<%#Item.DateCreated%>"></asp:Label>
                            </td>
                        </tr>
                    </table>
                </td>

                <td style="width: 35%">
                    <table style=" width:95%;">
                        <tr>
                            <td>
                                    <asp:Label ID="Label8" runat="server" CssClass="DashboardLabel" Text="Project Description:"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td style=" width:95%;  height:120px;">
                                <asp:Label ID="DescriptionTxt" runat="server" Text="<%#Item.Description%>"></asp:Label>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            </table>
        </ItemTemplate>
    </asp:ListView>

CS

protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            lvProjects.DataSource = ProjectService.GetAll();
            lvProjects.DataBind();
        }
    }

Now the ListView will render out that HTML in the <ItemTemplate> for each row in your data set.

And of course I don't know what your objects are (here I just made up the Domain.Models.Project object and set it to the ItemType of the listview... yours will be different) or what your service call looks like to get you data in the Page_Load.