在 jQuery 对话框中以分部视图提交表单后返回数据

Returning data after submitting a form in a partial view in jQuery dialog

本文关键字：表单 提交 返回 数据 视图 对话框 jQuery      更新时间：2023-09-26

我有一个显示文件夹列表的页面。我有一个链接，可以在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 已成功创建"消息。

我想我需要返回 JSON 而不是 ViewResult，并在某个地方捕获该结果，但我不确定如何返回。

您可以绑定一个函数以在 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*/);
}
相关文章：