Forward-Slash missing from string in Sitecore Sublayout

Question

I have a function in the C# code behind of a Sitecore sublayout that returns a string that looks like this:

public string getProductTitle() 
    {
        Item productItem = itemHelper.GetItemByPath(currentItemPath);
        Sitecore.Data.Fields.ImageField imgField = ((Sitecore.Data.Fields.ImageField)productItem.Fields["Logo"]);
        if (imgField.Value != "")
        {
            return "<sc:Image CssClass=\"product-image ng-scope\" Field=\"Logo\" runat=\"server\" />";
        }

        string productTitle = "";
        productTitle = productItem["Produkt Titel"];
        return "<div class=\"product-name ng-binding ng-scopen\" ng-if=\"!currentProduct.imageNameHome\">" + productTitle + "</div>";
    }

And in the ascx I call this fuction:

<%= getProductTitle() %>

The problem is that in the end this is what I'm getting in HTML at runtime:

"<sc:Image CssClass=\"product-image ng-scope\" Field=\"Logo\" runat=\"server\" >";

The / at the end is missing, which breaks the whole line and no image is shown. The

I also tried this:

string a = WebUtility.HtmlEncode("<sc:Image CssClass=\"product-image ng-scopen\" Field=\"Logo\" runat=\"server\" />");
return WebUtility.HtmlDecode(a);

and this:

return @"<sc:Image CssClass=""product-image ng-scopen"" Field=""Logo"" runat=""server"" />";

With the same result.

Am I missing something here? How can I fix this?

Answer 1

I cannot see this working due to the ASP.NET page life cycle.

Sitecore controls are like normal user controls and they run on the server side - returning them as a string will be too late in the page lifecycle for them to render.

I would place the <sc:Image /> control in the ascx page or use a FieldRenderer object to get the HTML from Sitecore

 Sitecore.Web.UI.WebControls.FieldRenderer.Render(myItem, "MyFieldName", "disable-web-editing=true");

You can then use logic to show or hide the Image Field and title control based on you requirements. This assumes you are using the Sitecore Context Item.

Replace the <%= getProductTitle() %> with

 <sc:Image runat="server" ID="imgLogo" Field="Logo" />

 <asp:Placeholder runat="server" ID="phTitle">
   <div class=\"product-name ng-binding ng-scopen\" ng-if=\"!currentProduct.imageNameHome><sc:Text runat="server" ID="title"  Field="Produkt Titel"/></div>
 </asp:Placeholder>

Then in the code behind Page Load method

 var currentItem = Sitecore.Context.Item;
 if(string.IsNullOrEmpty(currentItem["Logo"])
 {
    imgLogo.Visible=False;
 }

 if(string.IsNullOrEmpty(currentItem["Produkt Titel"])
 {
     phTitle.Visible=False;
 }

More information here:

http://gettingtoknowsitecore.blogspot.co.uk/2010/01/displaying-field-values-using-server.html