Question

今天我有一个相当沉闷的问题：由于某些原因，JQuery-UI的Datepicker渲染，但没有任何图像，这个图像解释了我在说什么：

No background or images?

这是我使用datepicker的（非常）简单的.js：

$(document).ready(function () {

    $(".date").datepicker();

});

这是我的_Layout：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/Site.css")
    @Styles.Render("~/Content/customcss/sitelayout.css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/Scripts/jquery.validate.min.js")
    @Scripts.Render("~/bundles/jqueryval")
</head>
<body>
    @RenderBody()

    @RenderSection("scripts", required: false)


</body>
</html>

这是我使用datepicker的视图：

@{
    ViewBag.Title = "Creación de Reserva";
    Layout = "~/Views/Shared/_Layout.cshtml";
    @Styles.Render("~/Content/themes/base/datepicker.css");
}

@section Scripts
{
    @Scripts.Render("~/Scripts/ReservationCreate.js");
}

<body>

    @RenderPage("~/Views/Shared/_Navbar.cshtml");

    <div id="wrap">

        <h1>Creación de Reserva</h1>

        <div id="content">


                <div class="editor-label">
                    <label>Fecha</label>
                </div>
                <div class="editor-field">
                    <input type="text" id="ReservationDate" name="ReservationDate" class="date" />
                </div>


        </div>
    </div>

</body>

我在解决方案资源管理器中检查了JQuery-ui使用的图像，并且它们（显然）位于正确的位置，只是为了进行双重检查：

Where the images are.

如果你需要它，这是我的BundleConfig.cs：

using System;
using System.Web;
using System.Web.Optimization;

namespace WebApplication
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
        }
    }
}

那么，关于它，你们有没有想过为什么它没有使用Datepicker的任何图像？感谢您查看此内容！

Answer 1

图片未加载，因为bundleconfig中的文件与Solution＆＃39; s / Scripts /文件夹中的文件名称不同。

更改此内容：

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
            "~/Content/themes/base/jquery.ui.core.css",
            "~/Content/themes/base/jquery.ui.resizable.css",
            "~/Content/themes/base/jquery.ui.selectable.css",
            "~/Content/themes/base/jquery.ui.accordion.css",
            "~/Content/themes/base/jquery.ui.autocomplete.css",
            "~/Content/themes/base/jquery.ui.button.css",
            "~/Content/themes/base/jquery.ui.dialog.css",
            "~/Content/themes/base/jquery.ui.slider.css",
            "~/Content/themes/base/jquery.ui.tabs.css",
            "~/Content/themes/base/jquery.ui.datepicker.css",
            "~/Content/themes/base/jquery.ui.progressbar.css",
            "~/Content/themes/base/jquery.ui.theme.css"));
}

到此：

 bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
            "~/Content/themes/base/core.css",
            "~/Content/themes/base/resizable.css",
            "~/Content/themes/base/selectable.css",
            "~/Content/themes/base/accordion.css",
            "~/Content/themes/base/autocomplete.css",
            "~/Content/themes/base/button.css",
            "~/Content/themes/base/dialog.css",
            "~/Content/themes/base/slider.css",
            "~/Content/themes/base/tabs.css",
            "~/Content/themes/base/datepicker.css",
            "~/Content/themes/base/progressbar.css",
            "~/Content/themes/base/theme.css"));
}

解决了这个问题。小心这个！

JQuery UI Datepicker没有图像

1 个答案: