Dynamically Generated Javascript, Css In Asp.net Mvc

ASP.NET allows to generate HTML dynamically using server tags (razor or ASPX). But Is there any good way to generate *.js or *.css content the same way, other than using inline(emb

Solution 1:

The best solution so far I found for that is the following:

Dynamic Javascript and CSS in ASP.NET MVC using Razor Views

You just create views: CurrentUserOverrides.css.cshtml, ContactViewModel.js.cshtml. This views will contain single HTML block (<script> or <style>), so IntelliSense works fine. Then you create controller that renders that view, trims the root tag and return content with appropriate content type.

Solution 2:

Dynamic CSS in a CSHTML File

I use CSS comments /* */ to comment out a new <style> tag and then I return; before the closing style tag:

/*<styletype="text/css">/* */

    CSS GOES HERE

@{return;}</style>

Dynamic JS in a CSHTML File

I use JavaScript comments <!--// to comment out a new <script> tag and then I return; before the closing script tag:

//<scripttype="text/javascript">JAVASCRIPTGOESHERE

@{return;}</script>

MyDynamicCss.cshtml

@{
var fieldList = new List<string>();
fieldList.Add("field1");
fieldList.Add("field2");

}/*<styletype="text/css">/* */@foreach (var field in fieldList) {<text>

input[name="@field"]
, select[name="@field"]
{
    background-color: #bbb;
    color: #6f6f6f;
}

</text>}

@{return;}</style>

MyDynamicJavsScript.cshtml

@{
var fieldList = newList<string>();
fieldList.Add("field1");
fieldList.Add("field2");
fieldArray = string.Join(",", fieldList);

}

//<script type="text/javascript">

$(document).ready(function () {
    var fieldList = "@Html.Raw(fieldArray)";
    var fieldArray = fieldList.split(',');
    var arrayLength = fieldArray.length;
    var selector = '';
    for (var i = 0; i < arrayLength; i++) {
        var field = fieldArray[i];
        selector += (selector == '' ? '' : ',')
                    + 'input[name="' + field + '"]'
                  + ',select[name="' + field + '"]';            
    }
    $(selector).attr('disabled', 'disabled');
    $(selector).addClass('disabled');
});
@{return;}</script>

No Controller Required (using Views/Shared)

I put both of my dynamic scripts into Views/Shared/ and I can easily embed them into any existing page (or in _Layout.cshtml) using the following code:

<styletype="text/css">@Html.Partial("MyDynamicCss")</style><scripttype="text/javascript">@Html.Partial("MyDynamicJavaScript")</script>

Using a Controller (optional)

If you prefer you may create a controller e.g.

<link rel="stylesheet"type="text/css" href="@Url.Action("MyDynamicCss", "MyDynamicCode")">
<script type="text/javascript" src="@Url.Action("MyDynamicJavaScript", "MyDynamicCode")"></script>

Here's what the controller might look like

MyDynamicCodeController.cs (optional)

[HttpGet]
public ActionResult MyDynamicCss()
{
    Response.ContentType = "text/css";
    return View();
}

[HttpGet]
public ActionResult MyDynamicJavaScript()
{
    Response.ContentType = "application/javascript";
    return View();
}

Notes

• The controller version is not tested. I just typed that off the top of my head.
• After re-reading my answer, it occurs to me it might be just as easy to comment out the closing tags rather than use the cshtml @{return;}, but I haven't tried it. I imagine it's a matter of preference.
• Concerning my entire answer, if you find any syntax errors or improvements please let me know.

Solution 3:

It's too late but still interesting subject, here is my solution: form your cshtml call like that:

<scriptsrc='@Url.Action("GetJS", "Home")'></script>

Create a controller method that generate the JS or CSS like that :

public ActionResult GetJS()
{
     byte[] jsDATA = System.Text.ASCIIEncoding.ASCII.GetBytes(mystingJS); 
     return File(jsDATA, "text/javascript");
}

Solution 4:

There is a relatively new language TypeScript that I think might be what you are looking for with JavaScript, not for CSS though. Here is a post for getting that working in ASP.NET MVC4.