c# - Server tags cannot contain <% ... %> constructs

Question

I am trying to use CDN for my images on the website. Problem is, sometimes I have server controls such as ImageButton, and I would like to use a class in order to fully extract the path of the CDN. for that purpose I tried doing:

<asp:ImageButton runat="server" OnClick="Agree" ImageUrl="<%=ResourceManager.GetImageCDN("iagree.png")%>" />

and I get the title as error.

Only if I'm using <%# it will work (and only if I an databinding). How can I do this easily? how can I place CDN code on my markup code?

Thanks!

Answer 1

There are four options (in addition to "<%# %>" style databinding, which I don't recommend):

1. Set the value in code behind. This inflates ViewState, and of course requires code changes for every instance of the control.
2. Use a custom ExpressionBuilder. This doesn't inflate ViewState, but it does require changing all of your markup.
3. Use a Control Adapter to change the behavior of the control everywhere in your app; for example, by modifying the ImageUrl property before the control is rendered. Can be done with no ViewState impact.
4. Use a class that inherits from the ImageButton class, combined with tag mapping to use that class instead of the original everywhere in your app, and eliminate the need for changes to your markup. Can be done with no ViewState impact.

The best option depends on your app's requirements, but I usually prefer a control adapter if you want to make the changes site-wide.

Here's an example, in case it helps:

using System;
using System.IO;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.Adapters;

namespace Sample
{
    public class ImageButtonControlAdapter : WebControlAdapter
    {
        protected override void BeginRender(HtmlTextWriter writer)
        {
            ImageButton image = this.Control as ImageButton;
            if ((image != null) && !String.IsNullOrEmpty(image.ImageUrl))
            {
                //
                // Decide here which objects you want to change
                //
                if (!image.ImageUrl.StartsWith("http") && 
                    !image.ImageUrl.StartsWith("data:"))
                {
                    image.ImageUrl = ResourceManager.GetImageCDN(image.ImageUrl);
                }
            }
            base.BeginRender(writer);
        }
    }
}

Configure it into your app with the following entry in App_Browers/adapter.browser:

<browsers>
  <browser refID="Default">
    <controlAdapters>
      <adapter controlType="System.Web.UI.WebControls.ImageButton"
               adapterType="Sample.ImageButtonControlAdapter" />
    </controlAdapters>
  </browser>
</browsers>

Your markup would be:

<asp:ImageButton runat="server" OnClick="Agree" ImageUrl="iagree.png" />

Cool, right??