AngularJS
is a powerful Javascript framework for dynamic web applications. We often use
AngularJS to develop single page application. Here we will explore how to
create CRUD (Create Read Update Delete) operation in ASP.NET MVC using Web API
and AngularJS.

Let’s
start with the database. Create table Person with the following table schema.

Once
our database is ready we will create application in Visual Studio 2015. Please
follow the steps to create MVC application.

Now
we have to add ADO.NET Entity Data Model. It’s a tool that enables point and
click modification in .edmx file. ADO.NET Entity Model designer allows you to visually
create and modify entities, mappings and relationship.

We
have a database “AdventureWorks” and we have created a table “Person”. By using
this tool we are going to create a model in our project.

4.Right
click Model folder to add ADO.NET Entity Data Model and name it as “PersonDataContext.edmx”

In
choose model contents window select EF Designer from Database. Then configure the
connection string as per your database. Once you created entity data model you
can see the .edmx file in model folder.

In
this demonstration we are going to use Repository pattern. The Repository layer
isolates Business layer from Data access layer. In ASP.NET MVC we uses Model layer
to interact with Data Access Layer and controller talks to the Controller to
perform the Data access operations. In MVC it is good practice to use Repository
pattern so if the Model layers need some breaking changes, it’s should have
minimum or no impact on Controller layer.

To
implement the Repository pattern, create new folder “Interface” in the root
directory. Right click Interface folder to add new class “IPersonRepository.cs”.
Copy the following code in that file.

interfaceIPersonRepository

{

IEnumerable<Person> GetAll();

Person Get(int id);

Person Add(Person item);

bool Update(Person item);

bool Delete(int id);

}

Create
another folder “Repositories” in the root directory. Right click Repositories
folder to add new class “PersonRepository.cs”. Here we have to write methods
for CRUD operation using Entity Framework.

publicclassPersonRepository:IPersonRepository

{

AdventureWorksEntities DB = newAdventureWorksEntities();

publicIEnumerable<Person> GetAll()

{

return DB.Person;

}

publicPerson Get(int id)

{

return DB.Person.Find(id);

}

publicPerson Add(Person item)

{

if (item == null)

{

thrownewArgumentNullException("item");

}

DB.Person.Add(item);

DB.SaveChanges();

return item;

}

publicbool Update(Person item)

{

if (item == null)

{

thrownewArgumentNullException("item");

}

var person = DB.Person.Single(a => a.Id
== item.Id);

person.FirstName = item.FirstName;

person.LastName = item.LastName;

person.Age = item.Age;

person.Gender = item.Gender;

person.City = item.City;

DB.SaveChanges();

returntrue;

}

publicbool Delete(int id)

{

Person item = DB.Person.Find(id);

DB.Person.Remove(item);

DB.SaveChanges();

returntrue;

}

}

Controller

Here
we have to create Web API controller. If you have worked with ASP.NET MVC, then
you are already familiar with controllers. They work similarly in Web API, but
controllers in Web API derive from the ApiController class instead of
Controller class. The first major difference you will notice is that actions on
Web API controllers do not return views, they return data.

Right
Click Controller folder to add WebAPI 2 controller class and name it as “PersonController.cs”.

Copy following code in “PersonController.cs”
file.

publicclassPersonController : ApiController

{

staticreadonlyIPersonRepository repository = newPersonRepository();

publicIEnumerable GetAllPersons()

{

return repository.GetAll();

}

publicPerson AddPerson(Person item)

{

return repository.Add(item);

}

[HttpPut]

publicIEnumerable UpdatePerson(int id, Person item)

{

item.Id = id;

if (repository.Update(item))

return
repository.GetAll();

else

returnnull;

}

publicbool DeletePerson(int id)

{

if (repository.Delete(id))

returntrue;

else

returnfalse;

}

}

Right click Controller
folder to create Controller “HomeController.cs” and copy the following code.

publicclassHomeController : Controller

{

// GET: Home

publicActionResult Person()

{

return View();

}

}

AngularJS

First
we have to create and configure AngularJS services. Right click “Scripts”
folder to add new javascript file “App.js”. Copy the following code.

var app =
angular.module('adventureModule',
[]);

app.factory('personService', function ($http) {

var factory = {};

factory.getallrecords = function () {

return $http.get('api/Person/GetAllPersons');

}

return factory;

});

Then
we have to create AngularJS controller to perform CRUD operation. Right click “Scripts”
folder to add new javascript file “Person.cs” and copy the following code.

Introduction to ASP.NET MVCASP.NET MVC provides an alternative approach to traditional ASP.NET web development often referred to as web forms by applying an architectural approach. The MVC or Model-View-Controller pattern splits an application into three separate and distinct layers, the Model layer, the View layer and the Controller layer, each with a very specific set of responsibilities

Dynamic Accordion menu or Vertical menu using jQuery in ASP.NET MVCNavigation menu is most important in any web applications. While developing web applications, I used to create stuff more interactive by using jQuery and CSS. It’s quite different to create dynamic navigation menu in ASP.NET MVC. Whether it’s a horizontal or vertical menu, the idea remains same. This article will show you how to create jQuery Accordion menu dynamically in ASP.NET MVC web applicati...

Adding a Controller in ASP.NET MVC 4This article will show you how to create a Controller in ASP.NET MVC 4 application. This Controller Layer is the responsible for controlling the application flow and interaction between the Model and the View. Controllers are the brains of an ASP.NET MVC application, requesting data from the Model layer and choosing the correct method of getting that data to the user.

Getting started with ASP.NET MVC 5 and AngularJS AngularJS is a powerful javascript framework for dynamic web applications. It is fully extensible for works well with other libraries. The resulting environment is expressive, readable and easy to develop.

CRUD operation in ASP.NET MVC using Web API and AngularJS AngularJS is a powerful Javascript framework for dynamic web applications. We often use AngularJS to develop single page application. Here we will explore how to create CRUD (Create Read Update Delete) operation in ASP.NET MVC using Web API and AngularJS.

Getting started with ASP.NET MVC 4 I hope you are getting excited to start building ASP.NET MVC 4 application. Visual Studio 2012 IDE is used to build MVC 4 application, also you can install MVC 4 components for Visual Studio 2010. This article will show you that how to start building your first ASP.NET MVC 4 application with internet application template.