Thursday, January 18, 2007

Add images as Web Resources

Adding a image programmatically to UpdateProgress (ajax)

First, create a class called MyTemplate.

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace YourNamespace
{
public class MyTemplate : TemplateControl, ITemplate
{
private string template;

public MyTemplate(string template)
{
this.template = template;
}

public void InstantiateIn(Control container)
{
LiteralControl lc = new LiteralControl(this._template);
container.Controls.Add(lc);
}
}
}


sample aspx code------


create a Asp UpdatePanel
create Content Template
create a empty Update Progress having id="OpenProgress"




Second, in the calling code, set your Template based property like so.---------

string imageTemplateString = "\";
OpenProgress.ProgressTemplate = new CustomTemplate(string.Format(imageTemplateString, "Loading. Please wait...", LoadingImageUrl));

where LoadingImageUrl return the image web resource


Removing images from CSS and adding it from CS


CSS with images(absolute path)-----

function ShowHideGroups(thisImage)
{
if(isExpanded)
thisImage.src = "iamges/minus_icon.gif";
else
thisImage.src = "images/plus_icon.gif";
}

CSS without images(absolute path)-----

var minusIcon;
var plusIcon;

function ShowHideGroups(thisImage)
{
if(isExpanded)
thisImage.src = minusIcon;
else
thisImage.src = plusIcon;
}

CodeBehind----


from the pages where your are accessing the *.js file which contains the function. Add following lines to register the images before registering the javascript


string iconInitTemplate = "";
string iconInitScript = string.Format(iconInitTemplate,
Page.ClientScript.GetWebResourceUrl(typeof(PermissionType), "images/minus_icon.gif"),
Page.ClientScript.GetWebResourceUrl(typeof(PermissionType), "images/plus_icon.gif"));

Page.ClientScript.RegisterStartupScript(typeof(PermissionTypePage), "initIcons", iconInitScript);


No comments: