Consuming WCF Service In MVC Application Using Entity Framework

This article includes a step by step tutorial to learn WCF using MVC in Visual Studio. We are also using the Entity Framework (.edmx model) for database operations. This scenario targets the user of Entity Framework Model's first approach that consumes WCF service which is consumed in MVC applications for CRUD operations.

Note :

1. Make sure that Entity Framework is already installed with Visual Studio. Otherwise, install it using NuGet Packages.
   
2. Create a table in your database with the name of "UserDetail", as the following.
   
   

   Id	int
   Name	Nvarchar(250)
   Email	Nvarchar(250)

   
   
   

Step 1. Crate a blank solution

• Open Visual Studio.
• File - New - Project…
• Select "Other project Type" in the left pane and choose "Blank Solution."
• Type the name of the Solution "MvcWcfEF";
  
  
  

Step 2. Creating an WCF Application

• Right click on the MvcWcfEF solution in Solution Explorer and go to Add  New Project.
  
  
  
  
• Select WCF Service Application Library and type the name as WcfServiceApp.
• Click on OK.
  
  
  

Step 3. Creating a service for CRUD operation.

• Right click on the WcfServiceApp 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.
  
  
  

Step 4. Creating an Entity Framework Model.

• Right click on the WcfServiceApp project and select Add - New Item.
• Choose Data option from left pane and select "ADO.NET Entity data model".
• Type the name as "EntityModel.edmx" and click on Add button, same as in the following images.
  
  
  
  
  
  
  
  
• Select your database and type the name of connection settings in web.config as "TestDBEntities".
  
  
  

Step 5. Write a service for CRUD operation

1. Open MyService.csv page from WcfService application and write the following code:
   

   using System;
   using System.Collections.Generic;
   using System.Data;
   using System.Linq;
   using System.Runtime.Serialization;
   using System.ServiceModel;
   using System.Text;
   
   namespace WcfServiceApp
   {
       // NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "MyService" in code, svc and config file together.
       // NOTE: In order to launch WCF Test Client for testing this service, please select MyService.svc or MyService.svc.cs at the Solution Explorer and start debugging.
       public class MyService : IMyService
       {
           public void DoWork()
           {
           }
   
           public List<UserDetail> GetAllUser()
           {
               List<UserDetail> userlst = new List<UserDetail>();
               TestDBEntities tstDb = new TestDBEntities();
               var lstUsr = from k in tstDb.UserDetails select k;
               foreach (var item in lstUsr)
               {
                   UserDetail usr = new UserDetail();
                   usr.Id = item.Id;
                   usr.Name = item.Name;
                   usr.Email = item.Email;
                   userlst.Add(usr);
   
               }
   
               return userlst;
           }
   
   
   
           public UserDetail GetAllUserById(int id)
           {
   
               TestDBEntities tstDb = new TestDBEntities();
               var lstUsr = from k in tstDb.UserDetails where k.Id==id select k;
               UserDetail usr = new UserDetail();
               foreach (var item in lstUsr)
               {
   
                   usr.Id = item.Id;
                   usr.Name = item.Name;
                   usr.Email = item.Email;
   
   
               }
   
               return usr;
           }
   
           public int DeleteUserById(int Id)
           {
   
               TestDBEntities tstDb = new TestDBEntities();
               UserDetail usrdtl = new UserDetail();
               usrdtl.Id = Id;
               tstDb.Entry(usrdtl).State = EntityState.Deleted;
               int Retval = tstDb.SaveChanges();
               return Retval;
           }
   
           public int AddUser(string Name, string Email)
           {
               TestDBEntities tstDb = new TestDBEntities();
               UserDetail usrdtl = new UserDetail();
               usrdtl.Name = Name;
               usrdtl.Email = Email;
               tstDb.UserDetails.Add(usrdtl);
               int Retval = tstDb.SaveChanges();
               return Retval;
           }
         public int UpdateUser(int Id,string Name, string Email)
           {
               TestDBEntities tstDb = new TestDBEntities();
               UserDetail usrdtl = new UserDetail();
               usrdtl.Id = Id;
               usrdtl.Name = Name;
               usrdtl.Email = Email;
               tstDb.Entry(usrdtl).State = EntityState.Modified;
   
               int Retval = tstDb.SaveChanges();
               return Retval;
           }
   
       }
   }

2. Now, Open IMyService and write the "ServiceContract" and "DatatContract", as follows.
   

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Runtime.Serialization;
   using System.ServiceModel;
   using System.Text;
   
   namespace WcfServiceApp
   {
       // NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IMyService" in both code and config file together.
       [ServiceContract]
       public interface IMyService
       {
           [OperationContract]
          List<UserDetail> GetAllUser();
           [OperationContract]
           int AddUser(string Name, string Email);
           [OperationContract]
           UserDetail GetAllUserById(int id);
   
           [OperationContract]
           int UpdateUser(int Id, string Name, string Email);
   
           [OperationContract]
           int DeleteUserById(int Id);
       }
   
   
       [DataContract]
       public class UserDetails
       {
           [DataMember]
           public int Id { get; set; }
           [DataMember]
           public string Name { get; set; }
           [DataMember]
           public string Email { get; set; }
   
   
       }
   }

Service has been completed. Now, build the service.

