Как получить правильный URL для действия MVC при использовании Jquery / AJAX?

Question

Итак, у меня есть мой первый сайт MVC2, над которым я работаю, и, естественно, я бы хотел добавить туда AJAX.Проблема в том, что я не знаю, как получить URL для действия при передаче параметра URL.Позволь мне объяснить.Примеры, которые я видел до сих пор, показывают, что разработчик передает такие строки, как «/ MyController / MyAction».Это замечательно, за исключением случаев, когда ваши контроллеры не находятся в корневом каталоге вашего сайта (как в моем случае).Я всегда мог использовать относительные URL, такие как «MyAction», за исключением случаев, когда URL содержит параметры, которые тоже не работают.Рассмотрим http://example.com/myroot/MyController/MyAction против http://example.com/myroot/MyController/MyAction/PageNumber/SomeOtherValue. Теперь относительный URL будет неправильным.

В коде ASPX это легко.Я просто пишу в <% = Url.Action ("MyAction")%>.Но как мне сделать это в моем файле JavaScript?

Answer 1

Вы не можете сделать это напрямую в своем файле JavaScript, однако вы можете передать эти динамические значения в ваш скрипт с помощью инициализатора скрипта.Рассмотрим следующий пример:

Внешний файл JS

ShoppingCart = function() {
    this.settings = {
        AddProductToCartUrl: '',
        RemoveFromCartUrl: '',
        EmptyCartUrl: '',
        UpdateCartUrl: ''
    };
};

ShoppingCart.prototype.init = function(settings) {
    this.settings = jQuery.extend(this.settings, settings || {});
};

HTML / View

<script type="text/javascript">
    var cart = new ShoppingCart();
    cart.init({ AddProductToCartUrl: '<%=Url.Action("MyAction")%>' });

    alert(cart.settings.AddProductToCartUrl);
</script>

Answer 2

Это часть давней проблемы, заключающейся в том, что включение серверного кода в файлы JavaScript не представляется возможным :(. (Без серьезных взломов, то есть.)

Лучшее решение - включить URL-адрес действия в ваш HTML-файл, а затем получить это значение из JavaScript. Мое предложение будет примерно таким:

<!-- in your view file  -->
<form id="MyForm" action="<%: Url.Action("MyAction") %>"> ... </form>

<!-- or -->
<a id="MyLink" href="<%: Url.Action("MyAction") %>"> ... </a>

в сочетании с

// In your .js file
$("#MyForm").submit(function ()
{
    $.post($(this).attr("action"), data, function (result) { /* ... */ });
    return false;
});

// or
$("#MyLink").click(function ()
{
    $.getJSON($(this).attr("href"), data, function (result) { /* ... */ });
    return false;
});

Мне это кажется семантически понятным, а в некоторых случаях даже создает ухудшающееся аварийное поведение при отключении JavaScript.

Answer 3

Просто: скажите вашему JavaScript, какой правильный URL.

Тактически, вы можете добраться туда разными способами, но они в основном разбиваются на две техники:

• Имейте сгенерированную на стороне сервера "конфигурацию" javascript, чтобы вы могли сделать что-то вроде var url = siteConfiguration.SITEROOT + 'products/pink-bunny-slippers' Обратите внимание, что этот файл может быть обычным представлением MVC, единственная хитрость заключается в том, что вы должны сказать контроллеру, чтобы он отправлял заголовок text/javascript, а не чем текст / HTML.
• По сути, зависимость внедряет это в ваш скрипт. IE function wireUpAjaxLinksToService(linkIdentifier, serviceEndpoint), где вы звоните, используя что-то вроде wireUpAjaxLinks('a.ajax', '<%= Url.Action("MyService", "Services") %>')