asp.net-mvc - JQuery AJAX: ビューモデルの更新

Question

ビューモデルにバインドされたエディターを含むフォームを含む、厳密に型指定された MVC ビューがあります。

@model ViewModels.CommentView
@using (Ajax.BeginForm("UpdateComments", new AjaxOptions { HttpMethod="POST" }))
{
    <fieldset>
        <legend>Metadata</legend>
        <div>
            @Html.HiddenFor(model => model.Id)
            <div class="editor-label">
                @Html.LabelFor(model => model.Comment)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Comment)
                @Html.ValidationMessageFor(model => model.Comment)
            </div>
        </div>
        <p class="action clear">
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

ユーザーがビューの別の部分にある要素をクリックすると、JQuery AJAX 呼び出しがサーバーからデータを取得し、コントロールを更新します。

<script type="text/javascript">
    $(".load-comments").focus(function () {
        var Id = $("#Id").val();
        var url = "@Url.Action("GetComment")/" + Id;
        $.ajax({ url: url, success: DataRetrieved, type: 'POST', dataType: 'json' });
        function DataRetrieved(data) {
            if (data) {
                $("#Comment").val(data.Comment);
            }
        };
    });
</script>

この機能は期待どおりに機能します。コントロールのコンテンツが視覚的に更新されます。ただし、基になる html 要素の値は更新されず、フォームをサーバーにポストすると、ビュー モデルは空になります。

JQuery 関数でフォーム コントロールの値を設定して、サーバーにポスト バックするにはどうすればよいですか?