Creating Entity Framework in ASP.NET Web API, Create Get and Create methods through AJAX code

PostAjax :

The ASP.NET web API is a framwwork that makes it easy to build HTTP services that reach a broad range of clients, including browsers and mobile devices.

The ASP.NET Web API is an ideal platform for building Restful applications on the .NET Framework. Referred from “Microscft.com”.

Why to use the Web API

Currently most mobile devices, browsers and tablets are the medium for accessing most of the internet and in this also people are using mobile apps the most and to provide data to apps we are now going to use the Microsoft Web API

When to use it

If you want to expose the data/information of your application to your clients and other people then that other people can use your data and interact with the data/information can use this Web API

For example, a mobile application requires a service.

HTML 5 requires a service.
Desktop PC and tablets require services.

Currently most device apps require Web API services.

The ASP.NET Framework leverages both web standards such as HTTP, JSON and XML and it provides a simple way to build and expose REST based data services.

Some core concepts of ASP.NET MVC are similar to the Web API such as routing and controllers.

Create ASP.NET Web API:

Right click on solution -> Add -> New Projects -> web -> ASP.NET Web Application -> Asp.net WebApi(Project name) -> ok. Then display one dialog box is shown below

In above diagram we select Web API in Asp.Net 4.5 Template u click ok the project create like this:

Create Entity framework:

Right click on Models -> Add -> New Item after click new item its display one dialog box in that we select data under Visual C# then click ADO.NET Entity Data Model like below.

After give the name of entity model click add it will show one window like below

Click next button, after that new connection and enter your sql credential.

After that click Ok.

And then click next and select your table.

And then click finish button,

Build it once. after build the application we add one controller in controller folder.

After click the add button open dialog box below

Above dialog box select model class and data context class then click add button

In that EmployeeModelController.cs page we take first method (GetEmployeeModels). 

Now we create HTML file using ajax validation, now we go for HomeController.cs file write code like below

        public ActionResult GetApiAllData()
        {
            ViewBag.Title = "Home Page";
            return View();
        }

Add View for GetApiAllData method. copy below code in GetApiAllData.cshtml page 


    <table id="table-1">
        <thead>
            <tr>
                <th>
                    Employee Id
                </th>
                <th>
                    EmployeeName
                </th>
                <th>
                    EmployeeSalary
                </th>
                <th>
                    DeptId
                </th>
            </tr>
        </thead>
    </table>
<br />
<br />
<form>
   
    EmpName <input type="text" name="EmpName" id="EmpName" /><br />
    EmpSalary <input type="text" name="EmpSalary" id="EmpSalary" /><br />
    Deptid <input type="text" name="EmpDeptId" id="EmpDeptId" /><br />
    <p id="Save">Click me</p>
</form>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
        onload = function showdata() {
            $.ajax({
                url: "http://localhost:60497/api/EmployeeModels",
                type: "Get",
                datatype: "json",
                success: function (result) {
                    alert(result);
                    $.each(result, function (i, key) {

                        $("#table-1 tr:last").after('<tr><td>' + key.Empid + '</td><td>' + key.EmpName + '</td><td>' + key.EmpSalary + '</td></tr>' + '</td><td>' + key.DeptId + '</td></tr>');
                    });
                }
            });
        }

        $('#Save').click(function () {
            var url = "http://localhost:60497/api/EmployeeModels";
            var EmpName = $("#EmpName").val();
            var EmpSalary = $("#EmpSalary").val();
            var DeptId = $("#EmpDeptId").val();
            $.post(url, { EmpName: EmpName, EmpSalary: EmpSalary, DeptId: DeptId }, function (data) {
                $("#msg").html(data);
            });
        })
    </script>