MVC 4應用程序中的動態背景圖像

我想爲我的MVC應用程序選擇一個隨機背景圖像。在我的_Layout.cshtml我有以下代碼：MVC 4應用程序中的動態背景圖像

<script type="text/javascript"> 
    var background = ['url("~/Content/images/image1.jpg")', 
      'url("~/Content/images/image2.jpg")', 
      'url("~/Content/images/image3.jpg")', 
      'url("~/Content/images/image4.jpg")', 
      'url("~/Content/images/image5.jpg")']; 

    $(document).ready(function() { 
     PickRandomBackground(); 
    }); 

    function PickRandomBackground() { 
     var index = Math.floor(Math.random() * 5); 
     $('html').css('background-image', background[index]) 
    } 
</script>

什麼最終發生的是，圖像不能被發現。我的site.css位於Content文件夾，如果我定義圖像有以下方式：它正確地發現它

html { 
    background-image: url("images/image1.jpg"); 
    background-position:center; 
    background-repeat: no-repeat; 
    background-color: #e2e2e2; 
    margin: 0; 
    padding: 0; 
}

然後，但如果我做我的JavaScript（.css('background-image', 'url("images/image1.jpg")）中相同的定義它不」噸。我沒有想法，所以請幫助我。

來源

2012-10-09 Konstantin Dinev

你確實意識到這不是你在陣列中實際存在的，是的？ '〜/ Content/images/image1.jpg'和'images/image1.jpg'不等於 – ultranaut

請參閱Adil的回答，〜只適用於服務器端代碼。這對JavaScript沒有任何意義。 – Archer

你需要給路徑，而不~

url("/Content/images/image1.jpg")

來源

2012-10-09 21:14:12 Adil

非常感謝它的工作。我想我太習慣於webforms，因此'〜' –

不用客氣，它的asp.net有這樣的語法。 – Adil

你也可以在你的javascript sorta中編寫.net代碼，比如'var baseUrl =「<％= ResolveUrl（」〜/「）％>」替換（/ \/$ /，''）;'然後你定義你的網址如下：''url（「'+ baseUrl +'/Content/images/image1.jpg」）'' –

你的背景陣列以錯誤的方式組成。在.cshtml文件時，它應該是這樣的：

var background = ['@Url.Content("~/Content/images/image1.jpg")', 
    '@Url.Content("~/Content/images/image2.jpg")', 
    '@Url.Content("~/Content/images/image3.jpg")', 
    '@Url.Content("~/Content/images/image4.jpg")', 
    '@Url.Content("~/Content/images/image5.jpg")'];

這樣Url.Content（...）函數將解決路徑到正確的字符串。檢查瀏覽器頁面上呈現的內容。

啊，然後你可以使用'url（）'換行。

$('html').css('background-image', 'url(' + background[index] + ')')

來源

2012-10-09 21:38:47 Nenad

也許增加一個CSS類爲每個背景圖片，然後使用：

$('html').attr('class', 'image4');

...更改背景圖片。

來源

2012-10-09 22:10:11 stuthemoo

MVC 4應用程序中的動態背景圖像

回答

相關問題