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.

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:

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/ 

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.

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 😀 😀

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