答案内容
1) 如何在文件中的 Javascript/Jquery 代码块中访问模型.cshtml
数据
2) 如何在文件中的 Javascript/Jquery 代码块中访问模型.js
数据
如何在.cshtml
文件中的 Javascript/Jquery 代码块中访问模型数据
有两种类型的 c# 变量 ( Model
) 分配给 JavaScript 变量。
- 属性赋值- 基本数据类型,如
int
, string
, DateTime
(ex: 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';
结果是有效的,因此将属性赋值用引号括起来给了我们有效的语法。但请注意,数字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>"
财产转让的结论
- 对非数字数据类型使用引号。
- 不要对数字数据类型使用引号。
- 用于
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 对象表示法 (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
,因此我们不能直接在文件中使用我们的模型.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
as 。
注意:我个人不建议使用全局变量,因为它很难维护。但是,如果您没有其他选择,那么您可以通过适当的命名约定来使用它.. 类似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
函数未定义。
另请注意,该函数也必须在全局范围内。因此,无论哪种解决方案,我们都必须与全球范围内的玩家打交道。