Pass model back to page

Question

Wonder if someone could help me out here......

Basically what I'm trying to do if on the posting of a form, I'm doing some custom validation and if the data being submitted doesn't conform to the business then I'd like to stop processing (obviously!) and pass the incoming model back to the view that contains the form so that the user doesn't have to re-key all of their data.

The way that I'm set this up is (This is using Umbraco as a CMS):

1) I've created the model/properties. 2) I've then created a strongly-typed partial view and selected the model class that I'd just created (named AwardsCeremony) 3) I've then created a controller with the following Index ActionResult:

    public ActionResult Index()
    {
        TempData["priceList"] = getPrices();
        TempData["qualificationList"] = getQualifications();

        return PartialView("AwardsCeremony", new AwardsCeremonyViewModel());
    }

4) Then in the Umbraco template I'm calling the controller

@Html.Action("Index", "AwardsCeremonySurface")

(this umbraco inherits it's styling, etc from the Master template (in Umbraco)).

In the view (on the HTTPPOST event) I'm calling the processBooking actionresult on the controller.

@using (Html.BeginUmbracoForm("processBooking", "AwardsCeremonySurface", null, new { @class = "form-horizontal" }))

This ActionResult then does the error checking and that's where the problems start (!), I've removed my custom validation for ease of reading.

    [HttpPost]
    public ActionResult processBooking(AwardsCeremonyViewModel model)
    {
        //Do the custom error handling

        if (myInvalidForm == true)
        {
            return PartialView("AwardsCeremony",model);
        }

        //Process the booking

        return RedirectToCurrentUmbracoPage();
    }

What's happening is that when the partial view is returned back the styling of the page is lost, the form displayed but with none of the inherited styling, classes, etc from the Umbraco Master template and I just don't know how to fix. Could someone point me in the right direction please?

Thanks, Craig

Answer 1

Implementing a Form in Umbraco (based on code in one of my projects - your form processing in HandleContactUs will most likely differ of course):

The Model is just standard MVC.

The controller:

public class FormsController : SurfaceController
{
    [ChildActionOnly]
    public ActionResult ContactUs()
    {
        HtmlHelper.UnobtrusiveJavaScriptEnabled = true;
        HtmlHelper.ClientValidationEnabled = true;

        ContactForm model = null;
        if (TempData.ContainsKey("ContactForm"))
        {
            model = TempData["ContactForm"] as ContactForm;
        }
        if (model == null)
        {
            model = new ContactForm { Page = CurrentPage };
        }
        return PartialView(model);
    }

    [HttpPost]
    public ActionResult HandleContactUs(ContactForm model)
    {
        if (ModelState.IsValid)
        {
            string errorMsg = string.Empty;

            TempData["ContactFormSuccess"] = model.SendMail(Umbraco, out errorMsg);
            TempData["ContactFormErrorMessage"] = errorMsg;
        }
        else
        {
            TempData["ContactFormSuccess"] = false;
        }
        TempData["ContactForm"] = model;

        if (!Request.IsAjaxRequest())
            RedirectToCurrentUmbracoUrl();

        return PartialView(model);
    }
}

Notes:

1. The form is rendered by the ContactUs Action while it's handled by the HandleContactUs Post Action.
2. The handler action checks for ajax post - if it's not posted back then we do a RedirectToUmbracoUrl() otherwise we just return the partial view as we're using javascript to replace the form with the handled view (usually a thank you message etc.)
3. You actually don't need to include the keyword Surface in your controller name - while the docs still indicate that you do, it's been removed as a requirement some time ago.

The view:

~\Views\Forms\ContactUs.cshtml:

Using standard UmbracoBeginForm:

@using (Html.BeginUmbracoForm<FormsController>("HandleContactUs", null, 
        new { @class = "form-horizontal" })) 
{

}

Using MS MVC Ajax.BeginForm:

@using (Ajax.BeginForm("HandleContactUs", "Forms", null,  
        new AjaxOptions { UpdateTargetId = "contactForm", 
                          OnBegin = "contactBegin", 
                          OnFailure = "contactFailure" }, 
        new { @class = "form-horizontal" }) ) 
{

}

Of course, you'll also need the javascript callback functions contactBegin, contactFailure or whatever your AjaxOptions configuration is.

I've used this approach on several projects without any problems.

Answer 2

Of course the styling is lost. You're literally returning a partial view as the response, which is not going to include your site layout. You want to return a full ViewResult, i.e. return View(model), and the view should be the same view you used for your GET action, not the partial.