web-dev-qa-db-ja.com

JavaScriptで相対パスを取得するにはどうすればよいですか？

私のASP.net Webプロジェクトでは、.jsファイルに次のJavaScriptコードを記述しました。

function getDeviceTypes() {
    var deviceTypes;
    $.ajax({
        async: false,
        type: "POST",
        url: "Controls/ModelSelectorWebMethods.aspx/getDeviceTypes",
        data: '{ }',
        contentType: "application/json;",
        dataType: "json",
        success: function(response) {
            deviceTypes = response.d;
        },
        error: function(xhr, status) {
            debugger;
            alert('Error getting device types.');
        }
    });    // end - $.ajax
    return deviceTypes;
}

この.jsファイルをサブディレクトリのページにロードしようとするまでは、うまくいきました。

プロジェクトの名前がwidgetであるとします。

メインの仮想ディレクトリでこのコードを使用すると、JavascriptはControls/ModelSelectorWebMethods.aspx/getDeviceTypesをhttps://mysite.com/widget/Controls/ModelSelectorWebMethods.aspx/getDeviceTypesと解釈し、すべて正常です。ただし、サブディレクトリのページから、JavaScriptはhttps://mysite.com/widget/subdirectory/Controls/ModelSelectorWebMethods.aspx/getDeviceTypesを意味すると解釈し、機能しません。

アプリケーションの任意のディレクトリのページからAJAX Webメソッドを呼び出せるように、JavaScriptコードをどのように記述できますか？

javascriptjqueryasp.netajax
13
Daniel Allen Langdon

次の2つのオプションがあります。

  1. 環境固有のすべての設定を含む構成/設定オブジェクトをJavaScriptで作成します。

     var config = {
     base: <% /* however the hell you output stuff in ASPX */ %>,
     someOtherPref: 4
 };

    次にAJAX urlにconfig.baseを付けます（そして、dev/testing /デプロイメントサーバー上にあるかどうかに関係なくconfig.baseの値を変更します）。

  2. <base /> HTMLタグを使用して、すべての相対URLのURLプレフィックスを設定します。これはall相対URLに影響します：画像、リンクなど。

個人的には、オプション1を選びます。おそらく、その構成オブジェクトが他の場所で役立つでしょう。

明らかに、configオブジェクトは、サーバー側のコードが評価されるサイトの一部に含まれている必要があります。 .jsファイルは、サーバーを構成しないとそれをカットしません。私は常にHTMLに構成オブジェクトを含めます<head>;その小さな設定オブジェクトは、その内容がページごとに変わる可能性があるため、そこに固定することが完全に保証されています。

17
Matt

Asp.net 仮想ディレクトリを気にしない限り（スクリプトから理解することは実際には不可能になり、サーバーから何かを渡す必要があります）、URLを見ることができますそしてそれを解析します：

function baseUrl() {
   var href = window.location.href.split('/');
   return href[0]+'//'+href[2]+'/';
}

次に：

...
   url: baseUrl()+"Controls/ModelSelectorWebMethods.aspx/getDeviceTypes",
...

...そして今、上記のコメントから、仮想ディレクトリが問題であることがわかりました。私は通常これを行います。

1）マスターページに、スクリプトをどこかに、できれば他の前に挿入するコードを配置します（スクリプトをHEADに直接追加して、ScriptManagerを使用する代わりにコントロールを追加します）。スクリプトc＃：

string basePath = Request.ApplicationPath;
// Annoyingly, Request.ApplicationPath is inconsistent about trailing slash
// (if not root path, then there is no trailing slash) so add one to ensure 
// consistency if needed
string myLocation = "basePath='" + basePath + basePath=="/"?"":"/" + "';";
// now emit myLocation as script however you want, ideally in head

2）baseUrlを変更して、以下を含めます。

function baseUrl() {
   var href = window.location.href.split('/');
   return href[0]+'//'+href[2]+basePath;
}
11
Jamie Treworgy

アプリのルート変数を作成...

var root = location.protocol + "//" + location.Host;

AJAXリクエストを行う場合は、相対ではなく絶対URIを使用します...

url: root + "/Controls/ModelSelectorWebMethods.aspx/getDeviceTypes"
4
Josh Stodola

この関数は機能すると思います...相対パスを "../../../"として取得することなので、各ページでこの関数を呼び出すと、相対パス形式が返されます。

function getPath() {
    var path = "";
    nodes = window.location. pathname. split('/');
    for (var index = 0; index < nodes.length - 3; index++) {
        path += "../";
    }
    return path;
}
1
Paulo Salazar

最初に名前空間をインポートできます：System.Web.Hosting.HostingEnvironment

  <%@ Master Language="VB" AutoEventWireup="false" CodeFile="Site.master.vb" Inherits="Site" %>
   <%@ Import namespace="System.Web.Hosting.HostingEnvironment" %>

そしてjs上：

  <script type="text/javascript">
        var virtualpathh = "<%=ApplicationVirtualPath  %>";
   </script>
0
user3869206