Forms within modals using AJAX calls

First, let me say I’m new to .NET and Sitefinity, but not
new to web development. I’ve been building websites since the 90s, but am used
to working in a text editor and doing all my coding (html, php, css, js) by
hand. So, right now, I’m feeling very lost with how to get things done in this
new environment. (Add on to that I can’t install Sitefinity locally since it
requires admin rights – not allowed in my work environment. Any changes I make
have to be done on the live server and that’s a bit scary.)



We are currently in the process of transitioning our website from hand-coded
php to Sitefinity. I have some pages that use a form within a modal and can’t
figure out how to get them to work within the Sitefinity framework. Currently,
the user clicks on a button that fires a modal window to reveal a div that
contains a form. The user fills out the form and then presses submit which does
an AJAX call to a php file that processes the form (error checking, generates
email, etc) and then sends a results message to display on the page. This is
dead simple (for me) to do outside of Sitefinity with html/css/js/php.

At first, I thought I’d just create a blank template, put
the existing html/js/css within it and things should work fine once I translate
the form processing bit from php to .NET. However, when I click on the modal to
reveal the mail-to form, the form seems to auto submit and the modal
disappears. I think this is tied to the whole webpage being considered a
webform in Sitefinity (a concept I don’t get at all: page != form).

Next, I thought I’d take my form tags out of the page and
use Sitefinity’s standard form builder to create the form. This won’t work,
however, since the form needs to be surrounded by the divs needed for the
modal. (I tried opening the div in a content block before the form and then
closing it in a block after the form, but Sitefinity feels the need to “fix” my
html and close the div tags in the first content block.) It also doesn’t seem
to support submitting the form via AJAX so that things stay within the modal.

Does anyone have any suggestions on how to make something
like this work in Sitefinity? Suggestions that will make sense to someone as
green to this type of webdev as myself? Would I need a custom form
widget/template?

(BTW, per the licensing screen, we are running Sitefinity 6.1.4700.0 Professional Edition)

Hi Beth,

If you want to use submit buttons for your form or for opening the modal dialog, you should handle them clientside with javascript for instance. The submit button by default will make a postback making the whole page refresh. If you want to stop the automatic postback on the button click you should make its on click action "return false;" which will actually prevent the click to make a call to the server and handle a server side event. This way you can freely make any calls to services or other actions, or actually fire a Button_Click event only on the modal 'form' to submit and read the asp net controls input on the server.

Regards,
Nikola Zagorchev
Telerik

Thanks for the reply and the help. If I wanted to use the built-in form processor, would I need to make a custom form template? 

Hello,

As far as I understand, you ask about the built-in Forms module. The form widget displays a certain form on the front-end and handles its actions. However, the form itslef is built using form field controls. There are several one built-in which are the mostly used as textboxes, dropdowns, captcha, file upload, etc. You can also implement custom form field controls as shown here.
If you want to use a modal dialog to open a form, built-in with the forms module, you could rather customize the Forms Widget template - the control showing a chosen form on the front end, and make it with a JavaScript handled button, for instance, to open a dialog with the form fields in it. The control to override is Telerik.Sitefinity.Modules.Forms.Web.UI.FormsControl. You can change only its template used to meet your needs.

Regards,
Nikola Zagorchev
Telerik

I really appreciate you trying to help, but I'm still lost. 

I found this page in the guide: 

www.sitefinity.com/.../implementing-the-form-widget-class

but don't even know where to start with this since I don't know where to go to create these files or write this code, it's not much of a help. (Yes, I'm that lost.)

Do I have to be an admin to even open a SiteFinity project file in VisualStudio? When I try to open C:\Program Files (x86)\Telerik\Sitefinity 6.3\Projects\Default\SitefinityWebApp.csproj in Visual Studio, I get the message in the first attached screen grab. If I click 'ignore', I'm taking to a web browser with the info in the second screen grab.  Is this even the file I'm supposed to open in Visual Studio? My IT department just did a standard install of Sitefinity on my PC.

So, then I went to this page: 

www.sitefinity.com/.../creating-and-editing-widget-templates

thinking it would be easier working within the admin screens to do this and ran into step 10 which tells me to find code for an existing similar widget to get the right declarations. But there are no forms widgets listed in the available widget templates...

Edited: 

I cannot seem to attached files - I keep getting server errors. So here they are:

www.dropbox.com/.../7-31-2014 12-16-04 PM.png

www.dropbox.com/.../7-31-2014 12-24-20 PM.png

Hello,

It seems that you do not have permissions to write in the Sitefinity directory - when trying to create a backup at _EmptyProject folder. You can either open the Sitefinity project from the .csproj file or through the Sitefinity Project Manager - right click - Edit in Visual Studio. The SitefinityWebApp is just a .NET web application.
I also recommend you to install Sitefinity Thunder for VS. More information could be found here. Thunder helps create easily custom controls and register them in the Sitefinity application, as well.
The declarations in the article you refer to, are for the necessary namespaces and assemblies the controls you will add to the template use. For instance, if you want to use the RadControls, you should register the Telerik.Web.UI assembly and namespace. All controls added in the template will use the defined prefix:

Sadly, one also needs elevated privileges to open Sitefinity Project Manager. I'll have to go back to my IT department again (after a month, they will probably say no again).

Hello,

You will also need admin credentials if you are going to debug the project against local IIS. Write back to us if we can provide further assistance.

Regards,
Nikola Zagorchev
Telerik