@Html.ActionLink и значение Angularjs?

Привет, я сейчас работаю над проектом, который реализовал angularjs, мне было интересно, есть ли способ использовать значение angular в Html Helper?

Это то, к чему я не могу работать:

@Html.ActionLink("Edit", "Edit", new { id = {{row.Id}} })

Как вы используете значение в синтаксисе бритвы?

Ответ 1

Проблема с использованием ActionLink заключается в том, что при создании URL-адреса этот метод вызывает UrlPathEncode. Это означает, что директива бритвы {{}} с кодировкой get. Angular не сможет его оценить. Вам нужно будет создать этот URL отдельно, а затем расшифровать его. Например, у меня есть что-то похожее на одной из страниц нашего проекта.

@{
var url = Url.Action("Index", "Home", new{id="{{id=lastLatency}}"});
url = HttpUtility.UrlDecode(url);
}

<a data-ng-href="@url">Home</a>

Очень важно, чтобы вы использовали атрибут ng-href для установки URL-адреса.

Ответ 2

Я нашел простое решение!

<a data-ng-href="@Url.Action("Edit", "Home")/{{row.Id}}" target="_self">Edit  </a>

Но спасибо за ответ, это привело меня к успеху!

Ответ 3

Вы можете использовать ng-href и Url.Content следующим образом

<a ng-href="@Url.Content("~/Home/Edit/"){{row.Id}}">Edit</a>

Ответ 4

Некоторые из приведенных здесь ответов могут работать в 2014 году, но с более новыми версиями MVC, с 2017 года маршруты работают не так, как ожидалось, или вы можете использовать [RoutingAttrbiutes], которые позволяют легко настраивать имена и параметры маршрута.

Основываясь на всех этих ответах здесь, ShaqCode и ByteBlocks, я построил расширение UrlHelper, которое поможет нам сделать нашу жизнь немного легче.

Если вы включили это в глобальное пространство имен, вам не нужно ничего импортировать, и вы можете просто использовать его следующим образом:

<a ng-href="@Url.AngularActionLink("create", "purchaseorder", "supplierId", "{{supplier.Id}}")">Create</a>

И класс расширения выглядит следующим образом

public static class AngularUrlHelper
{
    public static List<string> RawRouteUrl;

    public static string AngularActionLink(this UrlHelper html, string actionName, string controller, string routeValue, string angularBinder)
    {
        var actionUrl = string.Empty;

        if (RawRouteUrl == null)
            RawRouteUrl = new List<string>();

        var routeQuery = $"{actionName}/{{{routeValue}}}";

        var rawRoute = RawRouteUrl.FirstOrDefault(x => x.Contains(routeQuery));

        if (string.IsNullOrWhiteSpace(rawRoute))
        {
        RawRouteUrl.Clear();

            foreach (var r in RouteTable.Routes)
            {
                try
                {
                    RawRouteUrl.Add(((Route)r).Url);
                }
                catch (System.Exception) { }
            }

            rawRoute = RawRouteUrl.FirstOrDefault(x => x.Contains(routeQuery));
        }

        if (!string.IsNullOrWhiteSpace(rawRoute))
        {
            actionUrl = rawRoute.Replace($"{{{routeValue}}}", angularBinder);
        }

        return actionUrl;
    }
}

И результат HTML будет angular готов.

<a ng-href="/create/purchaseorder/{{supplier.Id}}">Create</a>

Дополнительная информация.

Я использовал статический список, чтобы создать действительно простую систему кеширования для каждого пула приложений. URL-адрес не изменится, если вы не опубликуете, но они могут измениться, если вы отредактируете файл .chstml непосредственно на сервере.

Итак, чтобы обновить кеш, если ожидаемый запрос url не найден, он попытается перестроить список строк маршрута.

Причина, по которой я делал эту кеш-кеш, - это избегать итерации постоянно над RouteTable.Routes - я попытался найти способ легко просто получить значения URL-строк из RouteCollection. Но по какой-то причине это практически невозможно!? Итак, следовательно.. это расширение.