2010-02-10 33 views
8

Tôi đang sử dụng jQuery Lightbox cho thư viện hình ảnh của mình.
URL cho hình ảnh nút là '../../Content/Lightbox/lightbox-btn-next.gif'
đó làm việc tốt nếu URL của tôi là 'localhost/Something1/Somtehing2'
Nếu tôi sử dụng một tuyến đường như 'localhost/Something1/Something2/Something3' sau đó URL hình ảnh nút là không chính xác.
Tôi có thể sử dụng Url.Action() bên trong tệp .js không?
Đây là cách tôi gọi file .js:Trợ giúp URL trong JavaScript

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

Trả lời

5

Bạn không thể sử dụng Url.Action() bên .js file. Nhưng bạn có thể định nghĩa biến toàn cục và sử dụng nó trong tệp js của bạn.

<script type="text/javascript"> 

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

</script> 
+0

Tnx! Điều đó đã giải quyết được vấn đề của tôi. –

0

tôi thích để kéo các URL từ 'của href hoặc hình thức' một thẻ hành động của - hoặc một số yếu tố khác có ý nghĩa.

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

Và trong javascript của tôi (séc đôi này trên jQuery, tôi không chắc chắn nếu đó là cú pháp chính xác.):

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

Một tùy chọn khác một chút ít ưa thích là để thêm các thiết lập của bạn trên đầu trang của tệp của bạn:

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

Tôi đã nói 'ít được ưa thích hơn' vì cách tiếp cận này kết hợp đánh dấu và mã.

Tuy nhiên, cách tiếp cận khác (mà cần rất nhiều dọn dẹp) là để phục vụ quý khách js nộp từ một bộ điều khiển:

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

Url là bên trong jquery.lightbox-0.5.js Tôi không có một thẻ bên trong View. –

+0

Có thể bạn có thể sử dụng thẻ tập lệnh? Bạn đang chạy hộp đèn() ở đâu? – ziya

+0

Tôi đang chạy cuộc gọi hộp đèn bên trong chế độ xem một phần. Có giải thích về http://leandrovieira.com/projects/jquery/lightbox cách các cài đặt này có thể bị ghi đè. Nhưng điều đó không làm việc :) –

10

tôi đặt sau đây trong trang chủ của tôi, có thể thực nhiều điều tương tự như @ Url.Content ('~/path'):

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

Khi trang chủ của tôi được biên dịch và phục vụ điều này chuyển thành một hàm javascript áp dụng gốc trang của tôi cho đường dẫn. Hoạt động tuyệt vời. Path.replace regex chỉ đơn giản là loại bỏ một dấu gạch chéo hàng đầu nếu có một từ khi @ Url.Content ("~ /") có dấu gạch chéo chấm dứt.

+0

Cảm ơn @matt. Ý tưởng tuyệt vời và hoạt động khá tốt ở đây. –

2

Chỉ cần đặt @Url.Content(@"~/some paths") vào dấu nháy đơn như thế này:

'@Url.Content(@"~/some paths")' 
Các vấn đề liên quan