ASP.NET MVC 5 (Framework 4.5.2) Настройка пакета Jquery jqGrid не может найти изображения

ProgramBox

ASP.NET MVC 5 (Framework 4.5.2) Настройка пакета Jquery jqGrid не может найти изображения

Post author:admin
Запись опубликована:17 февраля, 2023
Post category:Вопросы по программированию

#jquery #asp.net-mvc #jqgrid #bundle

#jquery #asp.net-mvc #jqgrid #пакет

Вопрос:

РЕШАЕМАЯ: я не верю, что проблема заключалась в этом: http://forums.iis.net/t/1148674.aspx?can t seem to load images with iis7

Мое приложение не может найти изображения Jquery. Я перепробовал все, включая различные решения, найденные в Интернете, ничего не помогло. Все скрипты и стили работают отлично, только с изображениями проблемы (не отображаются). Если кто-нибудь знает решение, пожалуйста, не ссылайтесь ни на какую ссылку, а разместите ответ здесь. Мне будет легче понять (мой английский не так хорош).

ps: Проблема в том, что отладка работает правильно только при развертывании в IIS

Ниже я перечисляю коды приложения:

BundleConfig.cs

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

namespace SysWring.UI.Web
{
    public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        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",
                        "~/Scripts/jquery.ui.datepicker-pt-BR.js",
                     // "~/Scripts/jquery.smartWizard-2.0.min.js",
                        "~/Scripts/jquery.steps.min.js",
                        "~/Scripts/grid.locale-pt-br.js",
                        "~/Scripts/jquery.jqGrid.min.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 ScriptBundle("~/bundles/bootstrap").Include(
                        "~/Scripts/bootstrap.js",
                        "~/Scripts/respond.js"));

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

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                      "~/Content/themes/base/jquery-ui-1.10.4.css",
                      "~/Content/themes/base/ui.jqgrid.css",
                      "~/Content/themes/base/jquery.steps.css"));

            // Set EnableOptimizations to false for debugging. For more information,
            // visit http://go.microsoft.com/fwlink/?LinkId=301862
            BundleTable.EnableOptimizations = true;
        }
    }
}

_Layout.cshtml

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>

    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/themes/base/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/jqueryui")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("SysWring", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("Sobre", "About", "Home")</li>
                    <li>@Html.ActionLink("Contato", "Contact", "Home")</li>
                    <li>@Html.ActionLink("Configuração de Produtos", "Index", "ProdutoBase")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()

        <hr />
        <footer>
            <p>amp;copy; @DateTime.Now.Year - SysWring ERP</p>
        </footer>

    </div>

    @RenderSection("scripts", required: false)
</body>
</html>

jquery-ui.css

 ....

/* Component containers
----------------------------------*/
.ui-widget {
    font-family: Gill Sans,Arial,sans-serif;
    font-size: 1.2em;
}
.ui-widget .ui-widget {
    font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: Gill Sans,Arial,sans-serif;
    font-size: 1em;
}
.ui-widget-content {
    border: 1px solid #aaaaaa;
    background: #ffffff url("/Content/themes/base/images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;
    color: #2c4359;
}
.ui-widget-content a {
    color: #2c4359;
}
.ui-widget-header {
    border: 1px solid #2c4359;
    background: #35414f url("/Content/themes/base/images/ui-bg_dots-small_35_35414f_2x2.png") 50% 50% repeat;
    color: #e1e463;
    font-weight: bold;
}
.ui-widget-header a {
    color: #e1e463;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border: 1px solid #93c3cd;
    background: #93c3cd url("/Content/themes/base/images/ui-bg_diagonals-small_50_93c3cd_40x40.png") 50% 50% repeat;
    font-weight: bold;
    color: #333333;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
    color: #333333;
    text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    border: 1px solid #999999;
    background: #ccd232 url("/Content/themes/base/images/ui-bg_diagonals-small_75_ccd232_40x40.png") 50% 50% repeat;
    font-weight: bold;
    color: #212121;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
    color: #212121;
    text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    border: 1px solid #ff6b7f;
    background: #db4865 url("/Content/themes/base/images/ui-bg_diagonals-small_40_db4865_40x40.png") 50% 50% repeat;
    font-weight: bold;
    color: #ffffff;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: #ffffff;
    text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border: 1px solid #b4d100;
    background: #ffff38 url("/Content/themes/base/images/ui-bg_dots-medium_80_ffff38_4x4.png") 50% 50% repeat;
    color: #363636;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
    color: #363636;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
    border: 1px solid #ff6b7f;
    background: #ff3853 url("/Content/themes/base/images/ui-bg_diagonals-small_50_ff3853_40x40.png") 50% 50% repeat;
    color: #ffffff;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
    color: #ffffff;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
    color: #ffffff;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
    font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
    opacity: .7;
    filter:Alpha(Opacity=70);
    font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
    opacity: .35;
    filter:Alpha(Opacity=35);
    background-image: none;
}
.ui-state-disabled .ui-icon {
    filter:Alpha(Opacity=35); /* For IE8 - See #6059 */
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
    width: 16px;
    height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
    background-image: url("/Content/themes/base/images/ui-icons_c02669_256x240.png");
}
.ui-widget-header .ui-icon {
    background-image: url("/Content/themes/base/images/ui-icons_e1e463_256x240.png");
}
.ui-state-default .ui-icon {
    background-image: url("/Content/themes/base/images/ui-icons_ffffff_256x240.png");
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
    background-image: url("/Content/themes/base/images/ui-icons_454545_256x240.png");
}
.ui-state-active .ui-icon {
    background-image: url("/Content/themes/base/images/ui-icons_ffffff_256x240.png");
}
.ui-state-highlight .ui-icon {
    background-image: url("/Content/themes/base/images/ui-icons_88a206_256x240.png");
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url("/Content/themes/base/images/ui-icons_ffeb33_256x240.png");
}


