upload file field have a problem with razor rendering

Sergio 8 posts 28 karma points

May 11, 2013 @ 01:07

Here's the scenario.

I am creating an upload file field mandotory. And an email field not mandatory.

When using the form I select a file, place the email and hit submit, then this message is sent:

http://screencast.com/t/N4ieeGGMLi

This is happening when using RazorRenderForm.

However if using umbracoContour.RenderForm works fine. So I don't know what I am doing wrong and I really need to use the umbracoContour.RazorRenderForm for business reasons.

Thank you!

Copy Link

Comment author was deleted

May 15, 2013 @ 11:29

Hey Sergio,

What version of Contour are you using, just tested the scenarion on latest stable and the form simply submits...like it should

Copy Link

Comment author was deleted

May 15, 2013 @ 11:29

Also note that to get client side validation you'll need to include some scripts

check http://umbraco.com/follow-us/blog-archive/2012/11/9/getting-started-with-contour-30-beta.aspx for the list

Copy Link

Sergio 8 posts 28 karma points

May 15, 2013 @ 18:08

Contour Version 3.0.6 and Umbraco 4.7.2

This is the code running on the page. I did a right click View Page Source

 <link media="all" type="text/css" rel="stylesheet" href="/Sites/Shared/css/reset.css" />
  <link media="all" href="/Sites/25/css/standard-pages-Houze.css" rel="stylesheet" type="text/css" />

<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 type="text/javascript" src="/Sites/25/js/jquery.flexslider-min.js"></script>



 <div class="divModal"> 

             <h2 class="contentTitle"> Test Modal </h2>  
             <div id="modalFeature" class="modalWrapper">


             </div>
             <div id="main" class="modalWrapper">
                <div class="container">

                   <h2 class="contentSubtitle">Form</h2>
                   <form method="post" action="/test-modal-form/" id="ctl03">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUENTM4MWRkTNybcoOmQbPh2P9iOShpTVQKxyk=" />
</div>

                       <div>
 <div class="RTETextWrapper">


   <script type="text/javascript">
       var contourDateFormat = "m/d/yy";
    </script> 
    <script src="/umbraco/plugins/umbracocontour/scripts/frontend/contourform.js" type="text/javascript"></script>
    <script type="text/javascript">

        function PopulateRecordValues() {
            contourFieldValues = new Array();

        }

        function CheckRules() {


        }
 </script> <link rel="stylesheet" type="text/css" href="/umbraco/plugins/umbracocontour/css/jquery-ui-1.8.18.custom.css" />
 <link rel="stylesheet" type="text/css" href="/umbraco/plugins/umbracocontour/css/defaultform.css" />
    <div id="contour" class="testformsergio">
<form action="/search/results?action=ContourForm&amp;controller=FormRender" enctype="multipart/form-data" method="post"><input name="__RequestVerificationToken" type="hidden" value="gM5NeD5F060OehfN+k+EZpmDjHL4pnwm33UEYX4VX4BcxCCtxd1Y0HxkqYZHw1857Ohax/91SkKquT9AuMhqxw==" /><input data-val="true" data-val-required="The FormId field is required." id="FormId" name="FormId" type="hidden" value="b58481fb-bb16-482b-9244-ebbed6c5d119" /> <input type="hidden" name="FormStep" id="FormStep" value="1"/>
            <input type="hidden" name="RecordId" id="RecordId" value=""/>
            <input type="hidden" name="PreviousClicked" id="PreviousClicked" value=""/>
            <div class="contourPage">
                <h4 class="contourPageName"></h4>
                    <fieldset class="contourFieldSet">
                            <legend>UploadPDF</legend>
                            <div class="contourField pdfupload fileupload mandatory" >
<label for="ee83801b-5d87-4157-a459-db0593d0205f" class="fieldLabel">PDF Upload</label> <input type="file" name="ee83801b-5d87-4157-a459-db0593d0205f" id="ee83801b-5d87-4157-a459-db0593d0205f"
 data-val="true" data-val-required="PDF Upload is mandatory"/>


<span class="field-validation-valid" data-valmsg-for="ee83801b-5d87-4157-a459-db0593d0205f" data-valmsg-replace="true"></span> </div>
                            <div class="contourField email textfield alternating" >
<label for="6dd6fc8a-c347-46f7-b805-cb4f8715d6dd" class="fieldLabel">Email</label> <input type="text" name="6dd6fc8a-c347-46f7-b805-cb4f8715d6dd" id="6dd6fc8a-c347-46f7-b805-cb4f8715d6dd" class="text" value="" maxlength="500"
/>




<span class="field-validation-valid" data-valmsg-for="6dd6fc8a-c347-46f7-b805-cb4f8715d6dd" data-valmsg-replace="true"></span> </div>
                    </fieldset>
                <div style="display:none">
                    <input type="text" id="HoneyPot"/>
                </div>
            </div>
            <div class="contourNavigation">
                    <input type="submit" value="Submit"/>
            </div>                        
</form>    </div>

                         </div>
                       </div>
                   </form>                    
                </div>
             </div>

          </div>

Copy Link

Comment author was deleted

May 16, 2013 @ 12:52

Looks like you have nested forms, contour (when using the razor macro) doesn't need to be in a form with runat server attribute (it will add it's own form tag)

Copy Link

Sergio 8 posts 28 karma points

May 16, 2013 @ 19:39

Ok, i saw that we were inserting that form tag. I remove it, but now when i hit submit it sends me to:

/search/results?action=ContourForm&controller=FormRender

I really don't understand why this happens. That's automatically rendered from the contour form.

 <link media="all" type="text/css" rel="stylesheet" href="/Sites/Shared/css/reset.css" />
  <link media="all" href="/Sites/25/css/standard-pages-Houze.css" rel="stylesheet" type="text/css" />

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



 <div class="divModal"> 

             <h2 class="contentTitle"> Test Modal </h2>  
             <div id="modalFeature" class="modalWrapper">


             </div>
             <div id="main" class="modalWrapper">
                <div class="container">

                   <h2 class="contentSubtitle">Form</h2>

                       <div>
 <div class="RTETextWrapper">


   <script type="text/javascript">
       var contourDateFormat = "m/d/yy";
    </script> 
    <script src="/umbraco/plugins/umbracocontour/scripts/frontend/contourform.js" type="text/javascript"></script>
    <script type="text/javascript">

        function PopulateRecordValues() {
            contourFieldValues = new Array();

        }

        function CheckRules() {


        }
 </script> <link rel="stylesheet" type="text/css" href="/umbraco/plugins/umbracocontour/css/jquery-ui-1.8.18.custom.css" />
 <link rel="stylesheet" type="text/css" href="/umbraco/plugins/umbracocontour/css/defaultform.css" />
    <div id="contour" class="testformsergio">
<form action="/search/results?action=ContourForm&amp;controller=FormRender" enctype="multipart/form-data" method="post"><input name="__RequestVerificationToken" type="hidden" value="TvQmT25s2uuB3fD/FGx3xA/1Bemx19QN2lqt2UYBXZ8JuecVDRoIBz1vd6zSupBGIb6upI+mMZduIE4VsrgdUg==" /><input data-val="true" data-val-required="The FormId field is required." id="FormId" name="FormId" type="hidden" value="b58481fb-bb16-482b-9244-ebbed6c5d119" /> <input type="hidden" name="FormStep" id="FormStep" value="1"/>
            <input type="hidden" name="RecordId" id="RecordId" value=""/>
            <input type="hidden" name="PreviousClicked" id="PreviousClicked" value=""/>
            <div class="contourPage">
                <h4 class="contourPageName"></h4>
                    <fieldset class="contourFieldSet">
                            <legend>UploadPDF</legend>
                            <div class="contourField pdfupload fileupload" >
<label for="ee83801b-5d87-4157-a459-db0593d0205f" class="fieldLabel">PDF Upload</label>                                <input type="file" name="ee83801b-5d87-4157-a459-db0593d0205f" id="ee83801b-5d87-4157-a459-db0593d0205f"
/>


<span class="field-validation-valid" data-valmsg-for="ee83801b-5d87-4157-a459-db0593d0205f" data-valmsg-replace="true"></span> </div>
                            <div class="contourField email textfield alternating" >
<label for="6dd6fc8a-c347-46f7-b805-cb4f8715d6dd" class="fieldLabel">Email</label> <input type="text" name="6dd6fc8a-c347-46f7-b805-cb4f8715d6dd" id="6dd6fc8a-c347-46f7-b805-cb4f8715d6dd" class="text" value="" maxlength="500"
/>




<span class="field-validation-valid" data-valmsg-for="6dd6fc8a-c347-46f7-b805-cb4f8715d6dd" data-valmsg-replace="true"></span> </div>
                    </fieldset>
                <div style="display:none">
                    <input type="text" id="HoneyPot"/>
                </div>
            </div>
            <div class="contourNavigation">
                    <input type="submit" value="Submit"/>
            </div>                        
</form>    </div>

                         </div>
                       </div>

                </div>
             </div>

          </div>

Copy Link

Comment author was deleted

May 16, 2013 @ 19:56

Looks like you removed both form tags...

Copy Link

Sergio 8 posts 28 karma points

May 16, 2013 @ 20:26

Nope... http://screencast.com/t/tscThNYZ7

Copy Link

Comment author was deleted

May 21, 2013 @ 16:59

Hmm the action on the form element looks strange, any other packages installed on your site?

Copy Link

Sergio 8 posts 28 karma points

May 21, 2013 @ 19:41

I added enctype='multipart/form-data' to my form with runat server element

Thank you!

Copy Link

Zac 239 posts 541 karma points

Jun 06, 2013 @ 18:04

Hi Tim,

I'm following up on this issue on behalf of Sergio.

How should the form action look?

All of our forms, whether rendered on a page or previewed in Contour have the same action:

<form action="/search/results?action=ContourForm&controller=FormRender" ...

We do have other packages installed (uComponents, RazorComponents, Courier) but I'd like to start by figuring out how the form should look for a Contour form rendered by the razor engine.

Thanks

Copy Link

Zac 239 posts 541 karma points

Jun 06, 2013 @ 18:09

Note:

For some reason surrounding the razor Contour form with a <form runat="server" ... fixes the issue.

I'm not sure why this works but it isn't a very good solution as it is invalid html.

Thanks for your help

Copy Link

is working on a reply...

Flag this post as spam?

Upload file field have a problem with razor rendering