In this article I will explain with an example, how to create and download vCard (.VCF) file in ASP.Net MVC.
Namespaces
You will need to import the following namespace.
Model
The Model class consists of the following properties.
public class ContactModel
{
public string Name { get; set; }
public string Organization { get; set; }
public string Title { get; set; }
public string MobileNumber { get; set; }
public string HomeNumber { get; set; }
public string WorkNumber { get; set; }
public string EmailAddress { get; set; }
public string Website { get; set; }
}
Controller
The Controller consists of following two Action methods.
Action method for handling GET operation
Inside this Action method, the ContactModel class object is populated and returned to the View.
Action method for handling POST operation
The following Action method is called, when the Create VCF Button is clicked.
Inside this Action method, first a StringBuilder class object is created. Then the information for creating the vCard (.VCF) is read from the Label controls and appended to the StringBuilder class object using Append function.
For the contact Photo, Image file is read from the Folder path and converted to BYTE Array and then converted to BASE64 string and finally, appended to the StringBuilder object.
Once the vCard details such as Name, Organization, Phone Numbers, Email Addresses, Websites and Photo of the contact is filled, the file is downloaded using the File function.
Note: The ContentType of Response class is set as text/vcard which informs the Browser that the file type is a vCard.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
ContactModel contactModel = new ContactModel();
contactModel.Name = "Mudassar Khan";
contactModel.Organization = "ASPSnippets Private Limited";
contactModel.Title = "Director";
contactModel.MobileNumber = "9800000000";
contactModel.HomeNumber = "6300000000";
contactModel.WorkNumber = "7800000000";
contactModel.EmailAddress = "mudassar.khan@aspsnippets.com";
contactModel.Website = "www.mudassarkhan.com";
return View(contactModel);
}
[HttpPost]
public ActionResult Index(ContactModel contactModel)
{
StringBuilder sb = new StringBuilder();
sb.Append("BEGIN:VCARD\r\nVERSION:2.1");
sb.Append(Environment.NewLine);
sb.Append("N:");
sb.Append(contactModel.Name.Split(' ')[0]);
sb.Append(";");
sb.Append(contactModel.Name.Split(' ')[1]);
sb.Append(";");
sb.Append(Environment.NewLine);
sb.Append("FN:");
sb.Append(contactModel.Name);
sb.Append(Environment.NewLine);
sb.Append("TEL;CELL:");
sb.Append(contactModel.MobileNumber);
sb.Append(Environment.NewLine);
sb.Append("TEL;HOME:");
sb.Append(contactModel.HomeNumber);
sb.Append(Environment.NewLine);
sb.Append("TEL;WORK:");
sb.Append(contactModel.WorkNumber);
sb.Append(Environment.NewLine);
sb.Append("EMAIL;WORK:");
sb.Append(contactModel.EmailAddress);
sb.Append(Environment.NewLine);
sb.Append("ORG:");
sb.Append(contactModel.Organization);
sb.Append(Environment.NewLine);
sb.Append("TITLE:");
sb.Append(contactModel.Title);
sb.Append(Environment.NewLine);
sb.Append("URL:");
sb.Append(contactModel.Website);
sb.Append(Environment.NewLine);
byte[] bytes = System.IO.File.ReadAllBytes(Server.MapPath("~/Images/Mudassar.png"));
string base64 = Convert.ToBase64String(bytes, 0, bytes.Length);
sb.Append("PHOTO;ENCODING=BASE64;JPEG:");
sb.Append(base64);
sb.Append(Environment.NewLine);
sb.Append("END:VCARD");
return File(Encoding.ASCII.GetBytes(sb.ToString()), "text/vcard", "Mudassar.vcf");
}
}
View
Inside the View, in the very first line the ContactModel class is declared as model for the View.
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The HTML Form consists of an Image and some Label controls, Hidden Fields and a Submit Button.
The HiddenFields are created using the HiddenFor function of HTML Helper class.
@model VCF_Contact_Cards_MVC.Models.ContactModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="10" valign="top">
<img src="~/Images/Mudassar.png" />
</td>
</tr>
<tr>
<td style="width: 100px">Name:</td>
<td>
@Html.HiddenFor(m => m.Name)
@Model.Name
</td>
</tr>
<tr>
<td style="width: 100px">Company Name:</td>
<td>
@Html.HiddenFor(m => m.Organization)
@Model.Organization
</td>
</tr>
<tr>
<td style="width: 100px">Title (Position):</td>
<td>
@Html.HiddenFor(m => m.Title)
@Model.Title
</td>
</tr>
<tr>
<td>Mobile Number:</td>
<td>
@Html.HiddenFor(m => m.MobileNumber)
@Model.MobileNumber
</td>
</tr>
<tr>
<td>Home Number:</td>
<td>
@Html.HiddenFor(m => m.HomeNumber)
@Model.HomeNumber
</td>
</tr>
<tr>
<td>Work Number:</td>
<td>
@Html.HiddenFor(m => m.WorkNumber)
@Model.WorkNumber
</td>
</tr>
<tr>
<td>Email Address:</td>
<td>
@Html.HiddenFor(m => m.EmailAddress)
@Model.EmailAddress
</td>
</tr>
<tr>
<td>Website:</td>
<td>
@Html.HiddenFor(m => m.Website)
@Model.Website
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
}
</body>
</html>
Screenshot
![Create and download vCard (.VCF) file in ASP.Net MVC]()
Demo
Downloads
