Step1 : Create New Project
Go to File > New > Project > Select asp.net web application > Entry Application Name > Click OK >Select Empty Template > Check Web API CheckBox > > OK
Some Snap Shots of above procedure are given below.
Step2 : Add Database Table (Here Database Name : Exercice and Table- Customer).
Table Snap Shot is given below
Step3:Add ADO.NET Entity Model along with Entity Framework 6.0 Installation
Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.
Snap Shots of above procedure is given below
Above procedure will automatically install entity framework 6.0 after it.
Step 4:Enable Cors
Browser security prevents a web page from making AJAX requests to another domain. This restriction is called the same-origin policy, and prevents a malicious site from reading sensitive data from another site. However, sometimes you might want to let other sites call your web API.
Cross Origin Resource Sharing (CORS) is a W3C standard that allows a server to relax the same-origin policy. Using CORS, a server can explicitly allow some cross-origin requests while rejecting others. CORS is safer and more flexible than earlier techniques such as JSONP.
Lets see that how we can enable cors
So Now our Model is ready and cors are enabled.
Step5: Create new Empty WebAPI Controller and write following code (A simple method which is returning a simple HTTPResponse message)
In Home WebAPI Controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
namespace WebApi.Controllers{
public class HomeController : ApiController
{
public HttpResponseMessage GetData()
{
List CustomersList= new List();
using (ExerciseEntities1 db = new ExerciseEntities1())
{
CustomersList = db.Customers.ToList();
HttpResponseMessage responsemsg;
responsemsg = Request.CreateResponse(HttpStatusCode.OK, CustomersList);
return responsemsg;
}
}
}
}
In WebAPIConfig,cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
using System.Web.Http.Cors;
namespace WebApi
{
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
string origins = "*";
string headers = "*";
string methods = "GET,POST";
config.EnableCors(new EnableCorsAttribute(origins, headers, methods));
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
}
Run an see output(URL: http://localhost:49885/api/Home)
Now our web api is ready to access cross domains.
Now we will create a website which will use this newly created webapi.
Note: Keep WebAPI running at localhost and do not close webapi project in visual studio.
Step 5: Now We are going to create web client application.
Go to File > New > Project > Select asp.net web application > Enter Application Name > Click OK >Select MVC Template > OK
Step 6: Write new Action in Home Controller
public ActionResult UseWebApi()
{
return View();
}
Add View for this Action and write following code
@{
ViewBag.Title = "UseWebApi";
}
Part1 - Fetch data from WebApi using jquery
@section Scripts{ }
Output