在 asp.net mvc 中动态生成 javascript 文件答案

【问题标题】：Generate javascript file on the fly in asp.net mvc在 asp.net mvc 中动态生成 javascript 文件
【发布时间】：2011-12-29 07:58:12
【问题描述】：

朋友们，

我正在尝试在我的应用程序中使用 DyGraph。请看下面的代码-

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>crosshairs</title>

    <script type="text/javascript" src="dygraph-combined.js"></script>

    <script type="text/javascript" src="data.js"></script>
  </head>

代码使用包含函数的 data.js 文件来获取一些静态数据。我希望使用控制器方法生成 data.js，以便它使用数据库生成数据。

谁能帮我解决这个问题。

感谢您分享宝贵的时间。

【问题讨论】：

这里有类似的问题，解决方案更优雅：stackoverflow.com/questions/16092473/…

标签： javascript asp.net-mvc-2 dygraphs

【解决方案1】：

你可以定义一个控制器动作：

public ActionResult Data()
{
    // Obviously this will be dynamically generated
    var data = "alert('Hello World');";
    return JavaScript(data);
}

然后：

<script type="text/javascript" src="<%= Url.Action("Data", "SomeController") %>"></script>

如果您不想在控制器中生成一些复杂的脚本，您可以通过定义视图模型来遵循标准 MVC 模式：

public class MyViewModel
{
    ... put required properties
}

将填充此视图模型并将其传递给视图的控制器操作：

public ActionResult Data()
{
    MyViewModel model = ...
    Response.ContentType = "application/javascript";
    return PartialView(model);
}

最后是一个视图，在这种情况下将是视图模型的 javascript 表示 (~/Views/SomeController/Data.ascx)：

<%@ Control 
    Language="C#" 
    Inherits="System.Web.Mvc.ViewUserControl<MyViewModel>" %>
alert(<%= new JavaScriptSerializer().Serialize(Model.Name) %>);

【讨论】：

感谢达林的快速回复和详细解释。为此 +1。
以这种方式生成的 Javascript 文件不会被压缩。我打赌它有一些事情要做，请求不以 .js 和 iis 结尾。

【解决方案2】：

全面披露

此答案是从另一个问题复制/粘贴的：
- Dynamically generated Javascript, CSS in ASP.NET MVC
此答案与此处的其他答案类似。
- 此答案使用cshtml 页面而不是ascx 控件。
- 此答案提供了仅查看解决方案而不是仅控制器解决方案。
- 我不认为我的回答是“更好”，但我认为这对某些人来说可能更容易。

CSHTML 文件中的动态 CSS

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

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

    CSS GOES HERE

@{return;}</style>

CSHTML 文件中的动态 JS

我使用 JavaScript cmets // 注释掉一个新的 <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;} 可能同样容易，但我还没有尝试过。我想这是一个偏好问题。
关于我的整个回答，如果您发现任何语法错误或改进，请告诉我。

【讨论】：