---
title: "Calling Asp.Net Web API methods from Jquery in Asp.Net Mvc 4"  
description: "In this article, I’m explaining how to call the asp.net web api methods from jquery in asp.net mvc 4."  
author: "Sumit Kesarwani"  
published: 2014-08-23  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1476/calling-asp-dot-net-web-api-methods-from-jquery-in-asp-dot-net-mvc-4  
category: "asp.net mvc"  
tags: ["asp.net mvc"]  
reading_time: 2 minutes  

---

# 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](https://www.mindstick.com/interview/23392/what-are-the-advantages-of-using-asp-dot-net-web-api) methods from jquery

in [asp.net mvc](https://www.mindstick.com/articles/1571/start-with-asp-dot-net-mvc-4) 4.\

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

[CRUD Operation](https://www.mindstick.com/articles/12249/crud-operation-in-border-layout-on-grid) using Asp.Net Web API and Entity [Framework in Asp.Net](https://www.mindstick.com/forum/158854/what-is-the-purpose-of-the-razor-pages-framework-in-asp-dot-net-core) Mvc 4

##### Step 1

First create an asp.net mvc 4 [application](https://www.mindstick.com/articles/12824/calculator-application-in-android) like this:

![Calling Asp.Net Web API methods from Jquery in Asp.Net Mvc 4](http://www.mindstick.com/MindStickArticle/80b50e80-ba36-4f81-8ac8-f6422049267d/Images/image001.png)

![Calling Asp.Net Web API methods from Jquery in Asp.Net Mvc 4](http://www.mindstick.com/MindStickArticle/80b50e80-ba36-4f81-8ac8-f6422049267d/Images/image003.png)

##### Step 2

Create a [table in the database](https://www.mindstick.com/forum/157515/what-are-ddl-triggers-create-a-trigger-to-prevent-a-user-to-delete-a-table-in-the-database) named “Customer” like this:

![Calling Asp.Net Web API methods from Jquery in Asp.Net Mvc 4](http://www.mindstick.com/MindStickArticle/80b50e80-ba36-4f81-8ac8-f6422049267d/Images/image005.png)

##### 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](https://www.mindstick.com/articles/17/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

![Calling Asp.Net Web API methods from Jquery in Asp.Net Mvc 4](http://www.mindstick.com/MindStickArticle/80b50e80-ba36-4f81-8ac8-f6422049267d/Images/image007.png)

Now fill the form with the desired values

![Calling Asp.Net Web API methods from Jquery in Asp.Net Mvc 4](http://www.mindstick.com/MindStickArticle/80b50e80-ba36-4f81-8ac8-f6422049267d/Images/image009.png)

![Calling Asp.Net Web API methods from Jquery in Asp.Net Mvc 4](http://www.mindstick.com/MindStickArticle/80b50e80-ba36-4f81-8ac8-f6422049267d/Images/image011.png)

---

Original Source: https://www.mindstick.com/articles/1476/calling-asp-dot-net-web-api-methods-from-jquery-in-asp-dot-net-mvc-4

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.