net form user control ajax - Extending Umbraco

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Robert Fyffe 9 posts 29 karma points

Mar 03, 2012 @ 02:05

.NET Form User Control & Ajax

Hi Everyone,

My name is Robert and I have just started learning .Net and Umrbaco. Really like the system, very powerful.

Looking for some help with submitting a form. I am using a Form I came across on the internet but am integrating my own jQuery to validate and submit via AJAX. I have all the form validation working correctly but struggling to figure out how to submit the form via AJAX.

The codebehind for the form is as follows:

    protected void BtnSubmitClick(object sender, EventArgs e)
    {
        // No errors create email
        var email = new StringBuilder();
        email.AppendFormat(EmailLineFormat, "Name", tbName.Text);
        email.AppendFormat(EmailLineFormat, "Email", tbEmail.Text);
        email.AppendFormat(EmailLineFormat, "Phone", tbPhone.Text);
        email.AppendFormat(tbEnquiry.Text);
        // Send the email
        library.SendMail(EmailAddress, EmailAddress, "Contact Form Enquiry", email.ToString(), true);
        // Redirect to thank you page
        Response.Redirect(library.NiceUrl(ThankYouPage));
    }

My jQuery code is like:

           // submit
            $contactUsForm.submit(function() {

                $loader.show();

                $.ajax({
                    url: $contactUsForm.attr("action"),
                    type: "POST",
                    data: $(this).serialize()

                }).complete(function( response ) {
                                alert(response);
                    if( response.responseText === "success" ) {
                        $contactUsSuccess.fadeIn();
                    } else {
                        $contactUsSuccess.fadeIn();
                    }

                    $loader.hide();

                });

                return false;
            });

Basically I need to call the .Net method ffrom the ajax call as the action is not used. How would I go about doing this?

Thanks in advance.

Copy Link

Ernst Utvik 123 posts 235 karma points

Mar 03, 2012 @ 02:21

0

Hi Robert.

Check out Base.

http://our.umbraco.org/wiki/reference/umbraco-base

http://umbraco.com/follow-us/blog-archive/2009/12/3/blog-4-umbraco-203-%E2%80%93-ajax-comment-form.aspx

Copy Link
Jeroen Breuer 4908 posts 12265 karma points MVP 5x admin c-trib

Mar 04, 2012 @ 16:58

0

/Base is probably the easiest solution. Otherwise you could add you're own webservice. DAMP does that too and it's pretty easy. You can find the js code here: http://damp.codeplex.com/SourceControl/changeset/view/86116#1826730

Jeroen

Copy Link
Robert Fyffe 9 posts 29 karma points

Mar 04, 2012 @ 20:44

0

Ah ok, So basically I would want the Ajax to call the URL created by base which would contain the code to send the form?

Thanks
Robert

Copy Link
Robert Fyffe 9 posts 29 karma points

Mar 04, 2012 @ 20:48

0

Ah ok, So basically I would want the Ajax to call the URL created by base which would contain the code to send the form?

Thanks
Robert

Copy Link
Ernst Utvik 123 posts 235 karma points

Mar 04, 2012 @ 20:50

0

Spot on ;)

Copy Link
Robert Fyffe 9 posts 29 karma points

Mar 05, 2012 @ 01:50

0

Spent a bit of time looking at this but still have a problem.

How can I get the values from the form in the Rest method?

When I enter the values manually into the variables within the Rest method and load the page it sends the form.

Do I need to pass the form values in the URL?

Thanks
Robert

Copy Link
Jeroen Breuer 4908 posts 12265 karma points MVP 5x admin c-trib

Mar 05, 2012 @ 06:32
0
You can pass in the variables as parameters. Here is an example:
```
data: '{ "nodeId": ' + mediaId + ', "cropPropertyAlias": "' + cropPropertyAliasValue + '", "cropName": "' + cropNameValue + '", "thumbWidth": ' + thumbWidth + ', "thumbHeight": ' + thumbHeight + '}',
```
So you need to read the values from your form using jQuery and post them like this.

Jeroen
Copy Link
Robert Fyffe 9 posts 29 karma points

Mar 06, 2012 @ 02:00

0

Ok guys getting there.

One thing though when I view the form on the page, umbraco appears to be adding extra code to the field id and name attributes. Don't think it was doing this at the start so not sure why it has started now.

Contains text like: ContentPlaceHolderDefault

Why would it be doing this and how to I get it to use my ID tag?

Thanks
Robert

Copy Link
Ernst Utvik 123 posts 235 karma points

Mar 06, 2012 @ 08:40

0

Adding a ClientIDMode="Static" attribute will prevent the Id from changing. I think the renaming thing is asp.Net, not Umbraco.

Copy Link
Robert Fyffe 9 posts 29 karma points

Mar 07, 2012 @ 19:05

0

Is there any way for the ajax request to accept code characters?

Basically the for will have a textarea where people can submit bits of code but I cant get the ajax call to accept them, It just sends an empty field.

Any ideas how to allow this or escaping them?

THanks

Robert

Copy Link
is working on a reply...

Please Sign in or register to post replies