COMPLETE ASP NET TUTORIAL

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace DataGrid
{
public partial class Form1 : Form
{
private Panel buttonPanel = new Panel();
private DataGridView customerDataGridView = new DataGridView();
private Button addNewRowButton = new Button();
private Button deleteRowButton = new Button();

public Form1()
{
this.Load += new EventHandler(Form1_Load);
}

private void Form1_Load(System.Object sender, System.EventArgs e)
{
SetupLayout();
SetupDataGridView();
PopulateDataGridView();
}

private void songsDataGridView_CellFormatting(object sender, System.Windows.Forms.DataGridViewCellFormattingEventArgs e)
{
if(e != null)
{
if (this.customerDataGridView.Columns[e.ColumnIndex].Name == "FirstName")
{
if (e.Value != null)
{
// Check for the string "pink" in the cell.
string stringValue = (string)e.Value;
stringValue = stringValue.ToLower();
if ((stringValue.IndexOf("ram") > -1))
{
e.CellStyle.BackColor = Color.Pink;
}
}
}
if (this.customerDataGridView.Columns[e.ColumnIndex].Name == "DOB")
{
if (e.Value != null)
{
try
{
e.Value = DateTime.Parse(e.Value.ToString()).ToLongDateString();
e.FormattingApplied = true;
}
catch(FormatException)
{
Console.WriteLine("{0} is not a valid date", e.Value.ToString());
}
}
}
}
}

private void addNewRowButton_Click(object sender, EventArgs e)
{
this.customerDataGridView.Rows.Add();
}

private void deleteRowButton_Click(object sender, EventArgs e)
{
if (this.customerDataGridView.SelectedRows.Count > 0 &&
this.customerDataGridView.SelectedRows[0].Index !=
this.customerDataGridView.Rows.Count - 1)
{
this.customerDataGridView.Rows.RemoveAt(
this.customerDataGridView.SelectedRows[0].Index);
}
}

private void SetupLayout()
{
this.Size = new Size(600, 500);

addNewRowButton.Text = "Add Row";
addNewRowButton.Location = new Point(10, 10);
addNewRowButton.Click += new EventHandler(addNewRowButton_Click);

deleteRowButton.Text = "Delete Row";
deleteRowButton.Location = new Point(100, 10);
deleteRowButton.Click += new EventHandler(deleteRowButton_Click);

buttonPanel.Controls.Add(addNewRowButton);
buttonPanel.Controls.Add(deleteRowButton);
buttonPanel.Height = 50;
buttonPanel.Dock = DockStyle.Bottom;

this.Controls.Add(this.buttonPanel);
}

private void SetupDataGridView()
{
this.Controls.Add(customerDataGridView);

customerDataGridView.ColumnCount = 4;

customerDataGridView.ColumnHeadersDefaultCellStyle.BackColor = Color.Navy;
customerDataGridView.ColumnHeadersDefaultCellStyle.ForeColor = Color.White;
customerDataGridView.ColumnHeadersDefaultCellStyle.Font =
new Font(customerDataGridView.Font, FontStyle.Bold);

customerDataGridView.Name = "customerDataGridView";
customerDataGridView.Location = new Point(8, 8);
customerDataGridView.Size = new Size(500, 250);
customerDataGridView.AutoSizeRowsMode =
DataGridViewAutoSizeRowsMode.DisplayedCellsExceptHeaders;
customerDataGridView.ColumnHeadersBorderStyle =
DataGridViewHeaderBorderStyle.Single;
customerDataGridView.CellBorderStyle = DataGridViewCellBorderStyle.Single;
customerDataGridView.GridColor = Color.Black;
customerDataGridView.RowHeadersVisible = false;

customerDataGridView.Columns[0].Name = "PersonID";
customerDataGridView.Columns[1].Name = "FirstName";
customerDataGridView.Columns[2].Name = "Country";
customerDataGridView.Columns[3].Name = "DOB";
customerDataGridView.Columns[0].DefaultCellStyle.Font =
new Font(customerDataGridView.DefaultCellStyle.Font, FontStyle.Italic);

customerDataGridView.SelectionMode =
DataGridViewSelectionMode.FullRowSelect;
customerDataGridView.MultiSelect = false;
customerDataGridView.Dock = DockStyle.Fill;

customerDataGridView.CellFormatting += new
DataGridViewCellFormattingEventHandler(
songsDataGridView_CellFormatting);
}

private void PopulateDataGridView()
{

string[] row0 = {"1","Ram","India","1/10/1970"};
string[] row1 = {"2","Rahul","India", "2/23/1972" };
string[] row2 = {"3","Soni","India", "3/24/1986" };
string[] row3 = {"4","Vicky","India", "4/25/1980" };
string[] row4 = {"5","Lynda","UK","5/26/1990"};
string[] row5 = {"6","Kim","US","6/27/1986"};
string[] row6 = {"7","Miller","US","7/28/1990"};

customerDataGridView.Rows.Add(row0);
customerDataGridView.Rows.Add(row1);
customerDataGridView.Rows.Add(row2);
customerDataGridView.Rows.Add(row3);
customerDataGridView.Rows.Add(row4);
customerDataGridView.Rows.Add(row5);
customerDataGridView.Rows.Add(row6);

customerDataGridView.Columns[0].DisplayIndex = 0;
customerDataGridView.Columns[1].DisplayIndex = 1;
customerDataGridView.Columns[2].DisplayIndex = 3;
customerDataGridView.Columns[3].DisplayIndex = 2;

}
}
}

