2014-09-26 3 views
0

сегодня у меня возникают довольно тупой вопрос: по какой-то причине Datepicker JQuery-UI в штукатурок, но не имеет изображения вообще, этот образ объясняет то, что я говорю:JQuery UI Datepicker не имеет изображения

No background or images?

Это (очень) просто .js, в котором я использую DatePicker:

$(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? Спасибо, что проверили это!

+0

Звучит как проблема пути к ресурсам. Вы проверили изображения на 404 ошибки? – isherwood

+0

Инструменты разработчика не показывают 404s, насколько я проверял – krieg

+0

Итак, изображения находятся в DOM, и они загружаются, но вы их не видите? – isherwood

ответ

2

Изображения не загружались, потому что файлы в bundleconfig имели другое имя из тех, что находятся в папке Solution/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")); 
} 

исправляет проблему. Следите за этим!