Question

I am dynamically adding usercontrols to my page:

• when the user clicks on the button, jquery ajax method executes, which calls my web method
• the web method returns my usercontrol rendered as string
• in the success part of ajax call the received html is appended to a placeholder

Method to render my usercontrol:

public static string RenderUserControlAsString(string path)
{
    var page = new PageOverride();
    var viewControl = (UserControl)page.LoadControl(path);
    page.Controls.Add(viewControl);
    var output = new StringWriter();
    HttpContext.Current.Server.Execute(page, output, true);
    return output.ToString();
}

This works OK, but I have problems with ImageUrl of my asp:Image element (my usercontrol contains multiple elements and asp:Image is just one of them):

<asp:Image ID="imgDelete" runat="server" ImageUrl="~/images/delete.gif" onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor='default'"/>

The ImageUrl gets transformed to ../images/delete.gif, which is not OK. Actially, the ImageUrl always receives two dots and a slash infront of it. Any ideas how to prevent that?

Edit – project structure:

Root:

• images
  • delete.gif
  • …
• WebControls
  • MyWebControl.ascx
  • …
• MyWebService.asmx
• MyPage.aspx

Answer 1

For now I just added an override method to my web control:

protected override void OnPreRender(EventArgs e)
{
      base.OnPreRender(e);

      // Don't use ImageUrl, set fixed src attribute.
      imgDelete.Attributes["src"] = "images/delete.gif";
}

The drawback is, that the image is displayed only on pages, which reside in root folder, but that works for me.

Another way would be with jquery livequery plugin:

$('.Delete').livequery(function () {
    $(this).attr('src', 'images/delete.gif');
});

Edit – I could probably also set CssClass to the image button and set background: url(../images/add.gif) with css…