....

Мое приложение

1. в файле css их URL неверен, вот в чем причина

2. url («images /ui-bg_flat_75_ffffff_40x100.png») -> Все изображения ссылаются таким образом на файл css. Каким должен быть правильный путь? (Я пытался изменить это, но тоже не сработало)

3. Я предполагал, что процесс минимизации (BundleConfig) будет использовать эти пути по мере необходимости; Я ошибаюсь?

4. Я перепробовал все, это сводит меня с ума; Пожалуйста, кто-нибудь?

5. какие изображения файлов css не загружаются?

Ответ №1:

Вам необходимо выполнить CssRewriteUrlTransform() для каждого файла css, чтобы ресурсы, на которые они ссылаются через относительный путь, были переписаны как абсолютные пути. MSDN: CssRewriteUrlTransform

Кроме того, не включайте all.css или base.css в пакет. Их использование «@Import» приведет к ошибке минимизации, и они являются избыточными.

 bundles.Add(new StyleBundle("~/Content/jqueryUI/themes/base/css")
       .Include("~/Content/themes/base/accordion.css", new CssRewriteUrlTransform())
       .Include("~/Content/themes/base/button.css", new CssRewriteUrlTransform())        
       .Include("~/Content/themes/base/core.css", new CssRewriteUrlTransform())        
       .Include("~/Content/themes/base/datepicker.css", new CssRewriteUrlTransform())        
       .Include("~/Content/themes/base/dialog.css", new CssRewriteUrlTransform())        
       .Include("~/Content/themes/base/draggable.css", new CssRewriteUrlTransform())        
       .Include("~/Content/themes/base/menu.css", new CssRewriteUrlTransform())        
       .Include("~/Content/themes/base/progressbar.css", new CssRewriteUrlTransform())        
       .Include("~/Content/themes/base/resizable.css", new CssRewriteUrlTransform())        
       .Include("~/Content/themes/base/selectable.css", new CssRewriteUrlTransform())        
       .Include("~/Content/themes/base/selectMenu.css", new CssRewriteUrlTransform())        
       .Include("~/Content/themes/base/slider.css", new CssRewriteUrlTransform())        
       .Include("~/Content/themes/base/sortable.css", new CssRewriteUrlTransform())        
       .Include("~/Content/themes/base/spinner.css", new CssRewriteUrlTransform())
       .Include("~/Content/themes/base/tabs.css", new CssRewriteUrlTransform())
       .Include("~/Content/themes/base/theme.css", new CssRewriteUrlTransform())
       .Include("~/Content/themes/base/tooltip.css", new CssRewriteUrlTransform())
       .Include("~/Scripts/qTip/jquery.qtip.css", new CssRewriteUrlTransform())
 );

Вопрос:

Ниже я перечисляю коды приложения:

BundleConfig.cs

_Layout.cshtml

jquery-ui.css

Мое приложение

Комментарии:

Ответ №1:

Вам также может понравиться

Используя styled-component, как один компонент может иметь разные стили в зависимости от разных ситуаций?

Построение двух круговых диаграмм одна рядом с другой (подзаголовки)

проверка подлинности Windows в web api 2