This package might help: http://our.umbraco.org/projects/website-utilities/cultiv-restcontour

Jeroen

Thanks I had a look at that though looks a bit heavyweight for what I want to achieve... Has anyone had any success using Ajax.BeginForm .. ?

Have been meaning to try Ajax.BeginForm but haven't yet, let us know if you have any luck with it :)

I am actually trying to get that to work now.... however the Submit button still seems to do a full page postback (it is definitely between the <form> tags) ! And my JS function never gets called.... Any ideas?

 @using (Ajax.BeginForm("ContourForm", "FormRender", new AjaxOptions { OnComplete = "Thankyou" }, new { enctype = "multipart/form-data" }))
            { ... }

Previous issue solved  - needed to include the following to get access to the Ajax.BeginForm helper

<scripttype="text/javascript"src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js"></script>

Callback function now firing.... just need to check if Contour recevied the data ok!

Sweeet

Hmm data gets saved fine, however the form validation doesn't fire at all once you change the form to use the following - i.e. the post just goes through....

@using (Ajax.BeginForm("ContourForm", "FormRender",  new AjaxOptions { OnComplete = "Thankyou", HttpMethod = "POST"}, new { enctype = "multipart/form-data" }))

Hmm and did you add the necessary js scripts?

Perfect - thanks :)

Tom,

I'm very intrested in your solution. Where did you put the BeginForm (Which partial view) Method because my intellisense did not encounter this one -->. see http://our.umbraco.org/forum/umbraco-pro/contour/39464-Rendering-contour-forms-using-ajax.

And did you use a macro (or created your own?) and/or did you needed to add any reference?

Not sure, maybe i'm missing some basic concept in this one because umbraco, contour and ASP.NET MVC/Razor is kind of new to me (I'm more familiair with ASP.NET WebForms but always hated it ;-))..

Ok here is what I came up with (with help from Tim Geyssens)

Firstly you'll need the following scripts after your jquery inclusion (make sure they are in the head tags as they need to come before contour.js which gets included once you use the contour macro)

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script>

I used a customised version of the contour form - you'll need to create a folder named with the form GUID under there (my guid was c3b23066-dd2b-4bbc-905e-9baebd3f6ffc so this would be the path for my form - you can find the GUID in the Settings tab for the form)

/Umbraco/Plugins/umbracoContour/Views/Forms/c3b23066-dd2b-4bbc-905e-9baebd3f6ffc

then copy Form.cshtml from the above path into that new folder.

In the Form.cshtml file you just copied, replace the Html.BeginForm with the following:

@using (Ajax.BeginForm("ContourForm", "FormRender",  new AjaxOptions { HttpMethod = "POST"}, new { enctype = "multipart/form-data" }))

You can put JS callbacks etc into AjaxOptions such as OnComplete etc... so pretty useful.

To include the form on the page you can just insert the contour macro - for example my inclusion looks like this

@Umbraco.RenderMacro("umbracoContour.RazorRenderForm", new {FormGuid="c3b23066-dd2b-4bbc-905e-9baebd3f6ffc" })

I think that's pretty much it - hope that's of some help? Let me know if it doesn't work for you, hope I haven't missed any steps... 

Good luck

Tom

Thanx alot, did't realize I had to hack into the umbracoCountour source folder. Looks good and even got my debugger working on that one.

Now I only need te figure out where to force a refresh of the form (view content) to the next fieldset. Now when I click on "next" the debugger breakpoint in the Forms.chtml gets hit and point to the correct next FieldSet #2 but the form itself does not get refreshed and still shows FieldSet #1. I can click "next" all day long but it will always point to the 2nd FieldSet. Think i'm missing one crucial thing here..

Think I need to dive into Mvc Razor Ajax for some onderstanding.

