我可以在 .cshtml 文件中引用的单独 js 文件中访问 MVC 模型属性吗

Question

我正在开发一个使用模型绑定的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 页面中的整个模型。这怎么可能实现？

提前致谢。

Answer 1

Razor 模板输出文本，通常可以是内容类型为 text/html 的“页面”(html/css/js)。但您可以根据需要提供其他内容类型，例如 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>

Answer 2

您可以为您的 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);
            });
        });