Частичные представления и CSS/Javascript

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

У меня есть приложение ASP.NET MVC с представлением, которое загружает частичное представление sllooooowwwww, используя подход Майкла Кеннеди к Повысить воспринимаемую производительность веб-сайтов ASP.NET MVC с помощью асинхронных частичных представлений. Само частичное представление отображает сетку DataTables (с собственными файлами CSS/JS), а также конфигурацию на основе Javascript. для самой сетки (форматирование столбцов, сортировка по умолчанию, настройка редактора и т. д.).

Мой вопрос в том, что это чистый способ структурировать и поддерживать все это? Здесь задействовано как минимум 3 разновидности скриптов (CSS и/или JS):

  1. JS в основном представлении, которое загружает частичное представление.
  2. Файлы CSS/JS для таблиц данных
  3. JS внутри частичного представления, которое работает на $(document).ready() и настраивает эту конкретную сетку.

Я могу контролировать (в основном представлении), где CSS/JS визуализируются, используя Razor @section для скриптов/стилей (элемент № 1 выше). Однако частичное представление не может использовать преимущества функциональности @section, поэтому любой CSS/JS в частичном представлении внедряется в середину страницы. Меня это не очень устраивает, потому что тогда визуализированный HTML выглядит ужасно, а CSS/JS отображается в середине основного представления. Я знаю, что такие вещи, как Cassette, могут помочь с пунктом № 2, когда все CSS/JS хранятся во внешних файлах.

Но как насчет элемента № 3, где у меня есть CSS/JS, который очень специфичен для этого частичного представления? Это могут быть такие мелочи, как присоединение обработчиков событий щелчка для представления или настройка подключаемых модулей JQuery, но означает ли это, что я должен выделить это в другой файл JS? Мне не нравится разделять эти вещи, если мне это не нужно, особенно конфигурацию сетки для каждого частичного представления.

В моем случае у меня есть приложение с несколькими представлениями, содержащими эти частичные представления, которые отображают сетки, и ни одна из сеток не содержит одинаковый набор столбцов, поэтому конфигурация JS для каждой сетки отличается, которая работает на $(document).ready().


javascript asp.net-mvc partial-views asp.net-mvc-partialview cassette
person David McClelland    schedule 14.01.2014    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я бы вообще не использовал частичные представления по причинам, которые вы упомянули. Вместо загрузки частичных представлений с помощью ajax загрузите данные json из контроллера. Используйте шаблон JavaScript, такой как handlebars.js, чтобы получить эффект бритвы на стороне клиента. Гораздо чище. Меньшая полезная нагрузка http.

person CodeToad    schedule 14.01.2014
comment
Спасибо за эту идею - я посмотрю на handlebars.js, есть ли у вас какие-либо ресурсы, в которых есть доказательства концепции веб-приложений ASP.NET MVC, использующих handlebars.js? Кроме того (просто в качестве аргумента), скажем, я хотел придерживаться шаблонов Razor для частичных представлений — какой хороший способ организовать Javascript, используемый внутри самих частичных представлений? - person David McClelland; 15.01.2014
comment
Извини, Дэвид, но у меня тоже нет. Если это новый проект, вы можете рассмотреть подход с использованием сервера для возврата голых данных только через API для отдыха, без пользовательского интерфейса на сервере. никаких серверных страниц, никакого .cshtml вообще. на стороне клиента статические html-страницы получают JSON с сервера и генерируют пользовательский интерфейс из данных с использованием шаблонов / MVC на стороне клиента, таких как ember или angular. Таким образом, у вас есть хорошее разделение между сервером и клиентом. Для клиента не имеет значения, что такое сервер, и наоборот. в конечном итоге клиент может быть не-html, например, родным приложением для смартфона. - person CodeToad; 15.01.2014

arrow_upward
1
arrow_downward

У меня была аналогичная ситуация с использованием JQGrid. Я закончил тем, что JavaScript стал ошеломляющим в любом представлении, использующем сетку. Мое решение состояло в том, чтобы поместить любой тяжелый javascript во внешние файлы и создать для них пространство имен следующим образом:

var JqGridHelper = JqGridHelper || {};
JqGridHelper.SetupGrid = function (gridTable, pager, gridJson, colNameJson, colModelJson, label, rowNum, gridCompleteFunc, columnChooser) {
    gridTable.jqGrid({
        datatype: "local",
        data: gridJson,
        colNames: colNameJson,
        colModel: colModelJson,
        rowNum: rowNum,
        autowidth: true,
        height: '100%',
        pager: pager,
        sortname: 'id',
        viewrecords: true,
        sortorder: "desc",
        caption: label,
        gridComplete: gridCompleteFunc
    });

    gridTable.jqGrid('navGrid', pager, { edit: false, add: false, del: false });
    if (columnChooser == true) {
        JqGridHelper.AddColumnChooser(gridTable, pager, function() {

        });
    }

};

Попробуйте абстрагировать как можно больше многоразового кода привязки и инициализации DataTable, а затем просто вызовите свои абстрагированные методы из JavaScript в частичных представлениях.

Если вы идете по пути внешних файлов javascript, убедитесь, что вы загружаете их в нужное время, а не загружаете их все при начальной загрузке страницы.

person user3119537    schedule 15.01.2014