How to call a WebMethod of a Web Service using jQuery Ajax JSON

The following jQuery is used to call a WebMethod of a Web Service using jQuery Ajax JSON.

jQuery:

1. $(document).ready(function () {
2. var Name = $("#name").val();
3. var Email = $("#email").val();
4. var Message = $("#msg").val();
5. $.ajax({
6.     type: "POST",
7.     data: "{'Name':'" + Name + "','Email':'" + Email + "','Message':'" + Message + "'}",
8.     url: "/WebServices/WS.asmx/Contact",
9.     contentType: "application/json; charset=utf-8",
10.     dataType: "json",
11.     success: function (response) {
12.         if (response.d == true) {
13.             alert("Thank you for contacting JJ Technology Solutions.");
14.         }
15.         else {
16.             alert("Error sending email. Please try again later.");
17.         }
18.     }
19. });
20. });

Note: 

When using "jquery.selectbox.js" plugin the "select & option" tags will be converted into "ul li" at run time. The problem is we can not get the selected value using the normal jQuery or Javascript when we use this plugin. The following solution rectifies this situation. 

Here we are going to find the 'rel' attribute value of an anchor tag which is the selected option.

HTML:

1. <fieldset class="sapDD medium">
2. <span class="required">*</span>
3. <select id="Division" name="Division" sb="37042751" style="display: none;">
4.     <option value="">Select a Division</option>
5.     <option value="example1@gmail.com" selected="selected">example1</option>
6.     <option value="example2@gmail.com">example2</option>
7.     <option value="example3@gmail.com">example3</option>
8.     <option value="example4@gmail.com">example4</option>
9. </select>
10. <div id="sbHolder_37042751" class="sbHolder" tabindex="0">
11.     <a id="sbToggle_37042751" href="#" class="sbToggle"></a>
12.     <a id="sbSelector_37042751" href="#" class="sbSelector">example1</a>
13.     <ul id="sbOptions_37042751" class="sbOptions" style="top: 16px; max-height: 583px; display: none;">
14.         <li><a href="#" rel="" class="">Select a Division</a></li>
15.         <li><a href="#example1@gmail.com" rel="example1@gmail.com" class="">example1</a></li>
16.         <li><a href="#example2@gmail.com" rel="example2@gmail.com">example2</a></li>
17.         <li><a href="#example3@gmail.com" rel="example3@gmail.com">example3</a></li>
18.         <li><a href="#example4@gmail.com" rel="example4@gmail.com">example4</a></li>
19.     </ul>
20. </div>
21. </fieldset>

jQuery:

1. $(document).ready(function(){
2. var Division = $("#Division").next(".sbHolder").find("a.sbSelector").text(); ;
3. var DivisionEmail = $("#Division").next(".sbHolder").find("ul.sbOptions").find("a:contains('" + Division + "')").attr("rel");
4. alert(DivisionEmail);
5. });

Required Namespaces:

1. using umbraco;
2. using umbraco.BusinessLogic;
3. using umbraco.DataLayer;

C# Code:

1. public bool InsertData(string FirstName, string LastName, string Email, string Phone)
2. {
3. bool IsSuccessful = false;
4. try
5. {
6. string InsertQuery = "INSERT INTO tblPerson(FirstName, LastName, Email, Phone, CreatedDate) values ";
7. InsertQuery = InsertQuery + "(@FirstName, @LastName, @Email, @Phone, @CreatedDate)";
8. Application.SqlHelper.ExecuteNonQuery(InsertQuery,
9. Application.SqlHelper.CreateParameter("@FirstName", FirstName),
10. Application.SqlHelper.CreateParameter("@LastName", LastName),
11. Application.SqlHelper.CreateParameter("@Email", Email),
12. Application.SqlHelper.CreateParameter("@Phone", Phone),
13. Application.SqlHelper.CreateParameter("@CreatedDate", DateTime.Now));
14. IsSuccessful = true;
15. }
16. catch
17. {
18. IsSuccessful = false;
19. }
20. return IsSuccessful;
21. }

C#:

1. public bool Send_Email(string Subject, string Body, string ToEmail, string AttachmentUrl)
2. {
3. bool Sent = false;
4. try
5. {
6. if (!string.IsNullOrEmpty(ToEmail))
7. {
8. string FromEmail = "", Username = "", Password = "", Host = "", Port = "";
9. FromEmail = Convert.ToString(ConfigurationManager.AppSettings["FromEmail"]);
10. Username = Convert.ToString(ConfigurationManager.AppSettings["Username"]);
11. Password = Convert.ToString(ConfigurationManager.AppSettings["Password"]);
12. Host = Convert.ToString(ConfigurationManager.AppSettings["Host"]);
13. Port = Convert.ToString(ConfigurationManager.AppSettings["Port"]);
14. bool UseSsl = Convert.ToBoolean(ConfigurationManager.AppSettings["UseSsl"]);
15. System.Net.Mail.MailMessage mail = new System.Net.Mail.MailMessage();
16. System.Net.NetworkCredential cred = new System.Net.NetworkCredential(Username, Password);
17. if (ToEmail.Contains(','))
18. {
19. string[] ToEmailArray = ToEmail.Split(',');
20. foreach (string si in ToEmailArray)
21. {
22.     mail.To.Add(si);
23. }
24. }
25. else
26. {
27. mail.To.Add(ToEmail);
28. }
29. mail.Subject = Subject;
30. mail.From = new System.Net.Mail.MailAddress(FromEmail, Convert.ToString(ConfigurationManager.AppSettings["FromName"]));
31. mail.IsBodyHtml = true;
32. mail.Body = Body;
33. if (!string.IsNullOrEmpty(AttachmentUrl))
34. {
35. System.Net.Mail.Attachment Attachment;
36. if (AttachmentUrl.Contains(','))
37. {
38.     string[] AttachmentUrlArray = ToEmail.Split(',');
39.     foreach (string url in AttachmentUrlArray)
40.     {
41.         string strUrl = Uri.EscapeUriString(url);
42.         if (File.Exists(strUrl))
43.         {
44.             Attachment = new System.Net.Mail.Attachment(strUrl);
45.             mail.Attachments.Add(Attachment);
46.         }
47.     }
48. }
49. else
50. {
51.     string strUrl = Uri.EscapeUriString(AttachmentUrl);
52.     if (File.Exists(strUrl))
53.     {
54.         Attachment = new System.Net.Mail.Attachment(strUrl);
55.         mail.Attachments.Add(Attachment);
56.     }
57. }
58. }
59. System.Net.Mail.SmtpClient smtp = new System.Net.Mail.SmtpClient();
60. smtp.DeliveryMethod = System.Net.Mail.SmtpDeliveryMethod.Network;
61. smtp.UseDefaultCredentials = false;
62. smtp.EnableSsl = UseSsl;
63. smtp.Credentials = cred;
64. smtp.Host = Host;
65. smtp.Port = Convert.ToInt32(Port);
66. smtp.Send(mail);
67. Sent = true;
68. }
69. }
70. catch
71. {
72. Sent = false;
73. }
74. return Sent;
75. }

Configuration in appSettings.config:

1.  <!-- Email Data Configuration Start -->
2.   <add key="FromName" value="Company Name or Any Text"/>
3.   <add key="FromEmail" value="example@gmail.com"/>
4.   <add key="Username" value="example@gmail.com"/>
5.   <add key="Password" value="password"/>
6.   <add key="Host" value="smtp.gmail.com"/>
7.   <add key="Port" value="587"/>
8.   <add key="UseSsl" value="true"/>
9.   <add key="ToEmail" value="example@gmail.com"/>
10.   <!-- Email Data Configuration End -->

Scenario: 

The test form is only available for requests from the local machine.

Solution: 

For enabling remote web service test page, just add HttpPost/HttpGet protocol in the webServices section of your web.config. By default, this option is disabled to increase the security in live environment, but you can enable it in web.config as follows for debugging the deployed web services.

1. <webServices>
2.    <protocols>
3.       <add name="HttpGet"/>
4.       <add name="HttpPost"/>     
5.    </protocols>
6. </webServices>

Please rollback these settings after testing/debugging your deployed web services on live server.

Error:

HTTP Error 500.19-Internal Server Error
The requested page cannot be accessed because the related configuration data for the page is invalid.

Solution:

Step 1: 

Start Visual studio command prompt as an administrator as shown in the picture below:

Step 2: 

In the visual studio command prompt type the command aspnet_regiis –i and then press Enter as shown in picture below:

Step 3: 

Installation process will take some time and once finished it will display finished installing message. After installation again refresh site in IIS and browse it again.

To find the Document Type Alias of the First Child Node using Razor.

1. @Model.Children.First().NodeTypeAlias