Muokkaa

Jaa


Using Web API 2 with Entity Framework 6

Download Completed Project

This tutorial teaches you the basics of creating a web application with an ASP.NET Web API back end. The tutorial uses Entity Framework 6 for the data layer, and Knockout.js for the client-side JavaScript application. The tutorial also shows how to deploy the app to Azure App Service Web Apps.

Software versions used in the tutorial

  • Web API 2.1
  • Visual Studio 2017 (download Visual Studio 2017 here)
  • Entity Framework 6
  • .NET 4.7
  • Knockout.js 3.1

This tutorial uses ASP.NET Web API 2 with Entity Framework 6 to create a web application that manipulates a back-end database. Here is a screen shot of the application that you will create.

Screenshot of the created application window, Book Service, showing the Books, Detail, and Add Book panes.

The app uses a single-page application (SPA) design. "Single-page application" is the general term for a web application that loads a single HTML page and then updates the page dynamically, instead of loading new pages. After the initial page load, the app talks with the server through AJAX requests. The AJAX requests return JSON data, which the app uses to update the UI.

AJAX isn't new, but today there are JavaScript frameworks that make it easier to build and maintain a large sophisticated SPA application. This tutorial uses Knockout.js, but you can use any JavaScript client framework.

Here are the main building blocks for this app:

  • ASP.NET MVC creates the HTML page.
  • ASP.NET Web API handles the AJAX requests and returns JSON data.
  • Knockout.js data-binds the HTML elements to the JSON data.
  • Entity Framework talks to the database.

See this app running on Azure

Would you like to see the finished site running as a live web app? You can deploy a complete version of the app to your Azure account by selecting the following button.

You need an Azure account to deploy this solution to Azure. If you do not already have an account, you have the following options:

Create the project

Open Visual Studio. From the File menu, select New, then select Project. (Or select New Project on the Start page.)

In the New Project dialog, select Web in the left pane and ASP.NET Web Application (.NET Framework) in the middle pane. Name the project BookService and select OK.

Screenshot of the New Project dialog with the Web option in the left pane and A S P dot Net Web Application in the middle pane highlighted.

In the New ASP.NET Project dialog, select the Web API template.

Screenshot of the New A S P dot Net Project dialog showing the Web API template highlighted in blue.

Select OK to create the project.

Configure Azure settings (optional)

After you create the project, you can choose to deploy to Azure App Service Web Apps at any time.

  1. In Solution Explorer, right-click on your project and select Publish.

  2. In the window that appears, select Start. The Pick a publish target dialog box appears.

    Screenshot of the Pick a publish target dialog with the App Service option in the left pane and the Create New option in the middle pane selected.

  3. Select Create Profile. The Create App Service dialog box appears.

    Screenshot of the Create App Service dialog with values entered into the app name, subscription, resource group, hosting plan, and insights fields.

    Accept the defaults, or enter different values for the application name, resource group, hosting plan, Azure subscription, and geographical region.

  4. Select Create a SQL database. The Configure SQL Server dialog box appears.

    Screenshot of the Configure S Q L Server dialog with values entered into the server name, location, admin name, and admin password fields.

    Accept the defaults or enter different values. Enter an Administrator Username and Administrator Password for your new database. Select OK when you're done. The Create App Service page reappears.

  5. Select Create to create your profile. A message appears in the lower-right corner indicating that deployment is in progress. After a short while, the Publish window reappears.

    Screenshot of the Publish window showing the newly-created profile, profile details, and management options.

    The profile you created to deploy the app is now available.