locked
html5 form to asp.net page with ajax RRS feed

  • Question

  • User36417256 posted

    hi all!
    i have built a contact form using html5 and jquery.
    when i wanted to add php code to be able to send it, i got a msg that my institution doesnt work with php and asked me to convert the whole form to asp.net.

    my contact form have 4 radio buttons that will show\hide specific fields. every radio button have extra fields that show only when i choose the radio button related to them.
    now im asked to convert it all to asp.net that the only thing i know about is how to make dynamic inputs and other basic stuff.

    when i tried to ask how to avoid creating new form in asp.net, i was told there is a way to keep my html5 form with the jquery and just add 1 asp.net page and using ajax, transfer the form data to the asp.net page and get the mail sent to my inbox.

    can someone help me out and refer me to sources on how to do this?
    i want to keep the form on html page and be able to send it.
    while googling all i have found is things like mvc and razor that i have no clue about and nothing related to how transfer html5 form using ajax to aspx page and be able to send the mail to my gmail inbox....

    Sunday, March 8, 2020 5:46 PM

All replies

  • User1535942433 posted

    Hi angardia,

    Accroding to your description,I suggest you could post the form data to web method in aspx.In the server side, you could have to create a custom type containing a name value.And you could use MailMessage to send to your mail.

    Note;You need to set security of mail.

    More details,you could refer to below codes:

    HTML:

    <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script>
            $(function () {
                $('#Button1').on('click', function () {
                    $.ajax({
                        type: "POST",
                        url: "PageMethodTest.aspx/TestFormPost",
                        data: "{'name':'" + $('input[id*=txtName]').val() + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            alert(data.d);
                        }
                    })
                })
            })
        </script>
    
     <div>
            <table runat="server" id="table1">
                <tr>
                    <td>
                        <label id="lblName" runat="server" title="Name">
                            Name
                        </label>
                    </td>
                    <td>
                        <input type="text" id="txtName" runat="server" />
                    </td>
                </tr>
            </table>
            <input id="Button1" type="button" value="button" />
        </div>

    ASPX code-behind:

    [System.Web.Services.WebMethod]
            public static string TestFormPost(string name)
            {
                MailMessage mail = new MailMessage();
                SmtpClient SmtpServer = new SmtpClient("smtp.gmail.com");
                mail.From = new MailAddress("------@gmail.com");
                mail.To.Add("------@hotmail.com");
                mail.Subject = "Test Mail - 1";
                mail.Body = name;
                SmtpServer.UseDefaultCredentials = false;
                SmtpServer.Port = 587;
                SmtpServer.Credentials = new System.Net.NetworkCredential("------@gmail.com", "--------");
                SmtpServer.EnableSsl = true;
                SmtpServer.Send(mail);
                return name;
    
            }

    More details,you could refer to below article:

    https://www.aspsnippets.com/Articles/GMAIL-Error-The-SMTP-server-requires-a-secure-connection-or-the-client-was-not-authenticated.aspx

    Best regards,

    Yijing Sun

    Monday, March 9, 2020 5:23 AM
  • User36417256 posted
    Thank you for your reply.
    I already seen this posts.
    The 2nd one is PHP - and i was told i cannot use php.

    My form is complex because it have hidden inputs that appear only if specific radio button checked.
    And there are many of them - i can post the code if it will help.
    But i dont know ajax, json and more advanced asp.net...
    I have 0 clue how can i send a form with asp.net without putting my gmail password into the code and thats dumb and ofc i will get my mail hacked.

    Most of people just send me link - here is asp.net from the start... learning all of this subjects from scratch right now won't help me. I need to learn in a focused way, not from the start, especially 3 new subjects.. i wont make this form even after a year starting each subject from scratch and than look how to merge them.
    And google only show me php options... I cant find even one html form that send the info to 1 asp.net page with ajax..

    Here is my question in stack with my whole form code
    https://stackoverflow.com/questions/60589444/convert-html-jquery-contact-form-to-asp-net

    Can you please refer me to something that can assist me without starting 3 subjects from scratch?

    Monday, March 9, 2020 10:47 AM
  • User36417256 posted
    This is just a copy paste of the first link the guy above posted.

    I don't know how to create custom types or even what they are!
    Monday, March 9, 2020 11:35 AM
  • User-775646050 posted

    That "copy/paste" above is a working example for you to follow. I suggest getting that code to work and then expanding it to fit your needs.

    Create a new webform called PageMethodTest. Add all of the markup and scripts, also a reference to jQuery. Place the code that starts with [WebMethod, ScriptMethod] in your C# code behind and import the usings. Next create a class file called NameValue.cs and replace with the NameValue example at the bottom of the code above. This is the custom type that was referred to. Try and run the page and set a breakpoint inside the TestFormPost method. Once you submit the form, you will see that the webform makes an Ajax call to the TestFormPost. 

    Using this knowledge you can now create your asp.net webform with the form you created. Take baby steps to see first if you can get your Ajax call to work.

    Tuesday, March 10, 2020 6:08 PM
  • User1535942433 posted

    Hi angardia,

    Accroding to your description,your codes which have be posted in stack are deleted.

    Could you post your full codes to us?It will help us solve your problems.

    Best regards,

    Yijing Sun

    Wednesday, March 11, 2020 8:18 AM