webentwicklung-frage-antwort-db.com.de

Relative URL in JQuery Post Call

Ich habe die 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 schrieb einige JQuery-Post-Methoden, die so aussahen

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

CeduleGlobale ist mein ControllerName Und UpdateCheckBox ist mein Methodenname

Wenn ich die Anwendung auf den testServer stelle, wurde sie in ein VirtualDirectory gestellt

daher ist die Anwendung jetzt

http://testServer/JprApplication/

kein Port mehr anzugeben und auch einen Anwendungsnamen

Als ich mit dem Test begann, bemerkte ich schnell, dass meine JQuery Post-Anrufe nicht mehr funktionierten.

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

/JprMvc/CeduleGlobale/UpdateCheckBox

das Problem ist 2-fach. 

  1. dies macht es schwierig, auf meinem Entwicklungscomputer zu testen, da mit IIS Express kein virtuelles Verzeichnis angegeben werden kann.
  2. Ich mag es nicht, den virtuellen Verzeichnisnamen in JQuery hardCoding zu machen, da ich nicht weiß, welchen Namen die Anwendung in der Produktionsumgebung haben wird. Daher muss ich mein Skript ändern, bevor ich die Anwendung in der Produktion installieren kann.

Ich bin sicher, ich vermisse einige grundlegende Dinge, um dies zu vereinfachen.

Vielen Dank

22
SerenityNow

Abhängig davon, wo sich Ihr JavaScript tatsächlich befindet (in der Ansicht oder in einer separaten JS-Datei), haben Sie mehrere 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 - Standalone-JS-Datei

Normalerweise haben wir pro Seite eine Funktion, die die Handler dieser Seite einrichtet. Also können wir so etwas machen:

Aussicht

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

Standalone-JS-Datei

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

Option 3 - Standalone-JS-Datei Methode 2

In Ihrer JS-Datei könnte eine globale Variable enthalten sein, die der Siteroot ist. Der Nachteil hier ist, dass Sie jeden Ihrer Aktionsmethodenpfade von Hand erstellen müssen. Auf jeder Seite können Sie die globale Variable für den Site-Stamm als solche festlegen:

Standalone-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 den Site-Pfad oder die URL-Route dynamisch angeben zu lassen, da dadurch die Fehler reduziert werden, die beim Wechseln zwischen Sites/virtuellen Verzeichnissen auftreten können.

42
Tommy

Meines Wissens gibt es keinen anderen Weg. Sofern Sie nicht bereit sind, relative URLs zu verwenden

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

Dies kann jedoch aus verschiedenen Gründen unübersichtlich werden, wenn Sie den Code umgestalten. Alternativ können Sie die global definierte URL voranstellen. Daher müssen Sie sie nur einmal ändern, bevor Sie mit der Produktion beginnen.

d.h.

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

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

Auf diese Weise können Sie, wenn Sie es nicht brauchen, einfach serverRoot = ''; setzen und alles wird wieder so sein, wie es jetzt ist.

7
Rob Schmuecker

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, auch wenn Sie die 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('/')) === pathname.length + 1) {
        VirtualDirectory = pathname.substring(pathname.indexOf('/'), pathname.lastIndexOf('/'));
    } else {
        VirtualDirectory = pathname;
    }
}

Und dann bei jedem Ajax-Aufruf:

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

Übergeben Sie @ Url.Action ("Aktion", "Controller") an das Javascript aus der Ansicht. Dadurch wird es zur Laufzeit dynamisch aktualisiert.

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

Es gibt möglicherweise eine Funktion, um den Stammpfad abzurufen, mit der Sie die Stammvariablen in den vorherigen Antworten initialisieren könnten.

1
Codersjunto

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

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

Hoffe das hilft. :)

1
Sampath Dilhan

http://localhost:59441/ und
http://testServer/JprApplication/ funktioniert mit Ihrem 

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

wenn Ihr Hosting in IIS ist, müssen Sie lediglich einen virtuellen Host in Ihrem erstellen
C:\Windows\System32\drivers\etc\hosts 

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

127.0.0.1 CeduleGlobale 

 create a new site like so Erstellen Sie eine neue Site wie diese, klicken Sie mit der rechten Maustaste und erstellen Sie eine neue Site

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

geben Sie Ihre Daten ein und geben Sie den gleichen Hostnamen ein, den Sie über "CeduleGlobale" erstellt haben.

stellen Sie dann Ihre MVC-Anwendung auf dieser Site bereit

0
kudzai zishumba

@ Tommys Antwort war ein großartiger Hinweis, aber für .NET Coremusste ich etwas anders vorgehen, da das Request-Objekt andere Eigenschaften hat. 

Die Bereitstellung in einem virtuellen Verzeichnis, die Verwendung von IIS Express für die Entwicklung wurde jedoch schwieriger. 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" + "/";
    </script>
}
else
{
   /* DEBUG - no virutal directory, e.g. IIS Express */
    <script>
        window.siteRoot = "@Context.Request.Scheme" + "://" + "@Context.Request.Host.Value" + "/";
    </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
    }
});

Natürlich möchten Sie vielleicht einen eigenen Namespace oder etwas zum Speichern von Pollutingwindow erstellen. Ich habe versucht, das folgende Beispiel so einfach wie möglich zu halten.

0
HockeyJ