Как избежать повторения одинаковых разделов скриптов и стилей в представлениях MVC - PullRequest
Новая
       7

Как избежать повторения одинаковых разделов скриптов и стилей в представлениях MVC

0 голосов
/ 12 мая 2018

У меня есть проект MVC 5 (.NET Framework), где набор видов имеет одинаковый набор блоков @section styles и @section scripts. 

@section styles {
    <link href="~/Content/DataTables/css/jquery.dataTables.css" rel="stylesheet" />
    <link href="~/Content/DataTables/css/buttons.dataTables.css" rel="stylesheet" />
}
@section scripts {
    <script src="~/Scripts/DataTables/jquery.dataTables.js"></script>
    <script src="~/Scripts/DataTables/dataTables.buttons.js"></script>
    <script src="~/Scripts/DataTables/buttons.print.js"></script>
    <script src="~/Scripts/DataTables/buttons.html5.js"></script>
    <script src="~/Scripts/jszip.js"></script>
    <script>
        $(() => {
            // source js file defined in BundleConfig.cs
            TableController.init();
        });
    </script>
}

Так же, как одна функция TableController.init() jQuery находится в одном месте и может вызываться в любом представлении, которое я выберу, есть ли способ, которым я могу иметь только одно определение этого набора элементов <link> и <script> быть в состоянии назвать это в любом представлении, которое я выберу? Причина, по которой я не поместил это в файл _Layout, заключается в том, что он может не понадобиться для всех представлений - только для большинства из них.

Я не знаю, как называется эта техника, или даже если это возможно в MVC. Я просто подумал, что это был бы полезный способ избежать повторения. Кроме того, если бы я хотел внести какие-либо изменения, я бы внес изменения только в одном месте, а не в нескольких представлениях.

Есть ли техника, которую я могу использовать для достижения этой цели?

Ответы [ 3 ]

0 голосов
/ 12 мая 2018

Вы можете создавать Связки для чего угодно, Вы можете создавать Связки для области или отдельной страницы. 

//scripts
    bundles.Add(new ScriptBundle("~/bundles/Custom").Include(
                    "~/Scripts/Custom.js"));
    bundles.Add(new ScriptBundle("~/bundles/Custom2").Include(
                    "~/Scripts/Custom2.js"));
//styles
    bundles.Add(new StyleBundle("~/Content/Custom").Include(
                           "~/Content/Custom.css"));
    bundles.Add(new StyleBundle("~/Content/Custom2").Include(
                           "~/Content/Custom2.css"));

Теперь вы можете разделять эти скрипты и стили и добавлять их только на нужную вам страницу.

Также я полагаю, что в вашем теге _Layout.cshtml в заголовке заголовка хорошо определить 2 раздела. 

<head>
    //other scripts and styles here
    @RenderSection("scriptslib", required: false)
    @RenderSection("csslib", required: false)
</head>

Так что теперь в ваших представлениях (Cabinet.cshtml и AdminPanel.cshtml) вы можете размещать своих библиотек там, где они должны выглядеть следующим образом: 

@section scriptslib{
    @Scripts.Render("~/bundles/Custom")
    @Scripts.Render("~/bundles/Custom2")
    }

Делая это, вы можете создавать полные пакеты для разделов или страниц, чтобы использовать, как вы хотите.

**

РЕДАКТИРОВАТЬ: спасибо Адриан

** Вы можете добавлять пакеты в качестве папок для будущих сценариев с использованием подстановочных знаков, чтобы вам не приходилось перекомпилировать, а также помещать файлы custom.js и custom.css в каждую папку для будущих изменений или переопределений, которые вы, возможно, захотите добавить.

ДОБАВЛЕНИЕ ПОЛЬЗОВАТЕЛЬСКИХ ПАПКАХ:

  • Скрипты

    • Пользовательские
      • YourFiles.js
      • YourFiles.min.js

  • Содержание

    • Пользовательские
      • YourFiles.css
      • YourFiles.min.css

Пользовательские комплекты: 

    bundles.Add(new ScriptBundle("~/bundles/Custom").Include(
                    "~/Scripts/Custom/*.js"));
    bundles.Add(new ScriptBundle("~/bundles/Custom2").Include(
                    "~/Scripts/Custom/*.*.js"));

    bundles.Add(new StyleBundle("~/Content/Custom").Include(
               "~/Content/Custom/*.css"));
    bundles.Add(new StyleBundle("~/Content/Custom2").Include(
               "~/Content/Custom/*.*.css"));

Теперь все, что вы помещаете в эти папки, будет обрабатываться при перезапуске приложения IIS, я обычно добавляю функцию в свои приложения, чтобы иметь возможность выполнить перезапуск приложения.

Надеюсь, это поможет

0 голосов
/ 12 мая 2018

Попробуйте идею Pool pro, это отличный ответ. Для меня я просто предпочитаю использовать частичные представления для ссылки на него.

Почему?

Вам необходимо снова скомпилировать код после изменения файла c # и добавления другого файла CSS или JS. Если вы используете частичные представления, вам не нужно снова компилировать проект, вы можете просто изменить представления и загрузить.

0 голосов
/ 12 мая 2018

Не очень: Вы можете использовать частичное представление и использовать его в представлениях, которые вам нужны.
Поместите ваше частичное представление в общую папку.
Затем вызовите это в своем представлении @await Html.PartialAsync("_SomeNamePartial")

Более красиво : Поместите все CSS в 1 файл и весь JavaScript в 1 файл.

Лучший способ и в порядке: Ваш способДелая это, @section существует по причине.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...