在自定义ASP.Net AJAX Extender中嵌入图像

Question

I have created a custom extender using ASP.Net AJAX Control Toolkit. Below is the snippet from my extender class.

using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;

[assembly: WebResource("CustomExtenders.ListComplete.ListCompleteBehavior.js", "text/javascript")]
[assembly: WebResource("CustomExtenders.ListComplete.style.css", "text/css")]
[assembly: WebResource("CustomExtenders.ListComplete.close.gif", "image/gif")]

namespace CustomExtenders.ListComplete
{
    [Designer(typeof(ListCompleteDesigner))]
    [ClientScriptResource("CustomExtenders.ListCompleteBehavior", "CustomExtenders.ListComplete.ListCompleteBehavior.js")]
    [ClientCssResource("CustomExtenders.ListComplete.style.css", LoadOrder = 1)]
    [TargetControlType(typeof(ListBox))]
    public class ListCompleteExtender : ExtenderControlBase
    {

The js and css files above are loaded perfectly with the assembly but it does not copy the gif image in the application directory. The css in style.css reference close.gif but it does not find it there.

I have set the Build Action property to Embedded Resource and it does not help.

Does anyone know how can I embed this resource.

Answer 1

Well, I fixed it myself with a little bit of work-around (or hack).

I have overriden the OnInit event in the above ListCompleteExtender class like this,

 protected override void OnInit(System.EventArgs e)
    {
        base.OnInit(e);

        string closeImageUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(), "CustomExtenders.ListComplete.close.gif");

        //LiteralControl include = new LiteralControl(closeImageUrl);

        Label lblCloseImageUrl = new Label();
        lblCloseImageUrl.ID = "lblCloseImageUrlListCompleteExtender";
        lblCloseImageUrl.ViewStateMode = ViewStateMode.Disabled;
        lblCloseImageUrl.EnableViewState = false;
        lblCloseImageUrl.Text = closeImageUrl;
        lblCloseImageUrl.Attributes["style"] = "display: none;";

        this.Page.Header.Controls.Add(lblCloseImageUrl);
    }

As you could see in the earlier code, I was able to load the image close.gif in the assembly but could not find a way to reference it.

I have retrieved the URL of the above image and wrote it in a Label control with ID lblCloseImageUrlListCompleteExtender . I have placed the label in the page header, hide it and disbaled ViewState to make it as light as possible.

Now modify the extender javascript and add these lines after the control rendering javascript:

        var imgCloseUrl = $("#lblCloseImageUrlListCompleteExtender").text()
        var closebuttonStyle = getCSSRule('ul.holder li.bit-box a.closebutton');
        closebuttonStyle.style.background = 'url("' + imgCloseUrl + '") repeat scroll 0 0 transparent';

The getCSSRule function used above is taken from here .

What we have just done here is that, modify the CSS used to display the close.gif to point the the URL of image extracted from assembly.