Insert,Update, Delete using Angular js in ASP.NET MVC

Insert,Update, Delete using Angular js in ASP.NET MVC

In this Post We Will Explain About is Insert,Update, Delete using Angular js in ASP.NET MVC With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Angular js with ASP.NET MVC Insert,Update, Delete Example

In this post we will show you Best way to implement angularjs database connection example, hear for insert update delete in asp.net using angularjs with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

AngularJS Ajax $http – Asp.net with SQL example

In this AngularJS Ajax $http example we will see how to save data, delete row and display the data in html table using Asp.net with SQL using simple AngularJS $http request

CS Page:

//include ASP.net namespace...
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Serialization;
using System.Data.SqlClient;
using System.Data;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [System.Web.Services.WebMethod()]
    public static void Save(string ClientName)
    {
        using (SqlConnection con = new SqlConnection(@"data source=localhost\sqlexpress;user id=sa; [email protected]; database=livedb;"))
        {
            using (SqlCommand con = new SqlCommand())
            {
                con.Connection = con;
                con.CommandText = "insert into clientMaster (ClientName) values (@ClientName);";
                con.Parameters.AddWithValue("@ClientName", ClientName);
                con.Open();
                con.ExecuteNonQuery();
                con.Close();
            }
        }
    }

    [System.Web.Services.WebMethod()]
    public static void Delete(int ClientID)
    {
        using (SqlConnection con = new SqlConnection(@"data source=localhost\sqlexpress;user id=sa; password=123; database=Sample;"))
        {
            using (SqlCommand con = new SqlCommand())
            {
                con.Connection = con;
                con.CommandText = "update clientMaster set IsActive=0 where [email protected];";
                con.Parameters.AddWithValue("@ClientID", ClientID);
                con.Open();
                con.ExecuteNonQuery();
                con.Close();
            }
        }
    }

    [System.Web.Services.WebMethod()]
    public static List<Names> GetList()
    {
        List<Names> names = new List<Names>();
        DataSet ds = new DataSet();
        using (SqlConnection con = new SqlConnection(@"data source=localhost\sqlexpress;user id=sa; password=123; database=Sample;"))
        {
            using (SqlCommand con = new SqlCommand())
            {
                con.Connection = con;
                con.CommandText = "select ClientID,ClientName from clientMaster where IsActive=1;";
                using (SqlDataAdapter da = new SqlDataAdapter(con))
                {
                    da.Fill(ds);
                }
            }
        }
        if (ds != null && ds.Tables.Count > 0)
        {
            foreach (DataRow dr in ds.Tables[0].Rows)
                names.Add(new Names(int.Parse(dr["ClientID"].ToString()), dr["ClientName"].ToString()));
        }
        return names;
    }

}

public class Names
{
    public int ClientID;
    public string ClientName;
    public Names(int _ClientID, string _ClientName)
    {
        ClientID = _ClientID;
        ClientName = _ClientName;        
    }
}

ASPX Page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        table, th, td
        {
            border: 1px solid green;
            border-collapse: collapse;
            padding: 5px;
        }
        table th
        {
            background-color: #3d3d3d;
            color: balck;
        }
        table tr:nth-child(odd)
        {
            background-color: #5d5d5d;
        }
        table tr:nth-child(even)
        {
            background-color: #2f5d4c;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div ng-app="liveApp" ng-controller="liveCtrl">
        <table>
            <tr>
                <td>
                    Student Name :
                </td>
                <td>
                    <input type="text" id="txtClientName" ng-model="ClientnName" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="button" value="Save" ng-click="Save()" />
                </td>
            </tr>
        </table>
        <br />
        <br />
        <table>
            <thead>
                <tr>
                    <th>
                        ClientID
                    </th>
                    <th>
                        ClientName
                    </th>
                    <th>
                    </th>
                </tr>
            </thead>
            <tr ng-repeat="client in ClientList | orderBy : clientorder ">
                <td ng-bind="client.ClientID">
                </td>
                <td ng-bind="client.ClientName">
                </td>
                <td>
                    <a href="#" ng-click="Delete(client.ClientID)">Delete</a>
                </td>
            </tr>
        </table>
    </div>
    <script>
        var app = angular.module("liveApp", []);
        app.controller("liveCtrl", function ($scope, $http) {
            $scope.clientorder = "ClientnID";
            $scope.ClientnName = "";
            $scope.Save = function () {
                var apihttpreq = {
                    method: 'POST',
                    url: 'Default.aspx/Save',
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8',
                        'dataType': 'json'
                    },
                    data: { ClientName: $scope.ClientnName }
                }
                $http(apihttpreq).success(function (response) {
                    $scope.ClientFillList();
                    alert("Saved successfully.");
                })
            };
            $scope.Delete = function (SID) {
                if (confirm("Are you sure want to delete?")) {
                    var apihttpreq = {
                        method: 'POST',
                        url: 'Default.aspx/Delete',
                        headers: {
                            'Content-Type': 'application/json; charset=utf-8',
                            'dataType': 'json'
                        },
                        data: { ClientID: SID }
                    }
                    $http(apihttpreq).success(function (response) {
                        $scope.ClientFillList();
                        alert("Deleted successfully.");
                    })
                }
            };
            $scope.ClientFillList = function () {
                $scope.ClientnName = "";
                var apihttpreq = {
                    method: 'POST',
                    url: 'Default.aspx/GetList',
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8',
                        'dataType': 'json'
                    },
                    data: {}
                }
                $http(apihttpreq).success(function (response) {
                    $scope.ClientList = response.d;
                })
            };
            $scope.ClientFillList();
        });
    </script>
    </form>
</body>
</html>

SQL Query to create table:

SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

SET ANSI_PADDING ON
GO

CREATE TABLE [dbo].[clientMaster](
    [ClientID] [int] IDENTITY(1,1) NOT NULL,
    [ClientName] [varchar](50) NOT NULL,
    [IsActive] [bit] NOT NULL CONSTRAINT [DF_clientMaster_IsActive]  DEFAULT ((1)),
 CONSTRAINT [PK_clientMaster] PRIMARY KEY CLUSTERED 
(
    [ClientID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Also Read :  Simple Laravel 5 Vue JS Ajax CRUD(insert update delete)

Example

I hope you have Got What is Angular js with ASP.NET MVC Insert,Update, Delete And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.

Recommended For You.

Angular 6 Event Binding Tutorial From Scratch
Today, We want to share with you Angular 6 Event Binding Tutorial From Scratch.In this post we will show you