Click here to Skip to main content
14,391,564 members

CRUD Operation in ASP.NET MVC 4 and AngularJS

Rate this:
4.88 (29 votes)
Please Sign up or sign in to vote.
4.88 (29 votes)
25 Sep 2015CPOL
This article will guide you to Create, Read, Update and Delete Data using Angular JS in ASP.NET MVC 4

Hi, Today we will create an ASP.NET MVC 4 Application using AngularJS and perform CRUD (Create, Read, Update and Delete) operations using SPA (Single Page Application).

Let’s create a new MVC Application by Opening Visual Studio 2013.

1. File –> New –> Project –> Select ASP.NET Web Application & give the name as “CRUD_AngularJS_ASPNET_MVC”.

CRUD Operation in ASP.NET MVC 4 and AngularJS

2. Click on OK will open a new window, select MVC template & click on Change Authentication will open a popup on this select “No Authentication” and click on OK, OK will close the windows and create a new MVC 4.0 template project.

CRUD Operation in ASP.NET MVC 4 and AngularJS

3. Create a new Model class with name as Book.cs and add below listed properties.

public class Book
    {
        [Key]
        public int Id { get; set; }
        public string Title { get; set; }
        public string Author { get; set; }
        public string Publisher { get; set; }
        public string Isbn { get; set; }
    }

4. Add new BookDBContext.cs class in the model folder and add below code.

public class BookDBContext : DbContext
    {
        public DbSet<Book> book { get; set; }
    }

5. As we need to add System.Data.Entity namespace for which we have to install EntityFramework, to install this Goto Tools -> NuGet Package Manager -> Package Manager Console. In the Package Manager Console type below command "Install-Package EntityFramework as shown below image.

CRUD Operation in ASP.NET MVC 4 and AngularJS

6. Now let's add code in HomeController to get, add, edit and delete book records. (delete existing code)

public class HomeController : Controller
    {
        // GET: Book
        public ActionResult Index()
        {
            return View();
        }

        // GET: All books
        public JsonResult GetAllBooks()
        {
            using (BookDBContext contextObj = new BookDBContext())
            {
                var bookList = contextObj.book.ToList();
                return Json(bookList, JsonRequestBehavior.AllowGet);
            }
        }
        //GET: Book by Id
        public JsonResult GetBookById(string id)
        {
            using (BookDBContext contextObj = new BookDBContext())
            {
                var bookId = Convert.ToInt32(id);
                var getBookById = contextObj.book.Find(bookId);
                return Json(getBookById, JsonRequestBehavior.AllowGet);
            }
        }
        //Update Book
        public string UpdateBook(Book book)
        {
            if (book != null)
            {
                using (BookDBContext contextObj = new BookDBContext())
                {
                    int bookId = Convert.ToInt32(book.Id);
                    Book _book = contextObj.book.Where(b => b.Id == bookId).FirstOrDefault();
                    _book.Title = book.Title;
                    _book.Author = book.Author;
                    _book.Publisher = book.Publisher;
                    _book.Isbn = book.Isbn;
                    contextObj.SaveChanges();
                    return "Book record updated successfully";
                }
            }
            else
            {
                return "Invalid book record";
            }
        }
        // Add book
        public string AddBook(Book book)
        {
            if (book != null)
            {
                using (BookDBContext contextObj = new BookDBContext())
                {
                    contextObj.book.Add(book);
                    contextObj.SaveChanges();
                    return "Book record added successfully";
                }
            }
            else
            {
                return "Invalid book record";
            }
        }
        // Delete book
        public string DeleteBook(string bookId)
        {

            if (!String.IsNullOrEmpty(bookId))
            {
                try
                {
                    int _bookId = Int32.Parse(bookId);
                    using (BookDBContext contextObj = new BookDBContext())
                    {
                        var _book = contextObj.book.Find(_bookId);
                        contextObj.book.Remove(_book);
                        contextObj.SaveChanges();
                        return "Selected book record deleted sucessfully";
                    }
                }
                catch (Exception)
                {
                    return "Book details not found";
                }
            }
            else
            {
                return "Invalid operation";
            }
        }
    }

7. Add database connection in web.config (Database will be created using EF once we will add book data first time)

Insert code here...  <connectionStrings>
    <add name="BookDBContext" providerName="System.Data.SqlClient" connectionString="Data Source=(LocalDb)\v11.0;Initial Catalog=aspnet-CrudInAj-201412222;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnet-CrudInAj-201412222.mdf" />
  </connectionStrings>

8. Now we have to add view markup using AngularJS directives (ng-model & ng-click) but before this we have to add AngularJS in our project using Package Manager Console (open PMC and write command "Install-Package AngularJS" will install AngularJS).

9. Go to Scripts and create a new folder as BookScripts, under BookScripts folder create 3 new js files as Controller.js, Module.js & Service.js.

10. Open BundleConfig.cs under App_Start and add below code.

bundles.Add(new ScriptBundle("~/bundles/angularJS").Include(
                     "~/Scripts/angular.js"));

bundles.Add(new ScriptBundle("~/bundles/customJS").Include(
                     "~/Scripts/BookScripts/Module.js",
                     "~/Scripts/BookScripts/Service.js",
                     "~/Scripts/BookScripts/Controller.js"));

11. Open Views -> Shared -> _Layout.cshtml and add @Script.Render block in the head tag of the page.

@Scripts.Render("~/bundles/angularJS")
@Scripts.Render("~/bundles/customJS")

12. Add ng-app AnularJS directive in the HTML section of the page and give name as mvcCRUDApp (removed About & Contact links). full page code is as below

<!DOCTYPE html>
<html ng-app="mvcCRUDApp">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Scripts.Render("~/bundles/angularJS")
    @Scripts.Render("~/bundles/customJS")
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Book Management", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                </ul>
                <p class="nav navbar-text navbar-right">Hello, @User.Identity.Name!</p>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>© @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

13. Open Module.js and define angular module as below

var app = angular.module("mvcCRUDApp", []);

14. Open Service.js and define functions for Add, Update, Get and Delete book functions.

app.service("crudAJService", function ($http) {

    //get All Books
    this.getBooks = function () {
        return $http.get("Home/GetAllBooks");
    };

    // get Book by bookId
    this.getBook = function (bookId) {
        var response = $http({
            method: "post",
            url: "Home/GetBookById",
            params: {
                id: JSON.stringify(bookId)
            }
        });
        return response;
    }

    // Update Book 
    this.updateBook = function (book) {
        var response = $http({
            method: "post",
            url: "Home/UpdateBook",
            data: JSON.stringify(book),
            dataType: "json"
        });
        return response;
    }

    // Add Book
    this.AddBook = function (book) {
        var response = $http({
            method: "post",
            url: "Home/AddBook",
            data: JSON.stringify(book),
            dataType: "json"
        });
        return response;
    }

    //Delete Book
    this.DeleteBook = function (bookId) {
        var response = $http({
            method: "post",
            url: "Home/DeleteBook",
            params: {
                bookId: JSON.stringify(bookId)
            }
        });
        return response;
    }
});

15. Open Controller.js and add functions for GetAllBooks(), EditBook(), AddUpdateBook(), DeleteBook() & ClearFields()

