<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AngularTest.aspx.cs" Inherits="AngularInsert.AngularTest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Angular Test</title>
<script src="myjsfile/1.11.1.min.js"></script>
<script src="myjsfile/angular.min.js"></script>
<style>
table, th, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table th {
background-color: #274257;
color: #fff;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCntrl", function ($scope, $http)
{
$scope.id = "";
$scope.name = "";
$scope.lname = "";
$scope.city = "";
$scope.state = "";
$scope.disable = true;
$scope.makevisible = false;
$scope.saveRecord = function () {
if ($scope.newResult.id == null) {
$scope.result.push($scope.newResult);
}
else {
for (i in $scope.result) {
if ($scope.result[i].id ==
$scope.newResult.id) {
$scope.result[i] =
$scope.newResult;
}
}
}
var httpreq = {
method: "POST",
url: "AngularTest.aspx/saveRecord",
headers: {
'Content-Type': 'application/json; charset=utf-8',
'dataType': 'json'
},
data: { id:
$scope.newResult.id, name: $scope.newResult.name, lname:
$scope.newResult.lname, city: $scope.newResult.city, state:
$scope.newResult.state }
}
$http(httpreq).success(function (response) {
$scope.newResult.id = "";
$scope.newResult.name = "";
$scope.newResult.lname = "";
$scope.newResult.city = "";
$scope.newResult.state = "";
$scope.GetList();
})
};
$scope.Delete = function (id) {
if (confirm("Are you sure
want to delete?")) {
var httpreq = {
method: 'POST',
url: 'AngularTest.aspx/deleteRecord',
headers: {
'Content-Type': 'application/json; charset=utf-8',
'dataType': 'json'
},
data: { id: id }
}
$http(httpreq).success(function (response) {
$scope.GetList();
})
}
};
$scope.updateRecord = function (id) {
var httpreq = {
method: 'POST',
url: 'AngularTest.aspx/updateRecord',
headers: {
'Content-Type': 'application/json; charset=utf-8',
'dataType': 'json'
},
data: { id:
$scope.newResult.id, name: $scope.newResult.name, lname:
$scope.newResult.lname, city: $scope.newResult.city, state:
$scope.newResult.state }
}
$http(httpreq).success(function (response) {
$scope.newResult.id = "";
$scope.newResult.name = "";
$scope.newResult.lname = "";
$scope.newResult.city = "";
$scope.newResult.state = "";
$scope.GetList();
})
};
$scope.cancel = function () {
$scope.disable = true;
$scope.shouldBeDisabled = false;
$scope.disablesave = false;
$scope.newResult.id = "";
$scope.newResult.name = "";
$scope.newResult.lname = "";
$scope.newResult.city = "";
$scope.newResult.state = "";
}
$scope.Edit = function (id) {
$scope.shouldBeDisabled = true;
$scope.disablesave = true;
$scope.disable = false;
for (i in $scope.result) {
if ($scope.result[i].id == id)
{
$scope.newResult =
angular.copy($scope.result[i]);
}
}
};
$scope.GetList = function () {
$scope.id = "";
$scope.fname = "";
$scope.lname = "";
$scope.city = "";
$scope.state = "";
var httpreq2 = {
method: "POST",
url: "AngularTest.aspx/GetList",
headers: {
'Content-Type': 'application/json; charset=utf-8',
'dataType': 'json'
},
data: {}
}
$http(httpreq2).success(function (data) {
$scope.result = data.d;
});
};
$scope.GetList();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="myApp" ng-controller="myCntrl">
<br />
<br />
<br />
<table width="100%">
<tr>
<td align="center">
<table>
<tr>
<td>Enter Id :
</td>
<td>
<input type="text" data-ng-model="newResult.id" id="f_id"
placeholder="Enter ID" ng-disabled="shouldBeDisabled" />
</td>
</tr>
<tr>
<td>Enter Name :
</td>
<td>
<input type="text" data-ng-model="newResult.name" id="f_name" placeholder="Enter
Name" />
</td>
</tr>
<tr>
<td>Enter Last Name :
</td>
<td>
<input type="text" data-ng-model="newResult.lname" id="l_name" placeholder="Enter Last
Name" />
</td>
</tr>
<tr>
<td>Enter City :
</td>
<td>
<input type="text" data-ng-model="newResult.city" id="city" placeholder="Enter
City" />
</td>
</tr>
<tr>
<td>Enter State :
</td>
<td>
<input type="text" data-ng-model="newResult.state" id="stateid" placeholder="Enter
State" />
</td>
</tr>
<tr>
<td>
<input type="button" value="submit" data-ng-click="saveRecord()" ng-disabled="disablesave" />
</td>
<td>
<input type="button" value="Update" data-ng-click="updateRecord()" ng-disabled="disable"/>
<input type="button" value="Cancel" data-ng-click="cancel()" ng-visible="makevisible"/>
</td>
</tr>
</table>
<table border="1" cellspacing="0" cellpadding="6px">
<tr>
<th>ID:
</th>
<th>Name:
</th>
<th>Last Name
</th>
<th>City
</th>
<th>state
</th>
<th>Operation
</th>
</tr>
<tr data-ng-repeat="record in result">
<td data-ng-bind="record.id"></td>
<td data-ng-bind="record.name"></td>
<td data-ng-bind="record.lname"></td>
<td data-ng-bind="record.city"></td>
<td data-ng-bind="record.state"></td>
<td>
<a href="#" data-ng-click="Edit(record.id)">Edit</a>
<a href="#" data-ng-click="Delete(record.id)">Delete</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
namespace AngularInsert
{
public partial class AngularTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static void saveRecord(int id, string name, string lname, string city, string state)
{
try
{
using (SqlConnection con = new SqlConnection("Data
Source=RANJEET-PC;Initial Catalog=company;Integrated Security=True"))
{
con.Open();
string query = "insert into angular_tbl(id,name,lname,city,state)
values('" + id + "','" + name
+ "','" + lname + "','" + city + "','" + state + "') ";
SqlCommand cmd = new SqlCommand(query, con);
cmd.ExecuteNonQuery();
}
}
catch (Exception ex)
{
throw ex;
}
}
[WebMethod]
public static void deleteRecord(int id)
{
try
{
using (SqlConnection con = new SqlConnection("Data
Source=RANJEET-PC;Initial Catalog=company;Integrated Security=True"))
{
con.Open();
string query = "delete from angular_tbl where id='" + id + "'";
SqlCommand cmd = new SqlCommand(query, con);
cmd.ExecuteNonQuery();
}
}
catch (Exception ex)
{
throw ex;
}
}
[WebMethod]
public static void updateRecord(int id, string name, string lname, string city, string state)
{
try
{
using (SqlConnection con = new SqlConnection("Data
Source=RANJEET-PC;Initial Catalog=company;Integrated Security=True"))
{
con.Open();
string query = "update angular_tbl set name='" + name + "',lname='" + lname + "',city='" + city + "',state='" + state + "' where
id='" + id + "'";
SqlCommand cmd = new SqlCommand(query, con);
cmd.ExecuteNonQuery();
}
}
catch (Exception ex)
{
throw ex;
}
}
[WebMethod]
public static List<Employee> GetList()
{
List<Employee> names = new List<Employee>();
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection("Data
Source=RANJEET-PC;Initial Catalog=company;Integrated Security=True"))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.Connection = con;
cmd.CommandText = "select * from angular_tbl";
using (SqlDataAdapter da = new SqlDataAdapter(cmd))
{
da.Fill(dt);
foreach (DataRow dr in dt.Rows)
{
Employee emp = new Employee();
emp.id = Convert.ToInt32(dr["id"]);
emp.name = dr["name"].ToString();
emp.lname = dr["lname"].ToString();
emp.city = dr["city"].ToString();
emp.state = dr["state"].ToString();
names.Add(emp);
}
}
return names;
}
}
}
public class Employee
{
public int id { get; set; }
public string name { get; set; }
public string lname { get; set; }
public string city { get; set; }
public string state { get; set; }
}
}
}
No comments:
Post a Comment