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

【问题标题】：URL Rewriting and a load images on my pagesURL 重写和在我的页面上加载图像
【发布时间】：2012-01-15 23:48:33
【问题描述】：

我正在 ASP.Net（Forms 方法）中开发一个网站，并在我的 global.asax 文件中手动重写我的 URL，然后 Application_BeginRequest 方法

看看这段代码：

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

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

问题来了：

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

如果 URL 等于：

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

谢谢，阿里

【问题讨论】：

标签： asp.net html url-rewriting

【解决方案1】：

您可以添加带有预定义 CSS 类 edit 和 close 的 <span> 或 <a> 标签，而不是将图像添加为 <img> 标签。

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

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

【讨论】：