Перезапись URL и загрузка изображений на мои страницы

Question

Я занимаюсь разработкой веб-сайта в ASP.Net ( Подход к формам ) и переписываю свой URL вручную в моем файле global.asax и Application_BeginRequest метод

посмотрите на этот код:

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

Я использую этот способ в своем aspx-файле для адресации изображений, CSS-файлов или JS-файлов

Проблема здесь:

У меня есть gridview (FlexiGrid), и я использую Jquery Ajax и вызываю веб-метод для заполнения сетки. И мой веб-метод возвращает HTML-код. В этом HTML-коде у меня есть несколько изображений.

Если URL равен:

http://localhost/Cpanel/BasicDefinitions/Regions

мои изображения загружаются правильно. Но если URl равно

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

мои изображения не загружаются.

Чтобы решить эту проблему, мне нужно снова использовать ResolveUrl в моем веб-методе. Но, как я знаю, его нельзя использовать в веб-методе. Так есть ли кто-нибудь, кто может помочь мне справиться с этой ошибкой?

Это мой веб-метод:

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

Спасибо, Али

Answer 1

Вместо добавления изображений в виде тегов <img> можно добавить теги <span> или <a> с предопределенными классами CSS 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

Итак, вы можете видеть, что путь ../Images/FlexGrid/edit.png при использовании в файле CSS будет указывать на изображение.