CodeProject

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”.

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.

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.

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.

Source Code

CRUD Operation in ASP.NET MVC 4 and AngularJS