Conditional html rendering with ASP.NET

Question

Consider the following code snippet:

<asp:TemplateField HeaderText="Item Data">
    <ItemTemplate>
        <%# DataBinder.Eval(Container.DataItem, "ItemData1") %>
        <br />&nbsp;&nbsp;
        <%# DataBinder.Eval(Container.DataItem, "ItemData2") %>
    </ItemTemplate>
</asp:TemplateField>

I need to refactor this so that if ItemData2 is blank, the <br />&nbsp;&nbsp; does not render

I am unsure how I can achieve this.

EDIT: I tried to add a condition like so:

<% if(DataBinder.Eval(Container.DataItem, "ItemData2") != null) { %>
    <br />&nbsp;&nbsp;
    <%# DataBinder.Eval(Container.DataItem, "ItemData2") %>
<% } %>

It didn't work, and looks really ugly!

Answer 1

In DataBinder.Eval you can pass your condition like below and this will work for you.

<%#( DataBinder.Eval(Container.DataItem,"Item1)==null ?DataBinder.Eval(Container.DataItem,"Item1"):
DataBinder.Eval(Container.DataItem,"Item2"))%>

Answer 2

Place the dataBinder.Eval() statement inside an asp:literal control, then add a DataBinding event handler in the CodeBehind, and set Literal2.Visible = false based on your condition. Place your <br/ >in the second literal.

Note this method maintains separation of concerns such that you do not have C# code returning HTML snippets, but is not "inline".

An example, using a repeater, but all these controls work similarly:

   void Repeater1_ItemDataBound(Object Sender, RepeaterItemEventArgs e) 
   {

      // Execute the following logic for Items and Alternating Items.
      if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) 
      {

         var dataItem = (YourDataItem)e.Item.DataItem;
         if (null == dataItem.Item2)// this is pseudo code because I don't know what your dataItem looks like 
         {
             ((literal)e.Item.FindControl("Literal2")).Visible = false;
         }
      }
   }    

Th item template would look like this:

<asp:TemplateField HeaderText="Item Data">
    <ItemTemplate>
        <%# DataBinder.Eval(Container.DataItem, "ItemData1") %>
        <asp:Literal Runat="server" ID="Literal2">
            <br />&nbsp;&nbsp;
            <%# DataBinder.Eval(Container.DataItem, "ItemData2") %>
        </asp:Literal>
    </ItemTemplate>
</asp:TemplateField>

Answer 3

Instead of using a <br />&nbsp;&nbsp;, consider wrapping both items in an element that displays as a block, like a div

<asp:TemplateField HeaderText="Item Data">
    <ItemTemplate>
        <div><%# DataBinder.Eval(Container.DataItem, "ItemData1") %></div>
        <div><%# DataBinder.Eval(Container.DataItem, "ItemData2") %></div>
    </ItemTemplate>
</asp:TemplateField>

If ItemData2 is blank, the div will be blank and not take up any space or cause a newline in the HTML.

See this JSFiddle for examples

Answer 4

i think you can this by define public method in the code behind .cs that takes ItemData2 then check it was empty it return the wanted markup string, if not return empty string

Example::

<asp:TemplateField HeaderText="Item Data">
    <ItemTemplate>
        <%# DataBinder.Eval(Container.DataItem, "ItemData1") %>        
        CheckEmptyData(Eval("ItemData2").ToString())
    </ItemTemplate>
</asp:TemplateField>

then in code behind:

public string CheckEmptyData(string ItemData2)
{
    if (string.IsNullOrEmpty(ItemData2))
        return "";
    else
        return "<br />&nbsp;&nbsp;" + ItemData2;
}

Answer 5

At the time of binding, You can add newline and space infront of "ItemData2". ie,

if(ItemData2Field.length>0){
    string item2 = ""+
    "  " + ItemData2;}

Put this in two lines.

Answer 6

Based on Jodha's answer, this is how I solved it. Certainly not the most elegant solution, but nothing I can see here appears to be any more elegant.

<%# DataBinder.Eval(Container.DataItem, "ItemData2") != null ? DataBinder.Eval(Container.DataItem, "ItemData1") + "<br />&nbsp;&nbsp;<span style=\"color: gray;\">" + DataBinder.Eval(Container.DataItem, "ItemData2") + "</span>" : DataBinder.Eval(Container.DataItem, "ItemData1") %></asp:Label>