web-dev-qa-db-ja.com

JQuery Post Callの相対URL

次のような状況があります。

最初のMVC Asp.Netアプリケーションを開発しました。それは私のサーバーで次のアドレスで実行されます

http://localhost:59441/

このように見えるいくつかのJQuery Postメソッドを書きました

  $.ajax({
        type: "POST",
        url: "/CeduleGlobale/UpdateCheckBox", ...

CeduleGlobaleは私のControllerNameで、UpdateCheckBoxは私のmethodNameです

TestServerにアプリケーションを配置すると、VirtualDirectoryに配置されました

したがって、アプリケーションは今

http://testServer/JprApplication/

指定するポートとアプリケーション名はもうありません

テストを開始すると、JQuery Postの呼び出しが機能しなくなったことにすぐに気付きました...

変更したので、URLは

/JprMvc/CeduleGlobale/UpdateCheckBox

問題は2倍です。

  1. IIS Expressでは仮想ディレクトリを指定できないため、開発マシンでのテストが困難になります。
  2. JQueryで仮想ディレクトリ名をハードコーディングするのは好きではありません。なぜなら、本番環境でアプリケーションの名前がわからないため、本番でアプリケーションをインストールする前にスクリプトを変更する必要があるからです。

これを単純化するための基本的なことを見逃していると思います。

ありがとう

jqueryasp.net-mvcurl-routing
25
SerenityNow

JavaScriptが実際に配置されている場所（ビュー内または別のJSファイル内）に応じて、いくつかのオプションがあります。

オプション1-ビュー内

Htmlヘルパーを使用してリンクを生成するだけです

<script type="text/javascript">
   $(function(){
        $.ajax({
           type: "POST",
           url: "@Url.Action("UpdateCheckBox", "CeduleGlobale")"
        });
   });
</script>

オプション2-スタンドアロンJSファイル

通常、ページごとに、そのページのハンドラーを設定する関数があります。したがって、次のようなことができます。

表示

<script type="text/javascript">
    $(function(){
        SetOrderPage('@Url.Action("UpdateCheckBox", "CeduleGlobale")');
    });
</script>

スタンドアロンJSファイル

function SetOrderPage(ajaxPostUrl){
       $.ajax({
           type: "POST",
           url: ajaxPostUrl
       )};
}

オプション3-スタンドアロンJSファイルの方法2

サイトルートであるJSファイルにグローバル変数を含めることができます。ここでの欠点は、各アクションメソッドパスを手で作成する必要があることです。各ページで、サイトルートグローバル変数を次のように設定できます。

スタンドアロンJSファイル

var siteRoot;

表示

<script type="text/javascript">
    siteRoot = '@Request.ApplicationPath';
</script>

スタンドアロンのJSファイルではRazor構文を使用できないことに注意してください。 Razor/MVC/.NETに動的にサイトパスまたはURLルートを提供すると、サイト/仮想ディレクトリ間を移動する際に発生する可能性のあるミスを減らすことができると考えています。

47
Tommy

私の知る限り、これを回避する方法は他にありません。相対URLのユーザーを使用しない場合：

$.ajax({
        type: "POST",
        url: "./CeduleGlobale/UpdateCheckBox", ...

しかし、コードをリファクタリングすると、さまざまな理由でそれが面倒になります。または、グローバルに定義されているURLを先頭に追加します。したがって、実稼働に移行する前に一度変更するだけで済みます。

つまり.

//Globally defined serverRoot
serverRoot = "http://someaddress/somevirtualdirectory";

$.ajax({
        type: "POST",
        url: serverRoot + "/CeduleGlobale/UpdateCheckBox", ...

そうすれば、必要ない場合はserverRoot = '';そしてすべてが今の状態に戻ります。

7
Rob Schmuecker

JQueryを使用してMVC 5でこの種の問題が発生したため、Localhostを使用している場合や、サブフォルダーにアプリをデプロイしている場合でもNavigatorを使用している場合にこの問題を解決するこのソリューションに進みました。

var pathname = window.location.pathname;
var VirtualDirectory;
if (pathname.indexOf("localhost") >= 0 && pathname.indexOf(":") >= 0) {
    VirtualDirectory = "";
}
else {
    if ((pathname.lastIndexOf('/')) === pathname.length + 1) {
        VirtualDirectory = pathname.substring(pathname.indexOf('/'), pathname.lastIndexOf('/'));
    } else {
        VirtualDirectory = pathname;
    }
}

そして、任意のajax呼び出しで：

$.post(VirtualDirectory + "/Controller/Action", { data: data}, "html")
             .done(function (result) {
                 //some code             
});
2
RizzCandy

ビューからjavascriptに@ Url.Action（ "action"、 "controller"）を渡します。これにより、実行時に動的に更新できます。

<script>
   myJavascriptfunction(@Url.Action("action","controller"),param1,param2);
</script>

以前の回答でルート変数を初期化するために使用できるルートパスを取得する関数がある場合もあります。

1
Codersjunto

私はこれが古い投稿であることを知っています。しかし、私は同じ問題を抱えており、ここで終わった。そして、この問題を rlHelper.Action メソッドで修正しました。このようなものを使用する必要があります。 （この特定のソリューションはビュー内で機能することに注意してください。）

url: "@Url.Action("UpdateCheckBox", "CeduleGlobale")",

お役に立てれば。 :)

1
Sampath Dilhan

http://localhost:59441/および
http://testServer/JprApplication/は両方とも動作します

$.ajax({ type: "POST", url: "/CeduleGlobale/UpdateCheckBox", ...

iisでホスティングしている場合、仮想ホストを作成するだけで
C:\Windows\System32\drivers\etc\hosts

ファイル。ホストファイルの最後にこの行を追加します

127.0.0.1 CeduleGlobale

create a new site like so このようなサイトを選択して新しいサイトを作成し、右クリックして新しいサイトを作成します

fill in your details and set the same hostname as you created above 'CeduleGlobale'

詳細を入力し、「CeduleGlobale」の上で作成したホスト名と同じホスト名を設定します

次に、mvcアプリケーションをこのサイトに展開します

0
kudzai zishumba

@Tommyの答えは素晴らしいポインタでしたが、。NET Coreの場合は、Requestオブジェクトのプロパティが異なるため、少し異なる方法で作業する必要がありました。

仮想ディレクトリにデプロイするが、開発用にIIS Expressを使用しているため、ベースURLを設定するときにifステートメントを使用することにより、事態はより複雑になりました。

Shared/_Layout.cshtml

<!-- Set the site root for javascript in _Layout.cshtml.-->
@if (!String.IsNullOrWhiteSpace(@Context.Request.PathBase.Value))
{
    /* LIVE - includes virtual directory */
    <script>
        window.siteRoot = "@Context.Request.Scheme" + "://" + "@Context.Request.Host.Value" + "@Context.Request.PathBase.Value" + "/";
    </script>
}
else
{
   /* DEBUG - no virutal directory, e.g. IIS Express */
    <script>
        window.siteRoot = "@Context.Request.Scheme" + "://" + "@Context.Request.Host.Value" + "/";
    </script>
}

次に、任意のJavaScriptファイルから

/* from any javascript file */
var url = window.siteRoot + 'MySearch/GetMySearchResults';

$.ajax({
    url: url,
    type: 'GET',
    cache: false,
    data: searchObj,
    success: function (result) {
        alert('yatta!');
    },
    fail: function (e, k, n) {
        alert('hmph!');
    },
    done: function() {
        // hide spinner
    }
});

明らかに、独自の名前空間または保存するものを作成したい場合があります pollutingwindow。以下の例をできるだけシンプルにしようとしました。

0
HockeyJ