How to call an Azure function from an ASP.NET Core MVC application

In this tutorial, we’ll learn how to call an Azure Function from an ASP.NET Core MVC application.

This article is an extract from the book C# 7 and .NET Core Blueprints, authored by Dirk Strauss and Jas Rademeyer. This book is a step-by-step guide that will teach you essential .NET Core and C# concepts with the help of real-world projects.

We will get started with creating an ASP.NET Core MVC application that will call our Azure Function to validate an email address entered into a login screen of the application:

This application does no authentication at all. All it is doing is validating the email address entered. ASP.NET Core MVC authentication is a totally different topic and not the focus of this post.

In Visual Studio 2017, create a new project and select ASP.NET Core Web Application from the project templates. Click on the OK button to create the project. This is shown in the following screenshot:

On the next screen, ensure that .NET Core and ASP.NET Core 2.0 is selected from the drop-down options on the form. Select Web Application (Model-View-Controller) as the type of application to create.

Don’t bother with any kind of authentication or enabling Docker support. Just click on the OK button to create your project:

After your project is created, you will see the familiar project structure in the Solution Explorer of Visual Studio:

Creating the login form

For this next part, we can create a plain and simple vanilla login form. For a little bit of fun, let’s spice things up a bit. Have a look on the internet for some free login form templates:

I decided to use Login Form 1 by Colorlib from their site. Download the template to your computer and extract the ZIP file. Inside the extracted ZIP file, you will see that we have several folders. Copy all the folders in this extracted ZIP file (leave the index.html file as we will use this in a minute):

Next, go to the solution for your Visual Studio application. In the wwwroot folder, move or delete the contents and paste the folders from the extracted ZIP file into the wwwroot folder of your ASP.NET Core MVC application. Your wwwroot folder should now look as follows:

4. Back in Visual Studio, you will see the folders when you expand the wwwroot node in the CoreMailValidation project.

5. I also want to focus your attention to the Index.cshtml and _Layout.cshtml files. We will be modifying these files next:

Open the Index.cshtml file and remove all the markup (except the section in the curly brackets) from this file. Paste the HTML markup from the index.html file from the ZIP file we extracted earlier.

Do not copy the all the markup from the index.html file. Only copy the markup inside the tags.

Next, open the Layout.cshtml file and add all the links to the folders and files we copied into the wwwroot folder earlier. Use the index.html file for reference. You will notice that the _Layout.cshtml file contains the following piece of code—@RenderBody(). This is a placeholder that specifies where the Index.cshtml file content should be injected. If you are coming from ASP.NET Web Forms, think of the _Layout.cshtml page as a master page. Your Layout.cshtml markup should look as follows:

If everything worked out right, you will see the following page when you run your ASP.NET Core MVC application. The login form is obviously totally non-functional:

However, the login form is totally responsive. If you had to reduce the size of your browser window, you will see the form scale as your browser size reduces. This is what you want. If you want to explore the responsive design offered by Bootstrap, head on over to https://getbootstrap.com/ and go through the examples in the documentation:

The next thing we want to do is hook this login form up to our controller and call the Azure Function we created to validate the email address we entered.

Let’s look at doing that next.

Hooking it all up

To simplify things, we will be creating a model to pass to our controller:

Create a new class in the Models folder of your application called LoginModel and click on the Add button:

2. Your project should now look as follows. You will see the model added to the Models folder:

The next thing we want to do is add some code to our model to represent the fields on our login form. Add two properties called Email and Password:

The next portion of code needs to be written in the HomeController.cs file. Currently, it should only have an action called Index():

public IActionResult Index()
{
return View();
}

Add a new async function called ValidateEmail that will use the base URL and parameter string of the Azure Function URL we copied earlier and call it using an HTTP request. I will not go into much detail here, as I believe the code to be pretty straightforward. All we are doing is calling the Azure Function using the URL we copied earlier and reading the return data:

We then do an await on the ValidateEmail function, and if the return data contains the word false, we know that the email validation failed. A failure message is then passed to the TempData property on the controller.

The TempData property is a place to store data until it is read. It is exposed on the controller by ASP.NET Core MVC. The TempData property uses a cookie-based provider by default in ASP.NET Core 2.0 to store the data. To examine data inside the TempData property without deleting it, you can use the Keep and Peek methods. To read more on TempData, see the Microsoft documentation here: https://docs.microsoft.com/en-us/aspnet/core/fundamentals/app-state?tabs=aspnetcore2x.

If the email validation passed, then we know that the email address is valid and we can do something else. Here, we are simply just saying that the user is logged in. In reality, we will perform some sort of authentication here and then route to the correct controller.

So now you know how to call an Azure Function from an ASP.NET Core application. If you found this tutorial helpful and you’d like to learn more, go ahead and pick up the book C# 7 and .NET Core Blueprints.

Read Next

I'm a technology enthusiast who designs and creates learning content for IT professionals, in my role as a Category Manager at Packt. I also blog about what's trending in technology and IT. I'm a foodie, an adventure freak, a beard grower and a doggie lover.