asp.net mvc автономный контроль ascx, как мне связать (css и js) наиболее эффективно

Мне нужен совет.
(Для тех, кто уже читал это до того, как я сильно отредактировал этот вопрос)

Я разработал несколько веб-страниц asp.net mvc.
Каждая страница имеет мастер и некоторые элементы управления ascx (от 2 до 6), встроенные в нее файл js и css.
До сих пор все было хорошо .

Чтобы улучшить модульность, гибкость и тестируемость, теперь ожидается, что ascx смогут работать как отдельные элементы управления.
(Каждый ascx также имеет свои собственные файлы css и js, в некоторых случаях он имеет другой элемент управления внутри него)

Чтобы выполнить это требование, мы вызываем контроллер с помощью строки запроса.
(отличается от того, как он вызывается со страницы - через Ajax)

Воспроизведенный ascx (частичный) отображается в браузере без всех остальных частей исходной страницы.

В этом случае, чтобы партиал правильно отображался (css) и правильно работал (js/jquery), необходимо добавить все соответствующие файлы (например, jquery) в пользовательский элемент управления.
Это противоречит концепция размещения файлов в наиболее логичном месте (например, на главной странице).

Как я могу преодолеть эту проблему? Имейте в виду, что это актуально для каждого «управляющего» файла ascx, созданного в приложении.


Примеры:
я добавил описание 3 случаев, которые будут изображать мой сценарий:
(это было скопировано из другого вопроса, который я задал здесь).

Случай 1: В случае со страницей может быть несколько частей, которые загружаются с помощью ajax во время создания страницы. Частицы могут быть вызваны снова с использованием ajax в соответствии с действиями пользователя. В этом случае я рассматриваю их как элементы управления на странице.

Вариант 2: в отдельном случае частичное можно вызвать как часть теста непосредственно из браузера. В этом случае вы видите только частичную часть в браузере.

Случай 3. В третьем случае партиал может вызываться как часть iframe в расширении Google Chrome (например). В этом случае вы можете увидеть партиал на странице, который, возможно, не был встроен в ваше веб-приложение.


Будем признательны за любые мысли.

Для тех, кто празднует - С Новым годом!


person Community    schedule 29.12.2010    source источник
comment
Джулиан, я бы «подтвердил», что css не имеет отношения к правильному функционированию элемента управления. Зачем?? потому что css напрямую связан с общим внешним видом целевого сайта. поэтому, на мой взгляд, css (если он не связан с селекторами jquery) должен быть абстрагирован на более высоком уровне и, следовательно, полностью изолирован от рассматриваемых элементов управления ascx. Я могу ошибаться, но мне это кажется более «правильным» - т.е. css, управляемый сайтом, а не функциональностью управления (за исключением случаев, когда css - это класс, управляемый jquery, или селекторы идентификаторов).   -  person jim tollan    schedule 29.12.2010
comment
закончились символы для завершения :). использование вышеуказанной дисциплины означает, что элементы управления администратора и общего доступа могут быть общими, даже если стили обоих противоречат друг другу.   -  person jim tollan    schedule 29.12.2010
comment
@jim - некоторые из наших элементов управления содержат в себе скрытые элементы (с использованием css). Если css находится на уровне сайта, скрытые поля будут видны в элементе управления, когда он отображается отдельно. Кроме того, пользователь не может проверить внешний вид этого элемента управления, если не установлен CSS.   -  person    schedule 29.12.2010


Ответы (2)


Если вам нужно добавить контент на страницу хостинга, у вас может быть код в файле .ascx для этого на стороне сервера. Например:

<%
  var link = new HtmlLink { Href = Url.Content("~/Content/Style/MySheet.css") };
  link.Attributes["rel"] = "Stylesheet";
  link.Attributes["type"] = "text/css";
  Page.Header.Controls.Add(link);
%>

Чтобы этот пример работал, у вас должен быть runat="server" для вашего тега head.

