Access MVC model properties in JavaScript

Question: How to access data bound to a view model in JavaScript code? For example, how to access the properties of FloorPlanSettingsModel in JavaScript?

Initial attempt:

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

Answer:

To access MVC model properties from JavaScript, the model needs to be serialized into a JavaScript object. The method is as follows:

Serialize the entire model:

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

Serialize specific model attributes:

If you only need a specific property, such as FloorPlanSettings, just encode that property:

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

Now you can access properties using serialized JavaScript objects:

alert(floorplanSettings.IconsDirectory);  // 访问IconsDirectory属性