Angular.js Tutorial

Angular ASP.net SQL Server Tutorial

Database

USE [PM]

/****** Object: Table [dbo].[Projects] Script Date: 09/02/2016 14:58:24 ******/

SET ANSI_NULLS ON

SET QUOTED_IDENTIFIER ON

CREATE TABLE [dbo].[Projects] (

[ProjectID] INT IDENTITY (1, 1) NOT NULL,

[ProjectName] VARCHAR (50) NOT NULL,

[IsActive] BIT NOT NULL,

[ProjectDescription] NVARCHAR (MAX) NULL,

[CreatedDate] DATETIME NULL

);

Web.config

<?xml version="1.0" encoding="utf-8"?>

<!--

For more information on how to configure your ASP.NET application, please visit

http://go.microsoft.com/fwlink/?LinkId=169433

-->

</connectionStrings>

<system.web>

</system.web>

</configuration>

Index.html

<!DOCTYPE html>

<head>

</head>

<body>

<a href="modules/projects/client/views/projects.html">Projects</a>

</body>

</html>

project.js

var app = angular.module("ProjectModule", []);

app.controller("ProjectCntrl", function ($scope, $http) {

$scope.projectorder = "ProjectID";

$scope.ProjectName = "";

$scope.Save = function () {

var httpreq = {

method: 'POST',

url: '../../../projects/server/projects.aspx/Save',

headers: {

'Content-Type': 'application/json; charset=utf-8',

'dataType': 'json'

data: { ProjectName: $scope.ProjectName, ProjectDescription: $scope.ProjectDescription }

}

$http(httpreq).success(function (response) {

$scope.fillProjects();

alert("Saved successfully.");

})

};

$scope.Delete = function (SID) {

if (confirm("Are you sure want to delete?")) {

var httpreq = {

method: 'POST',

url: '../../../projects/server/projects.aspx/Delete',

headers: {

'Content-Type': 'application/json; charset=utf-8',

'dataType': 'json'

data: { ProjectID: SID }

}

$http(httpreq).success(function (response) {

$scope.fillProjects();

alert("Deleted successfully.");

})

}

};

$scope.fillProjects = function () {

$scope.ProjectName = "";

var httpreq = {

method: 'POST',

url: '../../../projects/server/projects.aspx/GetProjects',

headers: {

'Content-Type': 'application/json; charset=utf-8',

'dataType': 'json'

data: {}

}

$http(httpreq).success(function (response) {

$scope.ProjectList = response.d;

})

};

$scope.fillProjects();

});

projects.html

<!DOCTYPE html>

<head>

<title>Projects</title>

<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>

</head>

<body>

New Project

<table>

<tr>

<td>

Name:

</td>

<td>

</td>

</tr>

<tr>

Description:

</td>

<td>

</td>

</tr>

<tr>

</td>

</tr>

</table>

<hr/>

Filter:<input type="text" ng-model="search" />

<hr/>

<table>

<thead>

<tr>

<th>

</th>

<th>

Name

</th>

<th>

Description

</th>

<th>

Created Date

</th>

<th>

</th>

</tr>

</thead>

<td>

<a href="#" ng-click="Delete(project.ProjectID)">Delete</a>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

projects.cs

namespace PM.modules.projects.model

{

public class Projects

{

public int ProjectID;

public string ProjectName;

public string ProjectDescription;

public string CreatedDate;

public Projects(int _ProjectID, string _ProjectName, string _ProjectDescription, string _CreatedDate)

{

ProjectID = _ProjectID;

ProjectName = _ProjectName;

ProjectDescription = _ProjectDescription;

CreatedDate = _CreatedDate;

}

projects.aspx

using PM.modules.projects.model;

using System;

using System.Collections.Generic;

using System.Data;

using System.Data.SqlClient;

using System.Web.Configuration;

namespace PM.modules.projects.server

{

public partial class projects : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

[System.Web.Services.WebMethod()]

public static List<Projects> GetProjects()

{

List<Projects> projects = new List<Projects>();

DataSet ds = new DataSet();

using (SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings["DB"].ConnectionString))

{

using (SqlCommand cmd = new SqlCommand())

{

cmd.Connection = con;

cmd.CommandText = "select ProjectID, ProjectName, ProjectDescription, CreatedDate from Projects where IsActive=1;";

using (SqlDataAdapter da = new SqlDataAdapter(cmd))

{

da.Fill(ds);

}

if (ds != null && ds.Tables.Count > 0)

{

foreach (DataRow dr in ds.Tables[0].Rows)

projects.Add(new Projects(int.Parse(dr["ProjectID"].ToString()), dr["ProjectName"].ToString(), dr["ProjectDescription"].ToString(), dr["CreatedDate"].ToString()));

}

return projects;

}

[System.Web.Services.WebMethod()]

public static void Save(string ProjectName, string ProjectDescription)

{

using (SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings["DB"].ConnectionString))

{

using (SqlCommand cmd = new SqlCommand())

{

cmd.Connection = con;

cmd.CommandText = "insert into Projects (ProjectName,ProjectDescription) values (@ProjectName, @ProjectDescription);";

cmd.Parameters.AddWithValue("@ProjectName", ProjectName);

cmd.Parameters.AddWithValue("@ProjectDescription", ProjectDescription);

con.Open();

cmd.ExecuteNonQuery();

con.Close();

}

[System.Web.Services.WebMethod()]

public static void Delete(int ProjectID)

{

using (SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings["DB"].ConnectionString))

{

using (SqlCommand cmd = new SqlCommand())

{

cmd.Connection = con;

cmd.CommandText = "delete from Projects where ProjectID=@ProjectID;";

cmd.Parameters.AddWithValue("@ProjectID", ProjectID);

con.Open();

cmd.ExecuteNonQuery();

con.Close();

}

Angular.js Tutorial

Thursday, July 26, 2018

li ng-repeat example

Thursday, February 18, 2016

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http:// localhost' is therefore not allowed access.

XMLHttpRequest cannot load Request header field dataType is not allowed by Access-Control-Allow-Headers in preflight response.

Tuesday, February 9, 2016

Angular ASP.net SQL Server Tutorial