我的视图模型中包含以下模型
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访问上述属性之一?
我尝试了这个,但是我得到了“未定义”
var floorplanSettings = "@Model.FloorPlanSettings";
alert(floorplanSettings.IconsDirectory);
您可以通过以下步骤将整个服务器端模型转换为Javascript对象:
var model = @Html.Raw(Json.Encode(Model));
在您的情况下,如果只需要FloorPlanSettings对象,则只需传递Encode
方法that属性:
var floorplanSettings = @Html.Raw(Json.Encode(Model.FloorPlanSettings));
答案的内容
1)如何在
.cshtml
文件的Javascript / Jquery代码块中访问模型数据2)如何在
.js
文件中的Javascript / Jquery代码块中访问模型数据
如何在.cshtml
文件的Javascript / Jquery代码块中访问模型数据
Model
JavaScript变量有两种类型的c#变量()分配。
- 财产分配-基本数据类型一样
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
被认为是JavaScript的变量,因为他们不存在,它的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';
结果是有效的,因此将属性分配包装在引号中可以提供有效的语法。但是请注意,NumberAge
现在是一个字符串,因此,如果您不希望我们仅删除引号,它将被呈现为数字类型。
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()
将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>"
财产转让结论
- 非数字数据类型使用引号。
- 不要对数字数据类型使用引号。
- 用于
Html.Raw
按原样解释HTML数据。 - 请注意HTML数据,以免在服务器端使用引号引起来,或者在分配给javascript变量期间使用与数据中不同的引号。
对象分配
让我们使用不同的语法进行赋值并观察结果。
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变量作为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不包含date
类型。解决此问题的其他方法是使用javascipt Date()对象添加另一行代码来单独处理此类型。
var userObj.LoginDateTime = new Date('@Html.Raw(Model.LoginDateTime)');
//without Json.Encode
如何在.js
文件的Javascript / Jquery代码块中访问模型数据
Razor语法在.js
文件中没有意义,因此我们无法直接使用Model坚持.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
函数未定义。
还要注意,该功能也必须在全局范围内。因此,无论哪种解决方案,我们都必须应对全球范围内的参与者。
试试这个:(您错过了单引号)
var floorplanSettings = '@Html.Raw(Json.Encode(Model.FloorPlanSettings))';
将模型属性包装在parens周围对我有用。Visual Studio抱怨分号时,您仍然会遇到相同的问题,但是它可以工作。
var closedStatusId = @(Model.ClosedStatusId);
如果“ 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 ;
}
});
希望这可以帮助...
我知道它为时已晚,但是此解决方案对于.net框架和.net核心均适用。
@ System.Web.HttpUtility.JavaScriptStringEncode()
文章标签:asp.net-mvc , c# , javascript , jquery , model
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!