Consuming Web Service In ASP.NET MVC

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.

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.

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.

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

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