183

ビューモデルにラップされた次のモデルがあります

public class FloorPlanSettingsModel
{
    public int Id { get; set; }
    public int? MainFloorPlanId { get; set; }
    public string ImageDirectory { get; set; }
    public string ThumbnailDirectory { get; set; }
    public string IconsDirectory { get; set; }
}

Javascript から上記のプロパティの 1 つにアクセスするにはどうすればよいですか?

これを試しましたが、「未定義」になりました

var floorplanSettings = "@Model.FloorPlanSettings";
alert(floorplanSettings.IconsDirectory);
4

10 に答える 10

291

次のようにして、サーバー側モデル全体を Javascript オブジェクトに変換できます。

var model = @Html.Raw(Json.Encode(Model));

あなたの場合、FloorPlanSettings オブジェクトだけが必要な場合は、Encodeそのプロパティをメソッドに渡すだけです。

var floorplanSettings = @Html.Raw(Json.Encode(Model.FloorPlanSettings));
于 2013-05-03T14:33:26.417 に答える
166

回答内容

.cshtml1)ファイル内の Javascript/Jquery コード ブロック内のモデル データにアクセスする方法

.js2)ファイル内の Javascript/Jquery コード ブロック内のモデル データにアクセスする方法

.cshtmlファイル内の Javascript/Jquery コード ブロック内のモデル データにアクセスする方法

JavaScript 変数への c# 変数 ( Model) の割り当てには 2 つのタイプがあります。

  1. プロパティの割り当て- 、、などintの基本的なデータ型(例: )stringDateTimeModel.Name
  2. オブジェクトの割り当て- カスタム クラスまたは組み込みクラス (例: ModelModel.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;  

ここに画像の説明を入力

ご覧のとおり、いくつかのエラーがあり、RajJavaScriptTrue変数と見なされます。それらは存在しないため、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.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 = {&quot;Name&quot;:&quot;Raj&quot;,
               &quot;IsAuthenticated&quot;:true,
               &quot;LoginDateTime&quot;:&quot;\/Date(1482572875150)\/&quot;,
               &quot;Age&quot;:26,
               &quot;UserIconHTML&quot;:&quot;\u003ci class=\&quot;fa fa-users\&quot;\u003e\u003c/i\u003e&quot;
              };

モデルがオブジェクトとして解釈されていることがわかります。しかし、これらの特殊文字は に変更されていentity namesます。また、上記の構文を引用符で囲んでもあまり役に立ちません。引用符内でも同じ結果が得られます。

Json.Encode()のドキュメントから

データ オブジェクトを JavaScript Object Notation (JSON) 形式の文字列に変換します。

プロパティの割り当てでこの問題に遭遇entity Nameしたことがあると思いますが、Html.Raw. それでは、試してみましょう。組み合わせHtml.RawてみましょうJson.Encode

6)引用符を使用する場合と使用Html.RawJson.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>

これで、必要に応じて変数userObjuserJsonObjを使用できます。

注:メンテナンスが非常に難しくなるため、個人的にはグローバル変数の使用はお勧めしません。ただし、他にオプションがない場合は、適切な命名規則を使用して使用できます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関数は未定義です。

また、関数もグローバル スコープ内にある必要があることに注意してください。したがって、いずれのソリューションも、グローバル スコープのプレーヤーに対処する必要があります。

于 2016-12-24T10:14:40.520 に答える
23

これを試してください:(一重引用符を逃しました)

var floorplanSettings = '@Html.Raw(Json.Encode(Model.FloorPlanSettings))';
于 2014-01-23T14:16:16.647 に答える
4

モデルプロパティを括弧で囲むとうまくいきました。Visual Studio でセミコロンについて不平を言う同じ問題が引き続き発生しますが、機能します。

var closedStatusId = @(Model.ClosedStatusId);
于 2013-10-14T16:19:45.420 に答える
2

MVC 4 の場合

@model Inventory.Models.PurchaseVModel
@{
    ViewData["Title"] = "Add";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var jsonItems = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model.Items);
}

@section scripts{
    <script>
        $(document).ready(function () {
            var allItem =  @Html.Raw(jsonItems);
        console.log(allItem);
    });
    </script>
}

.Net コア 3.1

@model Inventory.Models.PurchaseVModel
@{
    ViewData["Title"] = "Add";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var jsonItems = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Items);
}

@section scripts{
    <script>
        $(document).ready(function () {
            var allItem =  @Html.Raw(jsonItems);
        console.log(allItem);
    });
    </script>
}
于 2021-04-13T20:38:51.450 に答える
1

「ReferenceError: モデルが定義されていません」というエラーが発生した場合は、次の方法を試してみてください。

$(document).ready(function () {

    @{  var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
         var json = serializer.Serialize(Model);
    }

    var model = @Html.Raw(json);
    if(model != null && @Html.Raw(json) != "undefined")
    {
        var id= model.Id;
        var mainFloorPlanId = model.MainFloorPlanId ;
        var imageDirectory = model.ImageDirectory ;
        var iconsDirectory = model.IconsDirectory ;
    }
});

お役に立てれば...

于 2016-05-13T09:05:18.433 に答える