ASP.NET MVC: Ускоритель поиска для IE с подсказками

ru-RU | created at: 7/10/2012 | published: 7/10/2012 | updated at: 1/2/2018 | number of views: 7815

Для браузера IE (для версии 8, 9, 10) компания Microsoft придумала очень интересные фишечки, например: закрепленные сайты и надстройки. Каждая из упомянутых привносит в серфинг по интернету свои прелести. Поговорим об ускорителях поиска из раздела надстроек.

В качестве вступления

На сайте http://www.iegallery.com в разделе надстройки существует огромного количество.

90-0

Можно написать свой ускоритель и добавить в список. В этой статье будем делать ускоритель поиска.

Опять MvcTools

Буду снова использовать MvcTools. В сборке существует SuggestResult и еще один важный интерфейс ISuggestable. Итак, я хочу, чтобы поиск и подсказка через строку браузера осуществлялся по музею юмора. Для этого сначала создаю новый класс ExhibitSuggest:

public class ExhibitSuggest : ISuggestable {
    private Exhibit _model;

    public ExhibitSuggest(Exhibit model) {
        this._model = model;
    }

    public string Title {
        get { return _model.Title; }
    }

    public string Description {
        get {
            if (_model.Hall != null) {
                return _model.Hall.Name;
            }
            return string.Empty;
        }
    }

    public string Url {
        get {
            return string.Format(http://www.calabonga.com/museum/show/{0}, 
                       _model.Id.ToString());
        }
    }

}

Обратите внимание на то, что этот класс реализует интерфейс озвуяенный выше.

Метод поиска

Создаем в контролере Site новый метод, который будет искать данные и возвращать SuggestResult:

public ActionResult Suggest(string text) {
  var items = exhibitRepository.AllIncluding(x => x.Hall)
      .Where(x=>x.Title.StartsWith(text)).ToList();
  List<ExhibitSuggest> result = null;
  if (items.Any()) {
      result = new List<ExhibitSuggest>();
      items.ForEach(x=>result.Add(new ExhibitSuggest(x)));
  }
  return new SuggestResult(result, text);
}

Программирование закончено, осталось сделать соответствующую html-разметку.

Только для IE

Раз мой сайт поддерживает поиск с подсказками, мне надо об этом “сообщить” браузеру. Чтобы IE мог уведомить посетителя сайта, а также мог предложить установить этот самый ускоритель поиска.

Для этого нужно в заголовке странице в теге <head> установить следующий параметр:

<link title="Музей юмора" rel="search" 
  type="application/opensearchdescription+xml"    
  href="http://www.calabonga.com/extensions/search.xml" />

Третья строка указывает на специальный файл с настройками для браузера IE, которые ему пригодаятся, чтобы реализовать поиск по вашему сайту. Вот содержимое этого файла:

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
   <ShortName>Музей юмора</ShortName>
   <Image height="16" width="16" 
          type="image/icon">http://www.calabonga.com/favicon.ico</Image>
   <Url type="text/html" 
        template="http://www.calabonga.com/site/suggest?text={searchTerms}"/>
   <Url type="application/x-suggestions+xml" 
      template="http://www.calabonga.com/site/suggest?text={searchTerms}"/>
</OpenSearchDescription>

В строках 5, 7 и 9 поставьте свои параметры. QueryString – параметр может быть любой, а вот название в фигурных скобках фиксировано спецификацией IE.

Установка ускорителя IE

Теперь на странице музея юмора надо сделать кнопку, которая сможет установить этот ускоритель поиска в браузер посетителя, если он пожелает.

90-2

Помините, что для других браузеров такой функции пока не существует, а значить показывать эту кнопку пользователю другого браузера, по меньшей мере не этично. Поэтому сделаю так:

<!--[if gte IE 7]>
<p>
    <a href="#" class="backblue rounded" 
        title="Добавляет провайдера поиска для IE7 и выше. 
            Позволит быстро осуществлять поиск в музее юмора из панели поиска IE" 
        onclick="window.external.AddSearchProvider('http://www.calabonga.com/extensions/search.xml');
            return false;">
    <span>Добавить поиск в IE</span>
    </a>
</p>   
<![endif]—>

90-1

Набираем что-нибудь в поиске и видим:

90-3

Вот и всё.