javascript - jQueryダイアログの部分ビューでフォームを送信した後にデータを返す

Question

フォルダのリストを表示するページがあります。新しいフォルダーを追加できるように、jQuery ダイアログで部分ビューを開くリンクがあります。

これが私の主なIndexビューにあるものです：

<script type="text/javascript">

    $(document).ready(function () {

        $('#dialog').dialog({
            width: 540, height: 280, autoOpen: false, draggable: false,
            resizable: false, modal: true,
            open: function (event, ui) {
                $(this).load("@Url.Action("Create")");                   
            },
            close: function (event, ui) {
                $(this).empty();
            }
        });

        $('ul#folders li.add').click(function () {
            $('#dialog').dialog('open');
        });

    });

</script>

<ul id="folders">
    <li class="add"><span></span></li>
</ul>

<div id="dialog"></div>

「追加」ボタンをクリックすると、部分ビューが jQuery ダイアログに読み込まれます。これが私の部分的な見方です：

@model FolderViewModel

<h1>Create new folder</h1>

<div id="folder-create">
    @using (Ajax.BeginForm("Create", "Folders", null)) {
        @Html.AntiForgeryToken()

        @Html.TextBoxFor(m => m.Name, new { placeholder = "Name" })

        <p>@Html.ValidationSummary()</p>

        <input type="submit" class="create" value="" />
    }
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $.validator.unobtrusive.parse("#folder-create > form");
    });
</script>

フォームが投稿されるメソッドは次のとおりです。

[HttpPost]
public ActionResult Create(FolderViewModel viewModel)
{
    if (ModelState.IsValid)
    {
        try
        {
            // create folder
        }
        catch
        {
            return View(viewModel);
        }
    }

    return View(viewModel);
}

ここではすべて正常に機能します。検証が機能し、フォームを送信できます。

唯一の問題は、フォームを正常に送信したら、モーダルを閉じて新しいフォルダーの ID をIndexビューに戻し、「X が正常に作成されました」というメッセージを表示できるようにすることです。

ViewResult の代わりに JSON を返し、その結果をどこかにキャプチャする必要があると思いますが、その方法が正確にはわかりません。