Description

Before going through this article ensure that you have a basic understanding of the MVC Architecture, ASP.NET Web API, and jQuery.

Create one WEB API application as in the following figure 1 and 2,


Figure 1

Figure 2

Create a Model class:

In my case I named it in email.

Code in Email.cs as shown below:

  1. public class Email
  2. {
  3. public string cc { get; set; }
  4. public string Bcc { get; set; }
  5. public string To { get; set; }
  7. public string Body { get; set; }
  8. public string Subject { get; set; }
  10. }

Create Controller

Right click on the controller folder and create an empty controller as in the following figure three; in my case I named it EmailController.

Figure 3

Code in EmailController.cs as shown below:

  1. [RoutePrefix("api/Email")]
  2. public class EmailController : ApiController
  3. {
  4. [Route("Send")]
  5. [HttpPost]
  6. public HttpResponseMessage SendEmail(Email e)
  7. {
  8. try
  9. {
  10. using (MailMessage mail = new MailMessage())
  11. {
  13. string[] Tolist = e.To.Split(',');
  14. foreach (string Toemail in Tolist)
  15. {
  16. mail.To.Add(new MailAddress(Toemail));
  17. }
  18. string[] Tocc = e.cc.Split(',');
  19. foreach (string cc in Tocc)
  20. {
  21. mail.CC.Add(cc);
  22. }
  23. string[] ToBcc = e.Bcc.Split(',');
  24. foreach (string Bcc in ToBcc)
  25. {
  26. mail.Bcc.Add(Bcc);
  27. }
  30. mail.Subject = e.Subject;
  31. mail.Body = HttpUtility.HtmlDecode(e.Body);
  33. mail.From = new MailAddress(ConfigurationManager.AppSettings["UserName"]);
  34. mail.IsBodyHtml = true;
  36. SmtpClient smtp = new SmtpClient();
  37. smtp.Host = ConfigurationManager.AppSettings["Host"];
  38. smtp.EnableSsl = Convert.ToBoolean(ConfigurationManager.AppSettings["EnableSsl"]);
  39. System.Net.NetworkCredential NetworkCred = new System.Net.NetworkCredential();
  40. NetworkCred.UserName = ConfigurationManager.AppSettings["UserName"];
  41. NetworkCred.Password = ConfigurationManager.AppSettings["Password"];
  42. smtp.UseDefaultCredentials = true;
  43. smtp.Credentials = NetworkCred;
  44. smtp.Port = int.Parse(ConfigurationManager.AppSettings["Port"]);
  45. smtp.Send(mail);
  46. }
  48. return Request.CreateResponse(HttpStatusCode.OK, "Email Send", Configuration.Formatters.JsonFormatter);
  49. }
  50. catch (Exception ex)
  51. {
  52. return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);
  53. }
  55. }
  56. }

The above controller will return the simple ”Email Send” as a response after successful execution of the Send action.

The web.config settings.

  1. <appSettings>
  2. <addkeyaddkey="Host"value="smtp.gmail.com"/>
  3. <addkeyaddkey="EnableSsl"value="true"/>
  4. <addkeyaddkey="UserName"value="[email protected]"/>
  5. <addkeyaddkey="Password"value="xxxxx"/>
  6. <addkeyaddkey="Port"value="587"/>
  7. </appSettings>

Create a new html page:

In my case I named it KendoEditorEmail.html.

Please click here to get more detail about Kendo Editor.

Code in KendoEditorEmail.html.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Untitled</title>
  7. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
  9. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
  12. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  13. <script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>
  14. <script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>
  15. <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
  16. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  17. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  18. </head>
  19. <body>
  20. <div class="container">
  21. <div class="row" id="example">
  22. <div class="form-group">
  23. <label for="email">Email address:</label>
  24. <input type="email" class="form-control" id="email" data-bind="value:To">
  25. </div>
  26. <div class="form-group">
  27. <label for="cc">CC:</label>
  28. <input type="email" class="form-control" id="cc" data-bind="value:cc">
  29. </div>
  30. <div class="form-group">
  32. <label for="cc">Bcc:</label>
  33. <input type="email" class="form-control" data-bind="value:Bcc">
  34. </div>
  35. <div class="form-group">
  37. <label for="cc">Subject:</label>
  38. <input type="text" class="form-control" data-bind="value:Subject">
  39. </div>
  41. <div class="demo-section k-content">
  42. <div>
  43. <h4>Enter some Message</h4>
  44. <textarea data-role="editor"
  45. data-tools="['bold',
  46. 'italic',
  47. 'underline',
  48. 'strikethrough',
  49. 'justifyLeft',
  50. 'justifyCenter',
  51. 'justifyRight',
  52. 'justifyFull']"
  53. data-bind="visible: isVisible,
  54. value: body"
  56. style="height: 200px;"></textarea>
  57. </div>
  58. </div>
  59. <br />
  61. <div>
  62. <button data-bind="click:sendmail" class="k-button">Send Message</button>
  63. </div>
  65. <script>
  66. $(document).ready(function () {
  70. var viewModel = kendo.observable({
  71. To: '',
  72. cc: '',
  73. Bcc: '',
  74. body: '',
  75. isVisible: true,
  76. Subject: '',
  78. sendmail: function (e) {
  79. // e.preventDefault();
  80. console.log('hello')
  81. console.log();
  82. $.ajax({
  83. type: "POST",
  84. async: false,
  85. url: "api/Email/Send",
  86. data: {
  87. To: viewModel.get("To"),
  88. cc: viewModel.get("cc"),
  89. Bcc: viewModel.get("Bcc"),
  90. Body: viewModel.get("body"),
  91. Subject: viewModel.get("Subject"),
  92. },
  93. success: function (response) {
  94. alert(response);
  96. },
  97. error: function () {
  98. alert("Inside ajax call error");
  99. },
  100. })
  101. }
  102. });
  104. kendo.bind($("#example"), viewModel);
  105. })
  106. </script>
  107. </div>
  108. </div>
  110. </body>
  111. </html>
Output

Figure 4

Figure 5
Clicking on Send Message will fire the Send Action.

Figure 6
The Message which is received as in the following figure seven.

Run
Figure 7
I hope you enjoyed this article. Your valuable feedback, question, or comments about this article are always welcomed.

Read more articles on ASP.NET Programming: