通过部分视图提交表单后如何更新父视图？答案

【问题标题】：How to update parent view after submitting a form through a partial view?通过部分视图提交表单后如何更新父视图？
【发布时间】：2014-04-01 20:40:20
【问题描述】：

我有一个视图，当老师登录时列出了学生的完整详细信息，它还列出了登录的老师给学生的任务。如果老师想为学生创建一个新任务，他单击创建新链接，该链接依次对控制器进行 Ajax 调用：

@Ajax.ActionLink("Create", "CreateTask", "Task", new { id = Model.StudentId },
new AjaxOptions
            {
                HttpMethod = "GET",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "create-div"
            }, new { @class = "btn btn-default" })

返回局部视图

[HttpGet]
public ActionResult CreateTask(int ?id)
    {

        //........
        return PartialView("PartialViews/Task/_CreateTaskPartial");
    }

在局部视图中我使用 Ajax.BeginForm 提交数据来创建实际任务如下

 @using (Ajax.BeginForm("CreateTask", "Task",new AjaxOptions { UpdateTargetId = "create-div", InsertionMode = InsertionMode.Replace }))
{
    // Form data
}

最后在 CreateTask 控制器中创建任务

[HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include="TaskId")] Task @task)
    {

        if (ModelState.IsValid)
        {
            db.Tasks.Add(@task);
            db.SaveChanges();

            // If everything is successfull return empty     

            return new EmptyResult();                
        }

        // If model errors send the view back
        return PartialView("PartialViews/Task/_CreateTaskPartial", @task);
    }

它成功创建了新任务，但它不会更新列出学生详细信息和已创建任务列表的主视图。我必须刷新页面才能看到最后添加的任务。

我怎样才能使它成为可能，当通过部分视图添加第 6 个任务时，成功时它会更新父视图并列出第 6 个任务？

我在 MVC 方面不是很有经验，所以请纠正我哪里做错了。

【问题讨论】：

标签： asp.net-mvc asp.net-ajax partial-views

【解决方案1】：

我解决了，我得到了Here的帮助来解决它。

所以我所做的不是在创建任务时返回 EmptyResult()，而是返回一个 JSON 对象

if (ModelState.IsValid)
    {
        db.Tasks.Add(@task);
        db.SaveChanges();

        // If everything is successfull return empty     

        //return new EmptyResult();
         return Json(new { ok = true, url = Url.Action("Details","Student",new{id=@event.StudentId}) });              
    }

在提交表单以创建任务的部分视图中，我在调用 javascript 函数的 Ajax.BeginForm 的 AjaxOptions 中添加了 OnSuccess 参数。

@using (Ajax.BeginForm("CreateTask", "Task",new AjaxOptions { UpdateTargetId = "create-div", InsertionMode = InsertionMode.Replace,OnSuccess = "onSuccess" }))
{
// Form data
}

最后在“onSuccess”函数中，我检查了结果是否正常，然后重定向到控制器给出的结果中的 url。

var onSuccess = function doIt(result) {
        if (result.ok) {
            window.location.href = result.url;
        }
    };

【讨论】：