.NET tanker & tips

.Net, jQuery og andre nørdede emner

Url.Action i javascript fil

september 29
by steffen 29. september 2014 10:58

Min klare holdning er at man skal forsøge at opdele sin kode i filer, som klart og tydeligt afgrænser funktionaliteten. Det betyder f.eks. at jeg helst ikke vil have javascript kode liggende direkte i mine views, da jeg synes det skaber unødigt rod. Men hvis man ligger sin javascript i dedikerede javascript-filer, som inkluderes på de relevante sider, kan man ikke nyde godt at MVC's forskellige helper funktioner. Det kunne f.eks. være Url.Action, som hjælper med at returnere den rette URL til en controller og action metode. MVC parser ikke javascript filer og derfor vil det ikke fungere at kalde funktionen her.

Et klassisk eksempel kunne være et ajax kald, som skal bruge en given URL. Men ved at tilføje en data-attribut på et HTML element i viewet, kan man på en let måde gøre den rette URL til rådighed for javascripten. 

Lad os sige at vi har en knap, som laver et ajax kald, når man klikker på den:

<button id="testButton">Click me!</button>

Og i den tilhørende javascript fil, vil vi gerne hooke knappen op til at lave ajax kaldet:

$(function() {
    $('#testButton').click(function(){
        $.getJSON("/MyController/MyActionMethod",
            function (data) {
                });
            }
        );
    });
});

Jeg vil rigtig gerne bruge Url.Action til at få genereret min URl til getJSON, for at lade MVC administrere hvad den korrekte URL på serveren bliver. Det kan heldigvis løses nemt og elegant, ved at tilføje URL'en som en data-attribut i view'et, som herefter kan hentes i javascripten. Det ser således ud:

<button id="testButton" data-request-url="@Url.Action("MyActionMethod", "MyController")">Click me!</button>

Og i javascript filen:

$(function() {
    $('#testButton').click(function(){
        $.getJSON($(this).attr("data-request-url"),
            function (data) {
//Do something }); } ); }); });

Tags: , ,

ASP.NET MVC | Javascript | jQuery

blog comments powered by Disqus