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.