In this article I will explain with an example, how to read vCard (.VCF) Contact Card file and import its information in ASP.Net Core Razor.
This article makes use of Thought Project vCard Library for reading vCard in ASP.Net Core Razor.
VCF Contact Cards
A vCard file is a standard for electronic business cards. vCards are used for storing and sharing Contact Information such as name, email, phone numbers, address and etc.
![ASP.Net Core Razor: Read and Import vCard (.VCF) file information]()
Downloading Thought Project vCard package
You will need to install the Thought Project vCard package using the following command.
Install-Package Thought.vCards -Version 1.0.9
vCard File Location
The vCard file is present inside the vCards Folder (Directory) of wwwroot Folder (Directory).
![ASP.Net Core Razor: Read and Import vCard (.VCF) file information]()
Model
The Model class consists 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; }
}
Namepsaces
You will need to import the following namespaces.
using System.IO;
using Thought.vCards;
using Microsoft.AspNetCore.Hosting;
Razor PageModel (Code-Behind)
The PageModel consists of following Handler method.
Handler method for handling GET operation
Inside this Handler method, the path of the vCard is read into a vCard class object from the wwwroot path using IWebHostEnvironment interface.
An object of ContactModel class is created and the vCard information such as Name, Organization, Phone Numbers, Email Addresses, Websites, Photo and etc. of the contact is read and set to it.
Information such as Phone Numbers, Email Addresses and Websites is checked for null and if it is not null then the details are set to the ContactModel class object.
For Photo, a check is performed if Photo is present then BYTE array is converted to Base64 string and assigned to the ImageUrl property of the HTM property of the HTML Image element.
public class IndexModel : PageModel
{
private IWebHostEnvironment Environment;
public IndexModel(IWebHostEnvironment _environment)
{
this.Environment = _environment;
}
public ContactModel ContactModel { get; set; }
public void OnGet()
{
ContactModel = new ContactModel();
string path = Path.Combine(this.Environment.WebRootPath, "vCards\\Mudassar Khan.vcf");
vCard card = new vCard(path);
//Read Name.
ContactModel.Name = card.FormattedName;
//Read Organization.
ContactModel.Organization = card.Organization;
//Read Title.
ContactModel.Title = card.Title;
//Read Mobile Number.
if (card.Phones.GetFirstChoice(vCardPhoneTypes.Cellular) != null)
{
ContactModel.MobileNumber = card.Phones.GetFirstChoice(vCardPhoneTypes.Cellular).FullNumber;
}
//Read Home Number.
if (card.Phones.GetFirstChoice(vCardPhoneTypes.Home) != null)
{
ContactModel.HomeNumber = card.Phones.GetFirstChoice(vCardPhoneTypes.Home).FullNumber;
}
//Read Work Number.
if (card.Phones.GetFirstChoice(vCardPhoneTypes.Work) != null)
{
ContactModel.WorkNumber = card.Phones.GetFirstChoice(vCardPhoneTypes.Work).FullNumber;
}
//Read Email Address.
if (card.EmailAddresses.GetFirstChoice(vCardEmailAddressType.Internet) != null)
{
ContactModel.EmailAddress = card.EmailAddresses.GetFirstChoice(vCardEmailAddressType.Internet).Address;
}
//Read Website URL.
if (card.Websites.GetFirstChoice(vCardWebsiteTypes.Personal) != null)
{
ContactModel.Website = card.Websites.GetFirstChoice(vCardWebsiteTypes.Personal).Url;
}
//Read Image.
if (card.Photos.Count > 0)
{
ContactModel.ImageUrl = "data:image/png;base64," + Convert.ToBase64String(card.Photos[0].GetBytes());
}
}
}
Razor Page (HTML)
The HTML of Razor Page consists of an HTML Table which consists of an HTML Image element and some Labels for displaying the imported information from the vCard file.
@page
@model Read_Import_VCF_Contact_Card_C_Razor.Pages.IndexModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="10" valign="top">
<img src="@Model.ContactModel.ImageUrl" />
</td>
</tr>
<tr>
<td style=" width: 150px">Name: </td>
<td>@Model.ContactModel.Name</td>
</tr>
<tr>
<td style="width: 150px">Company Name: </td>
<td>@Model.ContactModel.Organization</td>
</tr>
<tr>
<td>Mobile Number:</td>
<td>@Model.ContactModel.MobileNumber</td>
</tr>
<tr>
<td>Title:</td>
<td>@Model.ContactModel.Title</td>
</tr>
<tr>
<td>Home Number:</td>
<td>@Model.ContactModel.HomeNumber</td>
</tr>
<tr>
<td>Work Number:</td>
<td>@Model.ContactModel.WorkNumber</td>
</tr>
<tr>
<td>Email Address: </td>
<td>@Model.ContactModel.EmailAddress</td>
</tr>
<tr>
<td>Website: </td>
<td>@Model.ContactModel.Website</td>
</tr>
</table>
</body>
</html>
Screenshot
![ASP.Net Core Razor: Read and Import vCard (.VCF) file information]()
Demo
Downloads
