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

Generate javascript file on the fly in asp.net mvc

本文关键字：javascript 文件 动态 asp net mvc      更新时间：2023-09-26

朋友，

我正在尝试在我的应用程序中使用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，这样它就可以使用数据库生成数据。

有人能帮我解决这个问题吗。

感谢您分享宝贵的时间。

您可以定义一个控制器操作：

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);
}

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

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

完全披露

  • 此答案是从另一个问题复制/粘贴的：
    • ASP.NET MVC中动态生成的Javascript、CSS
  • 这个答案与这里的其他答案类似。
    • 此答案使用cshtml页面，而不是ascx控件
    • 此答案提供了"仅查看"解决方案，而不是"仅控制器"解决方案
    • 我不认为我的答案"更好"，但我认为对一些人来说可能更容易

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;}更容易，但我还没有尝试过。我想这是一个偏好问题
  • 关于我的全部答案，如果你发现任何语法错误或改进，请告诉我
相关文章：