Friday, 21 November 2014 MVC with WCF Sample

In this Example, we will learn How to Create an ASP.NET MVC APP with  WCF Service using an ADO.NET Entity Data Model:

SQL Server DB -> WCF Service (ORM) -> MVC Application -> User (Browser).

This small app works in a 4-tier architecture as in the following:
1.User Tier
2.MVC app Tier
3.WCF Service Tier
4.SQL Server Tier

Project 1: WCF Project

Step 1

Go to VS 2012 and select "File" -> "New Website" then select "WCF Service" and provide the name “WcfMvc”.

Click "OK".

Step 2

Go to the Solution Explorer then go to "WcfMvc application" and right-click on it then select "Add" -> "Add new item" -> "Add ADO .Net Entity data model". Click the "Add" button and place the file in the App_code Folder.

Step 3

Then the Entity Data Model Wizard will be shown. Select "Generate data from the database" and click "Next" button .

Step 4

Choose your data connection. I’m selecting My “ran” database of SqlServer 2012.

Enable the radio button “Yes include the sensitive data in the connection string”.

Save the connection string in the config file by enabling the check box “Save entity connection setting in web.config as:“ and click "Next" button.


Go to the new connection and create your connection and provide the server name, provide the authentication type and select either Windows Authentication or SQL Authentication and provide the database name then click the "Ok" button. A new connection will be generated.

Activate the Radio Button “Yes include the sensitive data in the connection string”.

Save the connection string in the config file by enabling the checkbox “save entity connection setting in web.config as: “ then click the "Next" button.

Step 5

Choose which database object you want in your model.

I’m selecting the “Customer” table. The table definition is as follows:

You can use the above table or create your own table and use it

Then provide a Model Namespace of your choice. I’m using “ranjeet” Namespace.

Click the "Finish" button.

Please ensure that in the Solution Explorer under the App_code folder the Model.edmx file has been created.

Your entity data model is ready for use.

Step 6

Go to Solution Explorer then expand the App_code Folder and go to the Iservice.cs file.

Step 7

Delete the Getdata() and GetDataUsingDataContract() methods and write GetCustomer() method as follows.

Step 8

Go to the Sevice.cs file and implement the method declared in the IService.cs interface.

In the Service.cs file right-click on Iservice Interface and select "Implement Interface" -> "Implement Interface".

Delete the existing method from Service.cs the file.

And write the following code in the “public List<customer> GetCustomer()” method.

“ranEntities1” is a class name given when the connection is created.

Step 9

Open the Service.svc file and run the project.

A new window will open, copy the URL present in that window and paste it somewhere. This URL will be used in the next project.

Project 2: MVC Application 4

Step 1

Ensure that the WCF project is open then start another instance of VS 2012. Then go to "File" -> "New" -> "Project..." then create an ASP.NET MVC 4 Web Application. Name it “MvcWcfApplication” then click "ok" Button. Then select the Project Template “Internet Application” then click the "Ok" button.

Step 2

Create a Proxy using “Add Service Reference” by right-clicking on MvcWcfApplication in the Solution Explorer.

(Note: Proxy is a class that converts a local request into a remote request.)

A new window will open. Paste the URL that you copied from the WcfMvc project into the Address TextBox then click "Go".

In other words, a proxy class is created successfully.

(Caution: if it has been created and in the project you can’t use the ServiceReference1 namespace Pl then don’t worry; it is a VS 2012 Automation Error. To solve it go to the Solution Explorer and select ServiceReference1 then right-click on it and select "Configure Service Reference". A new window will open uncheck the “Reuse types in referenced assemblies” checkbox.)

A serviceReference1 will be added into your project.

Step 3
Now add a new Controller then in Solution Explorer select "Controller" then right-click on it then select "Add Controller" (Ctrl+m, Ctrl+c).

Name it DbController. Click the "Add" button.

Step 4

Add the following code in the DbController.cs file.

Please build the project.

Step 5

Now right-click inside the Index() Method and select "Add View" (Ctrl+m, Ctrl+v) then click on “Create a Strongly Typed View” checkbox and select the Model Class we created “customer (MvcWcfApplication.ServiceReference1)” and select "Scaffold template List" and click the "Add" button.

Step 6

Run the application.

In the browser type : http://localhost:<Port>/Db

And see the results. All the data in the customer table is shown below using WCF Service.

If you like this then please comment below.


Saturday, 30 August 2014

DetailsView CRUD Operations

Hello friends

In this example, we will learn how to perform “CRUD Operations on Detailsview”

In this example, I am using Employee Table

Table script:

Source Code:

C# Code:

Detailsview1_DataBound : In this event when the details view is in 

Insert mode then I'm making EmpId textbox as disable this is why because 

in database i made EmpId column as identity means autoincrement. 

therefore there is no need to give Empid database will automatically get 

it so sending empid is useless.

Detailsview in Readonly Mode:

Detailsview in Edit Mode :

DetailsView in Insert Mode:

If you have any queries regarding this example or Detailsview control post ur comment or send mail to

Thank You