Relative URL im JQuery Post Call

Ich habe folgende Situation.

Ich habe meine erste MVC Asp.Net-Anwendung entwickelt. es läuft auf meinem Server unter der folgenden Adresse

http://localhost:59441/

Ich habe einige JQuery-Post-Methoden geschrieben, die so aussahen

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

CeduleGlobale ist mein ControllerName und UpdateCheckBox ist mein methodName

Als ich die Anwendung auf dem Testserver ablegte, wurde sie in ein virtuelles Verzeichnis gestellt

Daher ist die Anwendung jetzt

http://testServer/JprApplication/

keinen Port mehr angeben und auch einen Anwendungsnamen

Als ich mit dem Testen begann, bemerkte ich schnell, dass meine JQuery-Post-Aufrufe nicht mehr funktionierten …

Ich habe sie so geändert, dass jetzt die URL lautet

/JprMvc/CeduleGlobale/UpdateCheckBox

das problem ist 2 fach.

1. Dies erschwert das Testen auf meinem Entwicklungscomputer, da IIS Express es mir nicht erlaubt, ein virtuelles Verzeichnis anzugeben.
2. Ich mag es nicht, den Namen des virtuellen Verzeichnisses in JQuery fest zu codieren, da ich nicht weiß, welchen Namen die Anwendung in der Produktionsumgebung haben wird, und daher muss ich mein Skript ändern, bevor ich die Anwendung in der Produktion installieren kann.

Ich bin sicher, dass mir einige grundlegende Dinge fehlen, um dies zu vereinfachen.

Vielen Dank

Je nachdem, wo sich Ihr JavaScript tatsächlich befindet (innerhalb der Ansicht oder einer separaten JS-Datei), haben Sie einige Optionen.

Option 1 – In der Ansicht

Verwenden Sie einfach die HTML-Helfer, um die Links für Sie zu generieren

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

Option 2 – Eigenständige JS-Datei

Normalerweise haben wir eine Funktion pro Seite, die die Handler dieser Seite einrichtet. Wir können also etwa Folgendes tun:

Aussicht

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

Eigenständige JS-Datei

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

Option 3 – Eigenständige JS-Datei Methode 2

Sie könnten eine globale Variable in Ihrer JS-Datei haben, die das Siteroot ist. Der Nachteil dabei ist, dass Sie jeden Ihrer Aktionsmethodenpfade von Hand erstellen müssen. Auf jeder Seite könnten Sie die globale Site-Root-Variable wie folgt festlegen:

Eigenständige JS-Datei

var siteRoot;

Aussicht

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

Denken Sie daran, dass Sie die Razor-Syntax nicht in einer eigenständigen JS-Datei verwenden können. Ich glaube, dass es am besten ist, Razor/MVC/.NET Ihnen den Site-Pfad oder die URL-Route dynamisch geben zu lassen, da dies wirklich die Fehler reduziert, die beim Wechseln zwischen Sites/virtuellen Verzeichnissen gemacht werden könnten.

Soweit ich weiß, gibt es keine andere Möglichkeit, dies zu umgehen. Es sei denn, Sie sind bereit, relative URLs zu verwenden, dh:

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

Aber das kann aus verschiedenen Gründen chaotisch werden, wenn Sie Code umgestalten. Alternativ können Sie die global definierte URL voranstellen und müssen sie dann nur an einer Stelle ändern, bevor Sie in die Produktion gehen.

dh

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

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

Auf diese Weise können Sie es einfach einstellen, wenn Sie es nicht benötigen serverRoot=""; und alles wird wieder so sein, wie es jetzt ist.

Ich hatte dieses Problem auf MVC 5 mit JQuery, also bin ich zu dieser Lösung gegangen, die das Problem beseitigt, wenn Sie sich in Localhost befinden, und in jedem Navigator, selbst wenn Sie eine App in einem Unterordner bereitstellen.

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

Und dann in jedem Ajax-Aufruf:

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

Ich weiß, das ist ein alter Beitrag. Aber ich hatte das gleiche Problem und bin hier gelandet. Und es geschafft, dieses Problem mit zu beheben UrlHelper.Action Methode. Es sollte so etwas verwendet werden. (Beachten Sie, dass diese spezielle Lösung innerhalb der Ansicht funktioniert.)

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

Hoffe das hilft. 🙂

Übergeben Sie @Url.Action(“action”,”controller”) an das Javascript aus der Ansicht. Dadurch kann es zur Laufzeit dynamisch aktualisiert werden.

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

Möglicherweise gibt es eine Funktion zum Abrufen des Stammpfads, mit der Sie die Stammvariablen in den vorherigen Antworten initialisieren können.

@ Tommys Antwort war ein großartiger Hinweis, aber für .NET Core Ich musste die Dinge ein wenig anders machen, als die Request Objekt hat unterschiedliche Eigenschaften.

Die Dinge wurden komplizierter, indem sie in einem virtuellen Verzeichnis bereitgestellt, aber IIS Express für die Entwicklung verwendet wurden. daher die if -Anweisung beim Festlegen der Basis-URL.

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" + "https://stackoverflow.com/";
    </script>
}
else
{
   /* DEBUG - no virutal directory, e.g. IIS Express */
    <script>
        window.siteRoot = "@Context.Request.Scheme" + "://" + "@Context.Request.Host.Value" + "https://stackoverflow.com/";
    </script>
}

Dann aus einer beliebigen JavaScript-Datei

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

Offensichtlich möchten Sie vielleicht Ihren eigenen Namensraum erstellen oder etwas, um Umweltverschmutzung zu vermeiden window. Ich habe versucht, das folgende Beispiel so einfach wie möglich zu halten.

http://localhost:59441/ und
http://testServer/JprApplication/ werden beide mit Ihrem arbeiten

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

Wenn Ihr Hosting in iis ist, müssen Sie nur einen virtuellen Host in Ihrem erstellen
C:\Windows\System32\drivers\etc\hosts

Datei. Fügen Sie diese Zeile am Ende Ihrer Hosts-Datei hinzu

127.0.0.1 CeduleGlobale

Erstellen Sie eine neue Site wie diese. Wählen Sie Sites aus, klicken Sie mit der rechten Maustaste und erstellen Sie eine neue Site

Geben Sie Ihre Daten ein und legen Sie den gleichen Hostnamen fest, den Sie oben erstellt haben ‘CeduleGlobale’

Stellen Sie dann Ihre MVC-Anwendung auf dieser Site bereit