回答内容
.cshtml
1)ファイル内の Javascript/Jquery コード ブロック内のモデル データにアクセスする方法
.js
2)ファイル内の Javascript/Jquery コード ブロック内のモデル データにアクセスする方法
.cshtml
ファイル内の Javascript/Jquery コード ブロック内のモデル データにアクセスする方法
JavaScript 変数への c# 変数 ( Model
) の割り当てには 2 つのタイプがあります。
- プロパティの割り当て- 、、など
int
の基本的なデータ型(例: )string
DateTime
Model.Name
- オブジェクトの割り当て- カスタム クラスまたは組み込みクラス (例:
Model
、Model.UserSettingsObj
)
これら 2 つの割り当ての詳細を見てみましょう。
残りの回答については、以下のAppUser
モデルを例として考えてみましょう。
public class AppUser
{
public string Name { get; set; }
public bool IsAuthenticated { get; set; }
public DateTime LoginDateTime { get; set; }
public int Age { get; set; }
public string UserIconHTML { get; set; }
}
このモデルに割り当てる値は次のとおりです。
AppUser appUser = new AppUser
{
Name = "Raj",
IsAuthenticated = true,
LoginDateTime = DateTime.Now,
Age = 26,
UserIconHTML = "<i class='fa fa-users'></i>"
};
プロパティの割り当て
割り当てに別の構文を使用して、結果を観察してみましょう。
1)プロパティの割り当てを引用符で囲みません。
var Name = @Model.Name;
var Age = @Model.Age;
var LoginTime = @Model.LoginDateTime;
var IsAuthenticated = @Model.IsAuthenticated;
var IconHtml = @Model.UserIconHTML;

ご覧のとおり、いくつかのエラーがあり、Raj
JavaScriptTrue
変数と見なされます。それらは存在しないため、variable undefined
エラーです。dateTime 変数のエラーはunexpected number
数字に特殊文字を使用できないことです。HTML タグはエンティティ名に変換されるため、ブラウザは値と HTML マークアップを混同しません。
2)プロパティの割り当てを引用符で囲みます。
var Name = '@Model.Name';
var Age = '@Model.Age';
var LoginTime = '@Model.LoginDateTime';
var IsAuthenticated = '@Model.IsAuthenticated';
var IconHtml = '@Model.UserIconHTML';

結果は有効なので、プロパティの割り当てを引用符で囲むと、有効な構文が得られます。ただし、数値Age
は文字列になっていることに注意してください。そのため、引用符を削除するだけで、数値型としてレンダリングされます。
3)@Html.Raw
引用符で囲まずに使用する
var Name = @Html.Raw(Model.Name);
var Age = @Html.Raw(Model.Age);
var LoginTime = @Html.Raw(Model.LoginDateTime);
var IsAuthenticated = @Html.Raw(Model.IsAuthenticated);
var IconHtml = @Html.Raw(Model.UserIconHTML);

結果はテスト ケース 1 と似ています。ただし、文字列を使用@Html.Raw()
すると、HTML
いくつかの変化が見られました。HTML は、エンティティ名を変更せずに保持されます。
ドキュメントからHtml.Raw()
HTML マークアップを HtmlString インスタンスにラップして、HTML マークアップとして解釈されるようにします。
しかし、まだ他の行にエラーがあります。
4)@Html.Raw
引用符で囲んで使用する
var Name ='@Html.Raw(Model.Name)';
var Age = '@Html.Raw(Model.Age)';
var LoginTime = '@Html.Raw(Model.LoginDateTime)';
var IsAuthenticated = '@Html.Raw(Model.IsAuthenticated)';
var IconHtml = '@Html.Raw(Model.UserIconHTML)';

結果はすべてのタイプで良好です。しかし、HTML
データが破損しているため、スクリプトが壊れます。問題は'
、データをラップするために一重引用符を使用しており、データにも一重引用符が含まれているためです。
この問題は 2 つのアプローチで解決できます。
1) 二重引用符を使用し" "
て HTML 部分をラップします。内部データには一重引用符しかありません。"
(二重引用符で囲んだ後、データ内にも存在しないことを確認してください)
var IconHtml = "@Html.Raw(Model.UserIconHTML)";
2) サーバー側のコードで文字の意味をエスケープします。お気に入り
UserIconHTML = "<i class=\"fa fa-users\"></i>"
財産分与の締結
- 数値以外の dataType には引用符を使用します。
- 数値データ型には引用符を使用しないでください。
Html.Raw
HTML データをそのまま解釈するために使用します。
- サーバー側での引用符の意味をエスケープするか、javascript 変数への割り当て中にデータとは異なる引用符を使用するように、HTML データに注意してください。
オブジェクトの割り当て
割り当てに別の構文を使用して、結果を観察してみましょう。
1)オブジェクトの割り当てを引用符で囲みません。
var userObj = @Model;

