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:
- public class Email
- {
- public string cc { get; set; }
- public string Bcc { get; set; }
- public string To { get; set; }
-
- public string Body { get; set; }
- public string Subject { get; set; }
-
- }
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:
- [RoutePrefix("api/Email")]
- public class EmailController : ApiController
- {
- [Route("Send")]
- [HttpPost]
- public HttpResponseMessage SendEmail(Email e)
- {
- try
- {
- using (MailMessage mail = new MailMessage())
- {
-
- string[] Tolist = e.To.Split(',');
- foreach (string Toemail in Tolist)
- {
- mail.To.Add(new MailAddress(Toemail));
- }
- string[] Tocc = e.cc.Split(',');
- foreach (string cc in Tocc)
- {
- mail.CC.Add(cc);
- }
- string[] ToBcc = e.Bcc.Split(',');
- foreach (string Bcc in ToBcc)
- {
- mail.Bcc.Add(Bcc);
- }
-
-
- mail.Subject = e.Subject;
- mail.Body = HttpUtility.HtmlDecode(e.Body);
-
- mail.From = new MailAddress(ConfigurationManager.AppSettings["UserName"]);
- mail.IsBodyHtml = true;
-
- SmtpClient smtp = new SmtpClient();
- smtp.Host = ConfigurationManager.AppSettings["Host"];
- smtp.EnableSsl = Convert.ToBoolean(ConfigurationManager.AppSettings["EnableSsl"]);
- System.Net.NetworkCredential NetworkCred = new System.Net.NetworkCredential();
- NetworkCred.UserName = ConfigurationManager.AppSettings["UserName"];
- NetworkCred.Password = ConfigurationManager.AppSettings["Password"];
- smtp.UseDefaultCredentials = true;
- smtp.Credentials = NetworkCred;
- smtp.Port = int.Parse(ConfigurationManager.AppSettings["Port"]);
- smtp.Send(mail);
- }
-
- return Request.CreateResponse(HttpStatusCode.OK, "Email Send", Configuration.Formatters.JsonFormatter);
- }
- catch (Exception ex)
- {
- return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);
- }
-
- }
- }
The above controller will return the simple ”Email Send” as a response after successful execution of the Send action.
The web.config settings.
- <appSettings>
- <addkeyaddkey="Host"value="smtp.gmail.com"/>
- <addkeyaddkey="EnableSsl"value="true"/>
- <addkeyaddkey="UserName"value="[email protected]"/>
- <addkeyaddkey="Password"value="xxxxx"/>
- <addkeyaddkey="Port"value="587"/>
- </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.
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Untitled</title>
-
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
-
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
-
-
- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
- <script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>
- <script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>
- <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
- </head>
- <body>
- <div class="container">
- <div class="row" id="example">
- <div class="form-group">
- <label for="email">Email address:</label>
- <input type="email" class="form-control" id="email" data-bind="value:To">
- </div>
- <div class="form-group">
- <label for="cc">CC:</label>
- <input type="email" class="form-control" id="cc" data-bind="value:cc">
- </div>
- <div class="form-group">
-
- <label for="cc">Bcc:</label>
- <input type="email" class="form-control" data-bind="value:Bcc">
- </div>
- <div class="form-group">
-
- <label for="cc">Subject:</label>
- <input type="text" class="form-control" data-bind="value:Subject">
- </div>
-
- <div class="demo-section k-content">
- <div>
- <h4>Enter some Message</h4>
- <textarea data-role="editor"
- data-tools="['bold',
- 'italic',
- 'underline',
- 'strikethrough',
- 'justifyLeft',
- 'justifyCenter',
- 'justifyRight',
- 'justifyFull']"
- data-bind="visible: isVisible,
- value: body"
-
- style="height: 200px;"></textarea>
- </div>
- </div>
- <br />
-
- <div>
- <button data-bind="click:sendmail" class="k-button">Send Message</button>
- </div>
-
- <script>
- $(document).ready(function () {
-
-
-
- var viewModel = kendo.observable({
- To: '',
- cc: '',
- Bcc: '',
- body: '',
- isVisible: true,
- Subject: '',
-
- sendmail: function (e) {
-
- console.log('hello')
- console.log();
- $.ajax({
- type: "POST",
- async: false,
- url: "api/Email/Send",
- data: {
- To: viewModel.get("To"),
- cc: viewModel.get("cc"),
- Bcc: viewModel.get("Bcc"),
- Body: viewModel.get("body"),
- Subject: viewModel.get("Subject"),
- },
- success: function (response) {
- alert(response);
-
- },
- error: function () {
- alert("Inside ajax call error");
- },
- })
- }
- });
-
- kendo.bind($("#example"), viewModel);
- })
- </script>
- </div>
- </div>
-
- </body>
- </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.
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: