Send Email Using Kendo Editor And ASP.NET WEB API

Gowtham K
Feb 15, 2016
9.8k
0
0
Article

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) {
// e.preventDefault();
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>