在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块(或),因此智能工作正常.然后创建控制器以呈现该视图,修剪根标记并返回具有适当内容类型的内容.

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;}，但是我还没有尝试过。我想这是偏爱的问题。
• 关于我的整个答案，如果您发现任何语法错误或改进，请告诉我。