app.controller("mvcCRUDCtrl", function ($scope, crudAJService) {
    $scope.divBook = false;
    GetAllBooks();
    //To Get all book records  
    function GetAllBooks() {
        debugger;
        var getBookData = crudAJService.getBooks();
        getBookData.then(function (book) {
            $scope.books = book.data;
        }, function () {
            alert('Error in getting book records');
        });
    }

    $scope.editBook = function (book) {
        var getBookData = crudAJService.getBook(book.Id);
        getBookData.then(function (_book) {
            $scope.book = _book.data;
            $scope.bookId = book.Id;
            $scope.bookTitle = book.Title;
            $scope.bookAuthor = book.Author;
            $scope.bookPublisher = book.Publisher;
            $scope.bookIsbn = book.Isbn;
            $scope.Action = "Update";
            $scope.divBook = true;
        }, function () {
            alert('Error in getting book records');
        });
    }

    $scope.AddUpdateBook = function () {
        var Book = {
            Title: $scope.bookTitle,
            Author: $scope.bookAuthor,
            Publisher: $scope.bookPublisher,
            Isbn: $scope.bookIsbn
        };
        var getBookAction = $scope.Action;

        if (getBookAction == "Update") {
            Book.Id = $scope.bookId;
            var getBookData = crudAJService.updateBook(Book);
            getBookData.then(function (msg) {
                GetAllBooks();
                alert(msg.data);
                $scope.divBook = false;
            }, function () {
                alert('Error in updating book record');
            });
        } else {
            var getBookData = crudAJService.AddBook(Book);
            getBookData.then(function (msg) {
                GetAllBooks();
                alert(msg.data);
                $scope.divBook = false;
            }, function () {
                alert('Error in adding book record');
            });
        }
    }

    $scope.AddBookDiv = function () {
        ClearFields();
        $scope.Action = "Add";
        $scope.divBook = true;
    }

    $scope.deleteBook = function (book) {
        var getBookData = crudAJService.DeleteBook(book.Id);
        getBookData.then(function (msg) {
            alert(msg.data);
            GetAllBooks();
        }, function () {
            alert('Error in deleting book record');
        });
    }

    function ClearFields() {
        $scope.bookId = "";
        $scope.bookTitle = "";
        $scope.bookAuthor = "";
        $scope.bookPublisher = "";
        $scope.bookIsbn = "";
    }
    $scope.Cancel = function () {
        $scope.divBook = false;
    };
});

16. At last open Views -> Home -> Index.cshtml and remove existing code and add code as below

@{
    ViewBag.Title = "Home Page";
}
<div ng-controller="mvcCRUDCtrl">
    <div class="divList">
        <p><b><i>Book List</i></b></p>
        <table class="table table-hover">
            <tr>
                <td><b>ID</b></td>
                <td><b>Title</b></td>
                <td><b>Author</b></td>
                <td><b>Publisher</b></td>
                <td><b>Isbn</b></td>
                <td><b>Action</b></td>
            </tr>
            <tr ng-repeat="book in books">
                <td>
                    {{book.Id}}
                </td>
                <td>
                    {{book.Title}}
                </td>
                <td>
                    {{book.Author}}
                </td>
                <td>
                    {{book.Publisher}}
                </td>
                <td>
                    {{book.Isbn}}
                </td>
                <td>
                    <span ng-click="editBook(book)" class="btn btn-primary">Edit</span>
                    <span ng-click="deleteBook(book)" class="btn btn-danger">Delete</span>
                </td>
            </tr>
        </table>
    </div>
    <span ng-click="AddBookDiv()" class="btn btn-default" >
        Add Book
    </span>
    <div ng-show="divBook">
        <p class="divHead"></p>
        <table class="table">
            <tr>
                <td><b><i>{{Action}} Book</i></b></td>
                <td></td>
                <td></td>
                <td></td>
            </tr> 
            <tr>
                <td><b>Id</b></td>
                <td>
                    <input type="text" disabled="disabled" ng-model="bookId" />
                </td>
                <td><b>Title</b></td>
                <td>
                    <input type="text" ng-model="bookTitle" />
                </td>
            </tr>           
            <tr>
                <td><b>Author</b></td>
                <td>
                    <input type="text" ng-model="bookAuthor" />
                </td>
                <td><b>Publisher</b></td>
                <td>
                    <input type="text" ng-model="bookPublisher" />
                </td>
            </tr>
            <tr>
                <td><b>Isbn</b></td>
                <td>
                    <input type="text" ng-model="bookIsbn" />
                </td>
                <td></td>
                <td >
                    <input type="button" class="btn btn-default" value="Save" ng-click="AddUpdateBook()" />
                    <input type="button" class="btn btn-danger" value="Cancel" ng-click="Cancel()" />
                </td>
            </tr>
        </table>        
    </div>
