Display Data From WCF To ASP.NET

Hey there,

I hope that you are able to understand the concept of using WCF  and if you have questions, drop it as a comment. For this post, we’ll concentrate mostly on the website project which we created in the previous post. Our aim is to display result shown in the WCF Test Client into our front-end/website.

Create Home Controller

I hope that you are familiar with the concept of MVC as I am going to refer some terms such as Razor, Controller, View and Model through the post. Well if you are new to ASP.Net, i would suggest you to have a quick look on http://www.asp.net/mvc so as to have an idea of what’s going on here.

In your website project, Right-Click on the Controllers folder and Create a new controller name HomeController with an Empty MVC Controller Template. After the controller has been created, you will be automatically redirected to the Controller codes.

We have created a method for the homepage but homepage is not found in the solution. In order to create the page or View, Right-click on the  line where ActionResult is written and click Add View then once again click Add.

MVC_6
Create View

If you want to verify that your view is successfully created, In your solution explorer, locate View -> Home -> Index.cshtml. The View like Index.cshtml is used to write HTML codes and as we are using Razor, this will allow us to write some simple logic directly inside the HTML codes hence making the website easier to maintain.

Access Service Reference in controller method

Back to our HomeController file, we are now going to tweak the Index method. The method will be used to call the data from the Web Service and send it to the Index page.

First we are going to create an object of  Service Reference named DataService in our method:

ServiceReference1.Service1Client DataService = new ServiceReference1.Service1Client();

From the above line of code, we can deduce that

  • ServiceReference1: Name of Service Reference in our website project
  • Service1Client: Name of Service client in our WCF project (Service1.svc)
  • DataService: Variable defined in the controller.

After creating the object, we are going to call the model from the WCF project in the website project. Actually you can call the model directly or you can define again the model in the website project. It’s up to you ;).

ServiceReference1.TvShows TvShowsLists = new ServiceReference1.TvShows();

We have created an object TvShowsLists having TvShows Attributes which were defined in the WCF project.

Finally we tell our web service to insert all result in the TvShowsList:

TvShowsLists = DataService.DisplayTvShows();

In order to make ActionResult to send the TvShowsLists to the Index.cshtml page, we are going to modify the return View().

Replace the current one with this:

return View(TvShowsLists);

Finally, your codes should be like in the screenshot below:

MVC_7
HomeController.cs

Logic in Index page

In the Index.cshtml, we are going to call the same model defined in our controller. This is written in the first line itself.

@model mywebsite.ServiceReference1.TvShows

When we return the view in the controller, it was attached with a list of TvShows so in the page we are going to specify which model to take. The above code is know as Razor Syntax which is said to overtake HTML5 very soon. After this step, we go back to basic html which is creating a table. I am going to use bootstrap just to make it quicker.

For Bootstrap: https://www.bootstrapcdn.com/ 

MVC_8
Index.cshtml

I have created my table in the HTML and as you can see there is commented section. This section will be used to display the result using a Razor loop.

The codes below shows how the result are populated:

@for (int i = 0; i < Model.TVID.Count(); i++)
{
<tr>

<td>@Model.TvShowsName[i]</td>

<td>@Model.Ratings[i]</td>

</tr>

}

I have used Razor For Loop and based on the count of TVID, the result will be populated. The use @Model is to get one of the property of the model and display it as HTML.

MVC_9
Index.cshtml

Time to TEST

We have arrived to the last part of this post. All you need to do is start the project and your WCF Test Client but if your project is not built due to some error , kindly read the post once again to make sure you have not missed any steps.

AND VOILA 😀 😀

MVC_10

If you have been able to get the same result as above, Congrats to you 😀 as you have managed to know the basic of using WCF with ASP.Net. 😀 😀

Whats Next?

In my future posts, i will demo you how to add another property from the WCF Project and other logic without writing huge amount of codes in the controller

Good Luck 

Kind Regards 

Harshu K Gaonjur 

 

Connecting Your WCF To ASP.Net Website

Hello,

If you have been reading this tutorial from the beginning , you might know have idea whats this post will be on, if not, just have a quick look on the first post and follow the remaining posts. After we have created the wcf and enhanced its performance, now we would like to showcase the results in a real website. For today, we’ll connect our web service to a ASP.NET MVC 4 website but it is also possible to other website architecture.

Create Your ASP.NET Project

Fire up your visual Studio and create a new project based on Asp.Net MVC 4 or you can open the existing solution and add another new project. Thats up to you 🙂

Mvc_1
Creating MVC 4 Project

For the next step, I will be using a basic MVC 4 project and Razor as View Engine. Here also you can choose other type to define your project.

MVC_2
Define your template

Connecting Your Web Service

After creating your project, we have arrived at a crucial step, Don’t worry, if you have been following well, this will go as well.

You will need to make sure that your WCF Test Client is running. If you are stuck when trying to run your test client, refer to this post to guide you. Back your website project, Right-Click on your Project and navigate to Add -> Service Reference.

You will have another window pop up like below:

MVC_3
Add Service Reference

In the address textbox, you will have to add your wcf link. The latter appears in your WCF Test Client. Navigate to the test client, right – copy the link and paste in the address field.

MVC_4
WCF Test Client URL 

Once you have the url in the field  (e.g: http://localhost:7482/Service1.svc) , click on Go and you will notice Service1 is shown. You can either rename the namespace or leave it to the default. Click Ok to allow the connection. Make sure your WCF Test Client stays running all the time!!!

MVC_5
Service Reference Added

 

If you have successfully connected the web service to your website, it means that you only need to display the data from the wcf to the website. No trouble, I’ll show you in the next post which will be a short one. We will use bootstrap to make our website more interactive. 😉

Good Luck 

Kind Regards 

Harshu K Gaonjur