web-dev-qa-db-ja.com

@ Html.ActionLinkとAngularjsの値？

ねえ、私は現在、angularjsを実装したプロジェクトに取り組んでいますが、HTMLヘルパーでangular valueを使用する方法があるかどうか疑問に思っていましたか？

これは私が仕事に就けないものです：

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

かみそりの構文で値をどのように使用しますか？

htmlasp.net-mvcangularjsrazorrazorengine
14
ShaqCode

ActionLinkの使用に関する問題は、このメソッドがURLの作成時にUrlPathEncodeを呼び出すことです。これが意味するのは、かみそりディレクティブ{{}}がエンコードされるということです。 Angularは評価できません。このURLを個別に作成してからデコードする必要があります。たとえば、プロジェクトのページの1つに次のようなものがあります。

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

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

ng-href属性を使用してURLを設定することが非常に重要です。

19
ByteBlocks

簡単な解決策を見つけました！

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

しかし、応答に感謝し、それは私を成功への道へと導きました！

11
ShaqCode

ng-hrefおよびUrl.Contentは次のように使用できます

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

ここで提供されるこれらの回答の一部は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 readyになります。

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

いくつかのより多くの情報。

静的リストを使用して、アプリケーションプールごとに非常に単純なキャッシュシステムを作成しました。 URLは、公開しない限り実際には変更されませんが、サーバー上で.chstmlファイルを直接編集すると変更される可能性があります。

したがって、キャッシュの更新に対応するために、予期されたURLクエリが見つからない場合は、ルート文字列リストを再構築しようとします。

私がこのキャッシュを行った理由は、RouteTable.Routesを常に繰り返すことを避けるためです-RouteCollectionから文字列のURL値を簡単に取得する方法を見つけようとしました-しかし、何らかの理由で実際にはそうです無理だよ！？したがって、この拡張機能。

0
Piotr Kula