Search This Blog

Thursday 11 January 2018

CRUD Operations in AngularJS Using Entity Framework

Step 1:- Open Visual Studio 2015 => Goto File Menu => New => Project...

Step 2:- In the Installed Templates list, select Visual C# => Web

Step 3:- Select ASP.Net Web Application from the Web list => Type AngularJSCRUDWithEntity in the Name box and click OK

Step 4:- Select Empty template from ASP.NET Templates List and Checked MVC check box under Add folders and core references for:



Step 5:- Right-click App_Data folder in Solution Explorer => Add => Click New Items...

Step 6:- Select SQL Server Database from the Data list = > Type ProductDatabase.mdf in the Name box and click OK



Step 7:- Double-click ProductDatabase.mdf in Solution Explorer to open ProductDatabase



Step 8:- Right-click Tables folder => Click Add New Table

Step 9:- Copy Past following Script

CREATE TABLE [dbo].[Product] (
    [ProductId]     INT IDENTITY (1, 1) NOT NULL,
    [ProductName]   VARCHAR (50)    NOT NULL,
    [ProductCode]   VARCHAR (50)    NOT NULL,
    [ProductQty]    INT             NOT NULL,
    [ProductWeight] DECIMAL (18, 2) NOT NULL,
    [ProductDesc]   VARCHAR (500)   NULL,
    PRIMARY KEY CLUSTERED ([ProductId] ASC)
);

Step 10:- Click Update => Click Update Database




Step 11:- Open Server Explorer => Right-click Tables folder => Click Refresh =>Expand Tables folder



Step 12:- Right-click Models folder in Solution Explorer => Add => Click New Items...

Step 13:- Select ADO.NET Entity Data Model from the Data list = > Type ProductDataEntity in the Name box and click Add



Step 14:- Select EF Designer from database => Click Next



Step 15:- Click Next => Select Entity Framework 6.x Radio button => Click Next




Step 16:- Expand Tables => Checked Product check box => Click Finish



Step 17:- Right-click Controllers folder in Solution Explorer => Add => Click Controllers...

Step 18:- Select MVC 5 Controller – Empty from the controller list = > Click Add



Step 19:- Type ProductController in the Controller name box and click Add

To perform CRUD operation using Entity Framework, basic activity done successfully. Now implement the CRUD functionality in Product Controller step by step.

Step 1:- Replace Product Controller code with following code

using AngularJSCRUDWithEntity.Models;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web.Mvc;

namespace AngularJSCRUDWithEntity.Controllers
{
    public class ProductController : Controller
    {
        ProductDatabaseEntities sde = null;

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

        // GET: All Product
        public JsonResult GetAllProduct()
        {
            List<Product> product = null;
            using (sde = new ProductDatabaseEntities())
            {
                product = sde.Products.ToList();
            }
            return Json(product, JsonRequestBehavior.AllowGet);
        }

        // GET: Product By Id
        public JsonResult GetProductById(int prodId)
        {
            Product product = null;
            using (sde = new ProductDatabaseEntities())
            {
                product = sde.Products.SingleOrDefault(m => m.ProductId == prodId);
            }
            return Json(product, JsonRequestBehavior.AllowGet);
        }

        // POST: Add Product
        public string InsertProduct(Product p)
        {
            string sFlag = string.Empty;
            if (p != null)
            {
                using (sde = new ProductDatabaseEntities())
                {
                    sde.Entry(p).State = EntityState.Added;
                    int x = sde.SaveChanges();

                    if (x > 0)
                    {
                        sFlag = "Product Added Successfully";
                    }
                    else
                    {
                        sFlag = "Product Not Added. Please Try Again.";
                    }
                }
            }
            return sFlag;
        }

        // POST: Update Product
        public string UpdateProduct(Product p)
        {
            using (sde = new ProductDatabaseEntities())
            {
                sde.Entry(p).State = EntityState.Modified;
                int x = sde.SaveChanges();

                if (x > 0)
                {
                    return "Product Modified Successfully";
                }
                else
                {
                    return "Product Not Modified. Please Try Again.";
                }
            }
        }

        // POST: Delete Product
        public string DeleteProduct(int prodId)
        {
            using (sde = new ProductDatabaseEntities())
            {
                Product product = sde.Products.SingleOrDefault(m => m.ProductId == prodId);
                sde.Entry(product).State = EntityState.Deleted;
                int x = sde.SaveChanges();

                if (x > 0)
                {
                    return "Product Deleted Successfully";
                }
                else
                {
                    return "Product Not Deleted. Please Try Again.";
                }
            }
        }
    }
}

Step 2:- To Add View of Action Method, Right-click inside the Select Action body => Click Add View => Click Add




Note:-
I have chosen Templates: Empty (Without Model). Reason behind that everything builds with scrap.



Step 3:- Double-click Index.cshtml in Solution Explorer to open and decorate Index.cshtml view with following code

