In order for the method to be called using AJAX make sure to uncomment [System.Web.Script.Services.ScriptService] in the web service code.<\/p>\n
Add following appsettings in web.config<\/p>\n
<appSettings>\r\n <add key=\"FromEmailAddress\" value=\"info@yourdomain.com\"\/>\r\n <add key=\"FromEmailDisplayName\" value=\"Support\"\/>\r\n <add key=\"FromEmailPassword\" value=\"password\"\/>\r\n <add key=\"SMTPHost\" value=\"smtp.gmail.com\"\/>\r\n <add key=\"SMTPPort\" value=\"587\"\/>\r\n <\/appSettings><\/pre>\nChange values and replace email and password to your account credentials. Leave SMTPhost and port as-is.<\/p>\n
We will now create a simple HTML page to input the data<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>Send Email<\/title>\r\n\t<meta charset=\"utf-8\" \/>\r\n <link rel=\"stylesheet\" href=\"css\/style.css\" \/>\r\n <script src=\"js\/jquery.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n <div id=\"contact-area\">\r\n <div>\r\n <label>Email:<\/label>\r\n <input id=\"email\" type=\"email\" maxlength=\"50\" \/>\r\n <\/div>\r\n <div>\r\n <label>Subject:<\/label>\r\n <input id=\"subject\" type=\"text\" maxlength=\"50\" \/>\r\n <\/div>\r\n <div>\r\n <label>Message:<\/label>\r\n <textarea id=\"message\" type=\"text\" rows=\"5\" cols=\"50\" maxlength=\"1000\"><\/textarea>\r\n <\/div>\r\n <div>\r\n <input id=\"btnSend\" type=\"button\" name=\"Send\" value=\"Send\" class=\"submit-button\"\/>\r\n <\/div>\r\n <div id=\"error\" class=\"error\"><\/div>\r\n <div id=\"success\" class=\"success\"><\/div>\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nNow the last piece is to simply call the web service\u00a0by passing required data for the email<\/p>\n
<script type=\"text\/javascript\">\r\n function isValidEmail(email) {\r\n var pattern = \/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\\.([a-zA-Z])+([a-zA-Z])+\/;\r\n return pattern.test(email);\r\n }\r\n\r\n function validate() {\r\n var isValid = false;\r\n var email = $('#email').val();\r\n if (isValidEmail(email)) {\r\n var subject = $('#subject').val();\r\n var message = $('#message').val();\r\n if (subject === '' || message === '') {\r\n $('#error').html(\"Subject or Message cannot be blank\");\r\n } else {\r\n isValid = true;\r\n }\r\n } else {\r\n $('#error').html(\"Invalid Email\");\r\n }\r\n return isValid;\r\n }\r\n\r\n function sendMail() {\r\n $('#btnSend').prop('disabled', true);\r\n $('#success').html(\"\");\r\n $('#error').html(\"\");\r\n if (validate()) {\r\n var to = $('#email').val();\r\n var subject = $('#subject').val();\r\n var body = $('#message').val();\r\n\r\n var param = \"{'to':\" + JSON.stringify(to) + \", 'subject':\" + JSON.stringify(subject) + \", 'body':\" + JSON.stringify(body) + \"}\"; \/\/JSON.stringify(mail);\r\n\r\n $.ajax({\r\n type: \"POST\",\r\n url: \"\/Mail.asmx\/SendEmail\",\r\n contentType: \"application\/json; charset=utf-8\",\r\n data: param,\r\n dataType: \"json\",\r\n success: function (response) {\r\n var data = response.d;\r\n if (data != 'Success') {\r\n $('#error').html(\"Some error occurred..\");\r\n } else {\r\n $('#success').html(\"Mail sent\");\r\n }\r\n $('#btnSend').prop('disabled', false);\r\n },\r\n failure: function (response) {\r\n alert(response.d);\r\n $('#btnSend').prop('disabled', false);\r\n }\r\n });\r\n } else {\r\n $('#btnSend').prop('disabled', false);\r\n }\r\n }\r\n\r\n document.getElementById(\"btnSend\").addEventListener(\"click\", sendMail);\r\n <\/script><\/pre>\nYou can download complete code (along with solution package) here<\/a>.<\/p>\n
If you get an error, it might be possible that Google blocked it. You need to ensure that the setting to allow less secure apps is turned on<\/p>\n
![\"\"](\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2018\/08\/lesssecureapps.png\")
<\/p>\n","protected":false},"excerpt":{"rendered":"