web-dev-qa-db-fra.com

~/équivalent en javascript

Une manière intelligente de faire un chemin basé sur "root" référençant en JavaScript, exactement comme ~/ dans ASP.NET?

javascriptasp.netweb-applicationsrelative-path
43
Vikram

Demandez à votre page de générer un tag avec quelque chose comme:

<link rel="home" id="ApplicationRoot" href="http://www.example.com/appRoot/" />

Ensuite, avoir une fonction en JavaScript qui extrait la valeur telle que:

function getHome(){
    return document.getElementById("ApplicationRoot").href;
}
46
MiffTheFox

Utilisez base tag:

<head>
   <base href="http://www.example.com/myapp/" />
</head>

...

à partir de maintenant, tout lien utilisé sur cette page, que ce soit en JavaScript ou en HTML, sera relatif à la balise de base, qui est " http://www.example.com/myapp/ ".

38
Kamarey

Vous pouvez également utiliser la fonctionnalité asp.net VirtualPathUtility:

<script>
var basePath = '<%=VirtualPathUtility.ToAbsolutePath("~/")%>';
</script>

Remarque: je ne code pas le chemin d'accès à une chaîne JSON - (guillemets d'échappement, caractères de contrôle, etc.). Je ne pense pas que ce soit un gros problème (les guillemets, par exemple, ne sont pas autorisés non échappés dans une URL), mais on ne sait jamais ...

10
doekman

Je crée généralement une variable en haut du fichier js et lui attribue le chemin racine. Ensuite, j'utilise cette variable pour référencer un fichier.

var rootPath = "/";
image.src = rootPath + "images/something.png";
8
RedWolves

La réponse de Kamarey peut être améliorée pour prendre en charge un chemin de base dynamique:

<head>    
      <base href="http://<%= Request.Url.Authority + Request.ApplicationPath%>/" />    
</head>

Cela garantira un chemin racine correct quelle que soit la configuration de déploiement.

Pour être juste, cela ne répond pas à la question initiale, mais il élimine la plupart des besoins pour obtenir le chemin racine à partir de javascript. Utilisez simplement des URL relatives partout, sans préfixe de barre oblique.

Si vous devez toujours y accéder à partir de javascript, ajoutez un attribut id et utilisez document.getElementFromId() comme suggéré par MiffTheFox - mais sur la balise base.

6
Nilzor

~/est la racine de l'application et non une racine littérale, il interpelle ~/pour signifier <YourAppVirtualDir>/

Pour créer une racine littérale en JavaScript, il suffit de /, c'est-à-dire "/root.html". Il n'y a aucun moyen d'obtenir un chemin d'accès au niveau de l'application comme celui-ci en JavaScript.

Vous pourriez le pirater dans le fichier ASPX et le sortir dans une balise, mais j’envisagerais les implications en termes de sécurité.

6
Lloyd

Une autre option un peu plus simple et plus universelle serait de prendre ce qui suit:

<script src="/assets/js/bootstrap.min.js"><script>

et utilisez Page.ResolveClientUrl comme suit:

<script src='<%=ResolveClientUrl("~/assets/js/bootstrap.min.js")%>'></script>

alors quel que soit le sous-répertoire, les URL seront toujours restituées correctement. 

4
Jeremy

La fonction suivante calculera la racine de l'application en cours d'exécution. Je l'utilise pour localiser l'emplacement absolu des ressources, lorsqu'elles sont appelées quelque part au fond de l'arborescence des applications.

    function AppRoot() {
        //
        // Returns the root of the currently running ASP application.
        // in the form: "http://localhost/TRMS40/"
        //
        //   Origin: "http://localhost"
        // pathname: "/TRMS40/Test/Test%20EMA.aspx"
        //
        // usage:
        //           window.open( AppRoot() + "CertPlan_Editor.aspx?ID=" + ID);
        //

        var z = window.location.pathname.split('/');

        return window.location.Origin + "/" + z[1] + "/";
    }
2
Graham Epps

Solution pour applications ASP.NET MVC

Cela fonctionne lorsqu’on utilise IIS ainsi que IIS Express dans VS.

Placez cet extrait de code avant le chargement de tous les scripts, afin d’avoir la variable racine "approot".

à votre service dans les scripts:

<script>
        var approot = "@Url.Content("~")";
</script>

 --> other scripts go here or somewhere later in the page.

Puis utilisez-le dans votre script ou votre script de page. Exemple:

var sound_root_path = approot + "sound/";
var img_root_path = approot + "img/";

la variable d'approche sera quelque chose soit:

"/ YourWebsiteName /" <- IIS

ou juste:

"/" <- IIS Express

1
Legends

Dans la page PreRender de votre base .NET, ajoutez ceci:

 protected override void
 OnPreRender(EventArgs e) {
     base.OnPreRender(e);

     if (Page.Header != null)
     {
         //USED TO RESOLVE URL IN JAVASCRIPT
         string baseUrl = String.Format("var baseUrl='{0}';\n", 
           HttpContext.Current.Request.ApplicationPath);
         Page.Header.Controls.Add(new LiteralControl(String.Format(Consts.JS_TAG,
           baseUrl)));
     }
}

Ensuite, dans votre fonction JavaScript globale, ajoutez les éléments suivants:

 function resolveUrl(url) {
   if (url.indexOf("~/") == 0) {
     url = baseUrl + url.substring(2);
   }
 return url; }

Maintenant, vous pouvez l'utiliser comme ceci:

 document.getElementById('someimage').src = resolveUrl('~/images/protest.jpg');

Peut-être un peu fort pour certains projets, mais fonctionne très bien pour les applications à part entière.

1
TruMan1

Si vous voulez l'utiliser en HTML, vous pouvez quand même utiliser ~, voyez ceci

 href = @Url.Content("~/controllername/actionName")

Voir la case à cocher clic événement dans mon application MVC

@Html.CheckBoxFor(m=>Model.IsChecked,  
   new {@[email protected]("~/controller/action("+ @Model.Id + ", 1)"), 
   @title="Select To Renew" })
0
Ali Adravi

Pour les pages ASP.net MVC Razor, créez une balise de base comme ci-dessous dans la balise <Head>

<base href="http://@[email protected]" />

et dans toutes vos URL javascript relatives, assurez-vous de commencer sans une barre oblique (/), sinon, il fera référence à la racine.

Par ex. créez toutes vos urls comme 

"riskInfo": { url: "Content/images/RiskInfo.png", id: "RI" },

ou

$http.POST("Account/GetModelList", this, request, this.bindModelList);
0
Hitesh.Aneja