ASPNet Core Razor Pages Create and download vCard VCF file

In this article I will explain with an example, how to create and download vCard (.VCF) file in ASP.Net Core (.Net Core) Razor Pages.

Note: For beginners in ASP.Net Core (.Net Core 7) Razor Pages, please refer my article ASP.Net Core 7 Razor Pages: Hello World Tutorial with Sample Program example.

Image Folder (Directory) Location

The Image file is located inside the Images Folder of wwwroot Folder (Directory).

ASP.Net Core Razor Pages: 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.

using System.Text;

Index PageModel (Code-Behind)

Inside the PageModel, first the private property of IWebHostEnvironment interface is created.

Then, the IWebHostEnvironment interface is injected into the Constructor (HomeController) using Dependency Injection method and the injected object is assigned to the private property of IWebHostEnvironment interface.

After that, a public property of ContactModel class is created.

The PageModel consists of following Handler methods.

Handler method for handling GET operation

Inside this Handler method, the ContactModel class properties are set with the appropriate values.

Handler method for handling POST operation

Inside this Handler 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 IWebHostEnvironment interface.

Note: For more details about IWebHostEnvironment interface, please refer Using IWebHostEnvironment in ASP.Net Core. For more details on how to access Static files in ASP.Net Core (.Net Core 7) MVC, please refer my article .Net Core 7: Static Files (Images, CSS and JS files) in ASP.Net Core.

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 IndexModel : PageModel

{

private IWebHostEnvironment Environment;

public IndexModel(IWebHostEnvironment environment)

{

this.Environment = environment;

}

public ContactModel ContactModel { get; set; }

public void OnGet()

{

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";

ContactModel.ImageUrl = "\\Images\\Mudassar.png";

}

public FileResult OnPostCreateVCF(ContactModel ContactModel)

{

StringBuilder sb = new StringBuilder();

sb.Append("BEGIN:VCARD\r\nVERSION:2.1");