Блог

Каков наилучший способ избежать жесткого кодирования URL-адресов в JavaScript (в основном используется при выполнении вызовов AJAX)?

В прошлом:

1. Визуализация переменной JavaScript с результатом @Url.Action или @Url.RouteUrl
2. Передайте результат @Url.Action или @Url.RouteUrl в JavaScript в init / ctor.

Есть ли лучший способ?

Было бы хорошо сделать что-то вроде этого:

 var url = $.routes("actionName", "controllerName") // or "routeName" for named routes
$.post(url, { id = 1 }, function() { //.. });
 

Что, конечно, на самом деле невозможно (JavaScript не имеет прямого доступа к viewContext и, следовательно, не имеет доступа к таблицам маршрутов).

Но мне интересно, есть ли способ, которым я могу настроить свою собственную «таблицу маршрутов» для JavaScript, используя только те, которые, как я знаю, понадобятся? (например, я настроил его в представлении)

Как люди справляются с этим?

несмотря на внедрение javascript в представления, я предпочитаю — пусть HTML выполняет свою работу, а javascript выполняет свою. Ниже приведен шаблон.

Для ссылок

 /*A cssclass=ajaxlink is added to all those links which we want to ajaxify*/

//html in view
<a class='ajaxlink' href='@Url.Action("Action","Controller")'>I am An Ajax Link</a>

//generated clean html
<a class='ajaxlink' href='/controller/action'>I am An Ajax Link</a>


//Js


jQuery('.ajaxlink').live('click',function(e){
    e.preventDefault();    /*Prevent default behavior of links*/
    var url= $(e.target).attr('href');
   /*
          Now u have url, do post or get: 
          then append received data in some DOM element.
   */
});
 

// Контроллер

 public ActionResult()
{
       if(Request.IsAjax())
       {    
            /*Return partial content*/
            return View(); 
       }
       else
       {
             return View("SomeOther_View.cshtml");

             /*
                At this point you may reject this request or return full view
                whatever you feel is okie.
             */
       }
}
 

Таким образом, можно обрабатывать оба типа пользователей с включенным и отключенным javascript.

То же самое можно сделать для форм.

Внедрение механизма маршрутизации Javascript не будет слишком сложным. Во-первых, сериализуйте маршруты с C # на Javascript. Во-вторых, воссоздайте Url.Action метод.

Однако это немного излишне для любого из проектов, над которыми я работал. Проекты моей команды всегда отображали общую переменную Javascript, которая содержит все необходимые URL.
Такой подход обеспечивает строго типизированные методы действий и также лучше подходит для рефакторинга.

Это легче сказать, чем достичь на практике, но ваш сайт должен быть полностью функциональным с отключенным JavaScript. Когда это будет достигнуто, вы сможете добавить поддержку AJAX на свой веб-сайт и повторно использовать существующие атрибуты HREF в тегах привязки или атрибуты действий в тегах формы. Веб-сайт будет проще поддерживать, поскольку вам не нужно будет обновлять ссылки в ваших файлах JavaScript.

Я решил реализовать свой собственный UrlFactory, используя ASP.NET помощники напрямую (Html / Url) в моем коде, теперь у меня нет с собой src, я опубликую их завтра.

Плюсы в этом: я могу легко отслеживать каждый URL-адрес и выполнять некоторые перезаписи централизованно.

Пример использования:

 @{
  string myAjaxUrl = UrlFactory.GetUrl (ActionName, ControllerName, new { query-params });
}
 

Затем используя их в javascript с

 var jsUrl = '@myAjaxUrl';
 

После того, как вы определили свою собственную фабрику, вы можете перехватывать «важные» URL-адреса (например. для перезаписи), и оставьте общие для реализации помощника Url.

Однако для того, чтобы иметь эту полностью клиентскую часть, есть дополнительный шаг рендеринга контекста маршрутизации Js для доступа к переменным на стороне клиента.

РЕДАКТИРОВАТЬ: как и было обещано, мой очень простой конструктор классов Url:

 public static class UrlFactory
{
    public static string GetUrl(string Action, string Controller, object RouteValues)
    {
        UrlHelper Url = new UrlHelper(HttpContext.Current.Request.RequestContext);
        return Url.Action(Action, Controller, RouteValues);
    }

    // Common URLS for Denied et similars.
    public static string GetDeniedUrl(PEDUtenti Utente, object RouteValues)
    {
        return GetUrl(Utente, "Denied", "Errors", RouteValues);
    }
    public static string GetDeniedUrl(object RouteValues)
    {
        return GetUrl("Denied", "Errors", RouteValues);
    }
}