~ / equivalente en javascript

¿Alguna forma inteligente de hacer una reference de ruta basada en "raíz" en JavaScript, tal como tenemos ~/ en ASP.NET?

Haga que su página genere una label con algo como:

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

Luego, tenga una function en JavaScript que extraiga el valor tal como:

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

Usar label base :

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

a partir de ahora, cualquier uso de enlace en esta página, sin importar en javascript o html, será relativo a la label base, que es " http://www.example.com/myapp/ ".

También puede usar la function asp.net VirtualPathUtility :

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

Aviso: No codifico la ruta a una cadena JSON (comillas de escape, caracteres de control, etc.). No creo que esto sea un gran problema (las citas, por ejemplo, no están permitidas en una URL), pero nunca se sabe …

Normalmente creo una variable en la parte superior del file js y le asigno la ruta raíz. Luego uso esa variable cuando hago reference a un file.

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

~ / es la raíz de la aplicación y no una raíz literal, interfiere ~ / para significar <YourAppVirtualDir>/

Para hacer una raíz literal en JavaScript es solo /, es decir, "/root.html". No hay forma de get una ruta de nivel de aplicación como esa en JavaScript.

Podría hackearlo en el file ASPX y sacarlo en una label, pero consideraría las implicaciones de security de eso.

La respuesta de Kamarey se puede mejorar para admitir una ruta base dinámica:

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

Esto asegurará una ruta raíz correcta independientemente de la configuration de implementación.

Para ser justos, esto no responde a la pregunta original, pero elimina la mayoría de las necesidades para get la ruta raíz de javascript. Simplemente use las URL relativas en todas partes, sin prefijación con barra inclinada.

Si todavía necesita acceder desde javascript, agregue un atributo id y use document.getElementFromId() como sugirió MiffTheFox, pero en la label base.

Otra opción que es un poco más simple y más universal sería tomar lo siguiente:

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

y usa Page.ResolveClientUrl como sigue:

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

entonces, independientemente del subdirectory, las URL siempre se renderizarán correctamente.

La siguiente function calculará la raíz de la aplicación que se está ejecutando actualmente. Lo uso para localizar la location absoluta de los resources, cuando se lo llama desde algún lugar profundo del tree de aplicaciones.

  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] + "/"; } 

En el PreRender de su página base de .NET, agregue esto:

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

Luego, en su function global de JavaScript, agregue lo siguiente:

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

Ahora puedes usarlo así:

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

Puede ser un poco demasiado para algunos proyectos, pero funciona muy bien para aplicaciones completas.

Solución para aplicaciones ASP.NET MVC

Esto funciona cuando se usa IIS y también IIS Express en VS.

Coloque este fragment antes de que se carguen todas las secuencias de commands, para que la variable url raíz sea "approot".

a su service en los guiones:

 <script> var approot = "@Url.Content("~")"; </script> --> other scripts go here or somewhere later in the page. 

Luego úsala en tu script o script de página. Ejemplo:

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

la variable approot será algo:

"/ YourWebsiteName /" <- IIS

o solo:

"/" <- IIS Express

Para las páginas ASP.CM MVC Razor, cree una label base como la que se muestra a continuación en la label <Head>

 <base href="http://@Request.Url.Authority@Request.ApplicationPath" /> 

y en todas sus URL javascript relativas, asegúrese de comenzar sin una barra inclinada (/); de lo contrario, se referirá desde la raíz.

Por ej. crea todas tus URL como

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

o

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

Si desea usarlo en HTML, aun así puede usar ~, vea esto

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

Ver el evento de clic de checkbox en mi aplicación MVC

 @Html.CheckBoxFor(m=>Model.IsChecked, new {@onclick=@Url.Content("~/controller/action("+ @Model.Id + ", 1)"), @title="Select To Renew" })