URL Rewriting and a load images on my pages - asp.net

Question

I am developing a website in ASP.Net(Forms approach) and rewrite my URL manually in my global.asax file and Application_BeginRequest method
look at this code :
<div style="background-image: url(<%= ResolveUrl("~/Storage/Images/admin-bk.gif") %>);">
I use this way in my aspx file to address images or css files or js files
Problem is here :
I have a gridview(FlexiGrid) and I use Jquery Ajax and call a webmethod to populate the grid.and my web method return html code .In this html code i have some images.
If URL equals to :
http://localhost/Cpanel/BasicDefinitions/Regions
my images load right.But if URl equals to
http://localhost/Cpanel/BasicDefinitions/Regions/
my images do not load.
To solve this problem I need to use ResolveUrl again in my webmethod.But as I know it is impossible to use it in a webmethod.So is there anyone out there to help me handle this error?
This is my webmethod :
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Xml)]
public static string FetchRegionList(int page, int rp, string sortname, string sortorder, string query, string qtype)
{
XDocument xmlDoc = new XDocument(
new XDeclaration("1.0", "utf-8", "yes"),
new XElement("rows",
new XElement("page", page.ToString()),
new XElement("total", RegionBLO.Load().Count.ToString()),
new XElement("row", new XAttribute("Id", row.Id.ToString()),
new XElement("cell", "<img id='imgEdit' lang='" + row.Id.ToString() + #"' style='cursor:pointer;border:0px;' src='"+ ("~/Storage/Images/FlexGrid/edit.png") + "' title='Edit' />
<img id='imgDelete' lang='" + row.Id.ToString() + "' style='cursor:pointer;border:0px;' src='"+ ("~/Storage/Images/FlexGrid/close.png") + "' title='Delete' />")
)
)
);
StringBuilder builder = new StringBuilder();
using (TextWriter writer = new StringWriter(builder))
{
xmlDoc.Save(writer);
}
return builder.ToString();
}
Thanks, Ali

Answer 1

Instead of adding the images as <img> tags, you could add <span> or <a> tags with predefined CSS classes edit and close.
new XElement("cell", "<a ... class='edit'></a><a ... class='delete'></a>")
Then you can use the following CSS to give those elements a background image:
a.edit, a.delete {
display: inline-block;
width: 16px;
height: 16px;
cursor: pointer;
border:0px;
background-repeat: no-repeat;
}
a.edit {
background-image: url(../Images/FlexGrid/edit.png);
}
a.delete {
background-image: url(../Images/FlexGrid/delete.png);
}
The paths to the images from the CSS file are always relative to the CSS file itself. So you don't have to worry about using ResolveUrl server-side, the browser will find the image regardless of the virtual path that the site is running from.
In this case the file locations are:
~/storage/images/edit.png
~/storage/images/delete.png
~/storage/stylesheets/site.css
And so you can see that the path ../Images/FlexGrid/edit.png, when used in the CSS file will point to the image.