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中的某个位置，例如使用HTML5 data-*属性：

<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);
    });
});