Asp.net mvc standalone ascx control How can I link (css and js) most efficiently

Question

I need an advice.
(For those who have already read this before I re-edited this question)

I have developed some asp.net mvc web pages.
On each page there is a wizard and some ascx controls (between 2-6), a js and css file built into it.
So far, everything was in order.

In order to increase modularity, flexibility, and testability, ascx is expected to work as standalone controls.
(Each ascx also has its own css and js files, in some cases it has a different control inside it)

To satisfy this requirement, we invoke the controller using the query string.
(Unlike how it is called from the page - via Ajax)

The submitted ascx is (partially) presented in the browser without all the other parts of the original page.

In this case, for the partial display (css) to display correctly and for the correct action (js / jquery), all the necessary files must be added (for example: jquery) to the user control.
This contradicts the concept of positioning files in the most logical place (for example, it may be the main page).

How can I solve this problem? Keep in mind that this is true for each "control" ascx file created in the application.

---

Examples:
I added a description of 3 cases that my script will display:
(this was copied from another question that I asked here ).

Case 1: In the case of a page, it may be that there are several partial files on the page that are loaded using ajax during page creation. Partial can be called again using ajax in accordance with user actions. In this case, I consider them as controls on the page.

Case 2: In a particular case, a part may be called as part of a test directly from the browser. In this case, you see only a partial part in the browser.

Case 3: In the third case, the partial can be called as part of the iframe in the google chrome extension (for example). In this case, you can see a partial on a page that would not be built in your web application.

---

Any thoughts would be appreciated.

For those who celebrate - Happy New Year!

Answer 1

I am adding my own answer, perhaps my question was not clear enough. In any case, if someone needs a solution, I am now:

---

This is the bottom of the partial (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 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>
///-----------------------------------------------------------------------
--%>

---

This is the contents of the include file:

<%--
///-----------------------------------------------------------------------
/// <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
///-----------------------------------------------------------------------
--%>

I applied the same logic for css files at the top of the partial.

:
include . - -, .

, Julian

Answer 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.