Post
Ask Question

Send Email Using Kendo Editor And 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 { get; set; }  
  4.     public string Bcc { get; set; }  
  5.     public string To { get; set; }  
  6.           
  7.     public string  Body { get; set; }  
  8.     public string  Subject { get; set; }  
  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="[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>  
  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:


Similar Articles