Встраивает ли код CSS/jQuery в код С# плохо?

Я вижу этот тип кода при просмотре нашей рабочей базы кода:

    private Button AddClearButton()
    {
        return new Button
                   {
                       OnClientClick =
                           string.Format(@"$('.{0}').css('background-color', '#FBFBFB');
                                   $('#' + {1}).val('');
                                   $('#' + {2}).val('');
                                   return false;", _className, _hiddenImageNameClientId, _hiddenPathClientId),
                       Text = LanguageManager.Instance.Translate("/button/clear")
                   };
    }

или

            _nameAndImageDiv = new HtmlGenericControl("div");
            var imageDiv = new HtmlGenericControl("div");
            imageDiv.Attributes.Add("style", "width: 70px; height: 50px; text-align: center; padding-top: 5px; ");

            var nameDiv = new HtmlGenericControl("div");
            nameDiv.Attributes.Add("style", "width: 70px; word-wrap: break-word; text-align: center;");
            var image = new HostingThumbnailImage();

Отказ от ответственности: я раньше не работал с CSS. но я слышал, что мы должны отделять css, js, html, С#, кроме того, чтобы скомпоновать их.

Итак, приведенный выше код плохой? Если да, то как лучше подходит?

ОТВЕТЫ

Ответ 1

Сверху моей головы я могу думать о нескольких проблемах, но не смертельно.

Без особого порядка:

  • Вы теряете возможность кэшировать ваши файлы JavaScript на сервере или на клиенте.
  • Вы увеличиваете сторону своей страницы. Если в каждой кнопке много встроенного JavaScript, размер страницы, таким образом, увеличивается время загрузки.
  • Отладка станет чрезвычайно сложной.
  • Ненавязчивый JavaScript - ваш друг!
  • Обслуживание становится более сложным, так как вам нужно помнить, где в коде С# строковые строки JavaScript.
  • Intellisense потерян. Visual Studio имеет фантастический редактор JavaScript, вы теряете всю эту функциональность, жестко кодируя строки
  • Я упоминал Ненавязчивый JavaScript - ваш друг!
  • Вы теряете преимущества разделения функций.
  • Если у вас есть дубликаты кнопок с одинаковой функциональностью, у вас есть дубликат кода.

Я уверен, что есть куча, которую я пропустил.

Ответ 2

Это не CSS, а JavaScript, используя библиотеку jQuery. Вы правы, чтобы быть подозрительными, есть несколько " вонючих частей с этим кодом:

  • Использование OnClientClick приводит к атрибуту onclick="", который менее хорош, чем привязка события. Это выполняется динамически, предполагая, что это происходит несколькими типами.

  • Использование и жесткое кодирование background-color - класс CSS будет намного лучше, этот цвет, вероятно, повторяется много раз в коде или файлах CSS и требует много работы, которую нужно изменить (перераспределение код сайта, а не полагаться на файлы ресурсов). Лучшим подходом является использование CssClass:

    imageDiv.CssClass = "imageDiv";

    и имеющий в вашем файле CSS:

    .imageDiv { width: 70px; height: 50px; text-align: center; padding-top: 5px; }

    это позволяет вам легко изменять дизайн и иметь лучший imageDiv стиль в своем контексте (например, он может быть меньше, если он находится на боковой панели с помощью селектора .sidebar .imageDiv)

  • Использование String.Format с JavaScript/CSS не очень. Например, это верно в JavaScript (и поддерживается jQuery): .css({'color': '#FBFBFB', 'border-color':"green"}). С помощью этого кода он должен быть записан как .css({{'color': '#FBFBFB', 'border-color':""green""}}) - экранирование двойных кавычек для строки и фигурные скобки для String.Format.

  • Как вы уже упоминали, никакого разделения данных/представления/поведения.

Ответ 3

Сгенерированный код - это Javascript, хотя он управляет CSS некоторых элементов.

Я бы сказал, что лучший способ - выполнить его при загрузке страницы. Если вам нужно всего лишь привязать функцию к событию click, вы можете сделать все это в Javascript/JQuery с чем-то вроде этого:

$("#<%= this.TheButton.ClientID %>").click(function () {
    $("...").css("...", "...");
    // ...
});

Я подозреваю, что ASP.NET в настоящее время просто генерирует кнопку с onclick =..., которая обычно считается плохой практикой для программирования Javascript, но это не огромная проблема.

Общая проблема здесь, на мой взгляд, заключается в том, что логика представления и модели, вероятно, смешивается вместе, но ее трудно избежать в традиционном ASP.NET.

Ответ 4

Ответ на вопрос:

Неверный код выше?

Плохо, в смысле "плохая практика программирования", ДА. Определенно плохо.

Какой лучший подход?

Лучший подход заключается в разделении кода на

  • Событие генерирование компонента (вам не нужно беспокоиться об этом)

  • Событие прослушиватель (что вам нужно будет прописать)

Почему это лучший подход?

Потому что его хорошая практика программирования и это приносит массу преимуществ. Это тема сама по себе, которую все выпускники должны изучать в эти дни.: D

Ответ 5

Скорее всего, причина, по которой этот JQuery была реализована таким образом, была связана с необходимостью ссылаться на идентификаторы управления на стороне сервера (_hiddenImageNameClientId, _hiddenPathClientId), которые до .NET 4 были немного полезны. (См. Идентификаторы клиентов в .NET 4)

Что касается "правильности", я бы счел это неправильным, так как я бы предпочел увидеть четко определенный уровень клиентской стороны в javascript, определяющий это событие click. Смешивание сервера и кода на стороне клиента "плохо пахнет" для меня и разбивает SoC IMO.

Ответ 6

Мне не нравится внедрять CSS в код. Лучший подход в обоих случаях, на мой взгляд, - добавить класс к элементу, а затем CSS в файле CSS. В первом примере цвет фона изменяется с помощью javascript, я бы добавил класс ".addClass('selected')" (или toggleClass) с именем, которое имеет смысл. Во втором примере удалите CSS и добавьте класс вместо .Attributes.Add( "class", "xxx" ).

Ваш файл CSS будет содержать такие вещи, как:

.selected {
    background-color: #FBFBFB;
}
...

Мне не нравится манипулирование цветами/границами и т.д. в С#/javascript, потому что по мере роста проекта информация о презентации заканчивается повсюду, и изменение или переопределение цвета становится затруднительным.

Ответ 7

В первом примере на самом деле выполняется javascript (jQuery) при запуске события click. Второй - это просто добавление встроенных стилей. Бьюсь об заклад, этот подход использовался для получения ссылки на идентификатор клиента (что было затруднено pre -.net 4.0), хотя есть и другие способы получить это, используя чистый javascript.

Некоторые скажут, что все в порядке, другие скажут свою плохую практику и уродливость. Это зависит от вашего стиля программирования. И это определенно не смертельно.

Плюсы:  - Не требуется отдельный файл  - более быстрое развитие (возможно)

Против:  - нет четкого разделения слоев  - трудно поддерживать и отлаживать по мере роста проекта

Вероятно, больше, но все, о чем я могу думать сейчас.

Лично я бы держался подальше от этого кода. Это делает отладку и обслуживание немного более сложными, и ее нелегко понять для других программистов, которые касаются вашего кода (особенно если у вас есть только javascript и С# - только программисты). Но его ничего, что опытный программист не может справиться, особенно на небольших проектах.

Ответ 8

Отвечаю несколько вопросов:

  • Какие лучшие встроенные стили или их наличие в файле css
  • Что лучше смешивать javascript с HTML или иметь их в js файле

Есть много вопросов, чтобы ответить на эти вопросы и некоторые соображения, которые различаются по x сценарию.

Короткий ответ: это плохая практика, смешивающая его. Используйте классы css над встроенными стилями. Вы также можете использовать селектор jquery для использования динамического поведения приложения attach с элементами html на основе классов css или идентификаторов, которые имеют. Кроме того, вы можете иметь разные типы поведения, основанные на отношениях сдерживания.

Ответ 9

Этот код будет очень неприятным для отладки. Вы спросили о лучшем решении. Похоже, что все, что делается здесь, может быть сделано только с помощью javascript.

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

Ответ 10

В первом примере на самом деле выполняется javascript (jQuery) при запуске события click. Второй - это просто добавление встроенных стилей. Бьюсь об заклад, этот подход использовался для получения ссылки на идентификатор клиента (что было затруднено pre -.net 4.0), хотя есть и другие способы получить это, используя чистый javascript.

Некоторые скажут, что все в порядке, другие скажут свою плохую практику и уродливость. Это зависит от вашего стиля программирования. И это определенно не фатально.

Плюсы: - Не требуется отдельный файл - более быстрое развитие (возможно)

Минусы: - отсутствие четкого разделения слоев - сложно поддерживать и отлаживать по мере роста проекта

Вероятно, больше, но все, о чем я могу думать сейчас.

Лично я бы держался подальше от этого кода. Это делает отладку и обслуживание немного более сложными, и ее нелегко понять для других программистов, которые касаются вашего кода (особенно если у вас есть только javascript и С# - только программисты). Но его ничего, что опытный программист не может справиться, особенно на небольших проектах.

Ответ 11

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

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

В моем сообщении в блоге я также ссылаюсь на вопрос SO, который я сделал об этом некоторое время назад. Он показывает, как это можно использовать для полного исключения этой зависимости. Я также с радостью отвечу на любой вопрос, регулирующий этот подход. Если вы обнаружите, что мне трудно понять, к чему я иду.