javascript - MVC Razor 在 javascript 视图中从控制器获取值

Question

我必须从视图中的控制器方法获取值才能写入一些 javascript。在网页中它就像 <%=functionName()%> 一样简单。有没有办法在 MVC 中做到这一点。我无法使用该模型，因为 javascript 必须在页面加载时可用。任何见解表示赞赏。

Answer 1

有没有办法在 MVC 中做到这一点

是的当然。

我无法使用该模型，因为 javascript 必须在页面加载时可用。

当然，您可以使用视图模型，没有什么可以阻止您这样做。所以你首先定义它：

public class MyViewModel
{
    public string Foo { get; set; }
}

然后有一个控制器动作来填充这个视图模型并将其传递给视图：

public ActionResult Index()
{
    var model = new MyViewModel();
    model.Foo = "Hello World"; 
    return View(model);
}

最后对该视图模型有一个强类型视图，其中：

@model MyViewModel
<script type="text/javascript">
    $(function() {
        var foo = @Html.Raw(Json.Encode(Model.Foo));
        alert(foo);
    });
</script>

但是现在让我们假设您不想用 javascript 污染您的视图，而是将它放在一个单独的 js 文件中（这当然是正确的方法）。

您可以将值嵌入到 DOM 中的某个位置，例如使用 HTML5data-*属性：

<div id="foo" data-model="@Html.Raw(Html.AttributeEncode(Json.Encode(Model)))">
    Click me to surprise you
</div>

然后在一个单独的 javascript 中订阅该元素的 click 事件并读取data-*我们已在其中 JSON 序列化整个视图模型的属性：

$(function() {
    $('#foo').click(function() {
        var model = $(this).data('model');
        alert(model.Foo);
    });
});