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

时间:2014-04-01 20:40:20

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

我有一个视图,当教师登录时列出了学生的完整详细信息,它还列出了由登录的老师给学生的任务。如果教师想为学生创建新任务他单击create new链接,然后对控制器进行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不是很有经验所以请纠正我在哪里做错了。

1 个答案:

答案 0 :(得分:-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}) });              
    }

在部分视图中提交表单以创建任务我在Ajax.BeginForm中调用javascript函数的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;
        }
    };