How to write HTML output in a web part?

Question

I'm using SharePoint 2010. I've created a web visual web part that queries a list and returns a set of results. What I would like to do now is to format and display the output using HTML code.

In my VisualWebPart.ascx.cs module I have created a method to create some html output using HtmlTextWriter based on the results received (an example of the code is shown below):

private void renderField(SPListItem item, HtmlTextWriter writer, String className, String fieldName, String label) {

  if (!string.IsNullOrEmpty(item[fieldName].ToString()))
  {
     writer.AddAttribute(HtmlTextWriterAttribute.Class, className);
     writer.RenderBeginTag(HtmlTextWriterTag.Div);
     writer.AddAttribute(HtmlTextWriterAttribute.Class, "some-label");
     writer.RenderBeginTag(HtmlTextWriterTag.Div);
     writer.Write(label);
     writer.RenderEndTag(); // close some-label div
     writer.AddAttribute(HtmlTextWriterAttribute.Class, "some-value");
     writer.RenderBeginTag(HtmlTextWriterTag.Div);
     writer.Write(item[fieldName].ToString());
     writer.RenderEndTag(); // close some-value div 
     writer.RenderEndTag(); // close className div
  }
}

My question is what is the best way to get this HTML to display on the screen? I've seen examples of placing this text in a label control but seems wrong to me. What is the proper approach to use?

Answer 1

If you're querying a list and outputting the results then I would recommend using the ASP.NET Repeater control/pattern (https://msdn.microsoft.com/en-us/library/zzx23804(v=vs.85).aspx) - essentially the precursor to Razor templating, a Repeater lets you use HTML 'templates' data-bound to a data source.

Here's a real-world example from some code I'm writing.

In the ascx.cs file:

ctlDivisionList.DataSource = svc.GetDivisions();
ctlDivisionList.ItemDataBound += ctlDivisionList_ItemDataBound;
ctlDivisionList.DataBind();

in the ascx file:

<select class="form-control col-md-4" id="Division" data-parsley-required>
   <asp:Repeater ID="ctlDivisionList" runat="server">
        <ItemTemplate>
            <option value="<%#Eval("DivisionCode")%>" 
                data-name="<%#Eval("Name")%>" <asp:Literal ID="ctlSelectedDivision" 
                runat="server" Visible="false">
                    selected
                </asp:Literal>><%#Eval("Name")%>
                (<%#Eval("DivisionCode")%>)
             </option>
         </ItemTemplate>
  </asp:Repeater>
</select>

This is a sort of strange way to do a data-driven select but it worked for my purposes and is a good succinct example for your reference. The Eval function used above is a sort of shortcut that lets you access properties of the item you've databound to. Here, I had a Division object containing DivisionCode and Name.

Additionally, instead of writing out HTML as in your example I would recommend working with ASP.NET Controls and dynamically adding them to the page if a Repeater isn't flexible enough (see: https://msdn.microsoft.com/en-us/library/kyt0fzt1.aspx)

For example, assuming you have a Panel defined on your page, you can then add controls to it dynamically:

Label myLabel = new Label();
myLabel.Text = "Sample Label";

myPanel.Controls.Add(myLabel);

Hope this helps!