Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • ID 27 posts 128 karma points
    Mar 21, 2013 @ 17:01
    ID
    0

    Rendering contour forms using ajax

    Hello,

    I'm kind of new with umbraco and Mvc. As I understand for now is that Contour is still a ASP.NET WEb Forms usercontrol. Now i have added a contour form as part of a page by using the macro inside a richtext control (datatype). When i select the "next" button to the next step, the whole page is refreshed which is terrible. With my experrience from ASP.NET Web Forms I could just use a ajax updatepanel to fix this.

    I found the thread http://our.umbraco.org/forum/umbraco-pro/contour/39209-Contour-Ajax-Post but I have no idea where en how I could use the Ajax.BeginForm. I thought I had to put it in the MvcRenderContourForm.chtml but this partial not seems to recognise the BeginForm (The namespace doesn't have it, do I have to add some references maybe?)

    Can someone point me in the right direction to be able to use ajax to only partly do a postback (Which works for a umbraco 6 Mvc Razor website)?

     

     

     

     

     

    Copy Link

  • Comment author was deleted

    Mar 21, 2013 @ 17:32

    Hey,

    I would suggest that you ask for some details in the post you are refering to, seems that Tom Martin has it working but I don't now what steps are needed...

    Copy Link
  • ID 27 posts 128 karma points
    Mar 28, 2013 @ 10:52
    ID
    0

    I've been trying hard to get it working. Now it looks like i'm half way but i really don't understand how umbraco contour (or umbraco) routes the action result. It seems that it's returning the whole page instead of just a view with the form.

    To exclude local problems i started a clean new umbraco 6.0.3 project and installed the standard website for mvc.. Replaced the body of the home with the form created with the fine description from Tom Martin. Still I get the following result.

    I can't look/debug into the controllers (Or can I?) to confirm this. Looks like it will only work when the ajax target is outside the contour form. Unforunately I have a website with long pages. When the form is filled the page now gets refreshed with the result that the contourform gets out of sight and users need to scroll down to fill out the next step etc.. Thus, i really need ajax to render this form (Is this even supported, and if not, is it planned to become supported).

    One of the strange things I noticed was that the action attribute of the form is empty.

    <form id="form0" action="" encType="multipart/form-data" method="post" data-ajax-update="#contour " data-ajax-mode="replace" data-ajax-method="Post" data-ajax="true">

    I'm still using the unlicensed latest contour (3.0.9 at time of writing) but when the (new) site is ready to get published it will get a license. I really like the contour ease of use for some of our content editors and would really like to render the form with the use of ajax technology.

    Any suggestions on what to do next, or am I thinking a totally wrong way?

    Copy Link

  • Comment author was deleted

    Mar 29, 2013 @ 11:17

    And have you tried with a single step form? To see how that behaves

    Copy Link
  • ID 27 posts 128 karma points
    Apr 02, 2013 @ 11:34
    ID
    0

    Same result after submit button and single Step:

    Copy Link
  • Mansoor Ahmad 16 posts 74 karma points
    Jun 19, 2013 @ 15:01
    Mansoor Ahmad
    0

    Hi ID,

    I am having the same problem and I think that is because , controller for contour form returns a "view" not a "Partial view" thats why page is printed kind of twice. We only want the part of the page to be loaded without a pageload but controller returns the whole page:(

    As far as I know we don't have any controll over controller to return a "partial view".

    If you find any solution do let me know :)

    Copy Link

  • Comment author was deleted

    Jun 19, 2013 @ 15:05

    The Contour controller only returns partial views so that can't be it, have you tried the instructions described in http://our.umbraco.org/forum/umbraco-pro/contour/39209-Contour-Ajax-Post ?

    Copy Link
  • Mansoor Ahmad 16 posts 74 karma points
    Jun 19, 2013 @ 15:17
    Mansoor Ahmad
    0

    I have been to the mentioned page.
    What I am trying to achieve is using contour form as as comment system. So I have a Comment text field and under that I am listing all the comments related to that page.

    Originally there is a Html.BeginForm which works great so the comment is being saved in the database and apperears in the commet list. But this refreshes the page and I want only the div containing the comments to be refreshed.

    So what I did was just to change Html.BeginForm to Ajax.BeginForm and in ajax options I gave the id of the div containing comments to be replaced in "UpdateTargetId".

    And then there is a whole page rendered in the my page cso I have double header etc:(

    I am quite new to umbraco and even newer to mvc so  if I am making some stupid mistake then forgive me :)

     

    Copy Link

  • Comment author was deleted

    Jun 19, 2013 @ 15:42

    Yeah haven't tried it myself but will give it a go and see if I can reproduce

    Copy Link
  • Mansoor Ahmad 16 posts 74 karma points
    Jun 19, 2013 @ 15:44
    Mansoor Ahmad
    0

    Thanks Tim For a quick reply :)

    Copy Link

  • Comment author was deleted

    Jun 19, 2013 @ 15:59

    I can reproduce the issue but not sure why it happens

    As a workaround you can set an id on your body and use that on your UpdateTargetId that appears to work

    So my test template looks like

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    @{
        Layout = null;
    }
     
    <html>
    <head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>  
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js" type="text/javascript"></script>    
    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script> 
     
     
    </head>
    <body id="result">
    <h1>@Umbraco.Field("pageName")</h1>
    <h2>a subtitle</h2>
     
    @Umbraco.RenderMacro("umbracoContour.RazorRenderForm", new {FormGuid="1edcc24f-f835-42c1-8b90-f06827d99634" })
    </body>
    </html>

     

    And the ajax form

     @using (Ajax.BeginForm("ContourForm", "FormRender", new AjaxOptions { UpdateTargetId = "result" }))

     
    Copy Link
  • Tom 713 posts 954 karma points
    Oct 13, 2014 @ 06:50
    Tom
    0

    just wondering where the Ajax.BeginForm needs to live as there's no complete example I can find? where did the umbracocontour.renderrazorform macro get generated?

     

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft