asp.net mvc 独立 ascx 控制我如何最有效地链接（css和js）答案

【问题标题】：asp.net mvc stand alone ascx control how do i link (css and js) most efficientlyasp.net mvc 独立 ascx 控制我如何最有效地链接（css和js）
【发布时间】：2011-01-01 19:36:07
【问题描述】：

我需要一些建议。
（对于那些在我重新编辑这个问题之前已经阅读过这篇文章的人）

我已经开发了一些 asp.net mvc 网页。
每个页面都有一个母版和一些 ascx 控件（2 - 6 之间）嵌入其中一个 js 和 css 文件。
到目前为止一切都很好。

为了提高模块化、灵活性和可测试性，现在希望 ascx 能够作为独立控件工作。
（每个 ascx 也有自己的 css 和 js 文件，在某些情况下，它内部还有另一个控件它）

为了满足这个要求，我们使用查询字符串调用控制器。
（不同于从页面调用它的方式 - 通过 Ajax）

呈现的 ascx（部分）在浏览器中呈现，没有原始页面的所有其他部分。

在这种情况下，为了使部分正确显示 (css) 和正确操作 (js/jquery)，需要将所有相关文件（例如：jquery）添加到用户控件。
这与将文件放置在最合乎逻辑的位置（例如母版页）的概念相矛盾。

我该如何克服这个问题？请记住，这与在应用程序中创建的每个“控制”ascx 文件相关。

示例：
我添加了描述我的场景的 3 个案例的描述：
（这是从我问过的另一个问题中复制的 here）。

案例 1： 在页面案例中，可能是页面有一些部分是在页面构建时使用 ajax 加载的。根据用户的操作，可能会使用 ajax 再次调用部分。在这种情况下，我将它们视为页面上的控件。

案例 2： 在独立案例中，可以直接从浏览器调用部分作为测试的一部分。在这种情况下，您只能在浏览器中看到部分内容。

案例 3： 在第三种情况下，可以将部分调用作为 google chrome 扩展程序中 iframe 的一部分（例如）。在这种情况下，您可以在您的 Web 应用程序中可能未构建的页面中看到部分内容。

任何想法都将不胜感激。

对于那些庆祝 - 新年快乐！

【问题讨论】：

朱利安，我会'提交'css与控件的正常运行无关。为什么？？因为 css 直接与相关目标站点的整体外观相关联。因此，在我看来，css（除非与 jquery 选择器相关）应该在更高级别进行抽象，因此应该与相关的 ascx 控件完全隔离。我可能错了，但这对我来说感觉更“正确”——即由站点驱动的 css，而不是控制功能（除非 css 是 jquery 驱动的类或 id 选择器）。
用完了字符来完成 :)。使用上述规则意味着可以共享面向管理员和面向公众的控件，即使两者的样式彼此不一致。
@jim - 我们的一些控件中包含隐藏元素（使用 css）如果 css 在站点级别，则单独呈现控件时将在控件上看到隐藏字段。此外，如果没有 css，用户将无法验证此控件的外观。

标签： asp.net-mvc methodology

【解决方案1】：

如果您需要向托管页面添加内容，您可以在 .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);
%>

要使此示例正常运行，您的head 标记必须有一个runat="server"。

【讨论】：

谢谢，我有大约 15 个文件要包含，以便让控件独立工作。（jquery、microsoft、主题文件等）有没有办法区分控件是网页的一部分还是独立运行，在这种情况下包括相关 (15) 文件的代码？
由于您的控制器处理仅呈现部分的逻辑，它可以将数据传递给部分的视图模型，让它知道它是否应该呈现为整个页面而不是一个片段.
我认为控制器不应该知道它被调用的“模式”。
那么你说的“为了满足这个要求，我们调用带有相关参数的控制器，它直接将ascx（部分）返回给浏览器，而不是原始的所有其他部分是什么意思页。”？如果您将参数传递给控制器以告诉它独立渲染，那么控制器就会知道它的模式。
在某些情况下，用户控件有一个查询字符串，用于传递 linq 选择的键。我从您的问题中了解到，可能值得添加一个额外的参数来指示工作的“模式”。我需要考虑一下。

【解决方案2】：

我正在添加我自己的答案，可能是我的问题不够清楚。无论如何，如果有人需要解决方案，这就是我目前所处的位置：

这是部分（控制）的底部部分

<%--
///-----------------------------------------------------------------------
/// <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 文件应用了类似的逻辑。

注意：
始终加载包含文件。在部分的情况下 - 是 Web 应用程序的一部分，它不会被处理。

祝你快乐，享受生活，朱利安

【讨论】：