Consuming WCF in ASP.NET MVC 5 with Entity Framework 6 using Visual Studio 2017

This article includes a step by step tutorial on how to create a WCF Service and a consumer application ASP.NET MVC 5. We will be using Entity Framework for database operations.

Terminologies:

  • WCF – Windows Communication Foundation is a framework for building service-oriented applications. It allows different applications to interact with each other via a service provider.
  • MVC –  Model-View-Controller – a design pattern for successfully and efficiently relating the user interface to underlying data models.
  • Entity Framework – is an open source object-relational mapping framework.
  1. Create a blank solution in Visual Studio, name it MoviesApp
  2. Create a WCF Application
    • Right click on the MoviesApp on the Solution Explorer then go to Add -> New Project.
    • Select WCF Service Application then name it WCF. Click Ok
  3. After the project is successfully created, we now add reference to 3 DLL files from the MySQL Connector directory:
    Go to the Solution Explorer then right click on Reference then click Add Reference. Refer to the screenshot bellow:

    • A window will pop-up. The the left side pain, click on “Browse” then locate the 3 DLL files as seen from the
      screenshot bellow. The path to the DLL files is: C:\Program Files (x86)\MySQL\Connector NET 8.0\Assemblies\v4.5.2. When you’re done finding the files, make sure to check all 3 files before clicking the “OK” button.
  4. Install Entity Framework to the project using Nuget Package manager. Follow the screenshot bellow:
    • On the Nuget Package Manager window, click on “Browse” then search for “entity framework”. Select EntityFramework from the results then on the right side pain check the box of your application then click on the “Install” button. Refer to the screenshot bellow:
  5. Open MySQL Workbench then create a new schema, name it anything you want. Then inside the schema create a new table called “movies” with the following columns:
  6. Go to WCF solution then open Web.config file. Look for the following:
    • Then replace it with the bellow code then save the file.
  7. Create a service for CRUD operation.
    • Right click on the WCF project and select Add – New Item. Choose Web option from left pane and select “WCF Service”. Type the name as “MyService.svc” and click on Add button.
  8. Create an Entity Framework Model
    • Right click on the WCF project and select Add – New Item. Choose Data option from left pane and select “ADO.NET Entity Data Model”. Name it “WCFMoviesModel” then click the Add button. Refer to the screenshot bellow:
    • On the next window select EF Designer from Database then click “Next” button. Refer to screenshot bellow:
    • On the next screen, click on New Connection button, then on the pop-up click on the “Change” button then select “MySQL Database” option from the list then click “Ok” button.  Refer to the screenshot bellow:
      • Note that the MySQL Database option will not be available if you have not installed the MySQL Connect/NET software.
      • If you are sure that you have installed MySQL Connect/NET and you are still not able to see the MySQL Database option, try installing an older version of MySQL Connect/Net which you can get from here:  https://downloads.mysql.com/archives/c-net/
    • Enter the credentials for your MySQL host and select the database to connect to. Make sure to also click “Test Connection” button to see if passes before clicking the “Ok” button  Refer to screenshot bellow:
    • In the next screen, select the checkbox “Yes, include sensitive data in the connection string” then leave everything else as is. Refer to the screenshot bellow:
      • If you click next button and you’re getting the following error: Your project references the latest version of Entity Framework; however, an Entity Framework database provider compatible with this version could not be found for your data connection. if you have already installed a have already installed a compatible provider, ensure you have rebuilt your project before performing this action. Otherwise, exit this wizard, install a compatible provider, and rebuild your project before performing this action.
      • The fix:
        1. Follow step 6 of this tutorial
        2. Rebuild the project
        3. Then repeat step 8 of this tutorial.
    • In the next screen, check the movies table to include to the application.  Click “Finish” button when you’re done.  Refer to the screenshot bellow:
    • If everything went successfully, you will see a screen similar to bellow:
  9. Write a service for CRUD operation
    • Open MyService.svc.cs file from WCF project then add the following code:
    • Open IMyService.cs file then add “ServiceContract”, as follows.
    • Ok service is complete, no Run the project.  You should be able to preview your service at http://localhost:61049/MyService.svc just like the image bellow
  10. Create a ASP.NET MVC 5 application
    • Right click on MoviesApp solution, select New Project
    • In the new window, select “ASP.NET Web Application (.NET Framework)“. Name is MVC then click OK button
    • On the next window select “MVC” then click OK button
  11. Set the Reference
    • Right click on the MVC and click on Add Service Reference as in he image below. Paste the Copied Service URL in the given address then press Go button. All the services will display, as in the following picture. Just give the Namespace as “ServiceRefernce1” and click on OK button.
  12. Add Project Priority
    • Since WCF service application and MVC application both are in the same solution, we have to build the Service first and then the MVC application in order to consume the service in MVC application. Do the following for that:
      • Right Click on the MoviesApp Solution in Solution Explorer and click on properties. Check the “Multiple Startup Project ” and set the application priority for WCF and MVC application (WCF service should be first and MVC afterwards), as in the following image.
  13. Create a Model
    • Right click on Model folder of the MVC project  and click on “Add” -> “Class…”
    • Name the class “MoviesModel.cs
    • Add the following properties.
  14. Create a controller
    • Right click on the Controller folder of the MVC project then select “Add” -> “Controller”
    • Select “MVC 5 Controller – Empty
    • In the next screen, input “MoviesController” as the controller name. Then add the following code:
  15. Create Views
    • To make things done faster, let’s generate the views using Visual Studios’s view generator. Right click on the methods of the MoviesController.cs
    • For example right click on public ActionResult Index(){}  then click “Add View…” refer to screenshot bellow:
    • Then on the next screen, provide the following:
      • Template – select “List” from the dropdown, if we were making a view for the Create page then you would select “Create” from the dropdown.
      • Model – select “MoviesModel (MVC.Models)” from the dropdown
      • Use a layout page – click browse then look for the file “_Layout.cshtml” located under “Views/Shared/”
      • After click of the Add button, you will notice that there is a file named Index.cshtml added under Views/Movies of our MVC Project.
    • Repeat the same with the methods: Create, Edit and Details
  16. Now run the application. Navigate to http://localhost:56871/Movies/