</div>

17. Run the application and you can Create, Read, Update & Delete book details.

CRUD Operation in ASP.NET MVC 4 and AngularJS

 

Source Code

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Rajneesh Kumar Verma
Architect
India India
Microsoft Certified Solutions Associate - Cloud Platform || MCSD - App Builder || MCSA - Web Applications || Microsoft Community Contributor (MCC)
A fond lover of Microsoft .NET Technologies including ASP.NET MVC, AZURE etc.

Comments and Discussions

 
QuestionNot working. Pin
shalianimesh7-Jul-17 1:53
Membershalianimesh7-Jul-17 1:53 
Questiongetting error while running Pin
rishidubey31-Jan-17 21:55
Memberrishidubey31-Jan-17 21:55 
Questionerror in updating Pin
Gyanendra Pratap Singh15-Oct-16 6:00
MemberGyanendra Pratap Singh15-Oct-16 6:00 
QuestionRefresh data after Add Pin
klaydze5-Sep-16 0:46
Memberklaydze5-Sep-16 0:46 
Questionreturn Confirm on delete Pin
touinta3-Jul-16 22:47
Membertouinta3-Jul-16 22:47 
AnswerRe: return Confirm on delete Pin
touinta4-Jul-16 0:29
Membertouinta4-Jul-16 0:29 
GeneralRe: return Confirm on delete Pin
Rajneesh Kumar Verma6-Jul-16 4:43
professionalRajneesh Kumar Verma6-Jul-16 4:43 
GeneralRe: return Confirm on delete Pin
touinta6-Jul-16 22:42
Membertouinta6-Jul-16 22:42 
QuestionRequire a password to enter to the application Pin
NiceStepUp5-Mar-16 0:16
MemberNiceStepUp5-Mar-16 0:16 
AnswerRe: Require a password to enter to the application Pin
Rajneesh Kumar Verma3-May-16 2:34
professionalRajneesh Kumar Verma3-May-16 2:34 
QuestionProblem getting when i am trying to run the program of CRUD Pin
Member 121953114-Mar-16 3:15
MemberMember 121953114-Mar-16 3:15 
QuestionNot Working Pin
Member 1073422724-Feb-16 21:16
MemberMember 1073422724-Feb-16 21:16 
AnswerRe: Not Working Pin
Rajneesh Kumar Verma3-May-16 2:33
professionalRajneesh Kumar Verma3-May-16 2:33 
GeneralMy vote of 5 Pin
M Rayhan3-Feb-16 22:46
MemberM Rayhan3-Feb-16 22:46 
QuestionHi, error getting book record Pin
wesleygch4-Jan-16 4:12
Memberwesleygch4-Jan-16 4:12 
AnswerRe: Hi, error getting book record Pin
Rajneesh Kumar Verma3-May-16 2:32
professionalRajneesh Kumar Verma3-May-16 2:32 
GeneralRe: Hi, error getting book record Pin
Lokesh Zende10-Jan-18 1:19
professionalLokesh Zende10-Jan-18 1:19 
SuggestionMultiple services Pin
Nitij28-Sep-15 22:20
professionalNitij28-Sep-15 22:20 
QuestionGood Article Pin
Santhakumar M25-Sep-15 19:25
professionalSanthakumar M25-Sep-15 19:25 
GeneralGood Article with a small mistake Pin
Soulfly23-Sep-15 2:30
MemberSoulfly23-Sep-15 2:30 
GeneralGood article Pin
Member 870466122-Sep-15 1:36
MemberMember 870466122-Sep-15 1:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Technical Blog
Posted 21 Sep 2015

Stats

99K views
42 bookmarked