web-dev-qa-db-ja.com

動的に生成されたJavascript、ASP.NET MVCのCSS

ASP.NETでは、サーバータグ（かみそりまたはASPX）を使用してHTMLを動的に生成できます。しかし、インライン（埋め込み）CSS/Javascriptを使用する以外に、同じ方法で* .jsまたは* .cssコンテンツを生成する良い方法はありますか？今日、Ajaxのようなテクノロジーでは、Javascriptでサーバー側からクライアント側にロジックが移行しています。 ASP.NETがHTML生成に提供するすべての柔軟性を使用してJSを動的に生成する機会があればすばらしいでしょう。

たとえば、私のJavascriptにはサーバーから読み込まれた初期データを含むノックアウトビューモデル宣言がJavaScriptのレンダリング中に含まれ、追加のjs関数が含まれているため、HTMLでは埋め込まれていませんscriptsそのようなスクリプト参照が必要です。

<script src="~/Scripts/[email protected]"></script>

開発者が必要とする別の例は、ユーザープロファイルベースのCSSの使用です。ユーザープロファイル情報には、CSSの生成時に順守する必要があるスタイル情報（フォント、色、テーマだけでなく）が含まれているため、私の見解では次のようになります。

<link href="~/Styles/CurrentUserOverrides.css" rel="stylesheet" />

CurrentUserOverrides.cssは、認証されたユーザーのプロファイルデータに基づいて動的に生成されます。

ASP.NET MVCを使用してそれを行う方法？ ASP.NETを使用して動的HTMLを作成するのと同じくらい簡単に、適切に機能するインテリジェンスと、VSがASP.NETビューに提供するその他すべてのものを使用して、これを簡単に実行できるソリューションを見つけたいと思います。

javascriptasp.netcssasp.net-mvcrazor
19
Philipp Munin

これまでに見つけた最善の解決策は次のとおりです。

Razorビューを使用したASP.NET MVCの動的JavascriptおよびCSS

ビューを作成するだけです：CurrentUserOverrides.css.cshtml、ContactViewModel.js.cshtml。このビューには、単一のHTMLブロック（<script>または<style>）、IntelliSenseは正常に動作します。次に、そのビューをレンダリングし、ルートタグをトリミングし、適切なコンテンツタイプでコンテンツを返すコントローラーを作成します。

16
Philipp Munin

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;}、しかし私はそれを試していません。それは好みの問題だと思います。
  • 私の答え全体に関して、構文エラーや改善を見つけた場合はお知らせください。
4
Jonathan