Consume Web API 2 using JQuery in MVC application

by

In this blog, we will see how to create a Web API in Visual Studio 2017 and consume this API from MVC application using jQuery.
Web API is the Microsoft open source technology for developing REST services based on HTTP protocol. ASP.Net Web API is a framework for building, consuming HTTP based service. The advantage of Web API is that it can be consumed by a wide range of clients like a web browser and mobile applications.

If you are new to Web API, then please read my earlier blog – ASP.Net Web API Tutorial

You might have created ASP.Net Web API projects and tested this API using a tool like postman. But here we will call API from MVC view page using JQuery code.

Let’s start the implementation by creating an empty project in Visual Studio 2017.

Select MVC and Web API as shown in below screen.

If you don’t want to create an empty project, then select Web API project and Add folders and core references for MVC.

Web API crud operation using JQuery

Once your Web API or Empty project is ready, add ADO.NET Entity Data Model.

Web API crud operation using JQuery
Web API crud operation using JQuery
Add Web API2 controller.
Either add an empty controller or Controller with actions, using Entity Framework.
Web API crud operation using JQuery
Web API crud operation using JQuery

Select Model class from Dropdown.

Web API crud operation using JQuery
Web API crud operation using JQuery

Your API controller code will look like this.

namespace WebApiPractice.Controllers
{
    public class ProductMastersController : ApiController
    {
        private ReviewAndShareEntities db = new ReviewAndShareEntities();
        // GET: api/ProductMasters
        public IQueryable<ProductMaster> GetProductMasters()
        {
            return db.ProductMasters;
        }
        // GET: api/ProductMasters/5
        [ResponseType(typeof(ProductMaster))]
        public IHttpActionResult GetProductMaster(int id)
        {
            ProductMaster productMaster = db.ProductMasters.Find(id);
            if (productMaster == null)
            {
                return NotFound();
            }
            return Ok(productMaster);
        }
        // PUT: api/ProductMasters/5
        [ResponseType(typeof(void))]
        public IHttpActionResult PutProductMaster(int id, ProductMaster productMaster)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }
            if (id != productMaster.id)
            {
                return BadRequest();
            }
            db.Entry(productMaster).State = EntityState.Modified;
            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!ProductMasterExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }
            return StatusCode(HttpStatusCode.NoContent);
        }
        // POST: api/ProductMasters
        [ResponseType(typeof(ProductMaster))]
        public IHttpActionResult PostProductMaster(ProductMaster productMaster)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }
            db.ProductMasters.Add(productMaster);
            db.SaveChanges();
            return CreatedAtRoute(“DefaultApi”, new { id = productMaster.id }, productMaster);
        }
        // DELETE: api/ProductMasters/5
        [ResponseType(typeof(ProductMaster))]
        public IHttpActionResult DeleteProductMaster(int id)
        {
            ProductMaster productMaster = db.ProductMasters.Find(id);
            if (productMaster == null)
            {
                return NotFound();
            }
            db.ProductMasters.Remove(productMaster);
            db.SaveChanges();
            return Ok(productMaster);
        }
        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }
        private bool ProductMasterExists(int id)
        {
            return db.ProductMasters.Count(e => e.id == id) > 0;
        }
    }
}

Now run your application by pressing F5 and set the URL format like this –

http://localhost:<port>/api/<controller_name>

Accessing above URL will give you below result.

Web API crud operation using JQuery
Once you confirm that Web API is working fine and ready to use, its time to add MVC controller.

Add a view and write below code.

<script src=”~/Scripts/jquery-1.10.2.min.js”></script>
<h2>Index</h2>
<input type=”button” id=”btnGetProducts” value=”Product List” />
<script>
    $(“#btnGetProducts”).click(function () {
        $.getJSON(“/api/ProductMasters/”, function (data) {
            $.each(data, function (key, val) {
                console.log(val);
            });
        });
    });
</script>

Once you click on the Product List button, you may see the result in the console by pressing F12 in Google Chrome, result will be in json format.
You can display the result in HTML elements or in an alert.

To display the product name only, you may use val.product as shown in below snippet.

<script>
    $(“#btnGetProducts”).click(function () {
        $.getJSON(“/api/ProductMasters/”, function (data) {
            $.each(data, function (key, val) {
                console.log(val.product);
            });
        });
    });
</script>
To display product name, cost and stock in plain text, use below code.
<script>
    $(“#btnGetProducts”).click(function () {
        $.getJSON(“/api/ProductMasters/”, function (data) {
            $.each(data, function (key, val) {
                console.log(val.product + ” “ +  val.cost + ” “ + val.stock);
            });
        });
    });
</script>
To get product details by id
$(“#btnGetById”).click(function () {
        $.getJSON(“/api/ProductMasters/1”, function (data) {
            console.log(data.product + ” “ + data.cost + ” “ + data.stock);
        });
    });
To create new record or post new data use below code:
$(“#btnAdd”).click(function () {
        var productMaster = “{product:’Lenovo’, cost:’18700′,stock:’26’}”;
        $.ajax({
            type: “POST”,
            contentType: “application/json,charset=utf-8”,
            url: “/api/ProductMasters/”,
            data: JSON.stringify(productMaster),
            success: function (res) {
                alert(‘pass’);
            },
            error: function (request, message, error) {
                alert(‘error’);
            }
        });
    });
To delete a row from table.
In below sample code it will call api to delete a record where id = 2. You can pass any record id to delete.
Note: type: “DELETE” is mandatory in this sample code.
$(“#btnDeleteByID”).click(function () {
        var id = 5;
        $.ajax({
            type: “delete”,
            contentType: “application/json,charset=utf-8”,
            url: “/api/ProductMasters/” + id,
            data: {},
            success: function () {
                alert(‘Success’);
            },
            error: function (request, message, error) {
                alert(‘Error’);
            }
        });
    });

Below sample code to call update API to update a record where id is 4.

$(“#btnUpdate”).click(function () {
        var id = 4;
        var products = “{product:’Lenovo’, cost:’18700′,stock:’26’}”;
        $.ajax({
            type: “put”,
            contentType: “application/json,charset=utf-8”,
            url: “/api/ProductMasters/” + id,
            data: JSON.stringify(products),
            success: function (res) {
                alert(‘pass’);
            },
            error: function (request, message, error) {
                alert(‘error’);
            }
        });
    });

Hope you like this.
Please share this on facebook and twitter.
Comment below, in case of any query.

Other blogs to read –

LINQ with an MVC Project
Interview Questions and Answers Series

Related posts:

  1. 7 Proven Strategies for Optimal API Design Practices

Leave a Comment

RSS
Facebook
Twitter
YouTube
YouTube
Instagram