Set up your C# and ASP.NET MVC development environment

These are the requirements before starting this tutorial:

• A Windows 11 or Windows 10 operating system. This tutorial targets Windows users using Visual Studio.
• Visual Studio 2022 with ASP.NET and web development workload.
• .NET 6 SDK or later. This is included with Visual Studio.
• ngrok for exposing your local development server.
• A Twilio account. Twilio offers a free tier.
• A Twilio phone number with voice capabilities (you can get one for free when you sign up for a Twilio account). To learn more about setting up your Twilio phone number, check out the Twilio Voice Quickstart.

This section outlines project creation using Visual Studio templates and understanding the project structure:

1. Open Visual Studio 2022 and click Create a new project.
2. Search for "ASP.NET Core Web App" and select ASP.NET Core Web App (Model-View-Controller).
3. Click Next.
4. Enter a project name such as WebApplicationTwilio and choose a location.
5. Click Next.
6. Use the latest LTS version available.
7. Check Configure for HTTPS.
8. Clear Docker unless you specifically need it.
9. Click Create.

Expand image

The Solution Explorer shows your project structure and is typically located on the right side of Visual Studio. If you don't see it, you can open it by going to View > Solution Explorer or pressing Ctrl+Alt+L.

Solution Explorer displays your project structure with the following folders:

• Controllers (contains your MVC controllers)
• Views (contains your HTML templates)
• wwwroot (contains static files like CSS, JavaScript, images)
• Program.cs (the main entry point for your application)

Visual Studio creates a fully configured ASP.NET Core MVC project.

Next you install the Twilio NuGet package and create TwiML responses. You do this by adding the Twilio library through Visual Studio's package manager:

1. In Solution Explorer, right-click on your project (not the solution) and select Manage NuGet Packages.
2. Click on the Browse tab.
3. Search for Twilio and select the package from Twilio.
4. Click Install to add the latest version to your project.

To return TwiML instead of a standard HTML view, modify the HomeController. By default, it returns a basic HTML webpage.

1. Replace the content of Controllers\HomeController.cs with the following code:

1
using Microsoft.AspNetCore.Mvc;
2
using System.Diagnostics;
3
using Twilio.TwiML;
4
using WebApplicationTwilio.Models;
5

6
namespace WebApplicationTwilio.Controllers
7
{
8
    public class HomeController : Controller
9
    {
10
        public IActionResult Index()
11
        {
12
            var response = new VoiceResponse();
13
            response.Say("Hello World!");
14
            
15
            return Content(response.ToString(), "text/xml");
16
        }
17

18
        public IActionResult Privacy()
19
        {
20
            return View();
21
        }
22

23
        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
24
        public IActionResult Error()
25
        {
26
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
27
        }
28
    }
29
}

2. In the Models folder, create a new file called ErrorViewModel.cs with the following content:

1
namespace WebApplicationTwilio.Models
2
{
3
    public class ErrorViewModel
4
    {
5
        public string? RequestId { get; set; }
6

7
        public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
8
    }
9
}

3. At this point, you can run your application. Press F5 to run your application. The following page displays in your browser as XML at the URL localhost:PORT/:

1
<?xml version="1.0" encoding="utf-8"?>
2
<Response>
3
    <Say>Hello World</Say>
4
</Response>

Most Twilio services use webhooks to communicate with your application. When Twilio receives an incoming phone call, for example, it reaches out to a URL in your application for instructions on how to handle the call.

When you're working on your application in your development environment, your app is only reachable by other programs on the same computer. Twilio won't be able to talk to it.

ngrok provides a unique URL on the ngrok.io domain which forwards incoming requests to your local development environment.

How to run your application and create a public tunnel with ngrok:

1. Run your application as you did above and take note of the URL in the browser to find the port number your application is running on. ASP.NET Core typically uses ports like 5000, 5001, or 7000+.
2. Test your local application first by visiting https://localhost:YOUR_PORT to ensure the XML response displays correctly.
3. Using the port number, start ngrok using this command:

ngrok http 5678

ngrok http https://localhost:5678

Output resembles the following:

1
ngrok by @inconshreveable
2

3
Tunnel Status  online
4
Version        3.x.x
5
Region         us
6
Web Interface  http://127.0.0.1:4040
7
Forwarding     http://<random_subdomain>.ngrok.io -> http://localhost:5678
8
Forwarding     https://<random_subdomain>.ngrok.io -> http://localhost:5678
9
   Connections    ttl     opn     rt1     rt5     p50     p90
10
                  0       0       0.00    0.00    0.00    0.00

If everything's working correctly, your "Hello World!" xml form above displays at your ngrok URL.

Any time you're working on your Twilio application and need a URL for a webhook, use ngrok to get a publicly accessible URL.

To use your ngrok URL as a webhook endpoint, you'll configure your Twilio phone number.

1. Make sure your local application is running and accessible through ngrok before testing, as described in Start ngrok tunnel.
2. Log into Twilio console > Phone numbers > Manage > Active numbers.
3. On the Active Numbers page, you can buy or manage your phone numbers.
4. Click on the phone number you want to configure from the phone number list.
5. In the Voice Configuration section, in the Configure with panel, select Webhook, TwiML Bin, Function, Studio Flow, Proxy Service.
6. Find the Webhook from the A call comes in dropdown.
7. Enter your complete ngrok URL (e.g., https://your-subdomain.ngrok.io) in the URL field. This webhook points to your TwiML root endpoint (/).
8. Leave the HTTP method set to HTTP POST (this is the default).
9. Click Save configuration at the bottom of the page.
10. Call your Twilio phone number from any phone, and hear your "Hello World" message from your Twilio voice application.

Your ASP.NET Core MVC application is ready for further development. Learn more with the following resources:

• Get started with ASP.NET Core
• ASP.NET Core MVC Overview
• Dependency injection in ASP.NET Core

Here are additional Twilio services and quickstart guides:

• SMS developer quickstart
• WhatsApp Business Platform with Twilio quickstart
• Programmable Voice quickstart
• Email API Quickstart for C#