从Javascript访问MVC的模型属性
我的视图模型中包含以下模型
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访问上述属性之一？
我试过这个，但是我得到了“undefined”
var floorplanSettings = "@Model.FloorPlanSettings"; alert(floorplanSettings.IconsDirectory);
你可以把你的整个服务器端模型变成一个Javascript对象，方法如下：
var model = @Html.Raw(Json.Encode(Model));
在你的情况下，如果你只想要FloorPlanSettings对象，只需传递Encode方法的属性：
var floorplanSettings = @Html.Raw(Json.Encode(Model.FloorPlanSettings));
答案的内容
1）如何访问
.cshtml文件中的Javascript / Jquery代码块中的模型数据2）如何访问
.js文件中的Javascript / Jquery代码块中的模型数据
如何访问.cshtml文件中Javascript / Jquery代码块中的模型数据
有两种types的JavaScriptvariables的c＃variables（ Model ）赋值。
- 属性赋值 – 基本数据types如
int，string，DateTime（例如：Model.Name） - 对象分配 – 自定义或内置类（例如：
Model，Model.UserSettingsObj）
让我们看看这两个任务的细节。
对于答案的其余部分，我们以下面的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被认为是JavaScriptvariables，因为他们不存在它的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';
结果是有效的，所以用引号包装属性赋值给我们有效的语法。 但请注意，数字Age现在是一个string，所以如果你不想要，我们可以删除引号，它会呈现为一个数字types。
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);
结果与我们的testing案例1类似。但是在HTMLstring上使用@Html.Raw()确实给我们一些改变。 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)';
所有types的结果都很好。 但是我们的HTML数据现在已经被破坏，这将会破坏脚本。 这个问题是因为我们使用单引号来包装数据，甚至数据都有单引号。
我们可以用两种方法来解决这个问题。
1）使用双引号" "来包装HTML部分。 由于内部数据只有单引号。 （确保在用双引号包装后，数据内部也没有）
var IconHtml = "@Html.Raw(Model.UserIconHTML)";
2）逃避服务器端代码中的字符含义。 喜欢
UserIconHTML = "<i class=\"fa fa-users\"></i>"
结论财产分配
- 对非数字型数据types使用引号。
- 不要使用数字dataType的引号。
- 使用
Html.Raw来解释你的HTML数据。 - 照顾你的HTML数据，以便在服务器端转义引号含义，或者在分配给javascriptvariables的过程中使用与数据不同的引用。
对象分配
让我们使用不同的语法进行赋值并观察结果。
1）没有用引号包装对象分配。
var userObj = @Model;
将ac＃对象分配给javascriptvariables时，将分配该对象的.ToString()的值。 因此，上述结果。
2用引号包装对象分配
var userObj = '@Model';
3）使用不包含引号的Html.Raw 。
var userObj = @Html.Raw(Model);
4）使用Html.Raw和引号
var userObj = '@Html.Raw(Model)';
Html.Raw对于我们来说并没有多大的用处，同时把一个对象赋值给variables。
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）格式的string。
正如你已经遇到这个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将您的对象分配给JavaScriptvariables作为JavaScript对象 。 - 使用
Html.Raw和Json.Encode也可以用quotes将其包装在JSON中
注意：如果您观察到DataTime数据格式不正确。 这是因为如前所述Converts a data object to a string that is in the JavaScript Object Notation (JSON) format而JSON不包含datetypes。 解决这个问题的其他选项是添加另一行代码来单独使用javascipt Date（）对象处理此types
var userObj.LoginDateTime = new Date('@Html.Raw(Model.LoginDateTime)'); //without Json.Encode
如何访问.js文件中的Javascript / Jquery代码块中的模型数据
Razor语法在.js文件中没有意义，因此我们不能直接使用我们的Model insisde .js文件。 但是有一个解决方法。
1）解决scheme是使用javascript全局variables 。
我们必须将这个值赋给一个全局的javasciptvariables，然后在.cshtml和.js文件的所有代码块中使用这个variables。 所以语法是
<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>
有了这个，我们可以在需要的时候使用variablesuserObj和userJsonObj 。
注：我个人不build议使用全局variables，因为它很难维护。 但是，如果你没有其他select，那么你可以使用它有一个适当的命名约定..像userAppDetails_global 。
2）使用函数（）或closure包将所有依赖于模型数据的代码封装在一个函数中。 然后从.cshtml文件执行这个function。
external.js
function userDataDependent(userObj){ //.... related code }
.cshtml文件
<script type="text/javascript"> userDataDependent(@Html.Raw(Json.Encode(Model))); //execute the function </script>
注意：您的外部文件必须在上述脚本之前被引用。 否则userDataDependent函数是未定义的。
另请注意，该函数也必须在全局范围内。 所以无论哪种解决scheme我们都必须面对全球范围内的玩家。
试试这个:(你错过了单引号）
var floorplanSettings = '@Html.Raw(Json.Encode(Model.FloorPlanSettings))';
包装parens周围的模型属性为我工作。 你仍然会遇到与Visual Studio抱怨分号一样的问题，但是它可以工作。
var closedStatusId = @(Model.ClosedStatusId);
如果引用“ReferenceError：Model is not defined”错误，则可以尝试使用以下方法：
$(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 ; } });
希望这可以帮助…
