2010-02-10 7 views
8

J'utilise jQuery Lightbox pour ma galerie d'images.
L'URL de l'image du bouton est « ../../Content/Lightbox/lightbox-btn-next.gif »
Cela fonctionne très bien si mon URL est « localhost/Something1/Somtehing2 »
Si j'utilise une autre route comme « localhost/Something1/Something2/Something3 » URL puis des images de bouton est incorrecte.
Puis-je utiliser Url.Action() dans des fichiers .js?
Voilà comment j'appelle les fichiers .js:URL helper en JavaScript

<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.lightbox-0.5.js") %>"></script> 

Répondre

5

Vous ne pouvez pas utiliser Url.Action() .js dans les fichiers. Mais vous pouvez définir une variable globale et l'utiliser dans votre fichier js.

<script type="text/javascript"> 

    var imageUrl = "<%= ... %>"; 

</script> 
+0

Tnx! Cela a résolu mon problème. –

0

je préfère tirer les URL à partir d'un de de les années href ou sous forme 'étiquettes - une action ou un autre élément qui fait sens.

<img class="_click" src="<%= Url.Content("~/my/image.png") %>" alt="Click" /> 

Et dans mon javascript (vérifiez cela sur jQuery, je ne suis pas sûr que ce soit la syntaxe exacte.):

var url = $('._click').attr('href'); 
// To pass these to your plugin as options 
// see lightbox source for a full list 
$('a').lightBox({ imageLoading : url }) 

Une autre option un peu moins préféré est d'ajouter vos paramètres au-dessus de votre fichier:

<script type="text/javascript"><![CDATA[ 
    $('a').lightBox({ imageLoading : <%= Url.Content("~/my/image.png") %> }) 
//]]></script> 

Je dis « moins préférée », car cette approche mixe le balisage et le code.

Une autre approche (qui a besoin de beaucoup de ranger) est de vous servir js d'un contrôleur:

public ActionResult GetFileContent(string filename) 
{ 
    // important: make sure to control the path for security 
    var path = Server.MapPath("~/Scripts/" + filename); 
    var content = System.IO.File.ReadAllText(path); 

    // Use some kind of template convention 
    content = content.Replace("{{IMAGE_PATH}}", Url.Content(@"~/my/image.png")); 

    var bytes = new UTF8Encoding().GetBytes(content); 
    return new FileContentResult(bytes, "text/javascript"); 
} 
+0

L'URL est à l'intérieur jquery.lightbox-0.5.js Je n'ai pas une étiquette à l'intérieur View. –

+0

Peut-être que vous pouvez utiliser le tag de script? Où lancez-vous votre appel lightbox()? – ziya

+0

Je cours un appel de lightbox à l'intérieur d'une vue partielle. Il y a une explication sur http://leandrovieira.com/projects/jquery/lightbox comment ces paramètres peuvent être remplacés. Mais ça ne marche pas :) –

10

Je mets ce qui suit dans ma page principale, qui accomplit la même chose que @ Url.Content (~/path '):

<script type="text/javascript" charset="utf-8"> 
    function UrlContent(path) { 
     return '@Url.Content("~/")' + path.replace(/^\//, ''); 
    } 
</script> 

Lorsque ma page principale est compilé et servi cela se traduit par une fonction javascript qui applique la racine de mon site au chemin. Fonctionne très bien. La regex path.replace supprime simplement une barre oblique s'il y en a une, car @ Url.Content ("~ /") a une barre oblique.

+0

Merci @matt. Excellente idée et fonctionne plutôt bien ici. –

2

Il suffit de mettre @Url.Content(@"~/some paths") dans des guillemets simples comme celui:

'@Url.Content(@"~/some paths")'