web-dev-qa-db-fra.com

@ Html.ActionLink et valeur Angularjs?

Hey, je travaille actuellement sur un projet qui a implémenté angularjs, je me demandais s’il existe un moyen d’utiliser la valeur angulaire dans Html Helper?

C'est ce que je ne peux pas me mettre au travail:

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

Comment utilisez-vous la valeur dans la syntaxe de rasoir?

htmlasp.net-mvcangularjsrazorrazorengine
14
ShaqCode

Le problème lié à l'utilisation de ActionLink est que cette méthode appelle UrlPathEncode lors de la création d'une URL. Cela signifie que la directive razor {{}} avec get est codée. Angular ne pourra pas l'évaluer. Ce que vous devrez faire est de créer cette URL séparément puis de le décoder. Par exemple, j'ai quelque chose comme dans l'une des pages de notre projet.

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

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

Il est très important que vous utilisiez l'attribut ng-href pour définir l'URL.

19
ByteBlocks

J'ai trouvé une solution simple!

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

Mais merci pour la réponse, cela m'a permis de réussir!

11
ShaqCode

Vous pouvez utiliser ng-href et Url.Content comme suit

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

Certaines des réponses fournies ici ont peut-être fonctionné en 2014, mais avec les nouvelles versions de MVC, à partir de 2017, les itinéraires ne fonctionnent pas comme prévu ou vous utilisez peut-être [RoutingAttrbiutes] qui vous permet d'ajuster facilement les noms et paramètres des itinéraires.

Sur la base de toutes ces réponses ici, ShaqCode et ByteBlocks, j'ai construit une extension UrlHelper qui nous aide à rendre nos vies un peu plus faciles maintenant.

Si vous incluez cela dans l'espace de noms global, vous n'avez rien d'importer à importer et vous pouvez simplement l'utiliser comme suit '

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

Et la classe d'extension est la suivante

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;
    }
}

Et le résultat HTML sera prêt angulaire.

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

Quelques informations supplémentaires.

J'ai utilisé une liste statique pour créer un système de mise en cache très simple par pool d'applications. Les URL ne changeront pas vraiment sauf si vous les publiez, mais elles peuvent l'être si vous modifiez le fichier .chstml directement sur le serveur.

Donc, pour permettre une actualisation du cache, si la requête d'URL attendue n'est pas trouvée, elle tentera de reconstruire la liste des chaînes de routage.

La raison pour laquelle j'ai mis ce cache en cache est d'éviter d'itérer constamment sur le RouteTable.Routes - J'ai essayé de trouver un moyen d'obtenir facilement les valeurs d'URL de chaîne depuis la RouteCollection - Mais pour une raison quelconque, il est pratiquement impossible!? Alors d'où .. cette extension.

0
ppumkin