1. Press F5 to run the Service.
2. Copy the Service URL, as shown in following image (localhost:1034/MyService.svc), for creating the reference.
   
   
   

Step 6. Creating an MVC Application

• Now, right click on the "MvcWcfEF " solution in Solution Explorer, again.
• Select e New  Project…
• Select ASP.NET MVC3/4 Web Application.
• Enter the name of application as "MvcApp".
• Click on OK.

Adding a Project Priority and setting the reference

• Right click on the MvcApp and click on add service reference as in he image below.
• Paste the Copied Service URL in the given address and press Go button.
• All the services will display, as in the folowing picture. Just give the Namespace as "ServiceRefernce1" and click on OK button.
  
  
  

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 MvcWcfEF 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.
  
  
  

Create a Model

Right click on Model folder and click on Class. Write the class name as "User" and create the following properties.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcApp.Models
{
    public class User
    {


            public int Id { get; set; }

            public string Name { get; set; }

            public string Email { get; set; }

    }
}

Create a Controller

Right click on the Controller folder and click on add controller. Give the name of controller as "HomeController" and write the following action for CRUD operation.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApp.Models;


namespace MvcApp.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        ServiceReference1.MyServiceClient ur = new ServiceReference1.MyServiceClient();
        public ActionResult Index()
        {
            List<User> lstRecord = new List<User>();

            var lst = ur.GetAllUser();

            foreach (var item in lst)
            {
                User usr = new User();
                usr.Id = item.Id;
                usr.Name = item.Name;
                usr.Email = item.Email;
                lstRecord.Add(usr);

            }


            return View(lstRecord);
        }


        public ActionResult Add()
        {

            return View();
        }
        [HttpPost]
        public ActionResult Add(User mdl)
        {

            User usr= new User();
            usr.Name=mdl.Name;
            usr.Email=mdl.Email;
            ur.AddUser(usr.Name,usr.Email);
            return RedirectToAction("Index", "Home");

        }
        public ActionResult Delete(int id)
        {
            int retval = ur.DeleteUserById(id);
            if (retval > 0)
            {
                return RedirectToAction("Index", "Home");
            }

            return View();
        }

        public ActionResult Edit(int id)
         {
            var lst = ur.GetAllUserById(id);
              User usr = new User();
              usr.Id = lst.Id;
              usr.Name = lst.Name;
              usr.Email = lst.Email;
              return View(usr);

        }
        [HttpPost]
        public ActionResult Edit(User mdl)
        {
            User usr = new User();
            usr.Id = mdl.Id;
            usr.Name = mdl.Name;
            usr.Email = mdl.Email;


            int Retval = ur.UpdateUser(usr.Id, usr.Name, usr.Email);
            if (Retval > 0)
            {
                return RedirectToAction("Index", "Home");
            }
            return View();
        }
    }
}

Creating a View

Creating a view is very simple. Just right click on All action of the controller and click on Add View. The following is the code for all views (Index, Add, Edit). 

Index.cshtml

@model IEnumerable<MvcApp.Models.User>

@{
    ViewBag.Title = "Index";
}


@using (Html.BeginForm()){
    <div>
        <h2>User Details</h2>
         @Html.ActionLink("Add User", "Add", "")
    </div>
    <div>
         <table >
            <tr style="background-color: #FFFACD; text-align:center">
                <th style="text-align:left">
                    Name
                </th>
                <th style="text-align:left">
                   Email
                </th>
                <th style="text-align:left">
                    Manage
                </th>
            </tr>

            @{
                foreach (var item in Model)
                {
                <tr style="background-color: #FFFFF0">
                    <td>
                        @item.Name
                    </td>
                    <td>
                        @item.Email
                    </td>

                    <td>
                        @Html.ActionLink("Edit", "Edit", new { id = @item.Id }) /@Html.ActionLink("Delete", "Delete", new {id[email protected] })

                    </td>

                </tr>
                }
            }

        </table>

    </div>


}

Add.cshtml

@model MvcApp.Models.User

@{
    ViewBag.Title = "Add";
}

<h2>Add New User</h2>

@using (Html.BeginForm()) {

<div style="text-align:center">

    <table>
        <tr>
            <td>
                Name :
            </td>
            <td>
                @Html.TextBoxFor(m=>m.Name)
            </td>
        </tr>

         <tr>
            <td>
                Email :
            </td>
            <td>
                @Html.TextBoxFor(m=>m.Email)
            </td>
        </tr>
         <tr>
            <td>
                Email :
            </td>
            <td>
               <input type="submit" value="Submit" />
            </td>
        </tr>
    </table>

</div>
}

Edit.cshtml

@model MvcApp.Models.User

@{
    ViewBag.Title = "Edit";
}

<h2>Edit User</h2>

@using (Html.BeginForm()) {

<div style="text-align:center">

    <table>
        <tr>
            <td>
                Name :
            </td>
            <td>
                @Html.TextBoxFor(m=>m.Name)
            </td>
        </tr>

         <tr>
            <td>
                Email :
            </td>
            <td>
                @Html.TextBoxFor(m=>m.Email)
            </td>
        </tr>
         <tr>
            <td>

            </td>
            <td>
               <input type="submit" value="Update" />
            </td>
        </tr>
    </table>

</div>
}

Now, press F5 to run the Application

Hope your Application View will be like the following image.



And , Like following.