2

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?

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!

  • Thanks for the response Ted. I am trying to follow the information in the links provided and in your example. Can I put this code in ascx.cs file? – user5013 Nov 3 '15 at 22:17
  • Hi - yes, all code should go in the ascx.cs file, typically in Page_Load is fine. I added an example that might help with the Repeater approach. – Ted N. Nov 3 '15 at 22:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.