Hmmm... I set the AjaxOptions to  UpdateTargetId = "contour" but now the whole page gets a refresh and the contour div contains a nested copy of the whole page ... :-(

@using (Ajax.BeginForm("ContourForm", "FormRender", new AjaxOptions { UpdateTargetId = "contour", HttpMethod = "POST" }, new { enctype = "multipart/form-data" }))

EDIT: When I place the contour div into a new div and set the updateTarget this new div refreshes only the new div content. Unfortunately it still renders the whole page into this new div instead of just the contour form.

@inherits WebViewPage<Umbraco.Forms.Mvc.Models.FormViewModel>
@using Umbraco.Forms.Core
@using Umbraco.Forms.Mvc.Models
@using Umbraco.Forms.Mvc.BusinessLogic
@using Umbraco.Forms.MVC.Extensions

@if (Model.SubmitHandled)
{
  <p class="contourMessageOnSubmit">@Model.MessageOnSubmit</p>
}
else
{
  Html.EnableClientValidation();
  Html.EnableUnobtrusiveJavaScript();
 
  @Html.Partial(FormViewResolver.GetScriptView(Model.FormId), Model)
    
  if (!Model.DisableDefaultStylesheet)
  {
  <link rel="stylesheet" type="text/css" href="@Url.Content("~/umbraco/plugins/umbracocontour/css/jquery-ui-1.8.18.custom.css")" />
  <link rel="stylesheet" type="text/css" href="@Url.Content("~/umbraco/plugins/umbracocontour/css/defaultform.css")" />
  }
 
  <div id="rommeltjeisdit">
    <div id="contour" class="@Model.CssClass">
      @using (Ajax.BeginForm("ContourForm", "FormRender", new AjaxOptions { UpdateTargetId = "rommeltjeisdit", HttpMethod = "Post" }, new { enctype = "multipart/form-data" }))
      {
        @Html.AntiForgeryToken()
        @Html.HiddenFor(x => Model.FormId)
 
        <input type="hidden" name="FormStep" id="FormStep" value="@Model.FormStep"/>
        <input type="hidden" name="RecordId" id="RecordId" value="@Model.RecordId"/>
        <input type="hidden" name="PreviousClicked" id="PreviousClicked" value="@Model.PreviousClicked"/>
 
        <div class="contourPage">
          <h4 class="contourPageName">@Model.CurrentPage.Caption</h4>
          @if (Model.ShowValidationSummary)
          {
            @Html.ValidationSummary(false)
          }
          @foreach (FieldsetViewModel fs in Model.CurrentPage.Fieldsets)
          {
            <fieldset class="contourFieldSet">
              @if (!string.IsNullOrEmpty(fs.Caption))
              {   
                <legend>@fs.Caption</legend>
              }
              @foreach (FieldViewModel f in fs.Fields)
              {
                bool hidden = f.HasCondition && f.ConditionActionType == FieldConditionActionType.Show;
                <div class="@f.CssClass" @{if (hidden)
                                           {<text> style="display: none"</text>}}>
                  @if (!f.HideLabel)
                  {<label for="@f.Id" class="fieldLabel">@f.Caption @if (f.ShowIndicator)
                                                                  {<span class="contourIndicator">@Model.Indicator</span>}</label>}
                  @Html.Partial(FieldViewResolver.GetFieldView(Model.FormId, f.FieldTypeName, f.Caption), f)
                  @if (Model.ShowFieldValidaton)
                  {@Html.ValidationMessage(f.Id)}
                </div>
              }
            </fieldset>
          }
          <div style="display: none">
            <input type="text" id="HoneyPot" />
          </div>
        </div>
 
        <div class="contourNavigation">
          @if (Model.IsMultiPage)
          {
            if (!Model.IsFirstPage)
            {
            <input class="cancel" type="submit" value="@Model.PreviousCaption" onclick="document.getElementById('PreviousClicked').value = 'back'"/>
            }
            if (!Model.IsLastPage)
            {
            <input type="submit" value="@Model.NextCaption"/>
            }
          }
          @if (Model.IsLastPage)
          {
            <input type="submit" value="@Model.SubmitCaption"/>
          }
        </div>
      }
    </div>
  </div>
}

Ok, still no progress but learning alot...

What could cause that the FormRenderController returns the whole page instead of just the target form (partial view)?

According to this site http://www.c-sharpcorner.com/UploadFile/specialhost/using-unobtrusive-ajax-forms-in-Asp-Net-mvc3/ it should just work. Unfortunately i'm not able to debug into the controller to check it's results.

Hi Id,

did you get any further with this? I've got the same problem as you with the whole page being returned when i submit my ajax form, also my data isn't being saved unfortunately.

I'm not using a contor form just my own form to add data via a surface controller.

Cheers

It's clear that Contour wasn't built to support AJAX, but I basically hacked it so it works well enough. In ~/Umbraco/Plugins/umbracoContour/Views/Form.cshtml, I modified the form to be created like this (the key bit is setting the action to the current request raw URL):

@using (Ajax.BeginForm("ContourForm", "FormRender", new AjaxOptions
{
HttpMethod = "POST",
// The variable with the name of a JavaScript function I created on the window object.
OnSuccess = successJavaScript
}, new { enctype = "multipart/form-data", action = HttpContext.Current.Request.RawUrl }))
{
<!-- Rest of form... -->
}

Seems like Contour doesn't have a custom route, so it just posts back to the current page. Seems to work. Also had to do a few other workarounds and changes, including the JavaScript files others have mentioned (e.g., for unobtrusive client side validation).

is working on a reply...