在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 created successfully”消息。

我想我需要返回JSON而不是ViewResult，並在某處捕獲該結果，但我不確定如何。

Answer 1

當ajax請求完成時，您可以綁定一個函數來執行某些操作：

function OnSuccess(data) {
      /*Close the popup and do stuff here*/
}

Ajax.BeginForm的AjaxOptions應如下所示：

 new AjaxOptions 
 { 
   /*Other properties*/
    OnSuccess ="OnSuccess(data)" 
 })

在控制器中返回Id和其他任何內容，並在OnSuccess函數上使用它。

[HttpPost]
public JsonResult Create(FolderViewModel viewModel)
{
    /*Do stuff to create the folder*/
    return Json(/*return the Id and something else*/);
}