Thursday, August 27, 2015

Insert Update Delete in Angular Js

Insert Update Delete in Angular Js

In this blog, I’m explaining how to insert, update, delete records in angularjs in an array.

Step 1:

First create an html page named “index.html”


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Crud In Angular </title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/App/Controller/EmpCtrl.js"></script>
</head>
<body ng-app="Angular.Employee" ng-controller="EmpCtrl">
    <div class="col-xs-8 col-xs-offset-2">
        <h2>Employee Details</h2>
        <table class="table">
            <tr>
                <th>Name</th>
                <th>City</th>
                <th>IsActive</th>
                <th>Actions</th>
            </tr>
            <tr ng-repeat="item in model">
                <td>{{item.Name}}</td>
                <td>{{item.City}}</td>
                <td><input type="checkbox" ng-model="item.IsActive" disabled /></td>
                <td>
                    <button class="btn btn-primary" ng-click="edit(item)">Edit</button>
                    <button class="btn btn-danger" ng-click="delete(item)">Delete</button>
                </td>
            </tr>
            <tr ng-if="showForm">
                <td>
                    <input type="text" placeholder="Name" class="form-control" ng-model="newData.Emp.Name" />
                </td>
                <td>
                    <input type="text" placeholder="City" class="form-control" ng-model="newData.Emp.City" />
                </td>
                <td>
                    <input type="checkbox" ng-model="newData.Emp.IsActive" />
                </td>
                <td>
                    <button type="button" class="btn btn-primary" ng-click="add()">Add</button>
                    <button type="button" class="btn btn-default" ng-click="IsShowForm(false)">Cancel</button>
                </td>
            </tr>
        </table>
        <button type="button" class="btn btn-primary" ng-click="IsShowForm(true)">Add New Record</button>
    </div>
</body>
</html>


 Step 2:

Now create a javascript file named “EmpCtrl.js” and write the below code in it:


angular.module('Angular.Employee', [])
.controller('EmpCtrl', ['$scope', function ($scope) {
    //Array to hold our data
    $scope.model = [];
    //To show/hide the form
    $scope.showForm = false;
    //To be used for new entry or edit an existing entry in an array
    $scope.newData = {
        Emp: {}
    };

    //Method to show/hide th form
    $scope.IsShowForm = function (IsShow) {
        $scope.showForm = IsShow;
        $scope.newData.Emp = {};
    }

    //Method to add a new entry or edit an existing entry in an array
    $scope.add = function () {

        var index = $scope.model.indexOf($scope.newData.Emp);
        if (index == -1) {
            $scope.model.push($scope.newData.Emp);
        }
        else {
            $scope.model[index] = $scope.newData.Emp;
        }
        $scope.showForm = false;
        $scope.newData.Emp = {};
    }

    //Method to fill up the existing entry in the form to be edited
    $scope.edit = function (item) {
        $scope.newData.Emp = item;
        $scope.showForm = true;
    }

    //Method to delete an entry
    $scope.delete = function (item) {
        var index = $scope.model.indexOf(item);
        $scope.model.splice(index, 1);
    }
}]);

Output

Run the application:



Click on Add New Record Button, this will show the form like this:



Now fill the form with appropriate values and click on Add button



This will add the data in the array, and your new entry will show here.



Now add another entry

Now click on edit of record “Mark” , you will see that form is shown up with the values of “Mark” record



Update the data and click on Add button, this will update the record in an array.



Now click on delete button of “Mark” record



This will delete the record.


MY PREVIOUS BLOGS :







Wednesday, August 26, 2015

Insert data In Angularjs And Asp.Net MVC 4

Insert data In Angularjs And Asp.Net MVC 4

In this blog, I’m explaining how to insert data in the database using angular js and asp.net mvc 4.

Step 1:

First create a table in database named “Student” like this:



Step 2:

Now create a basic asp.net mvc 4 application and add database connection like this:




Step 3:

Now add a controller named “HomeController” and add following code in it:


using CRUDInAngulaJsMvcApp.Database;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace CRUDInAngulaJsMvcApp.Controllers
{
    public class HomeController : Controller
    {
        AngularJsEntities db = new AngularJsEntities();

        public ActionResult Index()
        {
            return View(db.Students.ToList());
        }

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

        [HttpPost]
        public JsonResult Add(Student newStudent)
        {

            db.Students.Add(newStudent);
            db.SaveChanges();
            return Json(new { Status = "Successfull" }, JsonRequestBehavior.AllowGet);

        }
    }
}

Step 4:

Now add Index view and write the following code:


@model List<CRUDInAngulaJsMvcApp.Database.Student>
@{
    ViewBag.Title = "Index";
}

<h2>Student Details</h2>

@Html.ActionLink("Add", "Add", "Home")

<br />
@foreach(var item in Model)
{
    <div style="width:20%;display:inline-block;">
        <p>Name : @item.Name</p>
        <p>City : @item.City</p>
        <p>Course : @item.Course</p>
        <p>Mobile : @item.Mobile</p>
    </div>
  
}

Step 5:

Now add another view named “Add” and write the following code in it:

@{
    ViewBag.Title = "Add";
}
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/App/Add.js"></script>
<h2>Add</h2>

<form>
    <div ng-app="addModule" ng-controller="AddController">
        Name : <input type="text" ng-model="Name" />
        <br />
        <br />
        City : <select ng-model="City" ng-options="city as city for city in Cities"></select>
        <br />
        <br />
        Course : <select ng-model="Course" ng-options="course as course for course in Courses"></select>
        <br />
        <br />
        Mobile : <input type="text" ng-model="Mobile" />
        <br />
        <br />
        <input type="button" ng-click="add()" value="Add" />
    </div>
</form>

Step 6:

Now create a javascript file named “Add.js” and write the code in it:


//First create the angular module and named it "addModule"
var addModule = angular.module("addModule", []);

//Create a factory service
addModule.factory('AddRecordService', ['$http', function ($http) {
    return {

        //Get the courses list
        getCourse: function(){
            return ["Btech", "BCA", "BBA", "MTech", "MCA", "MBA"]
        },

        //Get the city list
        getCity: function(){
            return ["New York", "Los Angeles", "Paris", "Tokyo", "Sydney", "New Delhi"]
        },

        //This function will call the add action in the homecontroller and save the data in the database
        saveRecord : function(newStudent)
        {
            $http({
                url: '/Home/Add',
                method: 'POST',
                data : newStudent
            }).then(function (response) {
                if (response !== 'undefined' && typeof (response) == 'object') {
                    window.location.href = '/Home/Index';
                }
            });
        }
    };
}]);


//Create controller with the dependencies
addModule.controller('AddController', ['$scope', '$http', 'AddRecordService', function ($scope, $http, AddRecordService) {

    $scope.Courses = AddRecordService.getCourse();
    $scope.Cities = AddRecordService.getCity();
    $scope.showMessage = false;

    $scope.add = function () {
        var newStudent = {};
        newStudent["Name"] = $scope.Name;
        newStudent["City"] = $scope.City;
        newStudent["Course"] = $scope.Course;
        newStudent["Mobile"] = $scope.Mobile;

        AddRecordService.saveRecord(newStudent);
    }


}]);


Output

Run the application:


This will show the existing data in the table, click on add button:



Fill the form and click on Add button: