Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CRUD operations in AngularJS and MVC5

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 338
    Comment on it

    This example demonstrate how to use AngularJS with MVC5 and WebAPI for CRUD operations(Read,Insert,Update,Delete).

     

    1. First step is to create table for CRUD operations.

     

    2. Create a new project in ASP.NET MVC 5. Select WebAPI while creating project.

     

     

    3. Create Model according to this table columns.

     

     public class AngularModel
        {
            public int Id { get; set;}
    
            [Display(Name = "FirstName")]
            [Required(ErrorMessage = "First name is mandatory")]
            [MaxLength(255, ErrorMessage = "First name is exceeding max size limit 255")]
            public string FirstName { get; set; }
    
            [Display(Name = "LastName")]
            [Required(ErrorMessage = "Last name is mandatory")]
            [MaxLength(255, ErrorMessage = "Last name is exceeding max size limit 255")]
            public string LastName { get; set; }
    
            [Display(Name = "Address")]
            [Required(ErrorMessage = "Address is mandatory")]
            [MaxLength(255, ErrorMessage = "Address is exceeding max size limit 255")]
            public string Address { get; set; }
    
            [Display(Name = "City")]
            [Required(ErrorMessage = "City is mandatory")]
            [MaxLength(255, ErrorMessage = "City is exceeding max size limit 255")]
            public string City { get; set; }
    
            public string Message { get; set; }
        }

     

    4. Create Common class in Models to store Result

     

      public enum Status
        {
            Ok=1,
            Failure=2,
            Error=4
        }
    
        public class Result
        {
            public Status Status { get; set; }
            public string Message { get; set; }
        }

     

    5. Create Repository folder in the root directory. Add a new class HomeRepository.cs.  Implement the methods to Insert, Update, Delete, Read 

     

     /// <summary>
            /// Insert new record
            /// </summary>
            /// <param name="model"></param>
            /// <returns></returns>
            public Result InsertAngularRecords(AngularModel model)
            {
                Result result = new Result();
                int response = 0;
                try
                {
                    using (SqlConnection con = new SqlConnection(ConnectionString))
                    {
                        using (SqlCommand cmd = new SqlCommand("InsertAngularRecords", con))
                        {
                            cmd.CommandType = CommandType.StoredProcedure;
    
                            cmd.Parameters.Add("@FirstName", SqlDbType.NVarChar).Value = model.FirstName;
                            cmd.Parameters.Add("@LastName", SqlDbType.NVarChar).Value = model.LastName;
                            cmd.Parameters.Add("@Address", SqlDbType.NVarChar).Value = model.Address;
                            cmd.Parameters.Add("@City", SqlDbType.NVarChar).Value = model.City;
                            if (con.State == ConnectionState.Closed)
                                con.Open();
                            response = cmd.ExecuteNonQuery();
                        }
                    }
                    if (response > 0)
                    {
                        result.Status = Status.Ok;
                        result.Message = "Record inserted successfully";
                    }
    
                    else
                    {
                        result.Status = Status.Failure;
                        result.Message = "Error Occurred";
                    }
                }
                catch (SqlException ex)
                {
                    result.Status = Status.Failure;
                    result.Message = ex.InnerException.Message;
                }
    
                catch (Exception ex)
                {
                    result.Status = Status.Failure;
                    result.Message = ex.InnerException.Message;
                }
    
                return result;
            }
    
            /// <summary>
            /// Get all records
            /// </summary>
            /// <returns></returns>
    
            public List<AngularModel> GetAllAngularRecords()
            {
                List<AngularModel> listModel = new List<AngularModel>();
                try
                {
                    using (SqlConnection con = new SqlConnection(ConnectionString))
                    {
                        using (SqlCommand cmd = new SqlCommand("GetAllAngularRecords", con))
                        {
                            cmd.CommandType = CommandType.StoredProcedure;
    
                            if (con.State == ConnectionState.Closed)
                                con.Open();
                            SqlDataReader dr = cmd.ExecuteReader();
                            while (dr.Read())
                            {
                                AngularModel model = new AngularModel();
                                model.Id = Convert.ToInt32(dr["ID"]);
                                model.FirstName = Convert.ToString(dr["FirstName"]);
                                model.LastName = Convert.ToString(dr["LastName"]);
                                model.Address = Convert.ToString(dr["Address"]);
                                model.City = Convert.ToString(dr["City"]);
                                listModel.Add(model);
                            }
                        }
                    }
                }
                catch (SqlException ex)
                {
                    AngularModel model = new AngularModel();
                    model.Message = ex.InnerException.Message;
                    listModel.Add(model);
                }
                catch (Exception ex)
                {
                    AngularModel model = new AngularModel();
                    model.Message = ex.InnerException.Message;
                    listModel.Add(model);
                }
                return listModel;
            }
    
            /// <summary>
            /// Get Record using Id
            /// </summary>
            /// <param name="ID"></param>
            /// <returns></returns>
            public AngularModel GetAngularRecordByID(int ID)
            {
                AngularModel model = new AngularModel();
                try
                {
                    using (SqlConnection con = new SqlConnection(ConnectionString))
                    {
                        using (SqlCommand cmd = new SqlCommand("GetAngularRecordByID", con))
                        {
                            cmd.CommandType = CommandType.StoredProcedure;
    
                            cmd.Parameters.Add("@ID", SqlDbType.Int).Value = ID;
                            if (con.State == ConnectionState.Closed)
                                con.Open();
                            SqlDataReader dr = cmd.ExecuteReader();
                            while (dr.Read())
                            {
                                model.Id = Convert.ToInt32(dr["ID"]);
                                model.FirstName = Convert.ToString(dr["FirstName"]);
                                model.LastName = Convert.ToString(dr["LastName"]);
                                model.Address = Convert.ToString(dr["Address"]);
                                model.City = Convert.ToString(dr["City"]);
                            }
                        }
                    }
                }
                catch (SqlException ex)
                {
                    model.Message = ex.InnerException.Message;
                }
                catch (Exception ex)
                {
                    model.Message = ex.InnerException.Message;
                }
                return model;
            }
    
            /// <summary>
            /// Update record
            /// </summary>
            /// <param name="model"></param>
            /// <returns></returns>
            public Result UpdateAngularRecord(AngularModel model)
            {
                Result result = new Result();
                int response = 0;
                try
                {
                    using (SqlConnection con = new SqlConnection(ConnectionString))
                    {
                        using (SqlCommand cmd = new SqlCommand("UpdateAngularRecord", con))
                        {
                            cmd.CommandType = CommandType.StoredProcedure;
                            cmd.Parameters.Add("@ID", SqlDbType.Int).Value = model.Id;
                            cmd.Parameters.Add("@FirstName", SqlDbType.NVarChar).Value = model.FirstName;
                            cmd.Parameters.Add("@LastName", SqlDbType.NVarChar).Value = model.LastName;
                            cmd.Parameters.Add("@Address", SqlDbType.NVarChar).Value = model.Address;
                            cmd.Parameters.Add("@City", SqlDbType.NVarChar).Value = model.City;
                            if (con.State == ConnectionState.Closed)
                                con.Open();
                            response = cmd.ExecuteNonQuery();
                        }
                    }
                    if (response > 0)
                    {
                        result.Status = Status.Ok;
                        result.Message = "Record updated successfully";
                    }
    
                    else
                    {
                        result.Status = Status.Failure;
                        result.Message = "Error Occurred";
                    }
                }
                catch (SqlException ex)
                {
                    result.Status = Status.Failure;
                    result.Message = ex.InnerException.Message;
                }
    
                catch (Exception ex)
                {
                    result.Status = Status.Failure;
                    result.Message = ex.InnerException.Message;
                }
    
                return result;
            }
    
            /// <summary>
            /// Delete existing record
            /// </summary>
            /// <param name="ID"></param>
            /// <returns></returns>
            public Result DeleteAngularRecord(int ID)
            {
                Result result = new Result();
                int response = 0;
                try
                {
                    using (SqlConnection con = new SqlConnection(ConnectionString))
                    {
                        using (SqlCommand cmd = new SqlCommand("DeleteAngularRecord", con))
                        {
                            cmd.CommandType = CommandType.StoredProcedure;
    
                            cmd.Parameters.Add("@ID", SqlDbType.Int).Value = ID;
                            if (con.State == ConnectionState.Closed)
                                con.Open();
                            response = cmd.ExecuteNonQuery();
                        }
                    }
                    if (response > 0)
                    {
                        result.Status = Status.Ok;
                        result.Message = "Record deleted successfully";
                    }
    
                    else
                    {
                        result.Status = Status.Failure;
                        result.Message = "Error Occurred";
                    }
                }
                catch (SqlException ex)
                {
                    result.Status = Status.Failure;
                    result.Message = ex.InnerException.Message;
                }
    
                catch (Exception ex)
                {
                    result.Status = Status.Failure;
                    result.Message = ex.InnerException.Message;
                }
    
                return result;
            }

     

    6. Create new folder Interfaces in Repository folder and add IHomeRepository.cs class

     

    interface IHomeRepository
        {
            Result InsertAngularRecords(AngularModel model);
    
            List<AngularModel> GetAllAngularRecords();
    
            AngularModel GetAngularRecordByID(int ID);
    
            Result UpdateAngularRecord(AngularModel model);
    
            Result DeleteAngularRecord(int ID);
        }

     

    7. Rename Controller folder to ControllerUI and create one new folder ControllerAPI.


    8. In Controller API,right click on this folder and add a new  WebAPI 2 Empty Controller  name HomeController.

     

    9. In HomeController under ControllerUI , add new method 

     

     public ActionResult AngularCrud()
            {
                return View();
            }

     

    10. In HomeController under ControllerAPI , call Repository method in WebAPI.

     

     public class HomeController : ApiController
        {
            private IHomeRepository iHomeRepository;
    
            public HomeController()
            {
                iHomeRepository = new HomeRepository();
            }
    		
    		   [HttpGet]
            public IHttpActionResult Get()
            {
                List<AngularModel> listModel = new List<AngularModel>();
                try
                {
                    listModel = iHomeRepository.GetAllAngularRecords();   // get all records
                }
                catch (Exception ex)
                {
                    return InternalServerError(ex);
                }
                if (listModel.Count > 0)
                    return Ok(listModel);
                else
                    return NotFound();
            }
    
            [HttpGet]
            public IHttpActionResult Get(int id)
            {
                AngularModel model = new AngularModel();
                try
                {
                    model = iHomeRepository.GetAngularRecordByID(id);  // get records by id
                }
                catch (Exception ex)
                {
                    return InternalServerError(ex);
                }
                return Ok(model);
            }
    
            [HttpPost]
            // POST api/<controller>  
            public IHttpActionResult POST(AngularModel model)
            {
                if (!ModelState.IsValid)
                {
                    return BadRequest(ModelState);
                }
    
                Result result = new Result();
                try
                {
                    result = iHomeRepository.InsertAngularRecords(model);   // insert new record
                }
                catch (Exception ex)
                {
                    //log exception
                     return InternalServerError(ex);
                }
                 return Ok(result);
            }
    
            [HttpPost]
            // POST api/<controller>/<action>/<id> 
            public IHttpActionResult Update(int id,AngularModel model)
            {
                if (!ModelState.IsValid)
                {
                    return BadRequest(ModelState);
                }
                Result result = new Result();
                try
                {
                    model.Id = id;
                    result = iHomeRepository.UpdateAngularRecord(model);   //update existing record
    
                }
                catch (Exception ex)
                {
                    //log exception
                    return InternalServerError(ex);
                }
    
                return Ok(result);
            }
    
            [HttpPost]
            // POST api/<controller>/<action>/<id> 
            public IHttpActionResult Delete(int id)
            {
                Result result = new Result();
                try
                {
                    result = iHomeRepository.DeleteAngularRecord(id);  // delete record
                }
                catch (Exception ex)
                {
                    //log exception
                    return InternalServerError(ex);
                }
                return Ok(result);
            }
    		
    	}

     

    11. To call this WebAPI from AngularSample.js file , we have to add routes map in WebApiConfig.cs  after  DefaultApi as:

     

    config.Routes.MapHttpRoute(
                    name: "DefaultApi",
                    routeTemplate: "api/{controller}/{id}",
                    defaults: new { id = RouteParameter.Optional }
                );
    
                config.Routes.MapHttpRoute(
                  name: "ActionAPI",
                  routeTemplate: "api/{controller}/{action}/{id}",
                  defaults: new { id = RouteParameter.Optional }
              );

     

    12. Create View and AngularSample.js file

     

    View:

    @{
        ViewBag.Title = "Angular Crud";
    }
    
    @Styles.Render("~/Content/css")
    <h2>Angular Crud</h2>
    
    <div ng-app="angularSample" id="body">
        <div ng-controller="angularController">
            <table class="table table-bordered table-hover">
                <tr>
                    <th>S.No.</th>
                    <th>FirstName</th>
                    <th>LastName</th>
                    <th>Address</th>
                    <th>City</th>
                    <th>Actions</th>
                </tr>
                <tr data-ng-repeat="employee in employees">
    
                    <td>{{ employee.Id }}</td>
    
                    <td>{{ employee.FirstName }}</td>
    
                    <td>{{ employee.LastName }}</td>
    
                    <td>{{ employee.Address }}</td>
    
                    <td>{{ employee.City }}</td>
    
                    <td>
                        <button id="edit" class="btn btn-link" ng-click="edit(employee)">Edit</button> /
                        <button id="delete" class="btn btn-link" ng-click="deleteRecord(employee)">Delete</button>
                    </td>
    
                </tr>
    
            </table>
    
            <br />
            <div>
                <input type="button" value="Add new" ng-click="ShowAdd()" class="btn btn-info" />
            </div>
            <br />
            <div ng-hide = "IsHidden">
                <form name="employeeForm" >
                    <table>
    
                        <tr style="display:none">
                            <td>Id</td>
                            <td><input type="text" ng-model="Id" class="form-control" />  </td>
                        </tr>
                        <tr>
                            <td>First name</td>
                            <td><input type="text" name="firstName" ng-model="FirstName" class="form-control form-group" ng-required="true"  />
                              </td>
                        </tr>
                        <tr>
                            <td> Last name</td>
                            <td><input type="text" ng-model="LastName" class="form-control form-group" ng-required="true"  />  </td>
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td><input type="text" ng-model="Address" class="form-control form-group" ng-required="true"  />  </td>
                        </tr>
                        <tr>
                            <td>City</td>
                            <td><input type="text" ng-model="City" class="form-control form-group" ng-required="true"  />  </td>
                        </tr>
                    </table>
                </form>
                <input type="button" id="btnAddUpdate" value="Add" ng-click="employeeForm.$valid && InsertRecord()"  class="btn btn-primary"/>
                <input type="button" value="Cancel" ng-click="HideAdd()" class="btn btn-danger" />
            </div>
    
        </div>
    </div>
    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
        <script src="~/Scripts/Angular/AngularSample.js"></script>
    }

     

    AngularSample.js:

    // Defining angularjs module
    var app = angular.module('angularSample', []);
    
    // Defining angularjs Controller 
    app.controller("angularController", function ($scope, $http) {
        ShowAllRecords();
        $scope.model;
        $scope.IsHidden = true;
        $scope.ShowAdd = function () {
            $("#btnAddUpdate").val("Add");
            //If DIV is hidden it will be visible 
            $scope.IsHidden = false;
            ClearFields();
           
        }
    
        $scope.HideAdd = function () {
            //If DIV is hidden it will be visible 
            $scope.IsHidden = true;
            ClearFields();
        }
    
        // Insert Record
        $scope.InsertRecord = function () {
            var response;
            if ($("#btnAddUpdate").val() == "Add") {
                response = $http({
                    method: 'POST',
                    url: '/api/Home',
                    data: JSON.stringify($scope.model)
                });
            }
            else {
                response = $http({
                    method: 'POST',
                    url: '/api/Home/Update/' + $scope.Id,
                    data: JSON.stringify($scope.model)   //pass model in json form
                });
            }
            response.success(function (data) {
                alert(data.Message);
                ShowAllRecords();
                ClearFields();
                $scope.IsHidden = true;
            });
            response.error(function (data) {
                alert("Error in inserting record");
            });
    
        }
    
        // Get Record By Id
        $scope.edit = function () {
            var response = $http({
                method: 'GET',
                url: '/api/Home/' + this.employee.Id,
            });
            response.success(function (data) {
                $scope.IsHidden = false;
                $scope.model = data;
                $("#btnAddUpdate").val("Update");
            });
            response.error(function (data) {
                alert("Error occurred");
            });
    
        }
    
        //Delete record
        $scope.deleteRecord = function () {
            //confirm dialog
            var r = confirm("Are you sure to delete record?");
            if (r != true) {
                return false;
            }
            response = $http({
                method: 'POST',
                url: '/api/Home/Delete/' + this.employee.Id
            });
    
            response.success(function (data) {
                alert(data.Message);
                ShowAllRecords();
            });
            response.error(function (data) {
                alert("Error in deleting record");
            });
        }
    
        //Show all records
        function ShowAllRecords() {
            var response = $http({
                method: 'GET',
                url: '/api/Home'
            });
            response.success(function (data) {
                $scope.employees = data;
            });
            response.error(function (data) {
                alert("Error occurred");
            });
        }
    
        //Clear all textboxes
        function ClearFields() {
            $scope.model.FirstName = "";
            $scope.model.LastName = "";
            $scope.model.Address = "";
            $scope.model.City = "";
        }
    });
    

    OUTPUT:

     

     

    Hope, this code will help you. Thanks

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: