web-dev-qa-db-ja.com

〜/ javascriptで同等

ASP.NETで~/を使用するのと同じように、JavaScriptで「ルート」ベースのパスを参照するスマートな方法はありますか？

javascriptasp.netweb-applicationsrelative-path
43
Vikram

次のようなタグをページに生成させます。

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

次に、次のような値を抽出するJavaScriptの関数を用意します。

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

base タグを使用：

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

...

これ以降、このページでのリンクの使用は、JavaScriptまたはhtmlに関係なく、「 http://www.example.com/myapp/ "であるベースタグに関連します。

38
Kamarey

Asp.net機能VirtualPathUtilityを使用することもできます。

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

注意： [〜＃〜] json [〜＃〜] -string（エスケープ引用符、制御文字など）へのパスはエンコードしません。これは大したことではないと思います（たとえば、引用符をURL内でエスケープ解除することはできません）。

10
doekman

通常、jsファイルの先頭に変数を作成し、それにルートパスを割り当てます。次に、ファイルを参照するときにその変数を使用します。

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

カマレイの答えは動的なベースパスをサポートするように改善できます：

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

これにより、デプロイメント構成に関係なく、正しいルートパスが確保されます。

公平に言えば、これは元の質問には答えませんが、JavaScriptからルートパスを取得するためのほとんどの必要性を排除します。スラッシュを前に付けずに、どこでも相対URLを使用するだけです。

それでもJavaScriptからアクセスする必要がある場合は、id属性を追加し、MiffTheFoxの提案どおりにdocument.getElementFromId()を使用しますが、ベースタグ上で使用します。

6
Nilzor

〜/はアプリケーションルートであり、リテラルルートではありません。〜/は<YourAppVirtualDir>/を意味します。

JavaScriptでリテラルルートを実行するには、/、つまり "/root.html"だけです。 JavaScriptのようにアプリケーションレベルのパスを取得する方法はありません。

ASPXファイルでハッキングしてタグで出力することもできますが、そのセキュリティへの影響を考慮します。

6
Lloyd

もう少し簡単で普遍的なもう1つのオプションは、次の方法です。

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

次のようにPage.ResolveClientUrlを使用します。

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

次に、URLが常に正しくレンダリングされるサブディレクトリに関係なく。

5
Jeremy

次の関数は、現在実行中のアプリケーションのルートを計算します。アプリケーションツリー内のどこかから呼び出されたときに、リソースの絶対的な場所を見つけるために使用します。

    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

ASP.NET MVCアプリケーションのソリューション

これは、VSでIISおよびIIS Expressを使用するときに機能します。

すべてのスクリプトをロードする前にこのスニペットを配置して、ルートURL変数「approot」を設定します。

スクリプトであなたのサービスで：

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

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

次に、スクリプトまたはページスクリプトで使用します。例：

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

approot変数は次のいずれかになります。

"/ YourWebsiteName /" <-IIS

あるいは単に：

"/" <-IIS Express

1
Legends

.NETベースページのPreRenderに、次を追加します。

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

次に、グローバルJavaScript関数に以下を追加します。

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

これで、次のように使用できます。

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

一部のプロジェクトには少し多いかもしれませんが、本格的なアプリケーションには最適です。

1
TruMan1

HTMLで使用する場合は、〜を使用できます。これを参照してください。

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

MVCアプリケーションのチェックボックスのクリックイベントを確認する

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

ASP.net MVC Razorページの場合、<Head>タグに以下のようなベースタグを作成します

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

すべての相対JavaScript URLで、スラッシュ（/）なしで開始するようにしてください。そうしないと、ルートから参照されます。

例のために。のようなあなたのすべてのURLを作成する

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

または

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