ac# オブジェクトを JavaScript 変数に割り当てると、そのオブジェクトの値.ToString()
が割り当てられます。したがって、上記の結果。
2オブジェクトの代入を引用符で囲む
var userObj = '@Model';

3)引用符なしで使用Html.Raw
します。
var userObj = @Html.Raw(Model);

4)Html.Raw
引用符と一緒に使用する
var userObj = '@Html.Raw(Model)';

オブジェクトを変数に代入するときHtml.Raw
は、あまり役に立ちませんでした。
5)Json.Encode()
引用符なしで使用する
var userObj = @Json.Encode(Model);
//result is like
var userObj = {"Name":"Raj",
"IsAuthenticated":true,
"LoginDateTime":"\/Date(1482572875150)\/",
"Age":26,
"UserIconHTML":"\u003ci class=\"fa fa-users\"\u003e\u003c/i\u003e"
};
モデルがオブジェクトとして解釈されていることがわかります。しかし、これらの特殊文字は に変更されていentity names
ます。また、上記の構文を引用符で囲んでもあまり役に立ちません。引用符内でも同じ結果が得られます。
Json.Encode()のドキュメントから
データ オブジェクトを JavaScript Object Notation (JSON) 形式の文字列に変換します。
プロパティの割り当てでこの問題に遭遇entity Name
したことがあると思いますが、Html.Raw
. それでは、試してみましょう。組み合わせHtml.Raw
てみましょうJson.Encode
6)引用符を使用する場合と使用Html.Raw
しJson.Encode
ない場合。
var userObj = @Html.Raw(Json.Encode(Model));
結果は有効なJavascript オブジェクトです
var userObj = {"Name":"Raj",
"IsAuthenticated":true,
"LoginDateTime":"\/Date(1482573224421)\/",
"Age":26,
"UserIconHTML":"\u003ci class=\"fa fa-users\"\u003e\u003c/i\u003e"
};

7)Html.Raw
andをJson.Encode
引用符で囲みます。
var userObj = '@Html.Raw(Json.Encode(Model))';

ご覧のとおり、引用符で囲むとJSON データが得られます
オブジェクト割り当てに関する結論
Html.Raw
とを組み合わせて使用して、オブジェクトをJavaScript objectJson.Encode
として javascript 変数に割り当てます。
- JSONを取得するために使用
Html.Raw
し、Json.Encode
ラップしますquotes
注: DataTime データ形式が正しくないことに気付いた場合。これは、前述Converts a data object to a string that is in the JavaScript Object Notation (JSON) format
のとおり、JSON に型が含まれていないためdate
です。これを修正する他のオプションは、 javascipt Date()オブジェクトを使用してこの型だけを処理するコードをもう 1 行追加することです。
var userObj.LoginDateTime = new Date('@Html.Raw(Model.LoginDateTime)');
//without Json.Encode
.js
ファイル内の Javascript/Jquery コード ブロック内のモデル データにアクセスする方法
Razor 構文はファイル内では意味.js
がないため、モデルをファイル内で直接使用することはできません.js
。ただし、回避策があります。
1)解決策はjavascript Global variablesを使用しています。
値をグローバル スコープの javascipt 変数に割り当ててから、ファイルのすべてのコード ブロック内でこの変数を使用する必要が.cshtml
あり.js
ます。したがって、構文は次のようになります
<script type="text/javascript">
var userObj = @Html.Raw(Json.Encode(Model)); //For javascript object
var userJsonObj = '@Html.Raw(Json.Encode(Model))'; //For json data
</script>
これで、必要に応じて変数userObj
とuserJsonObj
を使用できます。
注:メンテナンスが非常に難しくなるため、個人的にはグローバル変数の使用はお勧めしません。ただし、他にオプションがない場合は、適切な命名規則を使用して使用できますuserAppDetails_global
。
2) function( )を使用するかclosure
、関数内のモデル データに依存するすべてのコードをラップします。そして、この関数を.cshtml
ファイルから実行します。
external.js
function userDataDependent(userObj){
//.... related code
}
.cshtml
ファイル
<script type="text/javascript">
userDataDependent(@Html.Raw(Json.Encode(Model))); //execute the function
</script>
注:上記のスクリプトの前に、外部ファイルを参照する必要があります。それ以外の場合、userDataDependent
関数は未定義です。
また、関数もグローバル スコープ内にある必要があることに注意してください。したがって、いずれのソリューションも、グローバル スコープのプレーヤーに対処する必要があります。