Question

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

这是我无法开展的工作：

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

如何在剃刀语法中使用该值？

Answer 1

使用ActionLink的问题是此方法在创建URL时调用UrlPathEncode。这意味着razor指令{{}}带有编码。 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属性设置网址非常重要。

Answer 2

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

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

但是感谢你的回应，它让我走上了成功的道路！

Answer 3

您可以使用ng-href和Url.Content，如下所示

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

Answer 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将准备就绪。

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

更多信息。

我使用静态列表为每个应用程序池创建一个非常简单的缓存系统。除非您发布，否则URL不会真正更改，但如果您直接在服务器上编辑.chstml文件，则URL可能会更改。

因此，为了适应缓存刷新，如果找不到预期的url查询，它将尝试重建路由字符串列表。

我执行此缓存操作的原因是为了避免在RouteTable.Routes上不断迭代 - 我试图找到一种方法来轻松地从RouteCollection获取字符串URL值 - 但由于某种原因它实际上是不可能的！？因此......这个扩展。

@ Html.ActionLink和Angularjs值？

4 个答案: