回答の内容
1）.cshtmlファイルのJavascript / Jqueryコードブロックのモデルデータにアクセスする方法
2）.jsファイル内のJavascript / Jqueryコードブロックのモデルデータにアクセスする方法
.cshtmlファイルのJavascript / Jqueryコードブロックのモデルデータにアクセスする方法
ModelJavaScript変数へのc＃変数（）割り当てには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そしてTrue、彼らはその存在いけないので、javascriptの変数であると考えられているvariable undefinedエラーを。dateTimeがvarialbleの場合、エラーは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';
結果は有効であるため、プロパティ割り当てを引用符で囲むと、有効な構文が得られます。ただし、Number 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は、エンティティ名に変更を加えることなく保持されます。
docs Html.Raw（）から
HtmlStringインスタンスでHTMLマークアップをラップして、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には引用符を使用します。
- 数値のdataTypeには引用符を使用しないでください。
Html.RawHTMLデータをそのまま解釈するために使用します。- サーバー側で引用符の意味をエスケープするか、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と、Json.Encode引用符で囲ま。
var userObj = '@Html.Raw(Json.Encode(Model))';
引用符で囲むと、JSONデータが得られます。
オブジェクトの割り当てに関する結論
- 使用
Html.RawとJson.Encodeとしてjavascriptの変数に、あなたのオブジェクトを割り当てるcombintaionで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（）オブジェクトを使用してこのタイプのみを処理する別のコード行を追加することです
var userObj.LoginDateTime = new Date('@Html.Raw(Model.LoginDateTime)');
//without Json.Encode
.jsファイルのJavascript / Jqueryコードブロックのモデルデータにアクセスする方法
Razor構文は.jsファイルでは意味がないため、ファイルを使用してモデルを直接使用することはできません.js。ただし、回避策があります。
1）ソリューションはjavascriptグローバル変数を使用しています。
グローバルスコープの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関数は未定義です。
また、関数もグローバルスコープ内にある必要があることに注意してください。したがって、どちらのソリューションも、グローバルスコープのプレーヤーに対処する必要があります。