Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Tom Martin 30 posts 72 karma points
    Mar 13, 2013 @ 14:14
    Tom Martin
    0

    Contour Ajax Post

    Hello

    I have a contour form appearing in a jquery lightbox popup. I therefore don't want a full-page refresh on submit.

    Are there any guidelines as to doing an ajax postback, and then displaying the 'thank you for submitting' message common to the Form.cshtml?

    Thanks

    Tom

  • Jeroen Breuer 4860 posts 12126 karma points MVP 3x admin c-trib
    Mar 13, 2013 @ 20:02
  • Tom Martin 30 posts 72 karma points
    Mar 14, 2013 @ 11:19
    Tom Martin
    0

    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 .. ?

  • Tim Geyssens 6419 posts 15046 karma points MVP 2x c-trib
    Mar 18, 2013 @ 08:43
    Tim Geyssens
    0

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

  • Tom Martin 30 posts 72 karma points
    Mar 18, 2013 @ 12:32
    Tom Martin
    0

    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" }))
                { ... }

     

  • Tom Martin 30 posts 72 karma points
    Mar 18, 2013 @ 13:49
    Tom Martin
    0

    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!

  • Tim Geyssens 6419 posts 15046 karma points MVP 2x c-trib
    Mar 18, 2013 @ 13:54
    Tim Geyssens
    0

    Sweeet

  • Tom Martin 30 posts 72 karma points
    Mar 18, 2013 @ 15:41
    Tom Martin
    0

    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" }))
    
  • Tim Geyssens 6419 posts 15046 karma points MVP 2x c-trib
    Mar 18, 2013 @ 16:24
    Tim Geyssens
    0

    Hmm and did you add the necessary js scripts?

  • Tim Geyssens 6419 posts 15046 karma points MVP 2x c-trib
    Mar 18, 2013 @ 16:26
  • Tom Martin 30 posts 72 karma points
    Mar 18, 2013 @ 16:38
    Tom Martin
    0

    Perfect - thanks :)

  • ID 27 posts 128 karma points
    Mar 21, 2013 @ 19:55
    ID
    0

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

  • Tom Martin 30 posts 72 karma points
    Mar 21, 2013 @ 20:46
    Tom Martin
    2

     

    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

     

     

  • ID 27 posts 128 karma points
    Mar 22, 2013 @ 12:08
    ID
    0

    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.

  • ID 27 posts 128 karma points
    Mar 22, 2013 @ 16:03
    ID
    0

    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>
    }
  • ID 27 posts 128 karma points
    Mar 26, 2013 @ 00:36
    ID
    0

    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.

  • Matt Jones 30 posts 141 karma points
    Apr 26, 2013 @ 20:33
    Matt Jones
    0

    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

  • Nicholas Westby 1899 posts 6340 karma points c-trib
    Jan 06, 2014 @ 02:56
    Nicholas Westby
    0

    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).

Please Sign in or register to post replies

Write your reply to:

Draft