Question

我在我的MVC应用程序中使用jQuery DatePicker插件。要显示日历弹出窗口的特定图像，我使用以下行

 $.datepicker.setDefaults({
    showOn: "both",
    buttonImage: "../images/Calendar.png",
    buttonImageOnly: true,
    buttonText: "show calendar"
});

在我的观点中，我总是将表单定义如下：

 @using (Html.BeginForm("Insert", "MyController", FormMethod.Post, new { id = "insertForm", onsubmit = "return confirm('Do you confirm insert operation?')" }))

当我运行某个没有任何参数的页面时，例如

http://localhost:52849/MyController/Insert

一切正常，日历图像也能正常显示。当我用Firebug检查元素时，我看到以下声明：

<img class="ui-datepicker-trigger" src="../images/Calendar.png" alt="Show Calendar" title="Show Calendar"/>

如果我在Chrome中复制图片网址，我会

http://localhost:52849/images/Calendar.png

但是当我用参数

来调用页面时

http://localhost:52849/MyController/Insert/6

图像消失了。当我用萤火虫检查按钮时，我仍然看到与

相同的声明

<img class="ui-datepicker-trigger" src="../images/Calendar.png" alt="Show Calendar" title="Show Calendar"/>

但是当我使用Chrome获取图片网址时

http://localhost:52849/MyController/images/Calendar.png

它背后的原因是什么，如何在不通过查询字符串或会话变量传递参数的情况下解决此问题

Answer 1

这是因为你正在使用buttonImage属性的相对路径。

相反，使用绝对路径，问题就会解决。

例如：

 $.datepicker.setDefaults({
    showOn: "both",
    buttonImage: "/myapplication/images/Calendar.png",
    buttonImageOnly: true,
    buttonText: "show calendar"
});

（实际上，我通常定义了一个包含应用程序root的javascript变量，然后将其与资源路径相结合：如果必须将应用程序部署到不同的路径，那么所有图像都不会破裂。）

例如：

 var appRoot = '<%=Request.ApplicationPath%>';
 $.datepicker.setDefaults({
    showOn: "both",
    buttonImage: appRoot + "/images/Calendar.png",
    buttonImageOnly: true,
    buttonText: "show calendar"
});

MVC破坏了图像路径

1 个答案: