Post
Ask Question

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 this people were asking me to write an article on consuming Web Services in MVC Applications in my own simple words. So based on that requirement, I have decided to write about consuming Web Services 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 follow my previous videos and articles on ASP.NET Web Services, using the links given below.

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

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 the MVC option.
    ASP.NET
  4. The preceding step creates the simple empty ASP.NET MVC Application without a Model, View, and Controller. The Solution Explorer of the created Web Application will look as shown below.
    MVC Application

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.

Add Service

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

Service

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

Advanced button

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

Web Service reference

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.

Service reference

As you can see in the preceding highlighted square section, the Web Service reference gets added to 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 the ASP.NET MVC controller, as shown in the screenshot given below.

Add Controller Class

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

Home controller. 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 json result
            return Json(BookingStatusInfo, JsonRequestBehavior.AllowGet);
        }
    }
}

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

Step 4. Create Empty View

Now, right-click on the 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.

Empty View

Index

Now, click the 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>

<p class="form-horizontal">
    <hr />
    <p 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>
    </p>
</p>

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.

Application

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

Note

  • Download the zip file of the published code to learn and start quickly.
  • This article is just a guideline on how to consume ASP.NET Web Service in ASP.NET MVC Applications.
  • 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


Similar Articles