Calling Asp.Net Web API methods from Jquery in Asp.Net Mvc 4

In this article, I’m explaining how to call the asp.net web api methods from jquery

in asp.net mvc 4.

If you want to learn about the asp.net web api, then you can read mu article here:

CRUD Operation using Asp.Net Web API and Entity Framework in Asp.Net Mvc 4

Step 1

First create an asp.net mvc 4 application like this:

Step 2

Create a table in the database named “Customer” like this:

Step 3

Add a class named “Customer” to the project and write the below code in it:

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Web;
 
namespace MvcWebApiWithJQuery.Models
{
    [Table("Customer")]
    public class Customer
    {
        [Key]
        public int CustID { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
        public string ContactNo { get; set; }
    }
}

Step 4

Add another class named “CustomerContext” to the project like this:

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
 
namespace MvcWebApiWithJQuery.Models
{
    public class CustomerContext : DbContext
    {
        public DbSet<Customer> Customers { get; set; }
    }
}

Step 5

Change the code of the “ValuesController” like this:

using MvcWebApiWithJQuery.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
 
namespace MvcWebApiWithJQuery.Controllers
{
    public class ValuesController : ApiController
    {
        CustomerContext db = new CustomerContext();
 
        // GET api/values
        public IEnumerable<Customer> Get()
        {
            return db.Customers.ToList();
        }
 
        // POST api/values
        public void Post(Customer customer)
        {
            try
            {
                db.Customers.Add(customer);
                db.SaveChanges();
 
            }
            catch { }
 
        }
 
 
    }
}

Step 6

Add a controller named “HomeController” to the project like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace MvcWebApiWithJQuery.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

Step 7

Add a view named “Index” to the project like this:

<html>
<head>
    <title>Asp.Net Web Api and JQuery
    </title>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script>
        $(function () {
            $('#btnSubmit').click(function () {
 
                var Customer = new Object();
                Customer.Name = $('#txtName').val();
                Customer.Address = $('#txtAddress').val();
                Customer.ContactNo = $('#txtContact').val();
 
                $.post("api/Values", Customer);
            });
 
            $.getJSON("api/Values", function (data) {
                $.each(data, function (index, value) {
                    $('#divRecordList').append('<li>'+value.Name+" "+value.Address+" " + value.ContactNo+'</li>');
                });
            });
 
          
        });
    </script>
</head>
<body>
    <div>
        <div id="divNewRecord">
            <div style="width: 100%; float: left;">
                <div style="width: 200px; float: left;">
                    <label>Name</label>
                </div>
                <div style="width: 200px; float: left;">
                    <input type="text" id="txtName" />
                </div>
            </div>
            <div style="width: 100%; float: left;">
                <div style="width: 200px; float: left;">
                    <label>Address</label>
                </div>
                <div style="width: 200px; float: left;">
                    <input type="text" id="txtAddress" />
                </div>
            </div>
            <div style="width: 100%; float: left;">
                <div style="width: 200px; float: left;">
                    <label>Contatct Number</label>
                </div>
                <div style="width: 200px; float: left;">
                    <input type="text" id="txtContact" />
                </div>
            </div>
            <div style="width: 100%; float: left;">
                <input type="button" value="Submit" id="btnSubmit" />
            </div>
        </div>
        <div style="margin-top: 30px;">
            Customer List
            <ul id="divRecordList">
            </ul>
        </div>
    </div>
</body>
</html>

Step 8

Now add the connection string in web.config file like this:

<connectionStrings>
      <add name="CustomerContext" connectionString="Data Source=Uttam-PC4;Initial Catalog=SumitTesting;user id=sa;password=mindstick;" providerName="System.Data.SqlClient"/>
  </connectionStrings>

Output

Now fill the form with the desired values

articles