In this article I will explain with an example, how to create and download vCard (.VCF) file in ASP.Net MVC.
Image Folder (Directory) Location
The Image file is located inside the Images Folder of ASP.Net MVC project.
![ASP.Net MVC: Create and download vCard (.VCF) file]()
Model
The Model class consist of 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; }
public string ImageUrl { get; set; }
}
Namespaces
You will need to import the following namespace.
Controller
Action method for handling GET operation
Inside this Action method, the ContactModel class properties are set with the appropriate values and returned to the View.
Action method for handling POST operation
Inside this Action method, first a StringBuilder class object is created.
Then, the information for creating the vCard (.VCF) is read from their respective fields and appended to the StringBuilder class object using Append method.
For the contact Photo, image file is read from the Folder (Directory) named Images using Server.MapPath function.
Then, image file is converted into BYTE Array and then converted to BASE64 string which is ultimately appended to the StringBuilder class 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
HTML Markup
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 HTML Table which consists of an Image element and some Hidden Fields created using Html.HiddenFor Helper method and a Submit Button.
@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>
Screenshots
Form
![ASP.Net MVC: Create and download vCard (.VCF) file]()
Downloaded vCard (.VCF) file
![ASP.Net MVC: Create and download vCard (.VCF) file]()
Demo
Downloads
