Send Email Using Kendo Editor And ASP.NET WEB API

This article shows how to work with Kendo Editor to send an email using the ASP.NET WEB API.

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 { getset; }  
  4.     public string Bcc { getset; }  
  5.     public string To { getset; }  
  6.           
  7.     public string  Body { getset; }  
  8.     public string  Subject { getset; }  
  9.  
  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.             {  
  12.   
  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.                 }  
  28.   
  29.   
  30.                 mail.Subject = e.Subject;  
  31.                 mail.Body = HttpUtility.HtmlDecode(e.Body);  
  32.   
  33.                 mail.From = new MailAddress(ConfigurationManager.AppSettings["UserName"]);  
  34.                 mail.IsBodyHtml = true;  
  35.   
  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.             }  
  47.   
  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.         }  
  54.   
  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="sender@gmail.com"/>  
  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>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">  
  8.   
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">  
  10.   
  11.   
  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">  
  31.   
  32.                 <label for="cc">Bcc:</label>  
  33.                 <input type="email" class="form-control" data-bind="value:Bcc">  
  34.             </div>  
  35.             <div class="form-group">  
  36.   
  37.                 <label for="cc">Subject:</label>  
  38.                 <input type="text" class="form-control" data-bind="value:Subject">  
  39.             </div>  
  40.   
  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"  
  55.                                 
  56.                               style="height: 200px;"></textarea>  
  57.                 </div>  
  58.             </div>  
  59.             <br />  
  60.   
  61.             <div>  
  62.                 <button data-bind="click:sendmail" class="k-button">Send Message</button>  
  63.             </div>  
  64.   
  65.             <script>  
  66.                 $(document).ready(function () {  
  67.   
  68.   
  69.   
  70.                     var viewModel = kendo.observable({  
  71.                         To: '',  
  72.                         cc: '',  
  73.                         Bcc: '',  
  74.                         body: '',  
  75.                         isVisible: true,  
  76.                         Subject: '',  
  77.   
  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);  
  95.   
  96.                                 },  
  97.                                 error: function () {  
  98.                                     alert("Inside ajax call error");  
  99.                                 },  
  100.                             })  
  101.                         }  
  102.                     });  
  103.   
  104.                     kendo.bind($("#example"), viewModel);  
  105.                 })  
  106.             </script>  
  107.         </div>  
  108.     </div>  
  109.   
  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: