Javascript mvc4应用中的动态背景图像

我正在尝试为我的MVC应用程序选择一个随机的背景图像。在my_Layout.cshtml中，我有以下代码：

<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>

---

然后它正确地找到了它，但是如果我在javascript中做了相同的定义（

.css（

），它就没有了。我已经没有主意了，所以请帮我解决这个问题。

你需要给出没有

~

的路径

url("/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（）”来包装css

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

---

可能为每个背景图像添加一个css类，然后使用：

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

---

…更改背景图像。

非常感谢它的工作。我想我太习惯webforms了，因此“~”您也可以在javascript中编写.net代码，比如

var baseUrl=“”。替换（/\/$/，”）

，然后您将url定义为：

“url”（“+baseUrl+”/Content/images/image1.jpg”）“

你确实意识到这不是你数组中实际拥有的东西，是吗？

~/Content/images/image1.jpg

和

images/image1.jpg

是不等价的。请参见Adil的答案，~只对服务器端代码有效。在JavaScript中它没有任何意义。

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