如何通过局部视图提交表单后更新父视图？ [英] How to update parent view after submitting a form through a partial view?

问题描述

我有当老师列出了学生的完整细节被记录的景色，还列出了给予学生通过记录在老师的任务。如果老师想创建为学生新的任务，他点击了创造新的链接，这反过来使Ajax调用到控制器：

I have a view which when a teacher is logged in lists the complete details of a student , it also lists the tasks given to the student by the teacher logged in. If the teacher wants to create a new task for the student he clicks the create new link which in turns make an Ajax call to the controller:

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

它返回一个局部视图

which returns a partial view

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

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

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

In the partial view I am using Ajax.BeginForm to submit the data to create the actual task as follows

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

终于在控制器的CreateTask我创建任务

and finally in the CreateTask controller I create the task

[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);
    }

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

It creates the new task successfully but it does not update the main view which lists the details of a student and a list of created tasks. I have to refresh the page to see the last task added.

怎样才能使人们有可能这样，当第六任务是通过局部视图中添加，成功将更新父视图，并列出了第六届任务也？

How can I make it possible so that when a 6th task is added via partial view, on success it updates the parent view and lists the 6th task also ?

我不是很MVC经历了那么请纠正我在哪里，我做错了。

I am not very experienced in MVC so please correct me where am I doing wrong.

推荐答案

我解决了它，我得到的帮助<一个href=\"http://stackoverflow.com/questions/9391201/ajax-beginform-that-can-redirect-to-a-new-page\">Here解决它。

I solved it, I got help from Here to solve it.

所以，我所做的是不是返回EmptyResult（）时创建任务我回一个JSON对象

So what I did is instead of returning an EmptyResult() when the task is created I returned a JSON object

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}) });              
    }

在表单提交给vreate我在调用JavaScript函数Ajax.BeginForm添加的onSuccess参数在AjaxOptions任务的局部视图的ð。

An d in the partial view which submits the form to vreate the task I added OnSuccess parameter in the AjaxOptions in the Ajax.BeginForm which calls a javascript function.

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

终于在的onSuccess功能我cheked如果结果是OK，然后重定向到由控制器给出的结果的网址。

And finally in the "onSuccess" function I cheked if the result is ok then redirect to the url in the result given by the controller.

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

这篇关于如何通过局部视图提交表单后更新父视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！