Home > DeveloperSection > Beginner > Calling Asp.Net Web API methods from Jquery in Asp.Net Mvc 4

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


ASP.NET MVC ASP.NET MVC 
Ratings:
0 Comment(s)
 3052  View(s)
Rate this:

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:

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

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

 

Step 2

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

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

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 { getset; }

        public string Name { getset; }

        public string Address { getset; }

        public string ContactNo { getset; }

    }

}

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 { getset; }

    }

}

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="width100%floatleft;">

                <div style="width200pxfloatleft;">

                    <label>Name</label>

                </div>

                <div style="width200pxfloatleft;">

                    <input type="text" id="txtName" />

                </div>

            </div>

            <div style="width100%floatleft;">

                <div style="width200pxfloatleft;">

                    <label>Address</label>

                </div>

                <div style="width200pxfloatleft;">

                    <input type="text" id="txtAddress" />

                </div>

            </div>

            <div style="width100%floatleft;">

                <div style="width200pxfloatleft;">

                    <label>Contatct Number</label>

                </div>

                <div style="width200pxfloatleft;">

                    <input type="text" id="txtContact" />

                </div>

            </div>

            <div style="width100%floatleft;">

                <input type="button" value="Submit" id="btnSubmit" />

            </div>

        </div>

        <div style="margin-top30px;">

            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

 

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

 

Now fill the form with the desired values

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

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

 


Don't want to miss updates? Please click the below button!

Follow MindStick