How to update parent view after submitting a form

问题:

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

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
}

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 ?

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

回答1:

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

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

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
}

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