我正在研究一个使用模型绑定的MVC
项目。我需要在视图页面中引用的javascript
文件中访问整个模型。我尝试在视图页面的脚本标记内对整个模型进行JSON编码。
var model = @Html.Raw(Json.Encode(Model));
console.log(model);
哪个工作正常。
在我的情况下,整个脚本必须保持在一个单独的页面,即。不在视图页面本身内。如何从该脚本页面访问整个模型?
单个属性可以绑定到隐藏的输入字段,并且可以通过其id从js访问该值,即:
<input type="hidden" id="modelObject" value="@model.property")/>
var model = $("#modelObject").val();
我需要在js页面中使用整个模型。怎么能实现这个目标?
提前致谢。
Razor模板输出文本,通常可以是“text”(html / css / js),其内容类型为text / html。但是如果需要,您可以提供其他内容类型,例如text / javascript。
首先,创建一个用ActionName
属性修饰的控制器动作:
public class ScriptsController {
[ActionName("model.js")]
public ActionResult ModelJs() {
var model = new Object(); // your actual model here.
return View();
}
}
然后创建视图,就像当前页面中的script
标记一样:
var model = @Html.Raw(Json.Encode(Model));
确保从当前页面中删除脚本元素。
然后在您的页面中引用新的js视图:
<script type="text/javascript" src="@Url.Action("model.js", "Scripts")"></script>
您可以为Javascript模型创建构造函数,然后使用razor代码对其进行实例化。
例如:
模型
public class Car{
public string Brand { get; set; }
public string Fuel { get; set; }
}
模块模式中的Javascript文件,但您也可以使用其他内容:
var car = (function(jsonModel){
var runs = "My " + jsonModel.Brand + " runs on " + jsonModel.Fuel;
return {
Runs : runs
}
});
剃刀视图
@model Car
<!--load the javascript file somewhere-->
<script type="text/javascript">
$(function(){
var myFord = new car(@Html.Raw(Json.Encode(@Model)) );
alert(myFord.Runs);
});
</script>
.NET fiddle我无法添加外部javascript文件,但您可能会明白这一点
虽然我不建议使用@ Html.Raw,因为它会让你容易受到XSS攻击(在搜索后在互联网上阅读更多内容)。最好从控制器返回JSON对象。
编辑
以下是如何在.Net fiddle控制器上使用JsonResult的示例
[HttpGet]
public JsonResult Car()
{
return Json(new Car("ford","gasoline"), JsonRequestBehavior.AllowGet);
}
razor查看JS以获取json结果并实例化您的JS模块
$(function(){
var model = $.ajax({
url: "@Url.Action("Car","Home")",
dataType: 'json',
contentType: 'application/json; charset=utf-8',
}).done(function(response){
console.log(response);
var myFord = new car(response);
alert(myFord.Runs);
});
});