URL重写和我页面上的加载图像

时间:2012-01-15 15:28:24

标签: asp.net html url-rewriting

我正在 ASP.Net 表单方法)开发一个网站,并在我的 global.asax 文件中手动重写我的网址< strong> Application_BeginRequest 方法

看看这段代码:

<div style="background-image: url(<%= ResolveUrl("~/Storage/Images/admin-bk.gif") %>);">

我在我的aspx文件中使用这种方式来处理图像或css文件或js文件

问题出在这里:

我有一个gridview(FlexiGrid),我使用Jquery Ajax并调用webmethod来填充grid.and我的web方法返回html代码。在这个html代码中我有一些图像。

如果网址等于:

http://localhost/Cpanel/BasicDefinitions/Regions

我的图片加载正确。但是如果URl等于

http://localhost/Cpanel/BasicDefinitions/Regions/

我的图片无法加载。

要解决这个问题,我需要在我的webmethod中再次使用 ResolveUrl 。但是因为我知道在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();
    }

谢谢,阿里

1 个答案:

答案 0 :(得分:2)

您可以使用预定义的CSS类<img><span>添加<a>edit标记,而不是将图像添加为close标记。

new XElement("cell", "<a ... class='edit'></a><a ... class='delete'></a>")

然后您可以使用以下CSS为这些元素提供背景图像:

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);
}

CSS文件中图像的路径始终相对于CSS文件本身。因此,您不必担心使用ResolveUrl服务器端,无论网站运行的虚拟路径如何,浏览器都会找到该图像。

在这种情况下,文件位置为:

~/storage/images/edit.png
~/storage/images/delete.png
~/storage/stylesheets/site.css

因此,您可以看到在CSS文件中使用的路径../Images/FlexGrid/edit.png将指向图像。