First, we create an MVC project. Go to File-> New-> Project and select “ASP.NET Web Application”.

Now, select MVC template for the project.

In Solution Explorer window, we can see the structure of our project.

Now, we add the model classes in our project. We have an Employee table which we will use in our project and implement the CRUD operation on.

CREATE TABLE [dbo].[Employee](  
[Emp_Id] [int] IDENTITY(1,1) NOT NULL,  
[Emp_Name] [varchar](max) NULL,  
[Emp_City] [varchar](max) NULL,  
[Emp_Age] [int] NULL,  
CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED   
(  
[Emp_Id] ASC  
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]  
  
GO

For database CRUD operation, we will use the Entity Framework Data First approach. For this, right click on “Model” folder and click on “New Item” option.

Now, select “ADO.NET Entity Data Model” and name it as “EmployeeModel”.

Establish a connection with “SQL Server Database” Engine.

Select Employee table Entity Data Model Wizard and click on Finish button.

Now, go to your project’s Model folder where you can see that Employee Model class has been created. So, you have successfully created a connection with database.

After this, we download and install the AngularJS package. Right click on Project Name and select “Manage NuGet Packages” option and download the AngularJS packages.

In Scripts folder, you can find that AngularJS files have been installed successfully.

Now, we create the Employee Controller. So, right click on Controller Folder and create an empty Controller.

Now, copy and paste the following code into your Employee Controller section.

using AngularCRUD.Models;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Mvc;  
namespace AngularCRUD.Controllers {  
    public class EmployeeController: Controller {  
        // GET: Employee  
        public ActionResult Index() {  
                return View();  
            }  
            /// <summary>  
            ///   
            /// Get All Employee  
            /// </summary>  
            /// <returns></returns>  
        public JsonResult Get_AllEmployee() {  
                using(DemoEntities Obj = new DemoEntities()) {  
                    List < Employee > Emp = Obj.Employees.ToList();  
                    return Json(Emp, JsonRequestBehavior.AllowGet);  
                }  
            }  
            /// <summary>  
            /// Get Employee With Id  
            /// </summary>  
            /// <param name="Id"></param>  
            /// <returns></returns>  
        public JsonResult Get_EmployeeById(string Id) {  
                using(DemoEntities Obj = new DemoEntities()) {  
                    int EmpId = int.Parse(Id);  
                    return Json(Obj.Employees.Find(EmpId), JsonRequestBehavior.AllowGet);  
                }  
            }  
            /// <summary>  
            /// Insert New Employee  
            /// </summary>  
            /// <param name="Employe"></param>  
            /// <returns></returns>  
        public string Insert_Employee(Employee Employe) {  
                if (Employe != null) {  
                    using(DemoEntities Obj = new DemoEntities()) {  
                        Obj.Employees.Add(Employe);  
                        Obj.SaveChanges();  
                        return "Employee Added Successfully";  
                    }  
                } else {  
                    return "Employee Not Inserted! Try Again";  
                }  
            }  
            /// <summary>  
            /// Delete Employee Information  
            /// </summary>  
            /// <param name="Emp"></param>  
            /// <returns></returns>  
        public string Delete_Employee(Employee Emp) {  
                if (Emp != null) {  
                    using(DemoEntities Obj = new DemoEntities()) {  
                        var Emp_ = Obj.Entry(Emp);  
                        if (Emp_.State == System.Data.Entity.EntityState.Detached) {  
                            Obj.Employees.Attach(Emp);  
                            Obj.Employees.Remove(Emp);  
                        }  
                        Obj.SaveChanges();  
                        return "Employee Deleted Successfully";  
                    }  
                } else {  
                    return "Employee Not Deleted! Try Again";  
                }  
            }  
            /// <summary>  
            /// Update Employee Information  
            /// </summary>  
            /// <param name="Emp"></param>  
            /// <returns></returns>  
        public string Update_Employee(Employee Emp) {  
            if (Emp != null) {  
                using(DemoEntities Obj = new DemoEntities()) {  
                    var Emp_ = Obj.Entry(Emp);  
                    Employee EmpObj = Obj.Employees.Where(x => x.Emp_Id == Emp.Emp_Id).FirstOrDefault();  
                    EmpObj.Emp_Age = Emp.Emp_Age;  
                    EmpObj.Emp_City = Emp.Emp_City;  
                    EmpObj.Emp_Name = Emp.Emp_Name;  
                    Obj.SaveChanges();  
                    return "Employee Updated Successfully";  
                }  
            } else {  
                return "Employee Not Updated! Try Again";  
            }  
        }  
    }  
}  

After creating the Controller, now, we create a View. Right click on Index method and create an Empty View.

Paste the following code into the Index View:

@{  
ViewBag.Title = "Index";  
}  
  
<style>  
.btn-space {  
margin-left: -5%;  
background-color: cornflowerblue;  
font-size: large;  
}  
</style>  
<h2>Index</h2>  
<div ng-app="myApp">  
    <div ng-controller="myCtrl" ng-init="GetAllData()" class="divList">  
        <p class="divHead">List of Employee</p>  
        <table cellpadding="12" class="table table-bordered table-hover">  
            <tr>  
                <td>  
                    <b>ID</b>  
                </td>  
                <td>  
                    <b>Name</b>  
                </td>  
                <td>  
                    <b>City</b>  
                </td>  
                <td>  
                    <b>Age</b>  
                </td>  
                <td>  
                    <b>Actions</b>  
                </td>  
            </tr>  
            <tr ng-repeat="Emp in employees">  
                <td>  
{{Emp.Emp_Id}}  
</td>  
                <td>  
{{Emp.Emp_Name}}  
</td>  
                <td>  
{{Emp.Emp_City}}  
</td>  
                <td>  
{{Emp.Emp_Age}}  
</td>  
                <td>  
                    <input type="button" class="btn btn-warning" value="Update" ng-click="UpdateEmp(Emp)" />  
                    <input type="button" class="btn btn-danger" value="Delete" ng-click="DeleteEmp(Emp)" />  
                </td>  
            </tr>  
        </table>  
        <div class="form-horizontal" role="form">  
            <div class="container">  
                <div class="row">  
                    <h2>  
                        <span id="spn">Add New Employee</span>  
                    </h2>  
                </div>  
                <div class="row">  
                    <div class="col-sm-6 col-lg-4">  
                        <div class="form-group">  
                            <label class="col-md-4 control-label">Name:</label>  
                            <div class="col-md-8">  
                                <input type="text" class="form-control" id="inputEmail" placeholder="Name" ng-model="EmpName">  
                                </div>  
                            </div>  
                        </div>  
                        <div class="col-sm-6 col-lg-4">  
                            <div class="form-group">  
                                <label class="col-md-4 control-label">City:</label>  
                                <div class="col-md-8">  
                                    <input type="text" class="form-control" id="inputPassword" placeholder="City" ng-model="EmpCity">  
                                    </div>  
                                </div>  
                            </div>  
                            <div class="col-sm-6 col-lg-4">  
                                <div class="form-group">  
                                    <label class="col-md-4 control-label">Age:</label>  
                                    <div class="col-md-8">  
                                        <input type="text" class="form-control" id="inputLabel3" placeholder="Age" ng-model="EmpAge">  
                                        </div>  
                                    </div>  
                                </div>  
                            </div>  
                            <div class="row">  
                                <div class="col-sm-6 col-lg-4">  
                                    <input type="button" id="btnSave" class="form-control btn-space" value="Submit" ng-click="InsertData()" />  
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                </div>  
@Html.Hidden("EmpID_")  
  
            </div>  

For CRUD operations in AngularJS, we create a JavaScript file, write the code into that file, and implement this file into our Index View.

First, create a JavaScript file and copy the following code.

JavaScript code

var app = angular.module("myApp", []);  
app.controller("myCtrl", function($scope, $http) {  
    debugger;  
    $scope.InsertData = function() {  
        var Action = document.getElementById("btnSave").getAttribute("value");  
        if (Action == "Submit") {  
            $scope.Employe = {};  
            $scope.Employe.Emp_Name = $scope.EmpName;  
            $scope.Employe.Emp_City = $scope.EmpCity;  
            $scope.Employe.Emp_Age = $scope.EmpAge;  
            $http({  
                method: "post",  
                url: "http://localhost:39209/Employee/Insert_Employee",  
                datatype: "json",  
                data: JSON.stringify($scope.Employe)  
            }).then(function(response) {  
                alert(response.data);  
                $scope.GetAllData();  
                $scope.EmpName = "";  
                $scope.EmpCity = "";  
                $scope.EmpAge = "";  
            })  
        } else {  
            $scope.Employe = {};  
            $scope.Employe.Emp_Name = $scope.EmpName;  
            $scope.Employe.Emp_City = $scope.EmpCity;  
            $scope.Employe.Emp_Age = $scope.EmpAge;  
            $scope.Employe.Emp_Id = document.getElementById("EmpID_").value;  
            $http({  
                method: "post",  
                url: "http://localhost:39209/Employee/Update_Employee",  
                datatype: "json",  
                data: JSON.stringify($scope.Employe)  
            }).then(function(response) {  
                alert(response.data);  
                $scope.GetAllData();  
                $scope.EmpName = "";  
                $scope.EmpCity = "";  
                $scope.EmpAge = "";  
                document.getElementById("btnSave").setAttribute("value", "Submit");  
                document.getElementById("btnSave").style.backgroundColor = "cornflowerblue";  
                document.getElementById("spn").innerHTML = "Add New Employee";  
            })  
        }  
    }  
    $scope.GetAllData = function() {  
        $http({  
            method: "get",  
            url: "http://localhost:39209/Employee/Get_AllEmployee"  
        }).then(function(response) {  
            $scope.employees = response.data;  
        }, function() {  
            alert("Error Occur");  
        })  
    };  
    $scope.DeleteEmp = function(Emp) {  
        $http({  
            method: "post",  
            url: "http://localhost:39209/Employee/Delete_Employee",  
            datatype: "json",  
            data: JSON.stringify(Emp)  
        }).then(function(response) {  
            alert(response.data);  
            $scope.GetAllData();  
        })  
    };  
    $scope.UpdateEmp = function(Emp) {  
        document.getElementById("EmpID_").value = Emp.Emp_Id;  
        $scope.EmpName = Emp.Emp_Name;  
        $scope.EmpCity = Emp.Emp_City;  
        $scope.EmpAge = Emp.Emp_Age;  
        document.getElementById("btnSave").setAttribute("value", "Update");  
        document.getElementById("btnSave").style.backgroundColor = "Yellow";  
        document.getElementById("spn").innerHTML = "Update Employee Information";  
    }  
})  

Now, provide the references of AngularJS and AngularCode file that we created into Index View.

Now, I think our project is ready to work. So, let’s run the application. Press F5 and you can see that following screen will be visible on your browser.

This project is referenced from https://www.c-sharpcorner.com/article/angularjs-crud-operation-using-asp-net-mvc/

Pages

COMPLETE ASP NET TUTORIAL

Thursday, July 16, 2020

DataGrid CellFormatting

Thursday, January 16, 2020

angularjs-crud operation using asp net mvc

Blogger templates

Blogger news

Blogroll

Blog Archive

Labels