Consuming Web Service In ASP.NET MVC

Background

 

Web Service still plays a very important role in today's applications in order to share information. Two or three years ago, I wrote a series of articles on ASP.NET Web Services, which was very popular, and due the this people were asking me to write an article on consumning Web Services in MVC Applications in my own simple words. So based on that requirment, I have decided to write about consuming Web Service in ASP.NET MVC article . In this article, we will learn how to consume Web Services in ASP.NET MVC applications.

 

Prerequisites

 

If you are new to ASP.NET Web Services, then please folllow my previous videos and articles on ASP.NET Web Services, using the links given below.

• How to create ASP.NET Web Service ( Video)
  
• Introduction to Web Service with Example in ASP.NET
• Consuming Web Service In an ASP.Net Web Application
• Session Management In Web Service
• Method Overloading In Web Services
• Web Service Method Attribute Properties

I hope, you have referred to the preceding articles. Now, let's create a simple ASP.NET MVC application to demonstrate this requirment .

 Step 1

 

Create MVC Application

1. "Start", followed by "All Programs" and select "Microsoft Visual Studio 2015".
   
   
2. Click "File", followed by "New" and click "Project". Select "ASP.NET Web Application Template", provide the Project; whatever name you wish, and click OK.
   
   
3. After clicking, the Window given below will appear. Choose an empty project template and check MVC option.
   
    

The preceding step creates the simple empty ASP.NET MVC Application without Model, View, and Controller. The Solution Explorer of the created Web Application will look as shown below.

 

 

 

Step 2

 

Adding Web Service reference

 

There are many ways to consume Web Services but in this article, we will learn to consume the Web Service by using the Add Service reference method.

 

Note

We are using Web Services, which are hosted in IIS. For more details, please watch my video by using the link given in the prerequisites section. The URL is given below, hosted by Service, which we are going to use in this application .

 

http://localhost:8080/PaymentWebService.asmx

 

Right-click on the created ASP.NET MVC Application and click Add Service Reference, as shown below. 

  

 

 

Now, after clicking on the preceding Service reference option, it will show the Window given below.

 

 

 

Now, click on advanced button. It shows the Window given below, which allows us to configure how the entities and output should behave. 

 

 

 

After configuring the approriate Service reference settings, click Add Web Service reference. It will show the Window given below.

 

 

 

As shown in the preceding image, our Web Service found two web  service methods which are highlighted with a red rectangle. Now provide the web service reference name as you wish and click on ok , it will add the Web Service reference in our created ASP.NET MVC application, as shown below.

 

 

 

As you can see in the preceding highlighted square section, the Web Service reference gets added into our created ASP.NET MVC application. Now, we are done with adding the Web Service reference.

 

Step 3

 

Add Controller Class

 

Now, let us add ASP.NET MVC controller, as shown in the screenshot given below.
 

 

After clicking Add button, it will show in the Window. Specify the Controller name as Home with suffix Controller. Now, let's modify the default code of Home controller. After modifying the code of Homecontroller class, the code will look, as shown below.

 

Homecontroller.cs 

using System.Linq;
using System.Web.Mvc;

namespace ConsumingWebServiceInASPNETMVC.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        [HttpGet]
        public JsonResult BookingStatus()
        {
            //Creating Web Service reference object
            HotepBookingPayReference.PaymentWebService objPayRef = new HotepBookingPayReference.PaymentWebService();

            //calling and storing web service output into the variable
            var BookingStatusInfo = objPayRef.RoomBookingStatus().ToList();
          //returning josn result
            return Json(BookingStatusInfo, JsonRequestBehavior.AllowGet);

        }


    }
}

I hope, you have gone through the same steps and understood about how to use and call ASP.NET Web Service.

 

Step 4

 

Create Empty View

 

Now, right click on Views folder of the created Application and create View, which is named by Index, to display hotel booking details from hosted ASP.NET Web Services, as shown below.

 

Now, click Add button. It will create a View named index. Now, modify the code and write the jQuery function to bind the HTML table, using JSON data after modifying the default code. The code snippet of the Index View looks, as shown below.

Index.cshtml

@{
    ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-1.10.2.intellisense.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $.getJSON("/Home/BookingStatus", function (data) {


            var tr;
            $.each(data, function (d,i) {


                tr = $('<tr/>');
                tr.append("<td>" + i.RoomId + "</td>");
                tr.append("<td>" + i.RooType + "</td>");
                tr.append("<td>" + i.BookingStatus + "</td>");
                $('#tblBookingStatus').append(tr);



            });

        });



    });


</script>
<div class="form-horizontal">

    <hr />
    <div class="form-group">
        <table id="tblBookingStatus" class="table table-responsive" style="width:400px">
            <tr>
                <th>
                    Room Id
                </th>
                <th>
                    Room Type
                </th>
                <th>
                    Booking Status
                </th>
            </tr>
            <tbody>

            </tbody>
            </table>



</div>
    </div>

The preceding View will display all hotel booking details. Now, we have done all the coding.

Step 5

 

Run the Application

 

After running the Application, the hotel booking details from hosted ASP.NET Web Service will look, as shown below.


I hope, from the above examples, you have learned how to consume ASP.NET Web Services in ASP.NET MVC Application.

Note

• Download the zip file of the published code to learn and start quickly.
• This article is just the guideline on how to consume ASP.NET Web Service in ASP.NET MVC Application.
• In this article, the optimization is not covered in depth; do it as per your skills.
  

Summary

I hope this article is useful for all the readers. If you have any suggestions, please mention them in the comments section.

Read more articles on ASP.NET

• Creating ASP.NET Web API REST Service (Article )
• Creating ASP.NET Web API REST Service ( Video )
• Publishing ASP.NET Web API REST Service Using File System Method
• Hosting ASP.NET Web API REST Service on IIS 10