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