Url.Content für Javascript

Question

Ich verwende derzeit diesen Ansatz, um den richtigen relativen URI (unabhängig von der Bereitstellungssituation) zu erhalten. Razor-Code (asp.net MVC 3):

@section JavaScript 
{ 
    <script type="text/javascript"> 
     var _getUrl = "@Url.Content("~/bla/di/bla")"; 
    </script> 
} 

Separate js-Datei:

$.ajax({ 
    url: _getUrl, 

Rechnen Sie damit, es gibt einen besseren Ansatz?

Answer 1

persönlich bevorzuge ich mit HTML5 Daten- * Attribute oder darunter die URL als Teil eines DOM Element, das ich unaufdringlich AJAXify.

Die Sache ist, dass Sie nie schreiben $.ajax Anrufe herumfliegen so. Sie schreiben sie so, dass sie einigen DOM-Ereignissen entsprechen. Wie zum Beispiel das Klicken eines Ankers. In diesem Fall trivial es ist, verwenden Sie nur ein HTML-Helfer diesen Anker zu erzeugen:

@Html.ActionLink("click me", "someAction", "somecontroller", new { id = "123" }, new { @class = "link" }) 

und dann:

$('.link').click(function() { 
    $.ajax({ 
     url: this.href, 
     type: 'GET', 
     success: function(result) { 
      ... 
     } 

    }); 
    return false; 
}); 

oder vielleicht sind AJAXifying Sie ein Formular:

@using (Html.BeginForm("SomeAction", "SomeController", FormMethod.Post, new { id = "myForm" })) 
{ 
    ... 
} 

und dann:

$('#myForm').submit(function() { 
    $.ajax({ 
     url: this.action, 
     type: this.method, 
     data: $(this).serialize(), 
     success: function(result) { 
      ... 
     } 
    }); 
    return false; 
}); 

An Ein anderes Beispiel wäre die Verwendung von HTML5-Daten * -Attributen, wenn für das entsprechende DOM-Element keine entsprechende URL verfügbar ist. Angenommen, Sie möchten eine Controller-Aktion mit AJAX aufrufen, wenn sich die Auswahl eines Dropdown-Menüs ändert. Denken Sie zum Beispiel an kaskadierende ddls.

Hier ist, wie Sie Ihre Drop-Down aussehen könnte:

@Html.DropDownListFor(x => x.SelectedValue, Model.Values, new { id = "myDdl", data_url = Url.Action("SomeAction") }) 

und dann:

$('#myDdl').change(function() { 
    var url = $(this).data('url'); 
    var selectedValue = $(this).val(); 
    $.getJSON(url, { id: selectedValue }, function(result) { 
     ... 
    }); 
}); 

So wie Sie Sie sehen nicht wirklich brauchen diese _getUrl globale JavaScript-Variable, die Sie erklärt in Ihrem Aussicht.

Answer 2

Ich würde folgendes tun:

Razor C# Skript vor Javascript

@{ 
    var myUrlString = Url.Action("ActionName", new { controller="ControllerName" }); 
} 

JavaScript

$.ajax('@myUrlString',{ 
    // options 
}); 

Sie auch Url.RouteUrl oder Url.HttpRouteUrl nutzen könnten.

EDIT - zeigt Beispiel mit getrennten JS-Datei

Razor

@{ 
    var myServerGeneratedValue = Url.Action("ActionName", new{controller="ControllerName"}); 
} 
<script type="text/javascript"> 
    var myHelperObject = new MyHelperObject(); 
    myHelperObject.Init('@myServerGeneratedValue'); 
</script> 

JS-Datei

var MyHelperObject = function(){ 

    this.Init = function(serverGeneratedValue){ 
     // do something with serverGeneratedValue 
    }; 

};