@Html.ActionLink 和 Angularjs 的价值？

Question

嘿，我目前正在从事一个已经实现 angularjs 的项目，我想知道是否有办法在 Html Helper 中使用 angular 值？

这是我无法工作的地方：

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

你如何使用剃刀语法中的值？

Answer 1

此处提供的其中一些答案可能在 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 上不断迭代——我试图找到一种方法来轻松地从RouteCollection 获取字符串 URL 值——但由于某种原因，这实际上是不可能的！ ?所以因此..这个扩展。

Answer 2

你可以使用ng-href和Url.Content如下

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

Answer 3

使用ActionLink的问题是这个方法在创建URL的时候会调用UrlPathEncode。这意味着剃须刀指令{{}} 带有获取编码。 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 非常重要。

Answer 4

我找到了简单的解决方案！

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

但感谢您的回复，它让我走上了成功之路！