ASP.NET MVC中动态生成的Javascript、CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16092473/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically generated Javascript, CSS in ASP.NET MVC
提问by Philipp Munin
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(embedded) CSS/Javascript. Nowadays with technologies like Ajax more and more logic moves from server-side to client side in Javascript. It would be great to have that opportunity to generate JS dynamically using all flexibility that ASP.NET provides for HTML generation.
ASP.NET 允许使用服务器标记（razor 或 ASPX）动态生成 HTML。但是除了使用内联（嵌入式）CSS/Javascript 之外，还有什么好的方法可以以相同的方式生成 *.js 或 *.css 内容。现在有了像 Ajax 这样的技术，越来越多的逻辑在 Javascript 中从服务器端转移到客户端。如果有机会使用 ASP.NET 为 HTML 生成提供的所有灵活性来动态生成 JS，那就太好了。
For example, my Javascript contains Knockout view model declaration with initial data loaded from serverduring Javascript rendering, and some additional js-functions, so in my Html instead of embedded scriptsI want to have script references like that:
例如，我的 Javascript 包含Knockout 视图模型声明，其中包含在 Javascript 渲染期间从服务器加载的初始数据，以及一些额外的 js 函数，因此在我的 Html而不是嵌入脚本中，我希望有这样的脚本引用：
<script src="~/Scripts/[email protected]"></script>
Another example, where developer might need it is using user-profile based CSS. User profile information contains style information (fonts, colors, not just theme) that must be respected during CSS generation, so In my view I will have something like:
另一个示例，开发人员可能需要使用基于用户配置文件的 CSS。用户配置文件信息包含在 CSS 生成过程中必须遵守的样式信息（字体、颜色，而不仅仅是主题），因此在我看来，我将有以下内容：
<link href="~/Styles/CurrentUserOverrides.css" rel="stylesheet" />
CurrentUserOverrides.csswill be generated dynamically based on profile data of authenticated user.
CurrentUserOverrides.css将根据经过身份验证的用户的个人资料数据动态生成。
How to do that using ASP.NET MVC? I want to find solution that will allow me to do this as easy as I create dynamic HTML using ASP.NET, with properly working intellisence and everything else what VS offers for ASP.NET views.
如何使用 ASP.NET MVC 做到这一点？我想找到一个解决方案，让我可以像使用 ASP.NET 创建动态 HTML 一样轻松地完成此操作，并具有正常工作的智能以及 VS 为 ASP.NET 视图提供的所有其他功能。
采纳答案by Philipp Munin
The best solution so far I found for that is the following:
到目前为止，我找到的最佳解决方案如下：
Dynamic Javascript and CSS in ASP.NET MVC using Razor Views
使用 Razor 视图的 ASP.NET MVC 中的动态 Javascript 和 CSS
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.
您只需创建视图：CurrentUserOverrides.css.cshtml、ContactViewModel.js.cshtml。此视图将包含单个 HTML 块（<script>或<style>），因此 IntelliSense 工作正常。然后创建呈现该视图的控制器，修剪根标记并返回具有适当内容类型的内容。
回答by Jonathan
Dynamic CSS in a CSHTML File
CSHTML 文件中的动态 CSS
I use CSS comments /* */to comment out a new <style>tag and then I return;before the closing style tag:
我使用 CSS 注释/* */来注释掉一个新<style>标签，然后return;在结束样式标签之前使用：
/*<style type="text/css">/* */
CSS GOES HERE
@{return;}</style>
Dynamic JS in a CSHTML File
CSHTML 文件中的动态 JS
I use JavaScript comments <!--//to comment out a new <script>tag and then I return;before the closing script tag:
我使用 JavaScript 注释<!--//来注释掉一个新<script>标签，然后我return;在结束脚本标签之前：
//<script type="text/javascript">
JAVASCRIPT GOES HERE
@{return;}</script>
MyDynamicCss.cshtml
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
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>
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:
我将两个动态脚本都放入其中，Views/Shared/并且可以_Layout.cshtml使用以下代码轻松地将它们嵌入到任何现有页面（或）中：
<style type="text/css">@Html.Partial("MyDynamicCss")</style>
<script type="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)
MyDynamicCodeController.cs（可选）
[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.
- 控制器版本未经测试。我只是在头顶打字。
- 重新阅读我的答案后，我发现注释掉结束标记而不是使用 cshtml 可能同样容易
@{return;}，但我还没有尝试过。我想这是一个偏好问题。 - 关于我的整个答案，如果您发现任何语法错误或改进，请告诉我。
回答by Mohamed SAIM
It's too late but still interesting subject, here is my solution: form your cshtml call like that:
为时已晚，但仍然是有趣的主题，这是我的解决方案：像这样形成您的 cshtml 调用：
<script src='@Url.Action("GetJS", "Home")'></script>
Create a controller method that generate the JS or CSS like that :
创建一个生成 JS 或 CSS 的控制器方法：
public ActionResult GetJS()
{
byte[] jsDATA = System.Text.ASCIIEncoding.ASCII.GetBytes(mystingJS);
return File(jsDATA, "text/javascript");
}
回答by Nathan
There is a relatively new language TypeScriptthat I think might be what you are looking for with JavaScript, not for CSS though. Hereis a post for getting that working in ASP.NET MVC4.
有一种相对较新的语言TypeScript，我认为它可能是您正在寻找的 JavaScript 语言，而不是 CSS。这是在 ASP.NET MVC4 中实现它的帖子。
