[英]Dynamically generated Javascript, CSS in ASP.NET MVC
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 視圖提供的所有其他功能。
到目前為止,我找到的最佳解決方案如下:
使用 Razor 視圖的 ASP.NET MVC 中的動態 Javascript 和 CSS
您只需創建視圖:CurrentUserOverrides.css.cshtml、ContactViewModel.js.cshtml。 此視圖將包含單個 HTML 塊( <script>
或<style>
),因此 IntelliSense 工作正常。 然后創建呈現該視圖的控制器,修剪根標記並返回具有適當內容類型的內容。
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();
}
筆記
@{return;}
可能同樣容易,但我還沒有嘗試過。 我想這是一個偏好問題。為時已晚,但仍然是有趣的主題,這是我的解決方案:像這樣形成您的 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");
}
有一種相對較新的語言TypeScript ,我認為它可能是您正在尋找的 JavaScript,而不是 CSS。 這是在 ASP.NET MVC4 中實現它的帖子。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.