Редактировать класс конфигурации пакета для недавно реализованной темы - PullRequest
Новая
       17

Редактировать класс конфигурации пакета для недавно реализованной темы

1 голос
/ 10 ноября 2019

Когда я пытаюсь связать мои CSS и javascript, мои javascript и CSS-эффекты, похоже, не работают. Я обычно использую js-файлы и CSS-файлы, как в ASP.NET Web Forms.

Я сохранил свои файлы CSS и js только в следующем коде 

<link rel="stylesheet" href="~/plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="~/dist/css/adminlte.min.css">

<!-- REQUIRED SCRIPTS -->
<script src="~/plugins/jquery/jquery.min.js"></script>
<script src="~/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="~/dist/js/adminlte.js"></script>
<script src="~/plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="~/dist/js/pages/dashboard3.js"></script>
@RenderSection("scripts", required: false)

Вот класс конфигурации пакета 

public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{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 ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }
  1. Как я могу связать мойJS-файлы и CSS-файлы?
  2. Кроме того, я ссылался на файл js validate js, однако проверка не работает на моих страницах. В чем проблема?

См. Прикрепленное изображение для структуры файла.

My project file structure

1 Ответ

1 голос
/ 10 ноября 2019

  1. Вот как я бы это сделал для вашей настройки.

Убедитесь, что вы установили пакет nuget Microsoft.AspNet.Web.Optimization.

Вот отредактированный BundleConfig 

public static class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new StyleBundle("~/bundles/allcss")
            .Include("~/plugins/fontawesome-free/css/all.min.css")
            .Include("~/dist/css/adminlte.min.css"));

        bundles.Add(new ScriptBundle("~/bundles/alljs")
            .Include("~/plugins/jquery/jquery.min.js")
            .Include("~/plugins/bootstrap/js/bootstrap.bundle.min.js")
            .Include("~/dist/js/adminlte.js")
            .Include("~/plugins/jquery-validation/jquery.validate.min.js")
            .Include("~/dist/js/pages/dashboard3.js"));
    }
}

global.asax 

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {           
        BundleConfig.RegisterBundles(BundleTable.Bundles);
       //other unrelated code            
    }      
}

Соответствующие части _Layout.cshtml

Обратите внимание, что у вас нетпомещать вызовы Render в _layout.cshtml, но это стандартное место для большинства приложений. 

@using System.Web.Optimization

<!DOCTYPE html>    
<html>
<head>
       @Styles.Render("~/bundles/allcss")
</head>
<body>

   @Scripts.Render("~/bundles/alljs")      
   @RenderSection("scripts", required: false)
</body>
Полагаю, вам также необходимо поместить jquery.validate.unobtrusive.js после jquery.validate.js. Убедитесь, что вы добавили правильные настройки в ваш web.config 
    <appSettings>  
        <add key="ClientValidationEnabled" value="true"/>
        <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
        <!--other settings-->
    </appSettings>

См. Это для больше объяснений

...