javascript - MVC Razorは、javascriptのビューでコントローラーから値を取得します

Question

JavaScriptに書き込むには、ビュー内のコントローラーメソッドから値を取得する必要があります。Webページでは、<％= 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ファイルにそれを持っていると仮定しましょう（もちろんこれは正しい方法です）。

たとえば、HTML5data-*属性を使用して、DOMのどこかに値を埋め込むことができます。

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

次に、別のJavaScriptで、この要素のクリックイベントをサブスクライブし、data-*ビューモデル全体をJSONでシリアル化した属性を読み取ります。

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