Question

I have an Index, a GET Create and POST Create action for my Person model. I display the Index in a parent view so it is called as a ChildAction.

What I want to be able to do is also call the GET Create as a ChildAction into the same parent view or into the Index view. Then when the Create form is submitted, I want the Index to be refreshed.

How do I go about implementing this? I have been playing around with this using Ajax.BeginForm but it seems to be posting to the Create action multiple times so I think my attempt is flawed. My main problem is to get the Index action to refresh when the Create POST is successful. What should Create POST return?

All help and advice appreciated.

Answer 1

Here’s how this could be set:

public class HomeController : Controller
{
    public ActionResult MainAction()
    {
        return View();
    }

    [ChildActionOnly]
    public ActionResult Index()
    {
        return PartialView();
    }

    [ChildActionOnly]
    public ActionResult Create()
    {
        return PartialView();
    }

    [HttpPost]
    public ActionResult ProcessCreate(SomeViewModel model)
    {
        return PartialView("Index");
    }
}

and the corresponding views:

~/Views/Home/MainAction.cshtml:

<div>
    This is the main view
</div>

<div id="indexContainer">
    @{Html.RenderAction("Index");}
</div>

~/Views/Home/Index.cshtml:

<div>
    This is the index view @DateTime.Now.ToLongTimeString()
</div>

<div>
    @{Html.RenderAction("Create");}
</div>

~/Views/Home/Create.cshtml:

@using (Ajax.BeginForm("ProcessCreate", "Home", new AjaxOptions { UpdateTargetId = "indexContainer" }))
{
    <button type="submit">OK</button>
}

Also don’t forget to include the jquery.unobtrusive-ajax.min.js script for the Ajax.* helpers to work:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

You will notice that I have renamed the Create POST action because otherwise when the Html.RenderAction helper is called after postback of the form it will execute the POST action once again and you will end up in an endless loop.