@{
    ViewBag.Title = "Index";
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<script type="text/javascript">
    var app = angular.module("crudApp", []);
    app.controller("crudController", function ($scope, $http) {

        $scope.GetAllProduct = function () {
            $http({
                method: "GET",
                url: "/Product/GetAllProduct",
                datatype: "json"
            }).then(function (response) {
                $scope.Products = response.data;
            }, function () {
                alert("Error Occur");
            });
        };

        $scope.GetProductById = function (x) {
            $http({
                method: "GET",
                url: "/Product/GetProductById",
                datatype: "json",
                params: {
                    prodId: x
                }
            }).then(function (response) {
                $scope.Product = response.data;
            }, function () {
                alert("Error Occur");
            });
        };

        $scope.InsertProduct = function () {
            $http({
                method: "POST",
                url: "/Product/InsertProduct",
                datatype: "json",
                //data: JSON.stringify($scope.Product)
                data: $scope.Product
            }).then(function (response) {
                alert(response.data);
                $scope.GetAllProduct();
                $scope.Reset();
            }, function () {
                alert("Error Occur");
            });
        };

        $scope.EditProduct = function (x) {
            $http({
                method: "GET",
                url: "/Product/GetProductById",
                datatype: "json",
                params: {
                    prodId: x
                }
            }).then(function (response) {
                $scope.Product = response.data;
                $scope.divAddEditProduct = true;
                $scope.btnAddNewProduct = true;
                $scope.btnInsertProduct = false;
                $scope.btnUpdateProduct = false;
            }, function () {
                alert("Error Occur");
            });
        };

        $scope.UpdateProduct = function () {
            $http({
                method: "POST",
                url: "/Product/UpdateProduct",
                datatype: "json",
                //data: JSON.stringify($scope.Product)
                data: $scope.Product
            }).then(function (response) {
                alert(response.data);
                $scope.GetAllProduct();
                $scope.HideShowAddEditProduct();
            }, function () {
                alert("Error Occur");
            });
        };

        $scope.DeleteProduct = function (x) {
            $http({
                method: "POST",
                url: "/Product/DeleteProduct",
                datatype: "json",
                data: { prodId: x }
            }).then(function (response) {
                alert(response.data);
                $scope.GetAllProduct();
            }, function () {
                alert("Error Occur");
            });
        };

        $scope.HideShowAddEditProduct = function () {
            $scope.divAddEditProduct = !$scope.divAddEditProduct;
            $scope.btnAddNewProduct = false;
            $scope.btnInsertProduct = true;
            $scope.btnUpdateProduct = true;
            $scope.Reset();
        };

        $scope.Reset = function () {
            $scope.ProductMaster = { ProductName: "", ProductCode: "", ProductQty: "", ProductWeight: "", ProductDesc: "" };
            $scope.Product = angular.copy($scope.ProductMaster);
        };
    });
</script>

<h2>Index</h2>

<div ng-app="crudApp">
    <div ng-controller="crudController" ng-init="GetAllProduct()">
        <table border="1" width="100%">
            <caption><h2>Product List</h2></caption>
            <tr>
                <th>Sr. No.</th>
                <th>Product Name</th>
                <th>Product Code</th>
                <th>Product Qty</th>
                <th>Product Weight</th>
                <th>Product Desc</th>
                <th>Action</th>
            </tr>
            <tr ng-repeat="x in Products">
                <td ng-bind="$index+1"></td>
                <td>{{x.ProductName}}</td>
                <td>{{x.ProductCode}}</td>
                <td>{{x.ProductQty}}</td>
                <td>{{x.ProductWeight}}</td>
                <td>{{x.ProductDesc}}</td>
                <td>
                    <button ng-click="EditProduct(x.ProductId)">Edit</button>
                    <button ng-click="DeleteProduct(x.ProductId)">Delete</button>
                </td>
            </tr>
        </table>
        <button ng-click="HideShowAddEditProduct()" ng-disabled="btnAddNewProduct">
            Add New Product
        </button>
        <div ng-show="divAddEditProduct">
            <table border="1" cellspacing="5" cellpadding="5">
                <tr>
                    <td>Product Name</td>
                    <td>
                        <input type="text" id="txtProductName" placeholder="Product Name" ng-model="Product.ProductName">
                    </td>
                </tr>
                <tr>
                    <td>Product Code</td>
                    <td>
                        <input type="text" id="txtProductCode" placeholder="Product Code" ng-model="Product.ProductCode">
                    </td>
                </tr>
                <tr>
                    <td>Product Qty</td>
                    <td>
                        <input type="text" id="txtProductQty" placeholder="Product Qty" ng-model="Product.ProductQty">
                    </td>
                </tr>
                <tr>
                    <td>Product Weight</td>
                    <td>
                        <input type="text" id="txtProductWeight" placeholder="Product Weight" ng-model="Product.ProductWeight">
                    </td>
                </tr>
                <tr>
                    <td>Product Desc</td>
                    <td>
                        <input type="text" id="txtProductDesc" placeholder="Product Desc" ng-model="Product.ProductDesc">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <button ng-click="InsertProduct()" ng-show="btnInsertProduct">Create</button>
                        <button ng-click="UpdateProduct()" ng-hide="btnUpdateProduct">Update</button>
                        <button ng-click="HideShowAddEditProduct()">Cancel</button>
                    </td>
                </tr>
            </table>

        </div>
    </div>
</div>

All Done
Run Project


Posted by at
Labels: ,

2 comments:

  1. Tejuteju9 October 2018 at 12:18

    This comment has been removed by a blog administrator.

    ReplyDelete
  2. kavyasri24 September 2019 at 14:20

    This comment has been removed by a blog administrator.

    ReplyDelete

Subscribe to: Post Comments (Atom)