ASP.NET MVC中动态生成的Javascript、CSS

Question

ASP.NET 允许使用服务器标记（razor 或 ASPX）动态生成 HTML。 但是除了使用内联（嵌入式）CSS/Javascript 之外，还有什么好的方法可以以相同的方式生成 *.js 或 *.css 内容。 现在有了像 Ajax 这样的技术，越来越多的逻辑在 Javascript 中从服务器端转移到客户端。 如果有机会使用 ASP.NET 为 HTML 生成提供的所有灵活性来动态生成 JS，那就太好了。

例如，我的 Javascript 包含Knockout 视图模型声明，其中包含在 Javascript 渲染期间从服务器加载的初始数据，以及一些额外的 js 函数，因此在我的 Html而不是嵌入脚本中，我希望有这样的脚本引用：

<script src="~/Scripts/ContactViewModel.js?contactId=@Model.ContactId"></script>

另一个示例，开发人员可能需要使用基于用户配置文件的 CSS。 用户配置文件信息包含在 CSS 生成过程中必须遵守的样式信息（字体、颜色，而不仅仅是主题），因此在我看来，我将有以下内容：

<link href="~/Styles/CurrentUserOverrides.css" rel="stylesheet" />

CurrentUserOverrides.css将根据经过身份验证的用户的配置文件数据动态生成。

如何使用 ASP.NET MVC 做到这一点？ 我想找到一个解决方案，让我可以像使用 ASP.NET 创建动态 HTML 一样轻松地完成此操作，并具有正常工作的智能以及 VS 为 ASP.NET 视图提供的所有其他功能。

Answer 1

到目前为止，我找到的最佳解决方案如下：

使用 Razor 视图的 ASP.NET MVC 中的动态 Javascript 和 CSS

您只需创建视图：CurrentUserOverrides.css.cshtml、ContactViewModel.js.cshtml。 此视图将包含单个 HTML 块（ <script>或<style> ），因此 IntelliSense 工作正常。 然后创建呈现该视图的控制器，修剪根标记并返回具有适当内容类型的内容。

Answer 2

CSHTML 文件中的动态 CSS

我使用 CSS 注释/* */注释掉一个新的<style>标签，然后return; 在结束样式标签之前：

/*<style type="text/css">/* */

    CSS GOES HERE

@{return;}</style>

CSHTML 文件中的动态 JS

我使用 JavaScript 注释<!--//注释掉一个新的<script>标签，然后我return; 在结束脚本标签之前：

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

    JAVASCRIPT GOES HERE

@{return;}</script>

MyDynamicCss.cshtml

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

}/*<style type="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 = new List<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>

不需要控制器（使用视图/共享）

我将两个动态脚本都放入Views/Shared/并且可以使用以下代码轻松地将它们嵌入到任何现有页面（或_Layout.cshtml ）：

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

使用控制器（可选）

如果您愿意，您可以创建一个控制器，例如

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

这是控制器的外观

MyDynamicCodeController.cs（可选）

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

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

笔记

• 控制器版本未经测试。 我只是在头顶打字。
• 重新阅读我的答案后，我发现注释掉结束标记而不是使用 cshtml @{return;}可能同样容易，但我还没有尝试过。 我想这是一个偏好问题。
• 关于我的整个答案，如果您发现任何语法错误或改进，请告诉我。

Answer 3

为时已晚，但仍然是有趣的主题，这是我的解决方案：像这样形成您的 cshtml 调用：

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

创建一个生成 JS 或 CSS 的控制器方法：

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

Answer 4

有一种相对较新的语言TypeScript ，我认为它可能是您正在寻找的 JavaScript，而不是 CSS。 这是在 ASP.NET MVC4 中实现它的帖子。