person Jacob    schedule 29.12.2010
comment
спасибо, у меня есть около 15 файлов, которые нужно включить, чтобы заставить элемент управления работать автономно. (jquery, microsoft, файл темы и т. д.) есть ли способ различать, когда элемент управления является частью веб-страницы или работает автономно, и в этом случае включает ваш код для соответствующих (15) файлов? - person ; 29.12.2010
comment
Поскольку у вас есть контроллер, обрабатывающий логику рендеринга только партиала, он может передавать данные в модель представления партиала, чтобы сообщить ей, должна ли она отображаться как целая страница, а не как часть. - person Jacob; 29.12.2010
comment
Я не думаю, что контроллер должен знать, в каком режиме он вызывается. - person ; 29.12.2010
comment
Тогда что вы имеете в виду под «Чтобы выполнить это требование, мы вызываем контроллер с соответствующими параметрами, и он возвращает ascx (частичный) прямо в браузер без всех других частей исходной страницы?» Если вы передаете контроллеру параметры, чтобы сообщить ему об автономном рендеринге, то контроллер знает свой режим. - person Jacob; 29.12.2010
comment
пользовательский элемент управления в некоторых случаях имеет строку запроса, которая передает ключи для выбора linq. Насколько я понимаю из вашего вопроса, возможно, стоит добавить дополнительный параметр для указания режима работы. Мне нужно немного подумать об этом. - person ; 29.12.2010

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


Это нижняя часть партиала (Control)

<%--
///-----------------------------------------------------------------------
/// <summary>
///     <title>Java Scripts Section</title>
///     Contains all links to java script files that are used by this
///     partial.
///
///     If the partial is part of a viewpage, only the partial's scripts
///     should be downloaded. (It was called using Ajax)
///
///     In the case that the partial acts as a stand alone control it needs
///     to fetch other scripts that are preloaded by the application.
///     (For example jQuery)
///
///     This is achived by identifying that the partial was not called
///     via Ajax in this case the list of Java Script files that have
///     been included is added to the HTML that then fetches them from
///     the server.
///     <ToDo>
///         A. Need to join and minify scripts to improve performance.
///         B. Consider identifing the Ajax call in the controller:
///            request.IsAjaxRequest().
///     </ToDo>
/// </summary>
///-----------------------------------------------------------------------
--%>
<%
    string areaRoot = "~/Areas/Manufactor/";
    string areaJsRoot = areaRoot + "JQuery/";

    string dataLayer = areaJsRoot + "manufactorAjax.js";
    string javaScript = areaJsRoot + "vucManufactorDetails.js";    
%>
<% if (HttpContext.Current.Request.Headers.Get("X-Requested-With") != "XMLHttpRequest") {  %>
<!-- #Include virtual="~/Include/GenericScripts.inc" -->

<script type="text/javascript" src="<%= ResolveUrl(dataLayer)%>">
</script>
<% }; %>

<script type="text/javascript" src="<%= ResolveUrl(javaScript)%>">
</script>
<%--
///-----------------------------------------------------------------------
/// <end>
///     This ends the ManufactorDetails.ascx file.
/// </end>
///-----------------------------------------------------------------------
--%>

Это содержимое включаемого файла:

<%--
///-----------------------------------------------------------------------
/// <summary>
///     <link>System generic Scripts</link>
///     The system generic scripts used to manage controls in the system.
/// </summary>
///-----------------------------------------------------------------------
--%>

<%
    string jsRoot = "~/Scripts/";

    string jqueryLink = jsRoot + "jquery-1.4.1.min.js";
    string jqueryUI = jsRoot + "jquery-ui-1.8.4.custom.min.js";
    string jqueryCorner = jsRoot + "jquery.corner.js";
    string microsoftAjax = jsRoot + "microsoftAjax.js";
    string microsoftMvcAjax = jsRoot + "microsoftMvcAjax.js";
    string dataProvider = jsRoot + "dataProvider.js";
%>

<script type="text/javascript" src="<%= ResolveUrl(jqueryLink)%>">
</script>

<script type="text/javascript" src="<%= ResolveUrl(jqueryUI)%>">
</script>

<script type="text/javascript" src="<%= ResolveUrl(jqueryCorner)%>">
</script>

<script type="text/javascript" src="<%= ResolveUrl(microsoftAjax)%>">
</script>

<script type="text/javascript" src="<%= ResolveUrl(microsoftMvcAjax)%>">
</script>

<script type="text/javascript" src="<%= ResolveUrl(dataProvider)%>">
</script>

<%--
///-----------------------------------------------------------------------
///     End of GenericScript.inc
///-----------------------------------------------------------------------
--%>

Я применил аналогичную логику для файлов css в верхней части партиала.

Примечание.
Включаемый файл загружается всегда. В случае частичного - то есть часть веб-приложения не обрабатывается.

Будь счастлив и наслаждайся жизнью, Джулиан

person Community    schedule 01.01.2011