DOT NET WORLD

Using Authorization with Swagger in ASP.NET Core

2022-08-01T04:18:00.012-05:00

Create Solution like below

LoginModel.cs

using System.ComponentModel.DataAnnotations;

namespace UsingAuthorizationWithSwagger.Models

{

public class LoginModel

{

[Required(ErrorMessage = "Email Required")]

public string UserName { get; set; }

[Required(ErrorMessage = "Password Required")]

public string Password { get; set; }

}

Product.cs

namespace UsingAuthorizationWithSwagger.Models

{

public class Product

{

public int Id { get; set; }

public string? Name { get; set; }

}

ProductStore.cs

using UsingAuthorizationWithSwagger.Models;

namespace UsingAuthorizationWithSwagger.Data

{

public static class ProductStore

{

private static Product[] products = new Product[]

{

new Product { Id = 1, Name = "Rubber duck"},

new Product { Id = 2, Name = "Flip flop"},

new Product { Id = 3, Name = "Magic Wand"},

new Product { Id = 4, Name = "Glitter pen"}

};

public static IEnumerable<Product> GetProducts()

{

return products;

}

public static Product? GetProduct(int id)

{

foreach (var product in products)

{

if (product.Id == id)

return product;

}

return null;

}

WeatherForecast.cs

namespace UsingAuthorizationWithSwagger

{

public class WeatherForecast

{

public DateTime Date { get; set; }

public int TemperatureC { get; set; }

public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);

public string? Summary { get; set; }

}

AuthController.cs

using Microsoft.AspNetCore.Mvc;

using Microsoft.IdentityModel.Tokens;

using System.IdentityModel.Tokens.Jwt;

using System.Security.Claims;

using System.Text;

using UsingAuthorizationWithSwagger.Models;

namespace UsingAuthorizationWithSwagger.Controllers

{

[Route("api/auth")]

[ApiController]

public class AuthController : ControllerBase

{

[HttpPost]

public IActionResult Login(LoginModel model)

{

if (model == null)

{

return BadRequest("Invalid client request");

}

if (model.UserName == "johndoe" && model.Password == "johndoe2410")

{

var secretKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("superSecretKey@2410"));

var signinCredentials = new SigningCredentials(secretKey, SecurityAlgorithms.HmacSha256);

var tokenOptions = new JwtSecurityToken(

issuer: "CodeMaze",

audience: "https://localhost:5001",

claims: new List<Claim>(),

expires: DateTime.Now.AddMinutes(5),

signingCredentials: signinCredentials

);

var tokenString = new JwtSecurityTokenHandler().WriteToken(tokenOptions);

return Ok(new { Token = tokenString });

}

else

{

return Unauthorized();

}

ProductController.cs

using Microsoft.AspNetCore.Authorization;

using Microsoft.AspNetCore.Mvc;

using UsingAuthorizationWithSwagger.Data;

namespace UsingAuthorizationWithSwagger.Controllers

{

[Route("api/product")]

[ApiController]

public class ProductController : ControllerBase

{

[HttpGet, Authorize]

public IActionResult GetAllProducts()

{

var products = ProductStore.GetProducts();

return Ok(products);

}

[HttpGet("{id}")]

public IActionResult GetAProduct(int id)

{

var product = ProductStore.GetProduct(id);

if (product is null)

return NotFound();

return Ok(product);

}

WeatherForecastController.cs

using Microsoft.AspNetCore.Authorization;

using Microsoft.AspNetCore.Mvc;

namespace UsingAuthorizationWithSwagger.Controllers

{

[ApiController]

[Route("[controller]")]

public class WeatherForecastController : ControllerBase

{

private static readonly string[] Summaries = new[]

{

"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"

};

private readonly ILogger<WeatherForecastController> _logger;

public WeatherForecastController(ILogger<WeatherForecastController> logger)

{

_logger = logger;

}

[HttpGet(Name = "GetWeatherForecast"),Authorize]

public IEnumerable<WeatherForecast> Get()

{

return Enumerable.Range(1, 5).Select(index => new WeatherForecast

{

Date = DateTime.Now.AddDays(index),

TemperatureC = Random.Shared.Next(-20, 55),

Summary = Summaries[Random.Shared.Next(Summaries.Length)]

})

.ToArray();

}

appsettings.json

{

"Logging": {

"LogLevel": {

"Default": "Information",

"Microsoft": "Warning",

"Microsoft.Hosting.Lifetime": "Information"

}

"AllowedHosts": "*"

}

Program.cs

using Microsoft.AspNetCore.Authentication.JwtBearer;

using Microsoft.IdentityModel.Tokens;

using Microsoft.OpenApi.Models;

using System.Text;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();

builder.Services.AddAuthentication(opt =>

{

opt.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;

opt.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;

})

.AddJwtBearer(options =>

{

options.TokenValidationParameters = new TokenValidationParameters

{

ValidateIssuer = true,

ValidateAudience = true,

ValidateLifetime = true,

ValidateIssuerSigningKey = true,

ValidIssuer = "CodeMaze",

ValidAudience = "https://localhost:5001",

IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("superSecretKey@2410"))

};

});

builder.Services.AddEndpointsApiExplorer();

builder.Services.AddSwaggerGen(opt =>

{

opt.SwaggerDoc("v1", new OpenApiInfo { Title = "MyAPI", Version = "v1" });

opt.AddSecurityDefinition("Bearer", new OpenApiSecurityScheme

{

In = ParameterLocation.Header,

Description = "Please enter token",

Name = "Authorization",

Type = SecuritySchemeType.Http,

BearerFormat = "JWT",

Scheme = "bearer"

});

opt.AddSecurityRequirement(new OpenApiSecurityRequirement

{

new OpenApiSecurityScheme

{

Reference = new OpenApiReference

{

Type=ReferenceType.SecurityScheme,

Id="Bearer"

}

new string[]{}

}

});

var app = builder.Build();

// Configure the HTTP request pipeline.

if (app.Environment.IsDevelopment())

{

app.UseDeveloperExceptionPage();

app.UseSwagger();

app.UseSwaggerUI();

}

app.UseHttpsRedirection();

app.UseRouting();

app.UseAuthentication();

app.UseAuthorization();

app.UseEndpoints(endpoints =>

{

endpoints.MapControllers();

});

app.Run();

public partial class Program { }

Run the project and login, then you will get token

Expand "api/auth" , click on "Try it out" , enter login details and click on "Execute" to show output

Copy "Token" and enter in Authorize popup. When click on "Authorize" , it will authorize all application.

ASP.NET Core Web API with Swagger Interface

2022-07-28T05:45:00.048-05:00

The Swagger is a simple but powerful representation of the RESTful API. Nowadays most developers are using Swagger in almost every modern programming language and deployment environment to document. With a Swagger-enabled Web API, you will get interactive documentation, client SDK generation as well as discoverability.

Launch the Visual Studio 2022 IDE.
Click on “Create new project.”
In the “Create new project” window, select “ASP.NET Core Web API” from the list of templates displayed.
Click Next.
In the “Configure your new project” window, specify the name and location for the new project.
Optionally check the “Place solution and project in the same directory” check box, depending on your preferences.
Click Next.
In the “Additional Information” window shown next, select .NET 6.0 as the target framework from the drop-down list at the top. Set “Authentication Type” to “None” (default) and check the last two check boxes (Use controllers and Enable OpenAPI support).
Ensure that the “Enable Docker” and “Configure for HTTPS” check boxes are unchecked as we won’t be using those features here.
Click Create.

When click on "Authorize", then will open window likes below

Enter value and click on Authorize then output shown as below

Click on "Try it out" then will expand window like below

Enter the input values and click the "Execute" button to run the API. The response will be displayed as follows

To add Swagger to ASP.NET Core Web API project, you need to install an open-source project called Swashbuckle via NuGet as shown below. Add Packages as shown below

launchSettings.json

{

"$schema": "https://json.schemastore.org/launchsettings.json",

"iisSettings": {

"windowsAuthentication": false,

"anonymousAuthentication": true,

"iisExpress": {

"applicationUrl": "http://localhost:49270",

"sslPort": 0

}

"profiles": {

"SwaggerDemo": {

"commandName": "Project",

"dotnetRunMessages": true,

"launchBrowser": true,

"launchUrl": "swagger",

"applicationUrl": "http://localhost:5224",

"environmentVariables": {

"ASPNETCORE_ENVIRONMENT": "Development"

}

"IIS Express": {

"commandName": "IISExpress",

"launchBrowser": true,

"launchUrl": "swagger",

"environmentVariables": {

"ASPNETCORE_ENVIRONMENT": "Development"

}

LoginController.cs

using Microsoft.AspNetCore.Mvc;

using Microsoft.IdentityModel.Tokens;

using System.IdentityModel.Tokens.Jwt;

using System.Security.Claims;

using System.Text;

namespace SwaggerDemo.Controllers

{

[Route("api/[controller]")]

[ApiController]

public class LoginController : ControllerBase

{

[HttpPost, Route("login")]

public IActionResult Login(LoginDTO loginDTO)

{

try

{

if (string.IsNullOrEmpty(loginDTO.UserName) || string.IsNullOrEmpty(loginDTO.Password))

return BadRequest("Username and/or Password not specified");

if (loginDTO.UserName.Equals("joydip") && loginDTO.Password.Equals("joydip123"))

{

var secretKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("thisisasecretkey@123"));

var signinCredentials = new SigningCredentials(secretKey, SecurityAlgorithms.HmacSha256);

var jwtSecurityToken = new JwtSecurityToken(

issuer: "ABCXYZ",

audience: "http://localhost:51398",

claims: new List<Claim>(),

expires: DateTime.Now.AddMinutes(10),

signingCredentials: signinCredentials

);

Ok(new JwtSecurityTokenHandler().

WriteToken(jwtSecurityToken));

}

catch

{

return BadRequest

("An error occurred in generating the token");

}

return Unauthorized();

}

WeatherForecastController.cs

using Microsoft.AspNetCore.Mvc;

namespace SwaggerDemo.Controllers

{

[ApiController]

[Route("[controller]")]

public class WeatherForecastController : ControllerBase

{

private static readonly string[] Summaries = new[]

{

"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"

};

private readonly ILogger<WeatherForecastController> _logger;

public WeatherForecastController(ILogger<WeatherForecastController> logger)

{

_logger = logger;

}

[HttpGet(Name = "GetWeatherForecast")]

public IEnumerable<WeatherForecast> Get()

{

return Enumerable.Range(1, 5).Select(index => new WeatherForecast

{

Date = DateTime.Now.AddDays(index),

TemperatureC = Random.Shared.Next(-20, 55),

Summary = Summaries[Random.Shared.Next(Summaries.Length)]

})

.ToArray();

}

LoginDTO.cs

namespace SwaggerDemo

{

public class LoginDTO

{

public string UserName { get; set; }

public string Password { get; set; }

}

WeatherForecast.cs

namespace SwaggerDemo

{

public class WeatherForecast

{

public DateTime Date { get; set; }

public int TemperatureC { get; set; }

public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);

public string? Summary { get; set; }

}

Program.cs

using Microsoft.OpenApi.Models;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();

// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle

builder.Services.AddEndpointsApiExplorer();

builder.Services.AddSwaggerGen(option =>

{

option.SwaggerDoc("v1", new OpenApiInfo { Title = "Demo API", Version = "v1" });

option.AddSecurityDefinition("Bearer", new OpenApiSecurityScheme

{

In = ParameterLocation.Header,

Description = "Please enter a valid token",

Name = "Authorization",

Type = SecuritySchemeType.Http,

BearerFormat = "JWT",

Scheme = "Bearer"

});

option.AddSecurityRequirement(new OpenApiSecurityRequirement

{

new OpenApiSecurityScheme

{

Reference = new OpenApiReference

{

Type=ReferenceType.SecurityScheme,

Id="Bearer"

}

new string[]{}

}

});

var app = builder.Build();

// Configure the HTTP request pipeline.

if (app.Environment.IsDevelopment())

{

app.UseSwagger();

app.UseSwaggerUI();

}

app.UseAuthorization();

app.MapControllers();

app.Run();

ASP.NET Core CRUD Operations and login

2022-07-26T00:21:00.022-05:00

Create the ASP.NET MVC Web Application

Create New Project by selecting ASP.NET Core Web App (Model-View-Controller)

Click on create , then will create application.

Solution looks like below

ASP.NET CORE 5.0 Project Structure

Dependencies: It contains all the installed NuGet packages. We can manage the NuGet packages by right clicking on it.
Properties: It contains launchSettings.json file which has visual studio profiles, iis and debug setting.
wwwroot folder: It is the web root folder of asp.net core application where we can put all the static files such as javascript , css , images.
Controllers: It contails all the controller class we create in our asp.net core mvc application.
Models: We can put all the model or view model classes inside this folder.
Views: We can add views for certain actions methods inside view folder. There will be seperate folder for each view we create inside Views folder.
appsettings.json: It is the application configuration file which is used to store configuration settings i.e connections strings of the database, global variables etc.
Program.cs : Initially asp.net core application starts as a console application. In the Main method it calls the CreateWebHostBuilder() method that configures the asp.net core setting and launch it as asp.net core application.
Startup.cs: It contains the ConfigureServices() and Configure methods. As the name implies ConfigureServices() method configures all the services which are going to used by the application. Configure method take care of all the request processing pipelines.

Create Database And Student Table

Create a new database named [StudentManagement] in sql-server and execute the below SQL query to create student table.

Student

CREATE TABLE [dbo].[Student](

[Id] [int] IDENTITY(1,1) NOT NULL,

[FirstName] [varchar](50) NOT NULL,

[LastName] [varchar](50) NOT NULL,

[Email] [varchar](30) NOT NULL,

[Mobile] [varchar](20) NOT NULL,

[Address] [varchar](220) NULL,

[UserName] [varchar](50) NULL,

[Password] [varchar](50) NULL,

[CreatedOn] [datetime] NULL,

CONSTRAINT [PK_Student] PRIMARY KEY CLUSTERED

(

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

ErrorLog

CREATE TABLE [dbo].[ErrorLog](

[ErrorId] [int] IDENTITY(1,1) NOT NULL,

[ErrorNumber] [varchar](50) NULL,

[ErrorSeverity] [varchar](50) NULL,

[ErrorState] [varchar](50) NULL,

[ErrorProcedure] [varchar](50) NULL,

[ErrorLine] [varchar](50) NULL,

[ErrorMessage] [varchar](250) NULL,

[CreatedOn] [datetime] NULL,

CONSTRAINT [PK_ErrorLog] PRIMARY KEY CLUSTERED

(

[ErrorId] ASC

)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]

) ON [PRIMARY]

Stored Procedures

spAddErrorLog

CREATE PROCEDURE [dbo].[spAddErrorLog]

(

@ErrorNumber VARCHAR(50),

@ErrorSeverity VARCHAR(50),

@ErrorState VARCHAR(50),

@ErrorProcedure VARCHAR(50),

@ErrorLine VARCHAR(50),

@ErrorMessage VARCHAR(250)

)

BEGIN

INSERT INTO ErrorLog (ErrorNumber,ErrorSeverity,ErrorState, ErrorProcedure,ErrorLine,ErrorMessage,CreatedOn)

VALUES (@ErrorNumber,@ErrorSeverity,@ErrorState, @ErrorProcedure,@ErrorLine,@ErrorMessage,GETDATE())

END

spAddStudent

CREATE PROCEDURE [dbo].[spAddStudent]

(

@FirstName VARCHAR(50),

@LastName VARCHAR(50),

@Email VARCHAR(30),

@Mobile VARCHAR(20),

@Address VARCHAR(220),

@UserName VARCHAR(50),

@Password VARCHAR(50)

)

BEGIN

INSERT INTO Student (FirstName,LastName,Email, Mobile,Address,UserName,Password)

VALUES (@FirstName,@LastName,@Email, @Mobile,@Address,@UserName,@Password)

END

spDeleteStudent

CREATE PROCEDURE [dbo].[spDeleteStudent]

(

@Id int

)

BEGIN

DELETE FROM Student WHERE Id=@Id

END

spGetAllStudent

CREATE PROCEDURE [dbo].[spGetAllStudent]

(

@TransactionId INT,

@Id INT

)

BEGIN

BEGIN TRANSACTION;

BEGIN TRY

IF @TransactionId = 1

BEGIN

SELECT * FROM Student ORDER BY Id

END

ELSE IF @TransactionId = 2

BEGIN

SELECT * FROM Student WHERE Id = @Id ORDER BY Id

END

IF @@TRANCOUNT > 0

COMMIT TRANSACTION;

END TRY

BEGIN CATCH

DECLARE @ErrorNumber VARCHAR(50),

@ErrorSeverity VARCHAR(50),

@ErrorState VARCHAR(50),

@ErrorProcedure VARCHAR(50),

@ErrorLine VARCHAR(50),

@ErrorMessage VARCHAR(250)

SELECT

@ErrorNumber = ERROR_NUMBER()

,@ErrorSeverity = ERROR_SEVERITY()

,@ErrorState = ERROR_STATE()

,@ErrorProcedure = ERROR_PROCEDURE()

,@ErrorLine = ERROR_LINE()

,@ErrorMessage = ERROR_MESSAGE()

EXECUTE dbo.[spAddErrorLog] @ErrorNumber,@ErrorSeverity,@ErrorState,@ErrorProcedure,@ErrorLine,@ErrorMessage;

IF @@TRANCOUNT > 0

ROLLBACK TRANSACTION;

END CATCH;

END

spLogin

CREATE PROCEDURE [dbo].[spLogin]

(

@UserName VARCHAR(50),

@Password VARCHAR(50)

)

BEGIN

BEGIN TRANSACTION;

BEGIN TRY

SELECT * FROM Student WHERE UserName = @UserName AND Password = @Password

IF @@TRANCOUNT > 0

COMMIT TRANSACTION;

END TRY

BEGIN CATCH

DECLARE @ErrorNumber VARCHAR(50),

@ErrorSeverity VARCHAR(50),

@ErrorState VARCHAR(50),

@ErrorProcedure VARCHAR(50),

@ErrorLine VARCHAR(50),

@ErrorMessage VARCHAR(250)

SELECT

@ErrorNumber = ERROR_NUMBER()

,@ErrorSeverity = ERROR_SEVERITY()

,@ErrorState = ERROR_STATE()

,@ErrorProcedure = ERROR_PROCEDURE()

,@ErrorLine = ERROR_LINE()

,@ErrorMessage = ERROR_MESSAGE()

EXECUTE dbo.[spAddErrorLog] @ErrorNumber,@ErrorSeverity,@ErrorState,@ErrorProcedure,@ErrorLine,@ErrorMessage;

IF @@TRANCOUNT > 0

ROLLBACK TRANSACTION;

END CATCH;

END

spUpdateStudent

CREATE PROCEDURE [dbo].[spUpdateStudent]

(

@Id INTEGER ,

@FirstName VARCHAR(50),

@LastName VARCHAR(50),

@Email VARCHAR(30),

@Mobile VARCHAR(20),

@Address VARCHAR(220),

@UserName VARCHAR(50),

@Password VARCHAR(50)

)

BEGIN

UPDATE Student

SET FirstName = @FirstName,

LastName = @LastName,

Email = @Email,

Mobile = @Mobile,

Address = @Address,

UserName = @UserName,

Password = @Password

WHERE Id=@Id

END

Startup.cs

In the Startup.cs class add CompanyDBContext as a service inside ConfigureService() method as below. We will retrieve the connection string value from appsettings.json file through IConfiguration object's GetConnectionString() method.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Builder;

using Microsoft.AspNetCore.Hosting;

using Microsoft.AspNetCore.Http;

using Microsoft.AspNetCore.HttpsPolicy;

using Microsoft.AspNetCore.Mvc;

using Microsoft.Extensions.Configuration;

using Microsoft.Extensions.DependencyInjection;

using IHostingEnvironment = Microsoft.AspNetCore.Hosting.IHostingEnvironment;

namespace StudentManagementSystem

{

public class Startup

{

public Startup(IConfiguration configuration)

{

Configuration = configuration;

}

public Startup(IHostingEnvironment env)

{

Configuration = new ConfigurationBuilder().SetBasePath(env.ContentRootPath).AddJsonFile("appSettings.json").Build();

}

public IConfiguration Configuration { get; }

public static string ConnectionString { get; private set; }

// This method gets called by the runtime. Use this method to add services to the container.

public void ConfigureServices(IServiceCollection services)

{

services.Configure<CookiePolicyOptions>(options =>

{

// This lambda determines whether user consent for non-essential cookies is needed for a given request.

options.CheckConsentNeeded = context => true;

options.MinimumSameSitePolicy = SameSiteMode.None;

});

services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);

}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)

{

ConnectionString = Configuration["ConnectionStrings:DBConnectionString"];

if (env.IsDevelopment())

{

app.UseDeveloperExceptionPage();

}

else

{

app.UseExceptionHandler("/Home/Error");

app.UseHsts();

}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseCookiePolicy();

app.UseMvc(routes =>

{

routes.MapRoute(

});

}

Program.cs

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllersWithViews();

var app = builder.Build();

// Configure the HTTP request pipeline.

if (!app.Environment.IsDevelopment())

{

app.UseExceptionHandler("/Home/Error");

// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.

app.UseHsts();

}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(

pattern: "{controller=Login}/{action=Index}/{id?}");

app.Run();

appsettings.json

{

"Logging": {

"LogLevel": {

"Default": "Information",

"Microsoft.AspNetCore": "Warning",

"Microsoft.Hosting.Lifetime": "Information"

}

"AllowedHosts": "*",

"ConnectionStrings": {

"DBConnectionString": "Server=.;Database=StudentManagement;Integrated Security=True;"

}

Models

StudentModel.cs

using System.ComponentModel.DataAnnotations;

namespace StudentManagementSystem.Models

{

public class StudentModel

{

public int Id { set; get; }

[Required]

public string FirstName { set; get; }

[Required]

public string LastName { set; get; }

[Required]

public string Email { set; get; }

[Required]

public string Mobile { set; get; }

public string Address { set; get; }

[Required]

public string UserName { get; set; }

[Required]

[DataType(DataType.Password)]

public string Password { set; get; }

[Required]

[DataType(DataType.Password)]

[Compare("Password")]

public string ConfirmPassword { get; set; }

}

ErrorViewModel.cs

namespace StudentManagementSystem.Models

{

public class ErrorViewModel

{

public string? RequestId { get; set; }

public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);

}

Controllers

StudentController.cs

using Microsoft.AspNetCore.Http;

using Microsoft.AspNetCore.Mvc;

using SMS.DAL;

using SMS.Entity;

using StudentManagementSystem.Models;

namespace StudentManagementSystem.Controllers

{

public class StudentController : Controller

{

StudentDataAccessLayer studentDataAccessLayer = null;

public StudentController()

{

studentDataAccessLayer = new StudentDataAccessLayer();

}

// GET: Student

public ActionResult Index()

{

IEnumerable<StudentModel> students = studentDataAccessLayer.GetAllStudent().Select(stud=>new StudentModel ()

{

Id=stud.Id,

Mobile=stud.Mobile,

Address=stud.Address,

Email=stud.Email,

LastName=stud.LastName,

FirstName=stud.FirstName

}).ToList();

return View(students);

}

// GET: Student/Details/5

public ActionResult Details(int id)

{

var student = studentDataAccessLayer.GetStudentData(id);

StudentModel studentDetail = new StudentModel();

studentDetail.Id = student.Id;

studentDetail.Address = student.Address;

studentDetail.FirstName = student.FirstName;

studentDetail.LastName = student.LastName;

studentDetail.Mobile = student.Mobile;

studentDetail.Email= student.Email;

return View(studentDetail);

}

// GET: Student/Create

public ActionResult Create()

{

return View();

}

// POST: Student/Create

[HttpPost]

[ValidateAntiForgeryToken]

public ActionResult Create(StudentModel student)

{

try

{

// TODO: Add insert logic here

Student objStudent = new Student();

objStudent.Email = student.Email;

objStudent.Address = student.Address;

objStudent.FirstName = student.FirstName;

objStudent.LastName = student.LastName;

objStudent.Mobile = student.Mobile;

objStudent.Id = student.Id;

studentDataAccessLayer.AddStudent(objStudent);

return RedirectToAction(nameof(Index));

}

catch (Exception ex)

{

return View();

}

// GET: Student/Edit/5

public ActionResult Edit(int id)

{

var student = studentDataAccessLayer.GetStudentData(id);

StudentModel studentDetail = new StudentModel();

studentDetail.Id = student.Id;

studentDetail.Address = student.Address;

studentDetail.FirstName = student.FirstName;

studentDetail.LastName = student.LastName;

studentDetail.Mobile = student.Mobile;

studentDetail.Email = student.Email;

return View(studentDetail);

}

// POST: Student/Edit/5

[HttpPost]

[ValidateAntiForgeryToken]

public ActionResult Edit(StudentModel student)

{

try

{

// TODO: Add update logic here

Student objStudent = new Student();

objStudent.Email = student.Email;

objStudent.Address = student.Address;

objStudent.FirstName = student.FirstName;

objStudent.LastName = student.LastName;

objStudent.Mobile = student.Mobile;

objStudent.Id = student.Id;

studentDataAccessLayer.UpdateStudent(objStudent);

return RedirectToAction(nameof(Index));

}

catch

{

return View();

}

// GET: Student/Delete/5

public ActionResult Delete(int id)

{

var student = studentDataAccessLayer.GetStudentData(id);

StudentModel studentDetail = new StudentModel();

studentDetail.Id = student.Id;

studentDetail.Address = student.Address;

studentDetail.FirstName = student.FirstName;

studentDetail.LastName = student.LastName;

studentDetail.Mobile = student.Mobile;

return View(studentDetail);

}

// POST: Student/Delete/5

[HttpPost]

[ValidateAntiForgeryToken]

public ActionResult Delete(StudentModel student)

{

try

{

// TODO: Add delete logic here

studentDataAccessLayer.DeleteStudent(student.Id);

return RedirectToAction(nameof(Index));

}

catch

{

return View();

}

LoginController.cs

using Microsoft.AspNetCore.Mvc;

using SMS.DAL;

using SMS.Entity;

using StudentManagementSystem.Models;

namespace StudentManagementSystem.Controllers

{

public class LoginController : Controller

{

StudentDataAccessLayer studentDataAccessLayer = null;

public LoginController()

{

studentDataAccessLayer = new StudentDataAccessLayer();

}

public IActionResult Index()

{

return View();

}

[HttpPost]

public IActionResult Index([Bind] StudentModel student)

{

Student objStudent = new Student();

objStudent.UserName = student.UserName;

objStudent.Password = student.Password;

int res = studentDataAccessLayer.LoginCheck(objStudent);

if (res == 1)

{

TempData["msg"] = "You are welcome";

return RedirectToAction("Index", "Student");

}

else

{

TempData["msg"] = "UserName or Password is wrong.!";

}

return View();

}

Views - Two Folders

Student - Folder

Create.cshtml

@model StudentManagementSystem.Models.StudentModel

ViewData["Title"] = "Create";

}

<h2>Create</h2>

<h4>Student</h4>

<hr />

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</form>

</div>

<div>

</div>

@section Scripts {

@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

}

Delete.cshtml

@model StudentManagementSystem.Models.StudentModel

ViewData["Title"] = "Delete";

}

<h2>Delete</h2>

<h3>Are you sure you want to delete this?</h3>

<div>

<h4>Student</h4>

<hr />

<dt>

@Html.DisplayNameFor(model => model.Id)

</dt>

<dd>

@Html.DisplayFor(model => model.Id)

</dd>

<dt>

@Html.DisplayNameFor(model => model.FirstName)

</dt>

<dd>

@Html.DisplayFor(model => model.FirstName)

</dd>

<dt>

@Html.DisplayNameFor(model => model.LastName)

</dt>

<dd>

@Html.DisplayFor(model => model.LastName)

</dd>

<dt>

@Html.DisplayNameFor(model => model.Email)

</dt>

<dd>

@Html.DisplayFor(model => model.Email)

</dd>

<dt>

@Html.DisplayNameFor(model => model.Mobile)

</dt>

<dd>

@Html.DisplayFor(model => model.Mobile)

</dd>

<dt>

@Html.DisplayNameFor(model => model.Address)

</dt>

<dd>

@Html.DisplayFor(model => model.Address)

</dd>

</dl>

<input type="submit" value="Delete" class="btn btn-default" /> |

</form>

</div>

Details.cshtml

@model StudentManagementSystem.Models.StudentModel

ViewData["Title"] = "Details";

}

<h2>Details</h2>

<div>

<h4>Student</h4>

<hr />

<dt>

@Html.DisplayNameFor(model => model.Id)

</dt>

<dd>

@Html.DisplayFor(model => model.Id)

</dd>

<dt>

@Html.DisplayNameFor(model => model.FirstName)

</dt>

<dd>

@Html.DisplayFor(model => model.FirstName)

</dd>

<dt>

@Html.DisplayNameFor(model => model.LastName)

</dt>

<dd>

@Html.DisplayFor(model => model.LastName)

</dd>

<dt>

@Html.DisplayNameFor(model => model.Email)

</dt>

<dd>

@Html.DisplayFor(model => model.Email)

</dd>

<dt>

@Html.DisplayNameFor(model => model.Mobile)

</dt>

<dd>

@Html.DisplayFor(model => model.Mobile)

</dd>

<dt>

@Html.DisplayNameFor(model => model.Address)

</dt>

<dd>

@Html.DisplayFor(model => model.Address)

</dd>

</dl>

</div>

<div>

@Html.ActionLink("Edit", "Edit", new { id = Model.Id }) |

</div>

Edit.cshtml

@model StudentManagementSystem.Models.StudentModel

ViewData["Title"] = "Edit";

}

<h4>Student</h4>

<hr />

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</form>

</div>

<div>

</div>

@section Scripts {

@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

}

Index.cshtml

@model IEnumerable<StudentManagementSystem.Models.StudentModel>

ViewData["Title"] = "Index";

}

<h2>Index</h2>

<p>

<a asp-action="Create">Create New</a>

</p>

<thead>

<tr>

<th>

@Html.DisplayNameFor(model => model.Id)

</th>

<th>

@Html.DisplayNameFor(model => model.FirstName)

</th>

<th>

@Html.DisplayNameFor(model => model.LastName)

</th>

<th>

@Html.DisplayNameFor(model => model.Email)

</th>

<th>

@Html.DisplayNameFor(model => model.Mobile)

</th>

<th>

@Html.DisplayNameFor(model => model.Address)

</th>

</tr>

</thead>

<tbody>

@foreach (var item in Model) {

<tr>

<td>

@Html.DisplayFor(modelItem => item.Id)

</td>

<td>

@Html.DisplayFor(modelItem => item.FirstName)

</td>

<td>

@Html.DisplayFor(modelItem => item.LastName)

</td>

<td>

@Html.DisplayFor(modelItem => item.Email)

</td>

<td>

@Html.DisplayFor(modelItem => item.Mobile)

</td>

<td>

@Html.DisplayFor(modelItem => item.Address)

</td>

<td>

@Html.ActionLink("Edit", "Edit", new { id=item.Id }) |

@Html.ActionLink("Details", "Details", new { id=item.Id }) |

@Html.ActionLink("Delete", "Delete", new { id=item.Id })

</td>

</tr>

}

</tbody>

</table>

Login - Folder

Index.cshtml

@model StudentManagementSystem.Models.StudentModel

ViewData["Title"] = "Login";

}

<h2>Index</h2>

<!DOCTYPE html>

<html>

<head>

<title>Index</title>

</head>

<body>

</div>

</div>

</div>

</form>

</div>

</div>

</body>

</html>

if (TempData["msg"]!=null)

{

alert('@TempData["msg"]')

</script>

}

Create Data Access Layer Class Library Project and add class

AppConfiguration.cs

using Microsoft.Extensions.Configuration;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

namespace SMS.DAL.AppConfig

{

public class AppConfiguration

{

public readonly string _connectionString = string.Empty;

public AppConfiguration()

{

var configurationBuilder = new ConfigurationBuilder();

var path = Path.Combine(Directory.GetCurrentDirectory(), "appsettings.json");

configurationBuilder.AddJsonFile(path, false);

var root = configurationBuilder.Build();

_connectionString = root.GetSection("ConnectionStrings").GetSection("DBConnectionString").Value;

var appSetting = root.GetSection("ApplicationSettings");

}

public string ConnectionString

{

get => _connectionString;

}

DALRepository.cs

using SMS.DAL.Common;

using ObjectExtensions;

using System;

using System.Collections.Generic;

using System.Data;

using System.Data.SqlClient;

using System.Diagnostics;

using System.Linq;

using System.Reflection;

using System.Text;

using System.Threading.Tasks;

using Microsoft.Extensions.Configuration;

using SMS.DAL.AppConfig;

namespace SMS.DAL

{

public class EntityRowCount

{

public int Count { get; set; }

}

// Author: jms

/// <summary>

/// Implements the data access layer onject. This class uses generic types, and therefore

/// assumes/requires that the following components match EXACTLY (case and spelling):

/// - Entity property names (in your app)

/// - Stored proc parameter names (in the database)

/// - Table column names (in the database)

/// It is the job of the programmer to use transactions (ostensibly for setting data) in his

/// stored procs if that behavior is desired. For text queries (which AEF code should not use),

/// include all transaction related code (begin/end try, begin/end catch in your query.

/// </summary>

public partial class DALRepository

{

#region properties

private IConfiguration _config;

/// <summary>

/// Get/set flag indicating whether the List<T> ExecuteXXX<T>() methods should <br/>

/// throw an exception if the DataTable retrieved by the query does not match the model <br/>

/// being created (it compares the number of datatable columns with the number of assigned <br/>

/// values in the model). The default falue is false.

/// </summary>

public bool FailOnMismatch { get; set; }

/// <summary>

/// Get/set value indicating the SqlCommand object's timeout value (in seconds)

/// </summary>

public int TimeoutSecs { get; set; }

/// <summary>

/// Get/(protected) set the connection string.

/// </summary>

public string ConnectionString { get; protected set; }

/// <summary>

/// Get/set a flag indicating whether a return value parameter is added to the sql <br/>

/// parameter list if it's missing. This only applies to the SetData method <br/>

/// (insert/update/delete functionality). In order for this to work, you MUST return <br/>

/// @@ROWCOUNT from your stored proc.

/// </summary>

public bool AddReturnParamIfMissing { get; set; }

/// <summary>

/// Get/set the bulk insert batch size

/// </summary>

public int BulkInsertBatchSize { get; set; }

/// <summary>

/// Get/set the number of seconds before the bulk copy times out

/// </summary>

protected int BulkCopyTimeout { get; set; }

/// <summary>

/// Get/set options flag for SqlBulkCopy operations

/// </summary>

protected SqlBulkCopyOptions BulkCopyOptions { get; set; }

/// <summary>

/// Get/set the external transaction that can be set for/used by SqlBlukCopy.

/// </summary>

protected SqlTransaction ExternalTransaction { get; set; }

/// <summary>

/// Get/set a flag indicating whether the database can be accessed from <br/>

/// the GetData or SetData methods. Allows debugging of BLL without <br/>

/// actually reading from or writing to the database. Sefault value <br/>

/// is true.

/// </summary>

public bool CanReadWriteDB { get; set; }

#endregion properties

#region constructors

/// <summary>

/// Create instance of DALRepository, and set default values for properties.

/// </summary>

public DALRepository()

{

// this connection string *should* be base64 encoded

//this.ConnectionString = System.Configuration.ConfigurationSettings.AppSettings["DBConnectionString"];

//string connString = this._config.GetConnectionString("DBConnectionString");

AppConfiguration objAppConfiguration = new AppConfiguration();

this.ConnectionString = objAppConfiguration.ConnectionString;

this.Init();

}

#endregion constructors

#region protected data access methods

/// <summary>

/// Executes the named stored proc (using ExecuteReader) that gets data from the database. <br/>

/// </summary>

/// <typeparam name="T">The type of the list item</typeparam>

/// <param name="storedProc">The name of the stored procedure to execute</param>

/// <param name="parameters">The parameters to pass to the stored procedure</param>

/// <returns>A list of the specified object type (may be empty).</returns>

/// <remarks>Useage: List<MyObject> list = this.ExecuteStoredProc<MyObject>(...)</remarks>

/// <exception cref="ArgumentNullException">The storedProc parameter cannot be null/empty.</exception>

public virtual List<T> ExecuteStoredProc<T>(string storedProc, SqlParameter[] parameters)

{

if (string.IsNullOrEmpty(storedProc))

{

throw new ArgumentNullException("storedProc");

}

// get the data from the database

DataTable data = this.GetData(storedProc, parameters, CommandType.StoredProcedure);

List<T> collection = this.MakeEntityFromDataTable<T>(data);

return collection;

}

/// <summary>

/// Executes the specified stored proc (using ExecuteNonQuery) that stores data (specified <br/>

/// in the [parameters] parameter) in the database.

/// </summary>

/// <param name="storedProc">The stored proc to execute</param>

/// <param name="parameters">The parameters to pass to the stored procedure</param>

/// <returns>The number of records affected</returns>

/// <exception cref="ArgumentNullException">The [storedProc] parameter cannot be null/empty.</exception>

/// <exception cref="ArgumentNullException">The [parameters] array parameter cannot be null.</exception>

/// <exception cref="ArgumentNullException">The [parameters] array parameter cannot be empty.</exception>

public virtual int ExecuteStoredProc(string storedProc, SqlParameter[] parameters)

{

if (string.IsNullOrEmpty(storedProc))

{

throw new ArgumentNullException("storedProc");

}

if (parameters == null)

{

throw new ArgumentNullException("parameters");

}

if (parameters.Length == 0)

{

throw new InvalidOperationException("The [parameters] array must contain at least one item.");

}

// You must SET NOCOUNT OFF at the top of your stored proc in order to automatically

// return the @@ROWCOUNT value (created and set by sql server).

int result = this.SetData(storedProc, parameters, CommandType.StoredProcedure);

return result;

}

/// <summary>

/// Execute the specified stored proc to save the specified data item in the database.

/// </summary>

/// <typeparam name="T"></typeparam>

/// <param name="data">The data item to save</param>

/// <param name="storedProc">The stored proc to execute</param>

/// <param name="bulkType">How to build the SqlParameter array</param>

/// <param name="precedence">Whether to ignore the discovered SqlParameter[] property</param>

/// <param name="paramArrayPropName">Name of desired SqlParameter[] property</param>

/// <returns>The number of records affected</returns>

public virtual int ExecuteStoredProc<T>(T data,

string storedProc,

BulkInsertType bulkType,

ParamPrecedence precedence = ParamPrecedence.None,

string paramArrayPropName = "SqlParameters")

{

int result = 0;

SqlParameter[] parameters = DALRepository.MakeSqlParameters(data, bulkType, precedence, paramArrayPropName);

result = this.ExecuteStoredProc(storedProc, parameters);

return result;

}

/// <summary>

/// Executes the specified stored proc for an entity collection, using a persistent <br/>

/// sql connection. This is intended to be used for data that needs to be merged <br/>

/// (update or insert) into a table rather than simply inserted.

/// </summary>

/// <typeparam name="T">The type of entity represented by the specified collection</typeparam>

/// <param name="data">The collection of entities</param>

/// <param name="storedProc">The name of the stored proc (must be a stored proc)</param>

/// <param name="bulkType">Indicates how properties should be retrieved from the entity items</param>

/// <param name="precedence">Whether to ignore the discovered SqlParameter[] property</param>

/// <param name="paramArrayPropName">Name of desired SqlParameter[] property</param>

/// <exception cref="ArgumentNullException">If the data parameter is null</exception>

/// <exception cref="ArgumentNullException">If the storedProc parameter is null/empty</exception>

/// <exception cref="InvalidOperationException">If the data collection is empty.</exception>

/// <returns>The number of records affected (inserted + updated).</returns>

/// <remarks>Usage: int result = ExecuteStoredProc(data.AsEnumerable(), "dbo.MyStoredProc", BulkInsertType.DBInsertAttribute);</remarks>

protected virtual int ExecuteStoredProc<T>(IEnumerable<T> data,

string storedProc,

BulkInsertType bulkType,

ParamPrecedence precedence = ParamPrecedence.None,

string paramArrayPropName = "SqlParameters")

{

if (string.IsNullOrEmpty(storedProc))

{

throw new ArgumentNullException("storedProc");

}

if (data == null)

{

throw new ArgumentNullException("data");

}

if (data.Count() == 0)

{

throw new InvalidOperationException("Data collection must contain at least onme item");

}

int result = this.DoBulkMerge(data, storedProc, bulkType, CommandType.StoredProcedure, precedence, paramArrayPropName);

return result;

}

/// <summary>

/// Executes the specified query (using ExecuteReader) that gets data from the database.

/// </summary>

/// <typeparam name="T">The type of the list item</typeparam>

/// <param name="query">The query text to execute</param>

/// <param name="parameters">The data to pass to the query text</param>

/// <returns>A list of the specified type.</returns>

/// <remarks>Useage: List<MyObject> list = this.ExecuteStoredProc<MyObject>(...)</remarks>

/// <exception cref="ArgumentNullException">If the query parameter is null/empty</exception>

protected virtual List<T> ExecuteQuery<T>(string query, params SqlParameter[] parameters)

{

// If you have questions regarding the use of parameters in query text, google

// "c# parameterized queries". In short, parameterized queries prevent sql

// injection. This code does not (and cannot) validate the use of parameters

// because some queries simply don't need them. Therefore, it's completely

// on you - the developer - to make sure you're doing it right.

if (string.IsNullOrEmpty(query))

{

throw new ArgumentNullException("query");

}

DataTable data = this.GetData(query, parameters, CommandType.Text);

List<T> collection = this.MakeEntityFromDataTable<T>(data);

return collection;

}

/// <summary>

/// Executes the specified query text (using ExecuteNonQuery) that stores data in the <br/>

/// database.

/// </summary>

/// <param name="query"></param>

/// <param name="parameters"></param>

/// <returns>The number of records affected (if you didn't use SET NOCOUNT ON in

/// your batch)</returns>

/// <exception cref="ArgumentNullException">If the query parameter is null/empty</exception>

protected virtual int ExecuteQuery(string query, params SqlParameter[] parameters)

{

// If you have questions regarding the use of parameters in query text, google

// "c# parameterized queries". In short, parameterized queries prevent sql

// injection. This code does not (and cannot) validate the use of parameters

// because some queries simply don't need them. Therefore, it's completely

// on you - the developer - to make sure you're doing it right.

if (string.IsNullOrEmpty(query))

{

throw new ArgumentNullException("query");

}

// Save the data to the database. If you use SET NOCOUNT ON in your query, the return

// value will always be -1, regardless of how many rows are actually affected.

int result = this.SetData(query, parameters, CommandType.Text);

return result;

}

/// <summary>

/// Execute the specified sql query to save the specified data item. This method creates the <br/>

/// parameters for you using the properties in the specified entity. While not required, you <br/>

/// can "grease the skids" by implementing a public property in your entities that returns a <br/>

/// SqlParameter[] array.

/// </summary>

/// <typeparam name="T"></typeparam>

/// <param name="data">The data item to save</param>

/// <param name="query">The sql query text to execute</param>

/// <param name="bulkType">Indicates how to build the SqlParameter array</param>

/// <param name="precedence">Whether to ignore the discovered SqlParameter[] property</param>

/// <param name="paramArrayPropName">Name of desired SqlParameter[] property</param>

/// <returns>The number of records affected.</returns>

protected virtual int ExecuteQuery<T>(T data,

string query,

BulkInsertType bulkType,

ParamPrecedence precedence = ParamPrecedence.None,

string paramArrayPropName = "SqlParameters")

{

int result = 0;

SqlParameter[] parameters = DALRepository.MakeSqlParameters(data, bulkType);

result = this.ExecuteQuery(query, parameters);

return result;

}

/// <summary>

/// Performs an insert of an entity collection, using a persistent connection (reduces <br/>

/// processing time and memory consumption because we're not opening/closing a database <br/>

/// connection for every item). This method is intended to be used for data that needs <br/>

/// to be merged (update or insert) into a table rather than simply inserted.

/// </summary>

/// <typeparam name="T">The type of entity represented by the specified collection</typeparam>

/// <param name="data">The collection of entities</param>

/// <param name="storedProc">The name of the stored proc (must be a stored proc)</param>

/// <param name="bulkType">Indicates how properties should be retrieved from the entity items</param>

/// <param name="precedence">Whether to ignore the discovered SqlParameter[] property</param>

/// <param name="paramArrayPropName">Name of desired SqlParameter[] property</param>

/// <exception cref="ArgumentNullException">If the data parameter is null</exception>

/// <exception cref="ArgumentNullException">If the query parameter is null/empty</exception>

/// <exception cref="InvalidOperationException">If the data collection is empty.</exception>

/// <returns>The number of records affected.</returns>

protected virtual int ExecuteQuery<T>(IEnumerable<T> data,

string query,

BulkInsertType bulkType,

ParamPrecedence precedence = ParamPrecedence.None,

string paramArrayPropName = "SqlParameters")

{

if (string.IsNullOrEmpty(query))

{

throw new ArgumentNullException("query");

}

if (data == null)

{

throw new ArgumentNullException("data");

}

if (data.Count() == 0)

{

throw new InvalidOperationException("Data collection must contain at least onme item");

}

int result = this.DoBulkMerge(data, query, bulkType, CommandType.Text, precedence, paramArrayPropName);

return result;

}

/// <summary>

/// Performs a simply bulk insert into a table in the database. The schema MUST be part of <br/>

/// the table name. Using a bulk insert is NOT suitable if you need to merge data into an <br/>

/// existing table. Use the BulkMerge stored proc instead.

/// </summary>

/// <param name="dataTable">The datatable to bulk copy</param>

/// <returns>The number of records affected.</returns>

/// <exception cref="InvalidOperationException">If the table name hasn't been specified in the datatable</exception>

/// <exception cref="InvalidOperationException">If the schema hasn't been specified as part of the tablename</exception>

/// <exception cref="InvalidOperationException">If the dataTable is empty</exception>

protected virtual int ExecuteBulkInsert(DataTable dataTable)

{

if (string.IsNullOrEmpty(dataTable.TableName))

{

throw new InvalidOperationException("The table name MUST be specified in the datatable (including the schema).");

}

if (!dataTable.TableName.Contains('.') || dataTable.TableName.StartsWith("."))

{

throw new InvalidOperationException("The schema MUST be specified with the table name.");

}

if (dataTable.Rows.Count == 0)

{

throw new InvalidOperationException("The dataTable must contain at least one item");

}

int recsBefore = this.BulkInsertTargetCount(dataTable.TableName);

int recordsAffected = 0;

SqlConnection conn = null;

SqlBulkCopy bulk = null;

using (conn = new SqlConnection(this.ConnectionString.Base64Decode()))

{

conn.Open();

using (bulk = new SqlBulkCopy(conn, this.BulkCopyOptions, this.ExternalTransaction)

{

BatchSize = this.BulkInsertBatchSize

BulkCopyTimeout = this.BulkCopyTimeout

DestinationTableName = dataTable.TableName

})

{

Debug.WriteLine("DoBulkInsert - inserting {0} rows", dataTable.Rows.Count);

bulk.WriteToServer(dataTable);

}

int recsAfter = this.BulkInsertTargetCount(dataTable.TableName);

recordsAffected = recsAfter - recsBefore;

return recordsAffected;

}

/// <summary>

/// Performs a simple bulk insert into a table in the database. The schema MUST be part of <br/>

/// the table name.

/// </summary>

/// <typeparam name="T">The entity type being bulk inserted</typeparam>

/// <param name="data">The list of entities to be inserted</param>

/// <param name="tableName">The table name in which to insert the data</param>

/// <param name="bulkType">Indicates how properties should be retrieved from the entity items</param>

/// <param name="precedence">Whether to ignore the discovered SqlParameter[] property</param>

/// <param name="paramArrayPropName">Name of desired SqlParameter[] property</param>

/// <returns>Number of records affected.</returns>

/// <exception cref="ArgumentNullException">If the data parameter is null.</exception>

/// <exception cref="ArgumentNullException">If The tableName parameter cannot be null/empty.</exception>

/// <exception cref="InvalidOperationException">If the data collection is empty.</exception>

/// <exception cref="InvalidOperationException">If the table name doesn't include the schema.</exception>

protected virtual int ExecuteBulkInsert<T>(IEnumerable<T> data,

string tableName,

BulkInsertType bulkType,

ParamPrecedence precedence = ParamPrecedence.None,

string paramArrayPropName = "SqlParameters")

{

// sanity checks

if (data == null)

{

throw new ArgumentNullException("data");

}

if (data.Count() == 0)

{

throw new InvalidOperationException("The data collection must contain at least one item");

}

if (string.IsNullOrEmpty(tableName))

{

throw new ArgumentNullException("The tableName parameter cannot be null or empty.");

}

if (!tableName.Contains('.'))

{

throw new InvalidOperationException("The schema MUST be specified with the table name.");

}

int result = 0;

DataTable dataTable = null;

if (data.Count() > 0)

{

dataTable = this.MakeDataTable(data, tableName, bulkType, precedence, paramArrayPropName);

result = this.ExecuteBulkInsert(dataTable);

}

return result;

}

#endregion protected data access methods

#region Protected helper methods

/// <summary>

/// Set some reasonable defaults

/// </summary>

protected virtual void Init()

{

// this method is called from the constructor(s), and exists so that we can overload

// the constructor without duplicating code.

this.TimeoutSecs = 300;

this.FailOnMismatch = false;

this.AddReturnParamIfMissing = true;

this.ExternalTransaction = null;

this.BulkInsertBatchSize = 250;

this.BulkCopyTimeout = 600;

this.BulkCopyOptions = SqlBulkCopyOptions.Default;

this.CanReadWriteDB = true;

}

/// <summary>

/// Allows the programmer to test the database connection before trying to use it.

/// </summary>

/// <returns>If valid and empty string, otherwise, the message text from the ensuing <br/>exception.</returns>

protected virtual string TestConnection()

{

// assume success

string result = string.Empty;

SqlConnection conn = null;

try

{

using (conn = new SqlConnection(this.ConnectionString.Base64Decode()))

{

conn.Open();

conn.Close();

}

catch (Exception ex)

{

result = ex.Message;

}

return result;

}

/// <summary>

/// Adds a try/catch block, as well as a transaction (with optional name) to the specified <br/>

/// plain sql query text. This code does not checkt to see if transaction code is already <br/>

/// part of the query.

/// </summary>

/// <param name="query">The query to encase</param>

/// <param name="logQuery">The query that implements your logging mechanism.</param>

/// <param name="transactionName">The desired transaction name (optional)</param>

/// <returns></returns>

protected virtual string AddTryCatchTranToQuery(string query, string logQuery, string transactionName = "")

{

transactionName = transactionName.Trim();

logQuery = logQuery.Trim();

StringBuilder text = new StringBuilder();

text.AppendLine("BEGIN TRY");

text.AppendFormat(" BEGIN TRAN {0};", transactionName).AppendLine();

text.AppendLine(query).AppendLine();

text.AppendFormat(" COMMIT TRAN {0};", transactionName).AppendLine();

text.AppendLine("END TRY");

text.AppendLine("BEGIN CATCH");

text.AppendFormat(" IF @@TRANCOUNT > 0 ROLLBACK TRAN {0};", transactionName).AppendLine();

text.AppendLine(logQuery);

text.AppendLine("END CATCH");

return text.ToString();

}

/// <summary>

/// Normalizes the table name so there's no chance of sql injection. You can't be too careful.

/// </summary>

/// <param name="tableName">The table name (should have the schema included as well.</param>

/// <returns>The tablename with square brackets around it</returns>

protected virtual string NormalizeTableName(string tableName)

{

string[] parts = tableName.Split('.');

tableName = string.Empty;

foreach (string part in parts)

{

tableName = (string.IsNullOrEmpty(tableName))

? string.Format("[{0}]", part)

: string.Format(".[{0}]", part);

}

return tableName.Replace("[[", "[").Replace("]]", "]");

}

/// <summary>

/// Counts the number of records currently in the tarble targeted by the merge attempt.

/// </summary>

/// <param name="tableName">The table we're counting</param>

/// <returns>The number of records in the specified table</returns>

protected virtual int BulkInsertTargetCount(string tableName)

{

if (string.IsNullOrEmpty(tableName))

{

throw new ArgumentNullException("tableName");

}

if (!tableName.Contains('.') || tableName.StartsWith("."))

{

throw new InvalidOperationException("The [tableName] must include a schema. Example: 'dbo.tableName'");

}

int result = 0;

string query = string.Format("SELECT COUNT(1) FROM {0}", this.NormalizeTableName(tableName));

List<EntityRowCount> rowCount = this.ExecuteQuery<EntityRowCount>(query);

if (rowCount != null && rowCount.Count > 0)

{

result = rowCount[0].Count;

}

return result;

}

/// <summary>

/// Calls SqlCommand.ExecuteDataReader() to retrieve a dataset from the database.

/// </summary>

/// <param name="cmdText">The storedproc or query to execute</param>

/// <param name="parameters">The parameters to use in the storedproc/query</param>

/// <returns></returns>

/// <exception cref="ArgumentNullException">The cmdText parameter cannot be null/empty.</exception>

protected virtual DataTable GetData(string cmdText,

SqlParameter[] parameters = null,

CommandType cmdType = CommandType.StoredProcedure)

{

if (string.IsNullOrEmpty(cmdText))

{

throw new ArgumentNullException("cmdText");

}

//------------------------

// by defining these variables OUTSIDE the using statements, we can evaluate them in

// the debugger even when the using's go out of scope.

SqlConnection conn = null;

SqlCommand cmd = null;

SqlDataReader reader = null;

DataTable data = null;

// create the connection

using (conn = new SqlConnection(this.ConnectionString.Base64Decode()))

{

// open it

conn.Open();

// create the SqlCommand object

using (cmd = new SqlCommand(cmdText, conn) { CommandTimeout = this.TimeoutSecs, CommandType = cmdType })

{

// give the SqlCommand object the parameters required for the stored proc/query

if (parameters != null)

{

cmd.Parameters.AddRange(parameters);

}

//create the SqlDataReader

if (this.CanReadWriteDB)

{

using (reader = cmd.ExecuteReader())

{

// move the data to a DataTable

data = new DataTable();

data.Load(reader);

}

// return the DataTable object to the calling method

return data;

}

/// <summary>

/// Calls SqlCommand.ExecuteNonQuery to save data to the database.

/// </summary>

/// <param name="cmdText">The query text to execute</param>

/// <param name="parameters">The parameters to use</param>

/// <param name="cmdType">The sql command type</param>

/// <param name="useAdoTransaction">Flag indicating to wrap query with ado transaction</param>

/// <returns>The number of records affected</returns>

/// <exception cref="ArgumentNullException">The cmdText parameter cannot be null/empty.</exception>

protected virtual int SetData(string cmdText,

SqlParameter[] parameters,

CommandType cmdType = CommandType.StoredProcedure,

bool useAdoTransaction = false)

{

if (string.IsNullOrEmpty(cmdText))

{

throw new ArgumentNullException("cmdText");

}

int result = 0;

SqlConnection conn = null;

SqlCommand cmd = null;

SqlTransaction transaction = null;

using (conn = new SqlConnection(this.ConnectionString.Base64Decode()))

{

conn.Open();

if (useAdoTransaction && cmdType != CommandType.StoredProcedure)

{

transaction = conn.BeginTransaction();

}

using (cmd = new SqlCommand(cmdText, conn) { CommandTimeout = this.TimeoutSecs, CommandType = cmdType })

{

SqlParameter rowsAffected = null;

if (parameters != null)

{

cmd.Parameters.AddRange(parameters);

// if this is a stored proc and we want to add a return param

if (cmdType == CommandType.StoredProcedure && this.AddReturnParamIfMissing)

{

// see if we already have a return parameter

rowsAffected = parameters.FirstOrDefault(x => x.Direction == ParameterDirection.ReturnValue);

// if we don't, add one.

if (rowsAffected == null)

{

rowsAffected = cmd.Parameters.Add(new SqlParameter("@rowsAffected", SqlDbType.Int) { Direction = ParameterDirection.ReturnValue });

}

try

{

if (this.CanReadWriteDB)

{

result = cmd.ExecuteNonQuery();

}

catch (SqlException ex)

{

if (transaction != null && cmdType != CommandType.StoredProcedure)

{

transaction.Rollback();

}

throw (ex);

}

result = (rowsAffected != null) ? (int)rowsAffected.Value : result;

}

return result;

}

/// <summary>

/// Base BulkMerge

/// </summary>

/// <typeparam name="T">The entity type represented by the collection</typeparam>

/// <param name="data">The entity collection</param>

/// <param name="queryText">The query text to execute</param>

/// <param name="bulkType">How to extract propertiues from the entity</param>

/// <param name="cmdType">The sql command type</param>

/// <returns>Number of records affected.</returns>

protected virtual int DoBulkMerge<T>(IEnumerable<T> data,

string queryText,

BulkInsertType bulkType,

CommandType cmdType,

ParamPrecedence precedence = ParamPrecedence.None,

string paramArrayPropName = "SqlParameters",

bool useAdoTransaction = false)

{

if (string.IsNullOrEmpty(queryText))

{

throw new ArgumentNullException("queryText");

}

int result = 0;

SqlConnection conn = null;

SqlCommand cmd = null;

SqlTransaction transaction = null;

using (conn = new SqlConnection(this.ConnectionString.Base64Decode()))

{

conn.Open();

if (useAdoTransaction && cmdType != CommandType.StoredProcedure)

{

transaction = conn.BeginTransaction();

}

using (cmd = new SqlCommand(queryText, conn) { CommandTimeout = this.TimeoutSecs, CommandType = cmdType })

{

try

{

foreach (T item in data)

{

SqlParameter[] parameters = DALRepository.MakeSqlParameters(item, bulkType, precedence, paramArrayPropName);

if (parameters != null)

{

cmd.Parameters.AddRange(parameters);

if (this.CanReadWriteDB)

{

cmd.ExecuteNonQuery();

}

cmd.Parameters.Clear();

result++;

}

catch (Exception ex)

{

if (transaction != null)

{

transaction.Rollback();

}

throw (ex);

}

return result;

}

/// <summary>

/// Converts a value from its database value to something we can use (we need this because <br/>

/// we're using reflection to populate our entities)

/// </summary>

/// <typeparam name="T">The object type</typeparam>

/// <param name="obj">The object</param>

/// <param name="defaultValue">The default value to be used if object is null</param>

/// <returns>The object of the associated C# data type</returns>

protected static T ConvertFromDBValue<T>(object obj, T defaultValue)

{

T result = (obj == null || obj == DBNull.Value) ? default(T) : (T)obj;

return result;

}

/// <summary>

/// Creates the list of entities from the specified DataTable object. We do this because we <br/>

/// have two methods that both need to do the same thing.

/// </summary>

/// <typeparam name="T">The entity type represented by the collection</typeparam>

/// <param name="data">The entity collection</param>

/// <returns>The instantiated and populated list of entities.</returns>

/// <exception cref="ArgumentNullException">The data parameter cannot be null.</exception>

protected virtual List<T> MakeEntityFromDataTable<T>(DataTable data)

{

if (data == null)

{

throw new ArgumentNullException("data");

}

//----------------------------

Type objType = typeof(T);

List<T> collection = new List<T>();

// if we got back data

if (data != null && data.Rows.Count > 0)

{

// we're going to count how many properties in the model were assigned from the

// datatable.

int matched = 0;

foreach (DataRow row in data.Rows)

{

// create an instance of our object

T item = (T)Activator.CreateInstance(objType);

// get our object type's properties

PropertyInfo[] properties = objType.GetProperties();

// set the object's properties as they are found.

foreach (PropertyInfo property in properties)

{

if (data.Columns.Contains(property.Name))

{

Type pType = property.PropertyType;

var defaultValue = pType.GetDefaultValue();

var value = row[property.Name];

value = DALRepository.ConvertFromDBValue(value, defaultValue);

property.SetValue(item, value);

matched++;

}

if (matched != data.Columns.Count && this.FailOnMismatch)

{

throw new Exception("Data retrieved does not match specified model.");

}

collection.Add(item);

}

return collection;

}

/// <summary>

/// Creates a DataTable and populates it with the specified data collection.

/// </summary>

/// <typeparam name="T">The entity type represented by the collection</typeparam>

/// <param name="data">The collection of entties</param>

/// <param name="tableName">The name of the table to insert the data into</param>

/// <param name="bulkType">How to populate the columns from the entity</param>

/// <returns>The created/populated DataTable object.</returns>

public virtual DataTable MakeDataTable<T>(IEnumerable<T> data,

string tableName,

BulkInsertType bulkType,

ParamPrecedence precedence = ParamPrecedence.None,

string paramArrayPropName = "SqlParameters")

{

DataTable dataTable = null;

Debug.WriteLine(string.Format("MakeDataTable - {0} data items specified.", data.Count()));

using (dataTable = new DataTable() { TableName = tableName })

{

Type type = typeof(T);

// Get the properties to send to the database. If byDBInsertAttribute is true, only object

// properties that are decorated with the CanDBInsert attribute will be retrieved. If

// byDBInsertAttribute is false, only properties that have a Set method will be retrieved

PropertyInfo[] properties = DALRepository.GetEntityProperties(type, bulkType);

Debug.WriteLine(string.Format("MakeDataTable - {0} item properties per item.", properties.Length));

// create columns that match the retrieved properties

foreach (PropertyInfo property in properties)

{

//dataTable.Columns.Add(new DataColumn(property.Name, property.PropertyType));

dataTable.Columns.Add(new DataColumn(property.Name, Nullable.GetUnderlyingType(property.PropertyType) ?? property.PropertyType));

}

Debug.WriteLine(string.Format("MakeDataTable - {0} dataTable columns created.", dataTable.Columns.Count));

// add the rows to the datatable

foreach (T entity in data)

{

DataRow row = dataTable.NewRow();

foreach (PropertyInfo property in properties)

{

row[property.Name] = property.GetValue(entity) == null ? DBNull.Value : property.GetValue(entity);

}

dataTable.Rows.Add(row);

}

Debug.WriteLine(string.Format("MakeDataTable - {0} rows created.", dataTable.Rows.Count));

return dataTable;

}

#endregion Protected helper methods

}

DALStaticMethods.cs

using SMS.DAL.Common;

using System;

using System.Collections.Generic;

using System.Data.SqlClient;

using System.Linq;

using System.Reflection;

using System.Text;

using System.Threading.Tasks;

namespace SMS.DAL

{

public partial class DALRepository

{

// If you want to make these methods public, simply uncomment the compiler definition at

// the top of this file.

/// <summary>

/// Get properties for the specified type, as indicated by the bulkType

/// </summary>

/// <param name="type">The object type</param>

/// <param name="bulkType">How to get properties</param>

/// <returns>An array of PropertyInfo</returns>

#if __PUBLIC_STATIC__

public

#else

protected

#endif

static PropertyInfo[] GetEntityProperties(Type type, BulkInsertType bulkType)

{

PropertyInfo[] properties = type.GetProperties();

switch (bulkType)

{

case BulkInsertType.DBInsertAttribute:

properties = type.GetProperties().Where(prop => Attribute.IsDefined(prop, typeof(CanDbInsertAttribute))).ToArray();

break;

case BulkInsertType.HaveSetMethod:

properties = type.GetProperties().Where(prop => prop.GetSetMethod() != null).ToArray();

break;

}

return properties;

}

/// <summary>

/// Gets the entity properties as directed by the specified bulkType.

/// </summary>

/// <typeparam name="T">The entity's type</typeparam>

/// <param name="entity">The entity object</param>

/// <param name="bulkType">The bulk type</param>

/// <returns>The properties indicated by the specified bulkType</returns>

#if __PUBLIC_STATIC__

public

#else

protected

#endif

static PropertyInfo[] GetEntityProperties<T>(T entity, BulkInsertType bulkType)

{

PropertyInfo[] properties = entity.GetType().GetProperties();

properties = DALRepository.GetEntityProperties(properties, bulkType);

return properties;

}

/// <summary>

/// Gets the property entites as directed by the specified bulkType.

/// </summary>

/// <param name="properties"> The rpoerties to extract from</param>

/// <param name="bulkType">The bulk type</param>

/// <returns>The properties indicated by the specified bulkType</returns>

#if __PUBLIC_STATIC__

public

#else

protected

#endif

static PropertyInfo[] GetEntityProperties(PropertyInfo[] properties, BulkInsertType bulkType)

{

// the "bulkType" (admittedly poorly named) indicates how we look for properties

// in the entity.

switch (bulkType)

{

// general note: the accessibility doesn't really matter because you may want

// to include a private property along with the public ones, so all of the

// following cases pull all properties that match the inidcated conditions.

case BulkInsertType.ALL:

// hoover them all up

break;

case BulkInsertType.DBInsertAttribute:

// only get properties that are decorated with the CanDbInsert attribute

// (a custom attribute that's part of this class library)

properties = properties.Where(prop => Attribute.IsDefined(prop, typeof(CanDbInsertAttribute))).ToArray();

break;

case BulkInsertType.HaveSetMethod:

// only get properties that have a "set" method. There are a few ways to

// check for this, but I chose this one.

properties = properties.Where(prop => prop.SetMethod != null).ToArray();

break;

// feel free to more items in the BulkInsertType enumerator, and handle

// them here.

};

return properties;

}

/// <summary>

/// Creates a SqlParameter array from the specified entity, and based on the specified <br/>

/// bulk insert type

/// </summary>

/// <typeparam name="T">The entity type</typeparam>

/// <param name="entity">The entity object</param>

/// <param name="bulkType">The bulk insert type.</param>

/// <param name="precedence">How to treat the discovered SqlParameter[] property (if any)</param>

/// <param name="propertyName">Case-sensitive name of desired SqlParameter[] property</param>

/// <returns>An appropriate SqlParameter array </returns>

/// <exception cref="ArgumentNullException">The entity cannot be null</exception>

/// <exception cref="InvalidOperationException">The propertyName should never be null.</exception>

#if __PUBLIC_STATIC__

public

#else

protected

#endif

static SqlParameter[] MakeSqlParameters<T>(T entity,

BulkInsertType bulkType,

ParamPrecedence precedence = ParamPrecedence.None,

string propertyName = "SqlParameters")

{

if (entity == null)

{

throw new ArgumentNullException("entity");

}

if (string.IsNullOrEmpty(propertyName))

{

throw new InvalidOperationException("It makes no sense to specify a null propertyName. Ever.");

}

SqlParameter[] parameters = null;

PropertyInfo[] properties = entity.GetType().GetProperties();

// see if we can find the specified propertyName that returns a SqlParameter[] (with the right name)

PropertyInfo sqlParams = sqlParams = properties.FirstOrDefault(x => x.PropertyType.Name == "SqlParameter[]" &&

x.Name == propertyName);

// if the entity has a property that returns a SqlParameter array AND the calling

// method did not specify to ignore it, set the parameters var to that property's

// value, and our job is done here

if (sqlParams != null && precedence != ParamPrecedence.UseBulkType)

{

parameters = (SqlParameter[])sqlParams.GetValue(entity);

}

else

// looks like we gotta finger it out on our own - NOBODY EXPECTED THE MANUAL DETECTION!!

{

List<SqlParameter> list = new List<SqlParameter>();

properties = DALRepository.GetEntityProperties(properties, bulkType);

// populate the list of SqlPrameters from the properties we gatherd in the switch statment.

foreach (PropertyInfo property in properties)

{

list.Add(new SqlParameter(string.Format("@{0}", property.Name), property.GetValue(entity)));

}

parameters = list.ToArray();

}

#if DEBUG

Global.WriteLine("-----------------------------");

if (properties.Length == 0)

{

Global.WriteLine("No properties found.");

}

else

{

// satisfy my fanatical desire to line stuff up.

int length = parameters.Max(x => x.ParameterName.Length) + 1;

string format = string.Concat(" {0,-", length.ToString(), "}{1}");

//// i thought this was providing redundant info, but only commented it out so I can

//// easily get it back if needed.

//Global.WriteLine("Discovered properties:");

//foreach(PropertyInfo item in properties)

//{

// string text = string.Format(format, item.Name, item.GetValue(entity).ToString());

// Global.WriteLine(text);

//}

Global.WriteLine("Resulting parameters:");

foreach (SqlParameter item in parameters)

{

string text = string.Format(format, item.ParameterName, item.SqlValue);

Global.WriteLine(text);

}

#endif

// and return them to the calling method

return parameters;

}

StudentDataAccessLayer.cs

using SMS.Entity;

using SMS.Utility;

using System.Data;

using System.Data.SqlClient;

namespace SMS.DAL

{

public class StudentDataAccessLayer

{

string connectionString = ConnectionString.CName;

public IEnumerable<Student> GetAllStudent()

{

List<Student> lstStudent = new List<Student>();

Student student = new Student();

DALRepository objDALRepository = new DALRepository();

var parameters = new List<SqlParameter>

{

new SqlParameter ("@TransactionId",1),

new SqlParameter("@Id", 1)

};

lstStudent = objDALRepository.ExecuteStoredProc<Student>("spGetAllStudent", parameters.ToArray());

return lstStudent;

}

public void AddStudent(Student student)

{

DALRepository objDALRepository = new DALRepository();

var parameters = new List<SqlParameter>

{

new SqlParameter("@FirstName", student.FirstName ),

new SqlParameter("@LastName",student.LastName),

new SqlParameter("@Email", student.Email),

new SqlParameter("@Mobile",student.Mobile),

new SqlParameter("@Address", student.Address),

};

int result = objDALRepository.ExecuteStoredProc("spAddStudent", parameters.ToArray());

}

public void UpdateStudent(Student student)

{

DALRepository objDALRepository = new DALRepository();

var parameters = new List<SqlParameter>

{

new SqlParameter("@FirstName", student.FirstName ),

new SqlParameter("@LastName",student.LastName),

new SqlParameter("@Email", student.Email),

new SqlParameter("@Mobile",student.Mobile),

new SqlParameter("@Address", student.Address),

};

int result = objDALRepository.ExecuteStoredProc("spAddStudent", parameters.ToArray());

}

public Student GetStudentData(int? id)

{

Student student = new Student();

DALRepository objDALRepository = new DALRepository();

var parameters = new List<SqlParameter>

{

new SqlParameter ("@TransactionId",2),

new SqlParameter("@Id", id)

};

student = objDALRepository.ExecuteStoredProc<Student>("spGetAllStudent", parameters.ToArray()).FirstOrDefault();

return student;

}

public void DeleteStudent(int? id)

{

DALRepository objDALRepository = new DALRepository();

var parameters = new List<SqlParameter>

{

new SqlParameter("@Id", id )

};

int result = objDALRepository.ExecuteStoredProc("spDeleteStudent", parameters.ToArray());

}

public int LoginCheck(Student objStudent)

{

int result = 0;

Student student = new Student();

DALRepository objDALRepository = new DALRepository();

var parameters = new List<SqlParameter>

{

new SqlParameter ("@UserName",objStudent.UserName),

new SqlParameter("@Password", objStudent.Password)

};

student = objDALRepository.ExecuteStoredProc<Student>("spLogin", parameters.ToArray()).FirstOrDefault();

if (student == null)

{

result = 0;

}

else

{

result = 1;

}

return result;

}

Create Entity Project and add Student Class

Student.cs

using System.ComponentModel.DataAnnotations;

namespace SMS.Entity

{

public class Student

{

public int Id { set; get; }

public string FirstName { set; get; }

public string LastName { set; get; }

public string Email { set; get; }

public string Mobile { set; get; }

public string Address { set; get; }

public string UserName { get; set; }

public string Password { set; get; }

}

Run Project and check below screenshots

Click on login, if login success then will redirect to listing screen

CRUD Operations Using ReactJS Hooks and Web API

2021-10-11T05:59:00.013-05:00

Introduction

Hooks are a new concept that was introduced in React 16.8. Hooks are an alternative to classes.

In this article, I'm going to create CRUD operations using React Hooks and Web API.

Prerequisites

Basic knowledge of React.js and Web API.

Visual Studio should be installed on your system.

SQL Server Management Studio.

Basic knowledge of React strap and HTML.

Create a ReactJS Project

Let's create a React app by using the following command:

npx create-react-app crudhooks

Open the newly created project in Visual Studio Code and install Reactstrap and Bootstrap in this project by using the following commands.

npm install --save bootstrap

npm install --save reactstrap react react-dom

Now, open the index.js file and add import Bootstrap.

import 'bootstrap/dist/css/bootstrap.min.css';

Now, install the Axios library by using the following command.

npm install --save axios

Now, go to the src folder, create a new folder, and inside this folder, add three new components:

Createemployee.js.

Editemployee.js.

EmployeList.js.

Add Routing in ReactJS

Install the react-router-dom package by using the following command:

npm install react-router-dom --save

Open the app.js file and import Router, Route (react-router-dom), and the three components

Add the following code in the app.js file:

import React from 'react'; 
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } 
        from 'react-router-dom'; 
import Createemployee from './components/Createemployee'
import EmployeList from './components/EmployeList' 
import Editemployee from "./components/Editemployee"; 

function App() {  
    return ( 
      <div className="App"> 
       <Router>
        <div className="container">  
          <nav className="btn btn-warning navbar navbar-expand-lg navheader">  
            <div className="collapse navbar-collapse" >  
              <ul className="navbar-nav mr-auto">
                <li className="nav-item">
                  <Link to={'/Createemployee'} 
                    className="nav-link">Add Employee</Link> 
                </li>
                <li className="nav-item">
                  <Link to={'/EmployeList'} 
                    className="nav-link">Employee List</Link>
                </li>    
              </ul> 
            </div> 
          </nav> <br />
          <Switch>   
            <Route exact path='/Createemployee' component={Createemployee} />  
            <Route path='/edit/:id' component={Editemployee} />  
            <Route path='/EmployeList' component={EmployeList} />    
          </Switch>    
        </div>    
      </Router>   
      </div> 
    );  
  }  
  export default App;  

Now, open the Createemployee.js file and add the following code:

import React, { useState, useEffect } from 'react'  
import axios from 'axios'; 
import { Button, Card, CardBody, CardFooter, Col, Container, Form, Input, InputGroup,
        InputGroupAddon, InputGroupText, Row } from 'reactstrap';  
function Createemployee(props) {  
  const [employee, setemployee] = useState({ Name: '', Department: '', Age: '', 
        City: '', Country: '', Gender: '' });
  const [showLoading, setShowLoading] = useState(false);  
  const apiUrl = "http://localhost:62168/api/Hooks/CreateEmp";  

  const Insertemployee = (e) => {  
    e.preventDefault();
    debugger;  
    const data = { Name:employee.Name, Department: employee.Department, 
                    Age: employee.Age, City:employee.City, 
                    Country: employee.Country, Gender: employee.Gender }; 
    axios.post(apiUrl, data)  
      .then((result) => {  
        props.history.push('/EmployeList')  
      });  
  };  
  const onChange = (e) => { 
    e.persist();  
    debugger;
    setemployee({...employee, [e.target.name]: e.target.value}); 
  }  

  return (  
    <div className="app flex-row align-items-center">  
      <Container>  
        <Row className="justify-content-center">  
          <Col md="12" lg="10" xl="8"> 
            <Card className="mx-4">  
              <CardBody className="p-4">  
                <Form onSubmit={Insertemployee}>
                  <h1>Register</h1>  
                  <InputGroup className="mb-3">  
                    <Input type="text" name="Name" id="Name" placeholder="Name" 
                    value={employee.Name} onChange={ onChange }  /> 
                  </InputGroup>  
                   <InputGroup className="mb-3"> 
                    <Input type="text" placeholder="Department" name="Department" 
                        id="Department" value={employee.Department} 
                        onChange={ onChange }/>  
                  </InputGroup>
                  <InputGroup className="mb-3"> 
                    <Input type="text" placeholder="Age" name="Age" id="Age"  
                        value={employee.Age} onChange={ onChange }  />  
                  </InputGroup>  
                  <InputGroup className="mb-4">  
                    <Input type="text" placeholder="City" name="City" id="City" 
                        value={employee.City} onChange={ onChange }  /> 
                  </InputGroup>  
                  <InputGroup className="mb-4">  
                    <Input type="text" placeholder="Country" name="Country" 
                        id="Country" value={employee.Country} 
                        onChange={ onChange } />  
                  </InputGroup>
                  <InputGroup className="mb-4">   
                     <Input type="text" placeholder="Gender" name="Gender" 
                        id= "Gender" value={employee.Gender} 
                        onChange={ onChange } />  
                  </InputGroup>
             <CardFooter className="p-4"> 
                <Row>  
                  <Col xs="12" sm="6">  
                    <Button type="submit" className="btn btn-info mb-1" block>
                    <span>Save</span></Button>  
                  </Col>  
                  <Col xs="12" sm="6">
                    <Button className="btn btn-info mb-1" block>
                        <span>Cancel</span></Button> 
                  </Col>  
                </Row>  
              </CardFooter>
                </Form>
              </CardBody>  
            </Card>  
          </Col>
        </Row>
      </Container> 
    </div>  
  )  
}  

export default Createemployee  

Now, open the EmployeList.js file and add the following code:

import React from 'react'  
import { Badge, Card, CardBody, CardHeader, Col, Pagination, PaginationItem, 
            PaginationLink, Row, Table } from 'reactstrap';
import axios from 'axios'; 
import { useState, useEffect } from 'react'  
function EmployeList(props) {  
  const [data, setData] = useState([]);

  useEffect(() => {  
    const GetData = async () => {
      const result = await axios('http://localhost:62168/api/hooks/employee'); 
      setData(result.data);
    };

    GetData();
  }, []);  
  const deleteeployee = (id) => {  
    debugger; 
    axios.delete('http://localhost:62168/api/hooks/Deleteemployee?id=' + id)  
      .then((result) => {  
        props.history.push('/EmployeList')  
      });  
  };  
  const editemployee = (id) => { 
    props.history.push({ 
      pathname: '/edit/' + id 
    });
  };  

  return (  
    <div className="animated fadeIn">  
      <Row>  
        <Col> 
          <Card>  
            <CardHeader>
              <i className="fa fa-align-justify"></i> Employee List  
              </CardHeader>  
            <CardBody>  
              <Table hover bordered striped responsive size="sm">  
                <thead> 
                  <tr>  
                    <th>Name</th>  
                    <th>Department</th>  
                    <th>Age</th> 
                    <th>City</th> 
                    <th>Country</th>  
                    <th>Gender</th>  
                    <th>Action</th> 
                  </tr>
                </thead>  
                <tbody> 
                  {  
                    data.map((item, idx) => {  
                      return <tr>
                        <td>{item.Name}</td>  
                        <td>{item.Department}</td>
                        <td>{item.Age}</td>
                        <td>{item.City}</td>  
                        <td>{item.Country}</td>
                        <td>{item.Gender}</td>  
                        <td>
                          <div class="btn-group">
                            <button className="btn btn-warning" 
                                onClick={() => { editemployee(item.Id) }}>
                                Edit</button>  
                            <button className="btn btn-warning" 
                                onClick={() => { deleteeployee(item.Id) }}>
                                Delete</button> 
                          </div>  
                        </td>
                      </tr> 
                    })}  
                </tbody>  
              </Table>  
            </CardBody>  
          </Card>  
        </Col>
      </Row>  
    </div>
  )
}  

export default EmployeList  

Now, open the Editemployee.js file and add the following code:

import React, { useState, useEffect } from 'react' 
import axios from 'axios';  
import { Button, Card, CardBody, CardFooter, Col, Container, Form, Input, 
            InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';  
function Editemployee(props) {  
        const [employee, setemployee]= useState({Id:'',Name: '', Department: '', 
                Age: '', City: '', Country: '', Gender: '' });  
        const Url = "http://localhost:62168/api/Hooks/employeedetails?id=" + 
            props.match.params.id;  

        useEffect(() => {  
          const GetData = async () => {
            const result = await axios(Url);  
            setemployee(result.data);  

          };  

          GetData();
        }, []);  

        const UpdateEmployee = (e) => {
          e.preventDefault();  
          const data = {Id:props.match.params.id, Name:employee.Name, 
                        Department: employee.Department, Age: employee.Age, 
                        City:employee.City, Country: employee.Country, 
                        Gender: employee.Gender };  
          axios.post('http://localhost:62168/api/Hooks/CreateEmp', data)  
            .then((result) => {
              props.history.push('/EmployeList')  
            });  
        };  

        const onChange = (e) => {  
          e.persist();
          setemployee({...employee, [e.target.name]: e.target.value});  
        }  

        return (
<div className="app flex-row align-items-center">  
<Container>  
<Row className="justify-content-center">
<Col md="12" lg="10" xl="8">  
<Card className="mx-4">  
<CardBody className="p-4">  
<Form onSubmit={UpdateEmployee}> 
<h1>Update Employee</h1>
<InputGroup className="mb-3">  
<Input type="text" name="Name" id="Name" 
placeholder="Name" value={employee.Name} 
onChange={ onChange }  />  
</InputGroup>  
<InputGroup className="mb-3">  
<Input type="text" placeholder="Department" 
name="Department" id="Department" 
value={employee.Department} onChange={ onChange }/>
</InputGroup>
<InputGroup className="mb-3">
<Input type="text" placeholder="Age" name="Age" 
id="Age"  value={employee.Age} 
onChange={ onChange }  />
</InputGroup>  
<InputGroup className="mb-4">  
<Input type="text" placeholder="City" name="City" 
id="City" value={employee.City} 
onChange={ onChange }  />  
</InputGroup>  
<InputGroup className="mb-4">
<Input type="text" placeholder="Country" name="Country" 
id="Country" value={employee.Country} 
onChange={ onChange } />  
</InputGroup>  
<InputGroup className="mb-4">   
<Input type="text" placeholder="Gender" name="Gender" 
id= "Gender" value={employee.Gender} 
onChange={ onChange } />  
</InputGroup>   
<CardFooter className="p-4">  
<Row>
<Col xs="12" sm="6">  
<Button type="submit" className="btn btn-info mb-1" block>
<span>Save</span></Button>  
</Col>  
<Col xs="12" sm="6">  
<Button className="btn btn-info mb-1" block>
<span>Cancel</span></Button>  
</Col>  
</Row>
</CardFooter>
</Form> 
</CardBody>  
</Card>  
</Col> 
</Row>  
</Container>  
</div>  
        )  
}  

export default Editemployee  

Create a Table in the Database

Open SQL Server Management Studio, create a database named "dbcore," and in this database, create a table. Give that table a name like "Employees."

CREATE TABLE [dbo].[Employees](

[Id] [int] IDENTITY(1,1) NOT NULL,

[Name] [nvarchar](50) NULL,

[Department] [nvarchar](50) NULL,

[Age] [int] NULL,

[City] [nvarchar](50) NULL,

[Country] [nvarchar](50) NULL,

[Gender] [nvarchar](50) NULL,

CONSTRAINT [PK_Employees] PRIMARY KEY CLUSTERED

(

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

Create a Asp.net Web API project

Now, open Visual Studio and create a new project.

Change the name to ReactHooks.

Make Web API the template.

Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data.

Click on the ADO.NET Entity Data Model option and click Add.

Select EF Designer from the database and click the Next button. Add the connection properties, select database name on the next page, and click OK.

Check the Table checkbox. The internal options will be selected by default. Now, click the Finish button.

Now, our data model is successfully created.

Right-click the Models folder and add two classes — Emp and Response. Now, paste the following codes in these classes:

Emp class

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace ReactHooks.Models

{

public class Emp

{

public int Id { get; set; }

public string Name { get; set; }

public string Department { get; set; }

public int Age { get; set; }

public string City { get; set; }

public string Country { get; set; }

public string Gender { get; set; }

}

Response Class

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace ReactHooks.Models

{

public class Response

{

public string Status { get; set; }

public string Message { get; set; }

}

Right-click the Controllers folder and add a new controller. Name it "Hooks controller".

Complete Hooks Controller Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;

using ReactHooks.Models;

namespace ReactHooks.Controllers

{

[RoutePrefix("Api/Hooks")]

public class HooksController : ApiController

{

CrudDemoEntities DB = new CrudDemoEntities();

[HttpPost]

public object CreateEmp(Emp e)

{

try

{

if (e.Id == 0)

{

Employee em = new Employee();

em.Name = e.Name;

em.Department = e.Department;

em.Age = e.Age;

em.City = e.City;

em.Country = e.Country;

em.Gender = e.Gender;

DB.Employees.Add(em);

DB.SaveChanges();

return new Response

{

Status = "Success",

Message = "Data Successfully"

};

}

else

{

var obj = DB.Employees.Where(x => x.Id == e.Id).ToList().FirstOrDefault();

if (obj.Id > 0)

{

obj.Name = e.Name;

obj.Department = e.Department;

obj.Age = e.Age;

obj.City = e.City;

obj.Country = e.Country;

obj.Gender = e.Gender;

DB.SaveChanges();

return new Response

{

Status = "Updated",

Message = "Updated Successfully"

};

}

catch (Exception ex)

{

Console.Write(ex.Message);

}

return new Response

{

Status = "Error",

Message = "Data not insert"

};

}

[HttpGet]

[Route("employee")]

public object Getrecord()

{

var emp = DB.Employees.ToList();

return emp;

}

[HttpDelete]

public object Deleteemployee(int id)

{

var obj = DB.Employees.Where(x => x.Id == id).ToList().FirstOrDefault();

DB.Employees.Remove(obj);

DB.SaveChanges();

return new Response

{

Status = "Delete",

Message = "Delete Successfuly"

};

}

[Route("employeedetails")]

[HttpGet]

public object employeedetailById(int id)

{

var obj = DB.Employees.Where(x => x.Id == id).ToList().FirstOrDefault();

return obj;

}

Now, let's enable CORS. Go to Tools, open the NuGet Package Manager, search for "CORS," and install the Microsoft.Asp.Net.WebApi.Cors package. Open Webapiconfig.cs and add the following lines:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net.Http;

using System.Web.Http;

using Microsoft.Owin.Security.OAuth;

using Newtonsoft.Json.Serialization;

using System.Web.Http.Cors;

namespace ReactHooks

{

public static class WebApiConfig

{

public static void Register(HttpConfiguration config)

{

// Web API configuration and services

// Configure Web API to use only bearer token authentication.

config.SuppressDefaultHostAuthentication();

config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));

// Web API routes

config.MapHttpAttributeRoutes();

config.Routes.MapHttpRoute(

routeTemplate: "api/{controller}/{id}",

defaults: new { id = RouteParameter.Optional }

);

EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");

config.EnableCors(cors);

}

Now, go to VS Code and run the project by using following command Npm start and check the port that you have your application running on.

Enter some data in the textbox and click on the Save button.

Click the Edit button to update values or the Delete button to delete the value.

CRUD Operations Using ReactJS and ASP.NET Web API

2021-10-08T05:36:00.025-05:00

Introduction

Here I'm going to perform CRUD operations using React.js and ASP.NET Web API. ReactJS is an open-source JavaScript library that is used for creating user interfaces. It is developed and maintained by Facebook.

Prerequisites:

We should have the basic knowledge of React.js and Web API.

Visual Studio and Visual Studio Code IDE should be installed on your system.

SQL Server Management Studio.

Technologies we will use:

ASP.NET Web API.

ReactJS.

SQL Server.

React strap.

Bootstrap.

Create a Table in the Database

Open SQL Server Management Studio, create a database named "CrudDemo," and in this database, create a table. Give that table a name like "studentmaster."

USE [CrudDemo]

CREATE TABLE [dbo].[studentmaster](

[Id] [int] IDENTITY(1,1) NOT NULL,

[Name] [varchar](50) NULL,

[RollNo] [varchar](50) NULL,

[Class] [varchar](50) NULL,

[Address] [varchar](50) NULL,

CONSTRAINT [PK_studentmaster] PRIMARY KEY CLUSTERED

(

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

Create a New Web API Project

Create a New Project.

Change the Name to CrudUsingReact

Choose the Web API Template

Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data.

Click on the "ADO.NET Entity Data Model" option and click "Add."

Select EF Designer from the database and click the "Next" button.

Add the connection properties and select database name on the next page and click OK.

Check the "Table" checkbox. The internal options will be selected by default. Now, click the "Finish" button.

Right-click on Models folder and add two classes — Student and Response. Now, paste the following codes in these classes:

public class Student {

public string Name { get; set; }

public string Rollno { get; set; }

public string Class { get; set; }

public string Address { get; set; }

}

public class Response {

public string Status { get; set; }

public string Message { get; set; }

}

Right-click on the Controllers folder and add a new controller. Name it "Student controller"

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;

using CrudUsingReact.Models;

namespace CrudUsingReact.Controllers

{

[RoutePrefix("Api/Student")]

public class studentController : ApiController

{

CrudDemoEntities DB = new CrudDemoEntities();

[Route("AddotrUpdatestudent")]

[HttpPost]

public object AddotrUpdatestudent(Student st)

{

try

{

if (st.Id == 0)

{

studentmaster sm = new studentmaster();

sm.Name = st.Name;

sm.RollNo = st.Rollno;

sm.Address = st.Address;

sm.Class = st.Class;

DB.studentmasters.Add(sm);

DB.SaveChanges();

return new Response

{

Status = "Success",

Message = "Data Successfully"

};

}

else

{

var obj = DB.studentmasters.Where(x => x.Id == st.Id).ToList().FirstOrDefault();

if (obj.Id > 0)

{

obj.Name = st.Name;

obj.RollNo = st.Rollno;

obj.Address = st.Address;

obj.Class = st.Class;

DB.SaveChanges();

return new Response

{

Status = "Updated",

Message = "Updated Successfully"

};

}

catch (Exception ex)

{

Console.Write(ex.Message);

}

return new Response

{

Status = "Error",

Message = "Data not insert"

};

}

[Route("Studentdetails")]

[HttpGet]

public object Studentdetails()

{

var a = DB.studentmasters.ToList();

return a;

}

[Route("StudentdetailById")]

[HttpGet]

public object StudentdetailById(int id)

{

var obj = DB.studentmasters.Where(x => x.Id == id).ToList().FirstOrDefault();

return obj;

}

[Route("Deletestudent")]

[HttpDelete]

public object Deletestudent(int id)

{

var obj = DB.studentmasters.Where(x => x.Id == id).ToList().FirstOrDefault();

DB.studentmasters.Remove(obj);

DB.SaveChanges();

return new Response

{

Status = "Delete",

Message = "Delete Successfuly"

};

}

Now, let's enable CORS. Go to Tools, open NuGet Package Manager, search for CORS, and install the "Microsoft.Asp.Net.WebApi.Cors" package. Open Webapiconfig.cs and add the following lines:

EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");

config.EnableCors(cors);

Create React.js Project

To create a new ReactJS project, open the command prompt, and enter the following command:

npx create-react-app crudwithceactjs

Open the newly created project in Visual Studio Code and install Reactstrap and Bootstrap by using the following commands:

npm install --save bootstrap

npm install --save reactstrap react react-dom

Now, go to the "src" folder and add a new folder "Student" and four new components:

Addstudent.js

Studentlist.js

Editstudent.js

Table.js

Install the Axios library by using the following command. Learn more about Axios library

npm install --save axios

Add routing: Use the following command to add routing in React.

npm install react-router-dom --save

Now, open the Addstudent.js file and add the following code:

import React from 'react';  
import axios from 'axios';  
import '../Student/Addstudent.css' ;
import { Container, Col, Form, Row, FormGroup, Label, Input, Button } 
from 'reactstrap';  
class Addstudent extends React.Component{  
    constructor(props){  
        super(props)  
        this.state = {  
            Name:'',  
            RollNo:'',  
            Class:'',  
            Address:''  
        }  
    }   
    Addstudent=()=>{  
        axios.post('http://localhost:52564/Api/Student/AddotrUpdatestudent/', 
{Name:this.state.Name,RollNo:this.state.RollNo,  
            Class:this.state.Class, Address:this.state.Address})  
      .then(json => {  
          if(json.data.Status==='Success'){  
              console.log(json.data.Status);  
              alert("Data Save Successfully");  
              this.props.history.push('/Studentlist')  
          }  
          else{  
              alert('Data not Saved');
              this.props.history.push('/Studentlist')  
          }  
      })  
    }  
   
        handleChange= (e)=> {  
            this.setState({[e.target.name]:e.target.value});  
        }  
   
render() {  
return (  
<Container className="App">  
<h4 className="PageHeading">Enter Student Informations</h4>  
<Form className="form">  
<Col>  
<FormGroup row>  
<Label for="name" sm={2}>Name</Label>  
<Col sm={10}>  
<Input type="text" name="Name" onChange={this.handleChange} 
value={this.state.Name} placeholder="Enter Name" />  
</Col>  
</FormGroup>  
<FormGroup row>  
<Label for="address" sm={2}>RollNo</Label>  
<Col sm={10}>  
<Input type="text" name="RollNo" onChange={this.handleChange} 
value={this.state.RollNo} placeholder="Enter RollNo" />  
</Col>  
</FormGroup>  
<FormGroup row>  
<Label for="Password" sm={2}>Class</Label>  
<Col sm={10}>  
<Input type="text" name="Class" onChange={this.handleChange} 
value={this.state.Class} placeholder="Enter Class" />  
</Col>  
</FormGroup>  
<FormGroup row>  
<Label for="Password" sm={2}>Address</Label>  
<Col sm={10}>  
<Input type="text" name="Address" onChange={this.handleChange} 
value={this.state.Address} placeholder="Enter Address" />  
</Col>  
</FormGroup>  
</Col>  
<Col>  
<FormGroup row>  
<Col sm={5}>  
</Col>  
<Col sm={1}>  
<button type="button" onClick={this.Addstudent} 
className="btn btn-success">Submit</button>  
</Col>  
<Col sm={1}>  
<Button color="danger">Cancel</Button>{' '}  
</Col>  
<Col sm={5}>  
</Col>  
</FormGroup>  
</Col>  
</Form>  
</Container>  
);  
}  
   
}     

export default Addstudent;

Add a new file Addstudet.css file and add the following CSS classes. Import this file in the Addstudent.js component.

.PageHeading {

margin-top: 10px;

margin-bottom: 10px;

color :black !important;

}

Now, add a Table.js file and add the following code:

import React, { Component } from 'react';  
import axios from 'axios';  
import { Link } from 'react-router-dom';  
class Table extends Component {  
    constructor(props) {  
        super(props);  
    }  
      
    DeleteStudent= () =>{  
        axios.delete('http://localhost:52564/Api/Student/Deletestudent?id='+
        this.props.obj.Id)  
       .then(json => {  
           if(json.data.Status==='Delete'){  
               alert('Record deleted successfully!!');  
           }  
       })  
    }  
        render() {  
            return (  
                <tr>  
                  <td>  
                    {this.props.obj.Name}  
                  </td>  
                  <td>  
                    {this.props.obj.RollNo}  
                  </td>  
                  <td>  
                    {this.props.obj.Class}  
                  </td>  
                  <td>  
                    {this.props.obj.Address}  
                  </td>  
                  <td>  
                  <Link to={"/edit/"+this.props.obj.Id} 
                    className="btn btn-success">Edit</Link>  
                  </td>  
                  <td>  
                    <button type="button" onClick={this.DeleteStudent} 
                        className="btn btn-danger">Delete</button>  
                  </td>  
                </tr>  
    );  
    }  
}  
  
export default Table;  

Now, add a studentlist.js file and add the following code.

import React, { Component } from 'react';  
import axios from 'axios';  
import Table from './Table';  
  
export default class Studentlist extends Component {  
  
    constructor(props) {  
        super(props);  
        this.state = {business: []};  
    }  
    componentDidMount(){  
        debugger;  
        axios.get('http://localhost:52564/Api/Student/Studentdetails')  
          .then(response => {  
              this.setState({ business: response.data });  
              debugger;  
  
          })  
          .catch(function (error) {  
              console.log(error);  
          })  
    }  
      
    tabRow(){  
        return this.state.business.map(function(object, i){  
            return <Table obj={object} key={i} />;  
        });  
    }  
  
    render() {  
        return (  
          <div>  
            <h4 align="center">Student List</h4>  
            <table className="table table-striped" style={{ marginTop: 10 }}>  
              <thead>  
                <tr>  
                  <th>Name</th>  
                  <th>RollNo</th>  
                  <th>Class</th>  
                  <th>Address</th>  
                  <th colSpan="4">Action</th>  
                </tr>  
              </thead>  
              <tbody>  
               { this.tabRow() }   
              </tbody>  
            </table>  
          </div>  
      );  
}  
} 

Add EditStudent.js file with the following code:

import React from 'react';   
import { Container, Col, Form, Row, FormGroup, Label, Input, Button } from 'reactstrap';  
import axios from 'axios'  
import '../Student/Addstudent.css'  
class Edit extends React.Component {  
    constructor(props) {  
        super(props)  
     
        this.onChangeName = this.onChangeName.bind(this);  
        this.onChangeRollNo = this.onChangeRollNo.bind(this);  
        this.onChangeClass = this.onChangeClass.bind(this);  
        this.onChangeAddress = this.onChangeAddress.bind(this);  
        this.onSubmit = this.onSubmit.bind(this);  
  
        this.state = {  
            Name: '',  
            RollNo: '',  
            Class: '',  
            Address: ''  
  
        }  
    }  
  
    componentDidMount() {  
        axios.get('http://localhost:52564/Api/Student/StudentdetailById?id='+this.props.match.params.id)  
            .then(response => {  
                this.setState({   
                    Name: response.data.Name,   
                    RollNo: response.data.RollNo,  
                    Class: response.data.Class,  
                    Address: response.data.Address });  
  
            })  
            .catch(function (error) {  
                console.log(error);  
            })  
    }  
  
    onChangeName(e) {  
        this.setState({  
            Name: e.target.value  
        });  
    }  
    onChangeRollNo(e) {  
        this.setState({  
            RollNo: e.target.value  
        });    
    }  
    onChangeClass(e) {  
        this.setState({  
            Class: e.target.value  
        });  
    }  
    onChangeAddress(e) {  
        this.setState({  
            Address: e.target.value  
        });  
    }  
  
    onSubmit(e) {  
        e.preventDefault();  
        const obj = {  
            Id:this.props.match.params.id,  
            Name: this.state.Name,  
            RollNo: this.state.RollNo,  
            Class: this.state.Class,  
            Address: this.state.Address  
  
        };  
        axios.post('http://localhost:52564/Api/Student/AddotrUpdatestudent/', obj)  
            .then(res => console.log(res.data));  
        this.props.history.push('/Studentlist')  
    }  
    render() {  
        return (  
            <Container className="App">  
  
             <h4 className="PageHeading">Update Student Informations</h4>  
                <Form className="form" onSubmit={this.onSubmit}>  
                    <Col>  
                        <FormGroup row>  
                            <Label for="name" sm={2}>Name</Label>  
                            <Col sm={10}>  
                                <Input type="text" name="Name" 
            value={this.state.Name} onChange={this.onChangeName}  
    placeholder="Enter Name" />  
</Col>  
</FormGroup>  
<FormGroup row>  
    <Label for="Password" sm={2}>RollNo</Label>  
    <Col sm={10}>  
        <Input type="text" name="RollNo" value={this.state.RollNo} 
           onChange={this.onChangeRollNo} placeholder="Enter RollNo" />  
    </Col>  
</FormGroup>  
 <FormGroup row>  
    <Label for="Password" sm={2}>Class</Label>  
    <Col sm={10}>  
        <Input type="text" name="Class" value={this.state.Class} 
        onChange={this.onChangeClass} placeholder="Enter Class" />  
    </Col>  
</FormGroup>  
 <FormGroup row>  
    <Label for="Password" sm={2}>Address</Label>  
    <Col sm={10}>  
        <Input type="text" name="Address"value={this.state.Address} 
        onChange={this.onChangeAddress} placeholder="Enter Address" />  
    </Col>  
</FormGroup>   
</Col>  
<Col>  
<FormGroup row>  
    <Col sm={5}>  
    </Col>  
    <Col sm={1}>  
  <Button type="submit" color="success">Submit</Button>{' '}  
    </Col>  
    <Col sm={1}>  
        <Button color="danger">Cancel</Button>{' '}  
    </Col>  
    <Col sm={5}>  
    </Col>  
</FormGroup>  
</Col>  
</Form>  
</Container>  
);  
    }  
  
    }  
  
export default Edit;  

Open the App.js file with the following code in it.

import React from 'react';  
import Addstudent from './components/Student/Addstudent';  
import Studentlist from './components/Student/Studentlist';  
import EditStudent from './components/Student/EditStudent';  
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';  
import './App.css';  
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {  
  return (  
    <Router>  
      <div className="container">  
        <nav className="navbar navbar-expand-lg navheader">  
          <div className="collapse navbar-collapse" >  
            <ul className="navbar-nav mr-auto">  
              <li className="nav-item">  
                <Link to={'/Addstudent'} className="nav-link">Addstudent</Link>  
              </li>  
              <li className="nav-item">  
                <Link to={'/Studentlist'} className="nav-link">Student List</Link>  
              </li>  
            </ul>  
          </div>  
        </nav> <br />  
        <Switch>  
          <Route exact path='/Addstudent' component={Addstudent} />  
          <Route path='/edit/:id' component={EditStudent} />  
          <Route path='/Studentlist' component={Studentlist} />  
        </Switch>  
      </div>  
    </Router>  
  );  
}  

export default App; 

Add the following CSS classes in the App.css file.

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Now, run the application by using the npm start command and check the result.

Click on the Add Student button to add a new record into the database.

Click on the Edit button to update a record.

Click on the Delete button to delete a record.

React Tutorial

2021-10-06T00:20:00.012-05:00

React is Javascript Library for building user interfaces

React is used to build single-page applications

React allows us to create reusable UI components

Create React App

Open your terminal in the directory you would like to create your application.

Run this command to create a React application named my-react-app:

npx create-react-app my-react-app

create-react-app will setup everything you need to run a React Application.

Run the React application

Run this command to execute the React application my-react-app:

npm start

A new browser window will pop up with your newly created React App. If not, open your browser and type localhost:3000 in the address bar.

The result:

Angular 2 - Modules

2017-10-01T09:54:00.001-05:00

Modules are used in Angular JS to put logical boundaries in your application. Hence, instead of coding everything into one application, you can instead build everything into separate modules to separate the functionality of your application.

The following code will be present in the app.module.ts file.

import { NgModule }      from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser';  
import { AppComponent }  from './app.component';  

@NgModule ({ 
   imports:      [ BrowserModule ], 
   declarations: [ AppComponent ], 
   bootstrap:    [ AppComponent ] 
}) 
export class AppModule { }

Let’s go through each line of the code in detail.

The import statement is used to import functionality from the existing modules. Thus, the first 3 statements are used to import the NgModule, BrowserModule and AppComponent modules into this module.
The NgModule decorator is used to later on define the imports, declarations, and bootstrapping options.
The BrowserModule is required by default for any web based angular application.
The bootstrap option tells Angular which Component to bootstrap in the application.

A module is made up of the following parts −

Bootstrap array − This is used to tell Angular JS which components need to be loaded so that its functionality can be accessed in the application. Once you include the component in the bootstrap array, you need to declare them so that they can be used across other components in the Angular JS application.
Export array − This is used to export components, directives, and pipes which can then be used in other modules.
Import array − Just like the export array, the import array can be used to import the functionality from other Angular JS modules.

Angular 2 - Environment

2017-10-01T08:19:00.001-05:00

To start working with Angular 2, you need to get the following key components installed.

Npm − This is known as the node package manager that is used to work with the open source repositories. Angular JS as a framework has dependencies on other components. And npm can be used to download these dependencies and attach them to your project.
Git − This is the source code software that can be used to get the sample application from the github angular site.
Editor − There are many editors that can be used for Angular JS development such as Visual Studio code and WebStorm. In our tutorial, we will use Visual Studio code which comes free of cost from Microsoft.

Angular 2 Tutorial

2017-10-01T08:18:00.000-05:00

Angular 2 is an open source JavaScript framework to build web applications in HTML and JavaScript.

Features of Angular 2

Following are the key features of Angular 2 −

Components − The earlier version of Angular had a focus of Controllers but now has changed the focus to having components over controllers. Components help to build the applications into many modules. This helps in better maintaining the application over a period of time.
TypeScript − The newer version of Angular is based on TypeScript. This is a superset of JavaScript and is maintained by Microsoft.
Services − Services are a set of code that can be shared by different components of an application. So for example if you had a data component that picked data from a database, you could have it as a shared service that could be used across multiple applications.

In addition, Angular 2 has better event-handling capabilities, powerful templates, and better support for mobile devices.

Components of Angular 2

Angular 2 has the following components −

Modules − This is used to break up the application into logical pieces of code. Each piece of code or module is designed to perform a single task.
Component − This can be used to bring the modules together.
Templates − This is used to define the views of an Angular JS application.
Metadata − This can be used to add more data to an Angular JS class.
Service − This is used to create components which can be shared across the entire application.

https://angular.io/

What is NPM?

2017-10-01T08:04:00.001-05:00

npm is a NodeJS package manager. As its name would imply, you can use it toinstall node programs. Also, if you use it in development, it makes it easier to specify and link dependencies.

Best Accounting Software for Really Small Businesses: Eazy Accounts

2016-05-21T23:38:00.001-05:00

Eazy Accounts offers all the basic features like invoicing, customer order, bill payments, expense reports, financial reports and reconciliations that micro businesses need, as well as advanced tools that grow with your business. Furthermore, compared with other accounting software for really small businesses, Eazy Accounts has the best price for all of its capabilities.

Masters

1. Branch

2. Category Type

3. Category

4. Cash Accounts

5. Bank

6. First Account Balance

7. Store

8. First Stock Input

9. Country

10. State

11. District

12. Financial Year

Employee

1. Designation

2. Department

3. Qualification

4. User Group

5. Employee

6. Users Details

7. Privilege

8. Monthly Salary

Purchase

1. Purchase Invoice (Barcode scanner integration)

2. Purchase Return Invoice

3. Payment Voucher

4. Supplier

5. Product (Barcode scanner integration)

6. Stock Transfer

Sales

1. Sale Invoice(Barcode scanner integration)

2. Sale Return Invoice

3. Receipt Voucher

4. Customer

Wholesale

1. Add Output Item

2. Edit Output Item

3. Sales Invoice For Output Product

Reports

1. Daily Report

2. Monthly Report

3. Yearly Report

4. Cash Credit Purchase

5. Suppliers Account

6. Cash Credit Sale

7. Customers Account

8. Cash/Bank Account

9. Motion Inquiry

10. Store Product Quantity

11. Display Product Balance

12. Product Low Quantity

13. Product Motions Inquiry

14. Profit Sale

15. Motion Sales Total

SELECT Column Value from Table to SET Variable

2016-03-12T21:30:00.000-06:00

DECLARE @P_RET_VAL INT;

SET @P_RET_VAL = ( SELECT [PD_Id]
FROM [Products]
WHERE [PD_No] = @PD_No
)

ASP.NET MVC - Views

2015-05-24T08:02:00.000-05:00

The Views folder stores the files (HTML files) related to the display of the application (the user interfaces). These files may have the extensions html, asp, aspx, cshtml, and vbhtml, depending on the language content.The Views folder contains one folder for each controller. Visual Web Developer has created an Account folder, a Home folder, and a Shared folder (inside the Views folder).The Account folder contains pages for registering and logging in to user accounts.The Home folder is used for storing application pages like the home page and the about page.The Shared folder is used to store views shared between controllers (master pages and layout pages).

ASP.NET File Types

The following HTML file types can be found in the Views Folder:

File Type	Extention
Plain HTML	.htm or .html
Classic ASP	.asp
Classic ASP.NET	.aspx
ASP.NET Razor C#	.cshtml
ASP.NET Razor VB	.vbhtml

The Index File

The file Index.cshtml represents the Home page of the application. It is the application's default file (index file).
Put the following content in the file:

@{
    ViewBag.Title = "Home Page";
}
@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>
                <h2>@ViewBag.Message</h2>
            </hgroup>
            <p>
                To learn more about ASP.NET MVC visit
                <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
                The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET MVC.
                If you have any questions about ASP.NET MVC visit
                <a href="http://forums.asp.net/1146.aspx/1?MVC" title="ASP.NET MVC Forum">our forums</a>.
            </p>
        </div>
    </section>
}
<h3>We suggest the following:</h3>
<ol class="round">
    <li class="one">
        <h5>Getting Started</h5>
        ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
        enables a clean separation of concerns and that gives you full control over markup
        for enjoyable, agile development. ASP.NET MVC includes many features that enable
        fast, TDD-friendly development for creating sophisticated applications that use
        the latest web standards.
        <a href="http://go.microsoft.com/fwlink/?LinkId=245151">Learn more…</a>
    </li>

    <li class="two">
        <h5>Add NuGet packages and jump-start your coding</h5>
        NuGet makes it easy to install and update free libraries and tools.
        <a href="http://go.microsoft.com/fwlink/?LinkId=245153">Learn more…</a>
    </li>

    <li class="three">
        <h5>Find Web Hosting</h5>
        You can easily find a web hosting company that offers the right mix of features
        and price for your applications.
        <a href="http://go.microsoft.com/fwlink/?LinkId=245157">Learn more…</a>
    </li>
</ol>

The About File

The file About.cshtml represent the About page of the application.
Put the following content in the file:

@{
    ViewBag.Title = "About";
}

<hgroup class="title">
    <h1>@ViewBag.Title.</h1>
    <h2>@ViewBag.Message</h2>
</hgroup>

<article>
    <p>
        Use this area to provide additional information.
    </p>

    <p>
        Use this area to provide additional information.
    </p>

    <p>
        Use this area to provide additional information.
    </p>
</article>

<aside>
    <h3>Aside Title</h3>
    <p>
        Use this area to provide additional information.
    </p>
    <ul>
        <li>@Html.ActionLink("Home", "Index", "Home")</li>
        <li>@Html.ActionLink("About", "About", "Home")</li>
        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
    </ul>
</aside>

Run the Application

Select Debug, Start Debugging (or F5) from the Visual Web Developer menu.
Your application will look like this:

ASP.NET MVC - Controllers

2015-05-24T07:43:00.000-05:00

The Controllers Folder

The Controllers Folder contains the controller classes responsible for handling user input and responses.MVC requires the name of all controllers to end with "Controller".In our example, Visual Web Developer has created the following files: HomeController.cs (for the Home and About pages) and AccountController.cs (For the Log On pages):

Web servers will normally map incoming URL requests directly to disk files on the server. For example: a URL request like "http://www.w3schools.com/default.asp" will map directly to the file "default.asp" at the root directory of the server.The MVC framework maps differently. MVC maps URLs to methods. These methods are in classes called "Controllers". Controllers are responsible for processing incoming requests, handling input, saving data, and sending a response to send back to the client.

The Home controller

The controller file in our application HomeController.cs, defines the two controls Index and About.
Swap the content of the HomeController.cs file with this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcDemo.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";

            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your app description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

The Controller Views

The files Index.cshtml and About.cshtml in the Views folder defines the ActionResult views Index() and About() in the controller.

ASP.NET MVC - Styles and Layout

2015-05-24T01:00:00.001-05:00

Adding a Layout

The file _Layout.cshtml represents the layout of each page in the application. It is located in the Shared folder inside the Views folder.
Open the file and swap the content with this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
                </div>
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>© @DateTime.Now.Year - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

HTML Helpers

In the code above, HTML helpers are used to modify HTML output:
@Url.Content() - URL content will be inserted here.
@Html.ActionLink() - HTML link will be inserted here.

Razor Syntax

@ViewBag.Title - The page title will be inserted here.
@RenderBody() - The page content will be rendered here.

Adding Styles

The style sheet for the application is called Site.css. It is located in the Content folder.
Open the file Site.css and swap the content with this:

html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
}

body {
    background-color: #fff;
    border-top: solid 10px #000;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

a {
    color: #333;
    outline: none;
    padding-left: 3px;
    padding-right: 3px;
    text-decoration: underline;
}

    a:link, a:visited,
    a:active, a:hover {
        color: #333;
    }

    a:hover {
        background-color: #c7d1d6;
    }

header, footer, hgroup,
nav, section {
    display: block;
}

mark {
    background-color: #a6dbed;
    padding-left: 5px;
    padding-right: 5px;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

h1, h2, h3,
h4, h5, h6 {
    color: #000;
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

    h5 a:link, h5 a:visited, h5 a:active {
        padding: 0;
        text-decoration: none;
    }

/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
    max-width: 960px;
}

#body {
    background-color: #efeeef;
    clear: both;
    padding-bottom: 35px;
}

    .main-content {
        background: url("../Images/accent.png") no-repeat;
        padding-left: 10px;
        padding-top: 30px;
    }

    .featured + .main-content {
        background: url("../Images/heroAccent.png") no-repeat;
    }

header .content-wrapper {
    padding-top: 20px;
}

footer {
    clear: both;
    background-color: #e2e2e2;
    font-size: .8em;
    height: 100px;
}

/* site title
----------------------------------------------------------*/
.site-title {
    color: #c8c8c8;
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 2.3em;
    margin: 0;
}

.site-title a, .site-title a:hover, .site-title a:active {
    background: none;
    color: #c8c8c8;
    outline: none;
    text-decoration: none;
}

/* login
----------------------------------------------------------*/
#login {
    display: block;
    font-size: .85em;
    margin: 0 0 10px;
    text-align: right;
}

    #login a {
        background-color: #d3dce0;
        margin-left: 10px;
        margin-right: 3px;
        padding: 2px 3px;
        text-decoration: none;
    }

    #login a.username {
        background: none;
        margin: 0;
        padding: 0;
        text-decoration: underline;
    }

    #login ul {
        margin: 0;
    }

    #login li {
        display: inline;
        list-style: none;
    }

/* menu
----------------------------------------------------------*/
ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
}

    ul#menu li {
        display: inline;
        list-style: none;
        padding-left: 15px;
    }

        ul#menu li a {
            background: none;
            color: #999;
            text-decoration: none;
        }

        ul#menu li a:hover {
            color: #333;
            text-decoration: none;
        }

/* page elements
----------------------------------------------------------*/
/* featured */
.featured {
    background-color: #fff;
}

    .featured .content-wrapper {
        background-color: #7ac0da;
        background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
        background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        color: #3e5667;
        padding: 20px 40px 30px 40px;
    }

        .featured hgroup.title h1, .featured hgroup.title h2 {
            color: #fff;
        }

        .featured p {
            font-size: 1.1em;
        }

/* page titles */
hgroup.title {
    margin-bottom: 10px;
}

hgroup.title h1, hgroup.title h2 {
    display: inline;
}

hgroup.title h2 {
    font-weight: normal;
    margin-left: 3px;
}

/* features */
section.feature {
    width: 300px;
    float: left;
    padding: 10px;
}

/* ordered list */
ol.round {
    list-style-type: none;
    padding-left: 0;
}

    ol.round li {
        margin: 25px 0;
        padding-left: 45px;
    }

        ol.round li.zero {
            background: url("../Images/orderedList0.png") no-repeat;
        }

        ol.round li.one {
            background: url("../Images/orderedList1.png") no-repeat;
        }

        ol.round li.two {
            background: url("../Images/orderedList2.png") no-repeat;
        }

        ol.round li.three {
            background: url("../Images/orderedList3.png") no-repeat;
        }

        ol.round li.four {
            background: url("../Images/orderedList4.png") no-repeat;
        }

        ol.round li.five {
            background: url("../Images/orderedList5.png") no-repeat;
        }

        ol.round li.six {
            background: url("../Images/orderedList6.png") no-repeat;
        }

        ol.round li.seven {
            background: url("../Images/orderedList7.png") no-repeat;
        }

        ol.round li.eight {
            background: url("../Images/orderedList8.png") no-repeat;
        }

        ol.round li.nine {
            background: url("../Images/orderedList9.png") no-repeat;
        }

/* content */
article {
    float: left;
    width: 70%;
}

aside {
    float: right;
    width: 25%;
}

    aside ul {
        list-style: none;
        padding: 0;
    }

        aside ul li {
            background: url("../Images/bullet.png") no-repeat 0 50%;
            padding: 2px 0 2px 20px;
        }

.label {
    font-weight: 700;
}

/* login page */
#loginForm {
    border-right: solid 2px #c8c8c8;
    float: left;
    width: 55%;
}

    #loginForm .validation-error {
        display: block;
        margin-left: 15px;
    }

    #loginForm .validation-summary-errors ul {
        margin: 0;
        padding: 0;
    }

    #loginForm .validation-summary-errors li {
        display: inline;
        list-style: none;
        margin: 0;
    }

    #loginForm input {
        width: 250px;
    }

    #loginForm input[type="checkbox"],
    #loginForm input[type="submit"],
    #loginForm input[type="button"],
    #loginForm button {
        width: auto;
    }

#socialLoginForm {
    margin-left: 40px;
    float: left;
    width: 40%;
}

    #socialLoginForm h2 {
        margin-bottom: 5px;
    }

#socialLoginList button {
    margin-bottom: 12px;
}

#logoutForm {
    display: inline;
}

/* contact */
.contact h3 {
    font-size: 1.2em;
}

.contact p {
    margin: 5px 0 0 10px;
}

.contact iframe {
    border: 1px solid #333;
    margin: 5px 0 0 10px;
}

/* forms */
fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

    fieldset legend {
        display: none;
    }

    fieldset ol {
        padding: 0;
        list-style: none;
    }

        fieldset ol li {
            padding-bottom: 5px;
        }

label {
    display: block;
    font-size: 1.2em;
    font-weight: 600;
}

label.checkbox {
    display: inline;
}

input, textarea {
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #333;
    font-size: 1.2em;
    margin: 5px 0 6px 0;
    padding: 5px;
    width: 300px;
}

textarea {
    font-family: inherit;
    width: 500px;
}

    input:focus, textarea:focus {
        border: 1px solid #7ac0da;
    }

    input[type="checkbox"] {
        background: transparent;
        border: inherit;
        width: auto;
    }

    input[type="submit"],
    input[type="button"],
    button {
        background-color: #d3dce0;
        border: 1px solid #787878;
        cursor: pointer;
        font-size: 1.2em;
        font-weight: 600;
        padding: 7px;
        margin-right: 8px;
        width: auto;
    }

    td input[type="submit"],
    td input[type="button"],
    td button {
        font-size: 1em;
        padding: 4px;
        margin-right: 4px;
    }

/* info and errors */
.message-info {
    border: 1px solid;
    clear: both;
    padding: 10px 20px;
}

.message-error {
    clear: both;
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.message-success {
    color: #7ac0da;
    font-size: 1.3em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.error {
    color: #e80c4d;
}

/* styles for validation helpers */
.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #e80c4d;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}

/* tables
----------------------------------------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;
    border: 0 none;
}

th {
    font-size: 1.2em;
    text-align: left;
    border: none 0px;
    padding-left: 0;
}

    th a {
        display: block;
        position: relative;
    }

    th a:link, th a:visited, th a:active, th a:hover {
        color: #333;
        font-weight: 600;
        text-decoration: none;
        padding: 0;
    }

    th a:hover {
        color: #000;
    }

    th.asc a, th.desc a {
        margin-right: .75em;
    }

    th.asc a:after, th.desc a:after {
        display: block;
        position: absolute;
        right: 0em;
        top: 0;
        font-size: 0.75em;
    }

    th.asc a:after {
        content: '▲';
    }

    th.desc a:after {
        content: '▼';
    }

td {
    padding: 0.25em 2em 0.25em 0em;
    border: 0 none;
}

tr.pager td {
    padding: 0 0.25em 0 0;
}

/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 850px) {

    /* header
    ----------------------------------------------------------*/
    header .float-left,
    header .float-right {
        float: none;
    }

    /* logo */
    header .site-title {
        margin: 10px;
        text-align: center;
    }

    /* login */
    #login {
        font-size: .85em;
        margin: 0 0 12px;
        text-align: center;
    }

        #login ul {
            margin: 5px 0;
            padding: 0;
        }

        #login li {
            display: inline;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        #login a {
            background: none;
            color: #999;
            font-weight: 600;
            margin: 2px;
            padding: 0;
        }

        #login a:hover {
            color: #333;
        }

    /* menu */
    nav {
        margin-bottom: 5px;
    }

    ul#menu {
        margin: 0;
        padding: 0;
        text-align: center;
    }

        ul#menu li {
            margin: 0;
            padding: 0;
        }

    /* main layout
    ----------------------------------------------------------*/
    .main-content,
    .featured + .main-content {
        background-position: 10px 0;
    }

    .content-wrapper {
        padding-right: 10px;
        padding-left: 10px;
    }

    .featured .content-wrapper {
        padding: 10px;
    }

    /* page content */
    article, aside {
        float: none;
        width: 100%;
    }

    /* ordered list */
    ol.round {
        list-style-type: none;
        padding-left: 0;
    }

        ol.round li {
            padding-left: 10px;
            margin: 25px 0;
        }

            ol.round li.zero,
            ol.round li.one,
            ol.round li.two,
            ol.round li.three,
            ol.round li.four,
            ol.round li.five,
            ol.round li.six,
            ol.round li.seven,
            ol.round li.eight,
            ol.round li.nine {
                background: none;
            }

     /* features */
     section.feature {
        float: none;
        padding: 10px;
        width: auto;
     }

        section.feature img {
            color: #999;
            content: attr(alt);
            font-size: 1.5em;
            font-weight: 600;
        }

    /* forms */
    input {
        width: 90%;
    }

    /* login page */
    #loginForm {
        border-right: none;
        float: none;
        width: auto;
    }

        #loginForm .validation-error {
            display: block;
            margin-left: 15px;
        }

    #socialLoginForm {
        margin-left: 0;
        float: none;
        width: auto;
    }

    /* footer
    ----------------------------------------------------------*/
    footer .float-left,
    footer .float-right {
        float: none;
    }

    footer {
        text-align: center;
        height: auto;
        padding: 10px 0;
    }

        footer p {
            margin: 0;
        }
}

The _ViewStart File

The _ViewStart file in the Shared folder (inside the Views folder) contains the following content:

@{Layout = "~/Views/Shared/_Layout.cshtml";}

This code is automatically added to all views displayed by the application.
If you remove this file, you must add this line to all views.

ASP.NET MVC - Application Folders

2015-05-24T00:56:00.000-05:00

MVC Folders

A typical ASP.NET MVC web application has the following folder content:

Application information

Properties
References

Application folders

App_Data Folder
Content Folder
Controllers Folder
Models Folder
Scripts Folder
Views Folder

Configuration files

Global.asax
packages.config
Web.config

The folder names are equal in all MVC applications. The MVC framework is based on default naming. Controllers are in the Controllers folder, Views are in the Views folder, and Models are in the Models folder. You don't have to use the folder names in your application code.Standard naming reduces the amount of code, and makes it easier for developers to understand MVC projects.
Below is a brief summary of the content of each folder:

The App_Data Folder

The App_Data folder is for storing application data. Eg: SQL Database

The Content Folder

The Content folder is used for static files like style sheets (css files), icons and images.Visual Web Developer automatically adds a themes folder to the Content folder. The themes folder is filled with jQuery styles and pictures. You can delete the themes folder.Visual Web Developer also adds a standard style sheet file to the project: the file Site.css in the content folder. The style sheet file is the file to edit when you want to change the style of the application.

The Controllers Folder

The Controllers folder contains the controller classes responsible for handling user input and responses.MVC requires the name of all controller files to end with "Controller". Visual Web Developer has created a Home controller (for the Home and the About page) and an Account controller (for Login pages):

The Models Folder

The Models folder contains the classes that represent the application models. Models hold and manipulate application data.

The Views Folder

The Views folder stores the HTML files related to the display of the application (the user interfaces). The Views folder contains one folder for each controller. Visual Web Developer has created an Account folder, a Home folder, and a Shared folder (inside the Views folder). The Account folder contains pages for registering and logging in to user accounts. The Home folder is used for storing application pages like the home page and the about page. The Shared folder is used to store views shared between controllers (master pages and layout pages).

The Scripts Folder

The Scripts folder stores the JavaScript files of the application.By default Visual Web Developer fills this folder with standard MVC, Ajax, and jQuery files:

The files named "modernizr" are JavaScript files used for supporting HTML5 and CSS3 features in the application.

ASP.NET MVC - Internet Application

2015-05-24T00:30:00.000-05:00

In the New Project dialog box:

Open the Visual C# templates
Select the template ASP.NET MVC 4 Web Application
Set the project name to MvcDemo
Set the disk location to something like D:\MVC\MvcDemo
Click OK

When the New Project Dialog Box opens:

Select the Internet Application template
Select the Razor Engine
Select HTML5 Markup
Click OK

Visual Studio will create a project much like this:

The MVC Programming Model

2015-05-24T00:18:00.001-05:00

MVC is one of three ASP.NET programming models.
MVC is a framework for building web applications using a MVC (Model View Controller) design:

The Model represents the application core (for instance a list of database records).
The View displays the data (the database records).
The Controller handles the input (to the database records).

The MVC model also provides full control over HTML, CSS, and JavaScript.

The MVC model defines web
applications with 3 logic layers:

The business layer (Model logic)

The display layer (View logic)

The input control (Controller logic)

The Model is the part of the application that handles the logic for the application data.
Often model objects retrieve data (and store data) from a database.
The View is the parts of the application that handles the display of the data.
Most often the views are created from the model data.
The Controller is the part of the application that handles user interaction.
Typically controllers read data from a view, control user input, and send input data to the model.
The MVC separation helps you manage complex applications, because you can focus on one aspect a time. For example, you can focus on the view without depending on the business logic. It also makes it easier to test an application.
The MVC separation also simplifies group development. Different developers can work on the view, the controller logic, and the business logic in parallel.

Web Forms vs MVC

The MVC programming model is a lighter alternative to traditional ASP.NET (Web Forms). It is a lightweight, highly testable framework, integrated with all existing ASP.NET features, such as Master Pages, Security, and Authentication.

Custom TextBox and PasswordBox in WPF

2015-05-03T08:47:00.000-05:00

Custom ComboBox in WPF

2015-05-03T08:43:00.001-05:00

<Style x:Key="Style_1" TargetType="{x:Type ComboBox}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"></Setter>
            <Setter Property="VerticalContentAlignment" Value="Center"></Setter>
            <Setter Property="BorderBrush" Value="White" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Height" Value="25" />
            <Setter Property="Width" Value="369" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBox}">
                        <Grid>
                            <Border x:Name="ContentPresenterBorder" CornerRadius="10,10,10,10" BorderThickness="1">
                                <Grid>
                                    <ToggleButton x:Name="DropDownToggle"/>
                                    <ContentPresenter x:Name="ContentPresenter"/>
                                </Grid>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        
        <Color x:Key="WindowColor">#FF95C0DB</Color>
        <Color x:Key="ContentAreaColorLight">#FF95C0DB</Color>
        <Color x:Key="ContentAreaColorDark">#FF95C0DB</Color>

        <Color x:Key="DisabledControlLightColor">#FF95C0DB</Color>
        <Color x:Key="DisabledControlDarkColor">#FF95C0DB</Color>
        <Color x:Key="DisabledForegroundColor">#FF95C0DB</Color>

        <Color x:Key="SelectedBackgroundColor">#FF008EF9</Color>
        <Color x:Key="SelectedUnfocusedColor">#FF95C0DB</Color>

        <Color x:Key="ControlLightColor">#FF95C0DB</Color>
        <Color x:Key="ControlMediumColor">#FF1993BB</Color>
        <Color x:Key="ControlDarkColor">#FF211AA9</Color>

        <Color x:Key="ToggleLightColor">Transparent</Color>
        <Color x:Key="ToggleMediumColor">Transparent</Color>
        <Color x:Key="ToggleDarkColor">Transparent</Color>

        <Color x:Key="ControlMouseOverColor">#FF439DC5</Color>
        <Color x:Key="ControlPressedColor">#FF439DC5</Color>

        <Color x:Key="GlyphColor">Transparent</Color>
        <Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>

        
        <Color x:Key="BorderLightColor">#FF95C0DB</Color>
        <Color x:Key="BorderMediumColor">#FF95C0DB</Color>
        <Color x:Key="BorderDarkColor">#FF95C0DB</Color>

        <Color x:Key="PressedBorderLightColor">#FF888888</Color>
        <Color x:Key="PressedBorderDarkColor">#FF444444</Color>

        <Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
        <Color x:Key="DisabledBorderDarkColor">#FF888888</Color>

        <Color x:Key="DefaultBorderBrushDarkColor">White</Color>

        
        <Color x:Key="HeaderTopColor">#FF95C0DB</Color>
        <Color x:Key="DatagridCurrentCellBorderColor">White</Color>
        <Color x:Key="SliderTrackDarkColor">#FF95C0DB</Color>

        <Color x:Key="NavButtonFrameColor">#FF3843C4</Color>

        <LinearGradientBrush x:Key="MenuPopupBrush"
                     EndPoint="0.5,1"
                     StartPoint="0.5,0">
            <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="0" />
            <GradientStop Color="{DynamicResource ControlMediumColor}"
                Offset="0.5" />
            <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="1" />
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
                     StartPoint="0,0"
                     EndPoint="1,0">
            <LinearGradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="#000000FF"
                    Offset="0" />
                    <GradientStop Color="#600000FF"
                    Offset="0.4" />
                    <GradientStop Color="#600000FF"
                    Offset="0.6" />
                    <GradientStop Color="#000000FF"
                    Offset="1" />
                </GradientStopCollection>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
        <ControlTemplate x:Key="ComboBoxToggleButton"
                 TargetType="{x:Type ToggleButton}">
            <Grid >

                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="40" />
                </Grid.ColumnDefinitions>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
                (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                          Storyboard.TargetName="Border">
                                    <EasingColorKeyFrame KeyTime="0"
                                   Value="{StaticResource ControlMouseOverColor}" />
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Pressed" />
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
                (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                          Storyboard.TargetName="Border">
                                    <EasingColorKeyFrame KeyTime="0"
                                   Value="{StaticResource DisabledControlDarkColor}" />
                                </ColorAnimationUsingKeyFrames>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).
                (SolidColorBrush.Color)"
                                          Storyboard.TargetName="Arrow">
                                    <EasingColorKeyFrame KeyTime="0"
                                   Value="{StaticResource DisabledForegroundColor}" />
                                </ColorAnimationUsingKeyFrames>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).
                (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                          Storyboard.TargetName="Border">
                                    <EasingColorKeyFrame KeyTime="0"
                                   Value="{StaticResource DisabledBorderDarkColor}" />
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="CheckStates">
                        <VisualState x:Name="Checked">
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
                (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                          Storyboard.TargetName="Border">
                                    <EasingColorKeyFrame KeyTime="0"
                                   Value="{StaticResource ControlPressedColor}" />
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unchecked" />
                        <VisualState x:Name="Indeterminate" />
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

                <Border x:Name="Border"
            Grid.ColumnSpan="2" Width="369"
            CornerRadius="10,10,10,10"
            BorderThickness="1">
                    <Border.BorderBrush>
                        <LinearGradientBrush EndPoint="0,1"
                             StartPoint="0,0">
                            <GradientStop Color="{DynamicResource BorderLightColor}"
                        Offset="0" />
                            <GradientStop Color="{DynamicResource BorderDarkColor}"
                        Offset="1" />
                        </LinearGradientBrush>
                    </Border.BorderBrush>
                    <Border.Background>
                        
                        <LinearGradientBrush StartPoint="0,0"
                             EndPoint="0,5">
                            <LinearGradientBrush.GradientStops>
                                <GradientStopCollection>
                                    <GradientStop Color="{DynamicResource ControlLightColor}" />
                                    <GradientStop Color="{DynamicResource ControlMediumColor}" Offset="1.0" />
                                </GradientStopCollection>
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
                <Border Grid.Column="0"
            CornerRadius="10,0,0,10"
            Margin="1" >
                    <Border.Background>
                        <SolidColorBrush Color="{DynamicResource ControlLightColor}"/>
                    </Border.Background>
                </Border>
                <Image Grid.Column="1" Source="/POSApplication;component/images/arrow01.png"></Image>
            </Grid>
        </ControlTemplate>

        <ControlTemplate x:Key="ComboBoxTextBox"
                 TargetType="{x:Type TextBox}">
            <Border x:Name="PART_ContentHost" Width="369" Focusable="False" CornerRadius="10,0,0,10" BorderThickness="1"
          Background="{TemplateBinding Background}" />
        </ControlTemplate>

        <Style x:Key="{x:Type ComboBox}"
       TargetType="{x:Type ComboBox}">
            <Setter Property="SnapsToDevicePixels"
          Value="true" />
            <Setter Property="HorizontalContentAlignment"
          Value="Left" />
            <Setter Property="VerticalContentAlignment"
          Value="Center" />
            <Setter Property="OverridesDefaultStyle"
          Value="true" />
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
          Value="Auto" />
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility"
          Value="Auto" />
            <Setter Property="ScrollViewer.CanContentScroll"
          Value="true" />
            <Setter Property="MinWidth"
          Value="120" />
            <Setter Property="MinHeight"
          Value="20" />
            <Setter Property="Width" Value="369"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBox}">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver" >
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox"
                                                Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource SelectedBackgroundColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox"
                                                Storyboard.TargetProperty="(TextElement.Foreground).
                      (SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource DisabledForegroundColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="EditStates">
                                    <VisualState x:Name="Editable">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                 Storyboard.TargetName="PART_EditableTextBox">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="{x:Static Visibility.Visible}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                      Storyboard.TargetProperty="(UIElement.Visibility)"
                                                 Storyboard.TargetName="ContentSite">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="{x:Static Visibility.Hidden}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Uneditable" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ToggleButton x:Name="ToggleButton"
                        Template="{StaticResource ComboBoxToggleButton}"
                        Grid.Column="2"
                        Focusable="false"
                        ClickMode="Press"
                        IsChecked="{Binding IsDropDownOpen, Mode=TwoWay,
              RelativeSource={RelativeSource TemplatedParent}}"/>
                            <ContentPresenter x:Name="ContentSite"
                            IsHitTestVisible="False"
                            Content="{TemplateBinding SelectionBoxItem}"
                            ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                            ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                              HorizontalAlignment="Left"
                                              VerticalAlignment="Center"
                            Margin="3,3,23,3">
                            </ContentPresenter>
                            <TextBox x:Name="PART_EditableTextBox"
                   Style="{x:Null}"
                   Template="{StaticResource ComboBoxTextBox}"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Bottom"
                   HorizontalContentAlignment="Left"
                   VerticalContentAlignment="Center"
                                     Width="369"
                   Margin="3,10,23,3"
                   Focusable="True"
                   Background="#FF95C0DB"
                   Visibility="Hidden"
                   IsReadOnly="{TemplateBinding IsReadOnly}" />
                            <Popup x:Name="Popup" Width="369"
                 Placement="Bottom"
                 IsOpen="{TemplateBinding IsDropDownOpen}"
                 AllowsTransparency="True"
                 Focusable="False"
                 PopupAnimation="Slide">
                                <Grid x:Name="DropDown"
                  SnapsToDevicePixels="True"
                  MinWidth="{TemplateBinding ActualWidth}"
                  MaxHeight="{TemplateBinding MaxDropDownHeight}">
                                    <Border x:Name="DropDownBorder"
                                        CornerRadius="10,0,0,10"
                      BorderThickness="1">
                                        <Border.BorderBrush>
                                            <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
                                        </Border.BorderBrush>
                                        <Border.Background>
                                            <SolidColorBrush Color="{DynamicResource ControlLightColor}" />
                                        </Border.Background>
                                    </Border>
                                    <ScrollViewer Margin="4,6,4,6"
                            SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Hidden">
                                        <StackPanel IsItemsHost="True"
                            KeyboardNavigation.DirectionalNavigation="Contained" />
                                    </ScrollViewer>
                                </Grid>
                            </Popup>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="HasItems" Value="false">
                                <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95" />
                            </Trigger>
                            <Trigger Property="IsGrouping" Value="true">
                                <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
                            </Trigger>
                            <Trigger SourceName="Popup" Property="AllowsTransparency" Value="true">
                                <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="5,0,0,5" />
                                <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="{x:Type ComboBoxItem}"
       TargetType="{x:Type ComboBoxItem}">
            <Setter Property="VerticalContentAlignment" Value="Center"></Setter>
            <Setter Property="HorizontalContentAlignment" Value="Left"></Setter>
            <Setter Property="SnapsToDevicePixels" Value="true" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="Width" Value="369"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                        <Border x:Name="Border" Width="369"
                Padding="2" HorizontalAlignment="Left" VerticalAlignment="Center"
                SnapsToDevicePixels="true"
                Background="Transparent">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected" />
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource SelectedBackgroundColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource SelectedBackgroundColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedUnfocused">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource SelectedUnfocusedColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsHighlighted" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="#3399FF" />
                                <Setter Property="TextElement.Foreground" Value="White" />
                                <Setter Property="Width" Value="369"></Setter>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False" >
                                <Setter Property="Foreground" Value="#888888" />
                            </Trigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

<ComboBox Margin="80,0,0,0" Width="369" Height="32" HorizontalAlignment="Center"
                  ItemsSource="{Binding}" Grid.Column="0" Grid.Row="5"
                  Name="cmbLanguage" VerticalAlignment="Center" KeyDown="cmbLanguage_KeyDown_1"
                  Foreground="White" FontSize="12" VerticalContentAlignment="Center" HorizontalContentAlignment="Left"
                  FontStyle="Italic"
                 FontFamily="HelveticaNeue-Light,HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica, Arial,Lucida Grande,sans-serif"
                  >
                </ComboBox>

Custom MessageBox in WPF

2015-05-03T08:38:00.001-05:00

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace POSApplication
{
    /// <summary>
    /// Interaction logic for CustomMessageBox.xaml
    /// </summary>
    public partial class CustomMessageBox : Window
    {
        private MessageBoxResult _result = MessageBoxResult.None;
        private Button _close;
        private FrameworkElement _title;

        #region Constructors
        public CustomMessageBox()
        {
            this.InitializeComponent();
        }
        #endregion

        #region Properties
        public string Caption
        {
            get { return this.Title; }
            set { this.Title = value; }
        }

        public MessageBoxResult MessageBoxResult
        {
            get { return this._result; }
            private set
            {
                this._result = value;
                if (MessageBoxResult.Cancel == this._result)
                {
                    this.DialogResult = false;
                }
                else
                {
                    this.DialogResult = true;
                }
            }
        }
        #endregion

        #region Dependency Properties
        public MessageBoxResult DefaultResult
        {
            get { return (MessageBoxResult)GetValue(DefaultResultProperty); }
            set
            {
                SetValue(DefaultResultProperty, value);

                switch (value)
                {
                    case MessageBoxResult.Cancel:
                        this._cancel.IsDefault = true;
                        break;
                    case MessageBoxResult.No:
                        this._no.IsDefault = true;
                        break;
                    case MessageBoxResult.None:
                        break;
                    case MessageBoxResult.OK:
                        this._ok.IsDefault = true;
                        break;
                    case MessageBoxResult.Yes:
                        this._yes.IsDefault = true;
                        break;
                    default:
                        break;
                }
            }
        }

        public static readonly DependencyProperty DefaultResultProperty =
            DependencyProperty.Register("DefaultResult", typeof(MessageBoxResult),
                typeof(CustomMessageBox), new UIPropertyMetadata(MessageBoxResult.None));

        public string Message
        {
            get { return (string)GetValue(MessageProperty); }
            set { SetValue(MessageProperty, value); }
        }

        public static readonly DependencyProperty MessageProperty =
            DependencyProperty.Register("Message", typeof(string),
                typeof(CustomMessageBox), new UIPropertyMetadata(string.Empty));

        public MessageBoxButton MessageBoxButton
        {
            get { return (MessageBoxButton)GetValue(MessageBoxButtonProperty); }
            set
            {
                SetValue(MessageBoxButtonProperty, value);

                switch (value)
                {
                    case MessageBoxButton.OK:
                        this._ok.Visibility = Visibility.Visible;
                        break;
                    case MessageBoxButton.OKCancel:
                        this._ok.Visibility = Visibility.Visible;
                        this._cancel.Visibility = Visibility.Visible;
                        break;
                    case MessageBoxButton.YesNo:
                        this._yes.Visibility = Visibility.Visible;
                        this._no.Visibility = Visibility.Visible;
                        break;
                    case MessageBoxButton.YesNoCancel:
                        this._yes.Visibility = Visibility.Visible;
                        this._no.Visibility = Visibility.Visible;
                        this._cancel.Visibility = Visibility.Visible;
                        break;
                    default:
                        break;
                }
            }
        }

        public static readonly DependencyProperty MessageBoxButtonProperty =
            DependencyProperty.Register("MessageBoxButton", typeof(MessageBoxButton),
                typeof(CustomMessageBox), new UIPropertyMetadata(MessageBoxButton.OK));

        public MessageBoxImage MessageBoxImage
        {
            get { return (MessageBoxImage)GetValue(MessageBoxImageProperty); }
            set { SetValue(MessageBoxImageProperty, value); }
        }

        public static readonly DependencyProperty MessageBoxImageProperty =
            DependencyProperty.Register("MessageBoxImage", typeof(MessageBoxImage),
                typeof(CustomMessageBox), new UIPropertyMetadata(MessageBoxImage.None));
        #endregion

        #region Static Methods
        public static MessageBoxResult Show(string messageBoxText)
        {
            return Show(null, messageBoxText, string.Empty,
                MessageBoxButton.OK, MessageBoxImage.None, MessageBoxResult.None);
        }

        public static MessageBoxResult Show(string messageBoxText, string caption)
        {
            return Show(null, messageBoxText, caption, MessageBoxButton.OK,
                MessageBoxImage.None, MessageBoxResult.None);
        }

        public static MessageBoxResult Show(Window owner, string messageBoxText)
        {
            return Show(owner, messageBoxText, string.Empty, MessageBoxButton.OK,
                MessageBoxImage.None, MessageBoxResult.None);
        }

        public static MessageBoxResult Show(string messageBoxText, string caption, MessageBoxButton button)
        {
            return Show(null, messageBoxText, caption, button, MessageBoxImage.None,
                MessageBoxResult.None);
        }

        public static MessageBoxResult Show(Window owner, string messageBoxText, string caption)
        {
            return Show(owner, messageBoxText, caption, MessageBoxButton.OK,
                MessageBoxImage.None, MessageBoxResult.None);
        }

        public static MessageBoxResult Show(string messageBoxText, string caption,
            MessageBoxButton button, MessageBoxImage icon)
        {
            return Show(null, messageBoxText, caption, button, icon,
                MessageBoxResult.None);
        }

        public static MessageBoxResult Show(Window owner, string messageBoxText, string caption,
            MessageBoxButton button)
        {
            return Show(owner, messageBoxText, caption, button,
                MessageBoxImage.None, MessageBoxResult.None);
        }

        public static MessageBoxResult Show(string messageBoxText, string caption,
            MessageBoxButton button, MessageBoxImage image, MessageBoxResult defaultResult)
        {
            return Show(null, messageBoxText, caption, button, image, defaultResult);
        }

        public static MessageBoxResult Show(Window owner, string messageBoxText, string caption,
            MessageBoxButton button, MessageBoxImage icon)
        {
            return Show(owner, messageBoxText, caption, button, icon, MessageBoxResult.None);
        }

        public static MessageBoxResult Show(Window owner, string messageBoxText,
            string caption, MessageBoxButton button, MessageBoxImage icon,
            MessageBoxResult defaultResult)
        {
            CustomMessageBox messageBox = new CustomMessageBox();
            messageBox.Caption = caption;
            messageBox.DefaultResult = defaultResult;
            messageBox.Owner = owner;
            messageBox.Message = messageBoxText;
            messageBox.MessageBoxButton = button;
            messageBox.MessageBoxImage = icon;
            if (false == messageBox.ShowDialog())
            {
                return MessageBoxResult.Cancel;
            }

            return messageBox.MessageBoxResult;
        }
        #endregion

        #region Event Handlers
        private void cancel_Click(object sender, RoutedEventArgs e)
        {
            this.MessageBoxResult = MessageBoxResult.Cancel;
        }

        private void no_Click(object sender, RoutedEventArgs e)
        {
            this.MessageBoxResult = MessageBoxResult.No;
        }

        private void ok_Click(object sender, RoutedEventArgs e)
        {
            this.MessageBoxResult = MessageBoxResult.OK;
        }

        private void this_Loaded(object sender, RoutedEventArgs e)
        {
            this._close = (Button)this.Template.FindName("PART_Close", this);
            if (null != this._close)
            {
                if (false == this._cancel.IsVisible)
                {
                    this._close.IsCancel = false;
                }
            }

            this._title = (FrameworkElement)this.Template.FindName("PART_Title", this);
            if (null != this._title)
            {
                this._title.MouseLeftButtonDown += new MouseButtonEventHandler(title_MouseLeftButtonDown);
            }
        }

        private void title_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            DragMove();
        }

        private void yes_Click(object sender, RoutedEventArgs e)
        {
            this.MessageBoxResult = MessageBoxResult.Yes;
        }
        #endregion
    }
}

Fill Combos in WPF

2015-05-03T08:33:00.002-05:00

public void FillCombos()
        {
            try
            {
                //Fill General Combo
                dtGeneral = new DataTable();
                dtGeneral.Columns.Add("F_GN_ID");
                dtGeneral.Columns.Add("F_GN_Name");
                dtGeneral.AcceptChanges();

                DataRow dr = dtGeneral.NewRow();
                dr[0] = "0";
                dr[1] = "General";
                dtGeneral.Rows.Add(dr);
                dtGeneral.AcceptChanges();
                cmbGeneral.ItemsSource = dtGeneral.DefaultView;
                cmbGeneral.DisplayMemberPath = dtGeneral.Columns["F_GN_Name"].ToString();
                cmbGeneral.SelectedValuePath = dtGeneral.Columns["F_GN_ID"].ToString();
                cmbGeneral.SelectedValue = "0";
                //Fill General Combo

            }
            catch (Exception ex)
            {
                ErrorLog.WriteErrorLog(ErrorLog.GetLogFilePath(), ex);
            }
        }

Get Maximum Screen Size Primary in WPF

2015-05-03T08:32:00.002-05:00

public Size GetMaximumScreenSizePrimary()
        {
            var scope = new System.Management.ManagementScope();
            var q = new System.Management.ObjectQuery("SELECT * FROM CIM_VideoControllerResolution");
            UInt32 maxHResolution = 0;
            UInt32 maxVResolution = 0;

            using (var searcher = new System.Management.ManagementObjectSearcher(scope, q))
            {
                var results = searcher.Get();

                foreach (var item in results)
                {
                    if ((UInt32)item["HorizontalResolution"] > maxHResolution)
                        maxHResolution = (UInt32)item["HorizontalResolution"];

                    if ((UInt32)item["VerticalResolution"] > maxVResolution)
                        maxVResolution = (UInt32)item["VerticalResolution"];
                }

            }
            return new Size(maxHResolution, maxVResolution);
        }

Dynamic Controls in WPF

2015-05-03T08:31:00.002-05:00

        public void FillCheckList(string checklist)
        {
            try
            {

                string[] jsons = checklist.Split(']');
                string jsonCheckLists = "[" + jsons[0].Split('[')[1] + "]";
                dtCheckList = JsonConvert.DeserializeObject<DataTable>(jsonCheckLists);

                string path;
                String exePath = System.Reflection.Assembly.GetExecutingAssembly().GetModules()[0].FullyQualifiedName;
                var root = System.IO.Path.GetDirectoryName(exePath);
                var newpath = root + "\\images";
                ControlTemplate ct;

                if (dtCheckList.Rows.Count == 0)
                {
                    grdChecklist.Children.Clear();
                    grdChecklist.ColumnDefinitions.Clear();
                    grdChecklist.RowDefinitions.Clear();
                    grdChecklist.RowDefinitions.Add(new RowDefinition());
                    grdChecklist.ColumnDefinitions.Add(new ColumnDefinition());
                    grdChecklist.RowDefinitions[0].Height = new GridLength(35);
                    grdChecklist.ColumnDefinitions[0].Width = new GridLength(460);

                    Button btnNewTab = new Button();
                    path = newpath + "\\" + "create-a-new-tab.png";
                    var ib = new ImageBrush
                    {
                        ImageSource =
                          new BitmapImage(
                            new Uri(path, UriKind.Relative)
                          )
                    };
                    ControlTemplate template = new ControlTemplate(typeof(Button));
                    var image = new FrameworkElementFactory(typeof(Image));
                    template.VisualTree = image;
                    image.SetValue(Image.SourceProperty, new BitmapImage(new Uri(path)));

                    btnNewTab.Height = 35;
                    btnNewTab.Width = 460;
                    btnNewTab.Template = template;
                    btnNewTab.ToolTip = "Create A New Tab";
                    btnNewTab.Foreground = Brushes.White;
                    btnNewTab.Content = "";
                    btnNewTab.HorizontalAlignment = HorizontalAlignment.Left;
                    btnNewTab.VerticalAlignment = VerticalAlignment.Top;
                    btnNewTab.HorizontalContentAlignment = HorizontalAlignment.Left;
                    btnNewTab.VerticalContentAlignment = VerticalAlignment.Top;
                    Grid.SetColumn(btnNewTab, 0);
                    Grid.SetRow(btnNewTab, 0);
                    grdChecklist.Children.Add(btnNewTab);
                }
                else
                {
                    int Noofchecklist = dtCheckList.Rows.Count;
                    grdChecklist.Children.Clear();
                    grdChecklist.ColumnDefinitions.Clear();
                    grdChecklist.RowDefinitions.Clear();


                    int j = 0;

                    for (int i = 0; i < Noofchecklist; i++)
                    {
                        grdChecklist.RowDefinitions.Add(new RowDefinition());
                        grdChecklist.RowDefinitions[i].Height = new GridLength(grdcheckheight);
                    }

                    for (int row = 0; row < Noofchecklist; row++)
                    {
                        if (row < dtCheckList.Rows.Count)
                        {
                            Grid grdcheck = new Grid();
                            grdcheck.HorizontalAlignment = HorizontalAlignment.Left;
                            grdcheck.VerticalAlignment = VerticalAlignment.Top;
                            Grid.SetColumn(grdcheck, 0);
                            Grid.SetRow(grdcheck, row);

                            grdcheck.Width = grdcheckwidth;
                            grdcheck.Height = grdcheckheight;

                            path = newpath + "\\" + "bg_grey_lftpnl.png";
                            var ib = new ImageBrush
                            {
                                ImageSource =
                                  new BitmapImage(
                                    new Uri(path, UriKind.Relative)
                                  )
                            };

                            grdcheck.Background = ib;

                            for (int i = 0; i < 5; i++)
                            {
                                grdcheck.RowDefinitions.Add(new RowDefinition());
                            }
                            grdcheck.RowDefinitions[0].Height = new GridLength(2.5);
                            grdcheck.RowDefinitions[1].Height = new GridLength(25);
                            grdcheck.RowDefinitions[2].Height = new GridLength(25);
                            grdcheck.RowDefinitions[3].Height = new GridLength(25);
                            grdcheck.RowDefinitions[4].Height = new GridLength(2.5);

                            for (int i = 0; i < 6; i++)
                            {
                                grdcheck.ColumnDefinitions.Add(new ColumnDefinition());
                            }
                            grdcheck.ColumnDefinitions[0].Width = new GridLength(grdcheckfstcolwidth);
                            grdcheck.ColumnDefinitions[1].Width = new GridLength(grdchecksndcolwidth);
                            grdcheck.ColumnDefinitions[2].Width = new GridLength(60);
                            grdcheck.ColumnDefinitions[3].Width = new GridLength(60);
                            grdcheck.ColumnDefinitions[4].Width = new GridLength(70);

                            grdChecklist.Children.Add(grdcheck);

                            Button btnOrder = new Button();
                            Button btnPayment = new Button();
                            Button btnCheck = new Button();
                            Label lbltablename = new Label();
                            Label lblorderStatus = new Label();
                            Label lblclient = new Label();
                            Label lblserver = new Label();
                            Label lbltotal = new Label();
                            Label lblcovers = new Label();

                            lbltablename.Content = dtCheckList.Rows[row][3].ToString() == "" ? dtCheckList.Rows[row][2].ToString() : dtCheckList.Rows[row][3].ToString();
                            lbltablename.VerticalAlignment = VerticalAlignment.Top;
                            lbltablename.HorizontalAlignment = HorizontalAlignment.Left;
                            lbltablename.FontFamily = new FontFamily("Helvetica");
                            lbltablename.FontWeight = FontWeights.Bold;
                            lbltablename.FontSize = 14;
                            lbltablename.Foreground = Brushes.White;
                            Grid.SetColumn(lbltablename, 0);
                            Grid.SetRow(lbltablename, 1);
                            grdcheck.Children.Add(lbltablename);

                            lblserver.Content = "Server: " + (dtCheckList.Rows[row]["server"].ToString() == "" ? "Kelly Yu" :
                                                              dtCheckList.Rows[row]["server"].ToString());
                            lblserver.VerticalAlignment = VerticalAlignment.Top;
                            lblserver.HorizontalAlignment = HorizontalAlignment.Right;
                            lblserver.FontFamily = new FontFamily("Helvetica");
                            lblserver.FontWeight = FontWeights.Bold;
                            lblserver.FontSize = 14;
                            lblserver.Foreground = Brushes.White;
                            Grid.SetColumn(lblserver, 1);
                            Grid.SetRow(lblserver, 1);
                            grdcheck.Children.Add(lblserver);

                            lbltotal.Content = "Total: $ " + (dtCheckList.Rows[row]["total"].ToString() == "" ? "0.00" :
                                                              dtCheckList.Rows[row]["total"].ToString());
                            lbltotal.VerticalAlignment = VerticalAlignment.Top;
                            lbltotal.HorizontalAlignment = HorizontalAlignment.Right;
                            lbltotal.FontFamily = new FontFamily("Helvetica");
                            lbltotal.FontWeight = FontWeights.Bold;
                            lbltotal.FontSize = 14;
                            lbltotal.Foreground = Brushes.White;
                            Grid.SetColumn(lbltotal, 1);
                            Grid.SetRow(lbltotal, 2);
                            grdcheck.Children.Add(lbltotal);

                            int length = dtCheckList.Rows[row]["check_number"].ToString().Length;
                            lblcovers.Content = "#" + dtCheckList.Rows[row]["check_number"].ToString() + "- " +
                                                dtCheckList.Rows[row]["check_number"].ToString().Substring(length - 4, 4) +
                                                " | Covers: " + dtCheckList.Rows[row]["covers"].ToString();
                            lblcovers.VerticalAlignment = VerticalAlignment.Top;
                            lblcovers.HorizontalAlignment = HorizontalAlignment.Right;
                            lblcovers.FontFamily = new FontFamily("Helvetica");
                            lblcovers.FontWeight = FontWeights.Bold;
                            lblcovers.FontSize = 14;
                            lblcovers.Foreground = Brushes.White;
                            Grid.SetColumn(lblcovers, 1);
                            Grid.SetRow(lblcovers, 3);
                            grdcheck.Children.Add(lblcovers);

                            string client = dtCheckList.Rows[row]["client"].ToString();
                            lblclient.Content = dtCheckList.Rows[row]["client"].ToString();
                            lblclient.VerticalAlignment = VerticalAlignment.Top;
                            lblclient.HorizontalAlignment = HorizontalAlignment.Left;
                            lblclient.HorizontalContentAlignment = HorizontalAlignment.Left;
                            lblclient.VerticalContentAlignment = VerticalAlignment.Top;
                            lblclient.FontFamily = new FontFamily("Helvetica");
                            lblclient.FontWeight = FontWeights.Bold;
                            lblclient.FontSize = 14;
                            lblclient.Foreground = Brushes.White;
                            Grid.SetColumn(lblclient, 0);
                            Grid.SetRow(lblclient, 2);
                            grdcheck.Children.Add(lblclient);

                            string order_Status = dtCheckList.Rows[row][1].ToString();
                            lblorderStatus.Content = dtCheckList.Rows[row][1].ToString();
                            lblorderStatus.VerticalAlignment = VerticalAlignment.Top;
                            lblorderStatus.HorizontalAlignment = HorizontalAlignment.Left;
                            lblorderStatus.HorizontalContentAlignment = HorizontalAlignment.Left;
                            lblorderStatus.VerticalContentAlignment = VerticalAlignment.Top;
                            lblorderStatus.FontFamily = new FontFamily("Helvetica");
                            lblorderStatus.FontWeight = FontWeights.Bold;
                            lblorderStatus.FontSize = 14;
                            lblorderStatus.Foreground = dtCheckList.Rows[row][1].ToString() == "printed" ? Brushes.Orange : Brushes.Yellow;
                            Grid.SetColumn(lblorderStatus, 0);
                            Grid.SetRow(lblorderStatus, 3);
                            grdcheck.Children.Add(lblorderStatus);


                            if (order_Status == "printed")
                            {
                                path = newpath + "\\" + "Print.png";
                                ct = this.Resources["PrintTemplate"] as ControlTemplate;
                            }
                            else if (order_Status == "cancelled")
                            {
                                path = newpath + "\\" + "Cancelled.png";
                                ct = this.Resources["CancelledTemplate"] as ControlTemplate;
                            }
                            else if (order_Status == "closed")
                            {
                                path = newpath + "\\" + "Closed.png";
                                ct = this.Resources["ClosedTemplate"] as ControlTemplate;
                            }
                            else if (order_Status == "completed")
                            {
                                path = newpath + "\\" + "Completed.png";
                                ct = this.Resources["CompletedTemplate"] as ControlTemplate;
                            }
                            else if (order_Status == "new")
                            {
                                path = newpath + "\\" + "New.png";
                                ct = this.Resources["NewTemplate"] as ControlTemplate;
                            }
                            else if (order_Status == "ordered")
                            {
                                path = newpath + "\\" + "Ordered.png";
                                ct = this.Resources["OrderedTemplate"] as ControlTemplate;
                            }
                            else
                            {
                                path = newpath + "\\" + "New.png";
                                ct = this.Resources["NewTemplate"] as ControlTemplate;
                            }

                            //Image img = ct.LoadContent() as Image;
                            //img.Source = new BitmapImage(new Uri(path));
                            btnOrder.Template = ct;
                            btnOrder.ToolTip = "";
                            btnOrder.Foreground = Brushes.Black;
                            btnOrder.Content = "";
                            btnOrder.Name = "btnOrder" + j.ToString();
                            btnOrder.Width = 60;
                            btnOrder.Height = 60;
                            btnOrder.FontSize = 10;
                            btnOrder.BorderThickness = new Thickness(0, 0, 0, 0);
                            btnOrder.BorderBrush = Brushes.Transparent;
                            btnOrder.FontFamily = new FontFamily("Arial");
                            //btnPayment.Click += new RoutedEventHandler(btnTemp_Click);
                            Grid.SetColumn(btnOrder, 2);
                            Grid.SetRow(btnOrder, 1);
                            Grid.SetRowSpan(btnOrder, 3);
                            grdcheck.Children.Add(btnOrder);

                            path = newpath + "\\" + "btnbox_orange.png";
                            ct = this.Resources["buttonTemplate"] as ControlTemplate;
                            //img = ct.LoadContent() as Image;
                            //img.Source = new BitmapImage(new Uri(path));
                            path = newpath + "\\" + "btnbox_orange.png";
                            ib = new ImageBrush
                            {
                                ImageSource =
                                  new BitmapImage(
                                    new Uri(path, UriKind.Relative)
                                  )
                            };

                            //ControlTemplate template = new ControlTemplate(typeof(Button));
                            //var image = new FrameworkElementFactory(typeof(Image));
                            //template.VisualTree = image;
                            //image.SetValue(Image.SourceProperty, new BitmapImage(new Uri(path)));

                            btnPayment.Background = ib;
                            //btnPayment.Template = template;
                            Style st = FindResource("InformButton") as Style;
                            btnPayment.Style = st;
                            btnPayment.ToolTip = "Payments";
                            btnPayment.Foreground = Brushes.Black;
                            btnPayment.Content = new TextBlock
                                                 {
                                                    Text = "Payments",
                                                    TextWrapping = TextWrapping.Wrap
                                                 };
                            btnPayment.Name = "btnPay" + j.ToString();
                            btnPayment.Width = 60;
                            btnPayment.Height = 60;
                            btnPayment.FontSize = 12;
                            btnPayment.FontStyle = FontStyles.Normal;
                            btnPayment.BorderThickness = new Thickness(0, 0, 0, 0);
                            btnPayment.BorderBrush = Brushes.Transparent;
                            btnPayment.FontFamily = new FontFamily("HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif");
                            //btnPayment.Click += new RoutedEventHandler(btnTemp_Click);
                            Grid.SetColumn(btnPayment, 3);
                            Grid.SetRow(btnPayment, 1);
                            Grid.SetRowSpan(btnPayment, 3);
                            grdcheck.Children.Add(btnPayment);

                            path = newpath + "\\" + "btnbox_orange.png";
                            ct = this.Resources["buttonTemplate"] as ControlTemplate;
                            //img = ct.LoadContent() as Image;
                            //img.Source = new BitmapImage(new Uri(path));
                            //btnCheck.Template = ct;
                            btnCheck.Background = ib;
                            st = FindResource("InformButton") as Style;
                            btnCheck.Style = st;
                            btnCheck.ToolTip = "Check Preview";
                            btnCheck.Content = new TextBlock
                                               {
                                                  Text = "Check Preview",
                                                  TextWrapping = TextWrapping.Wrap
                                               };
                            btnCheck.Name = "btnCheck" + j.ToString();
                            btnCheck.Width = 60;
                            btnCheck.Height = 60;
                            btnCheck.FontSize = 12;
                            btnCheck.FontStyle = FontStyles.Normal;
                            btnCheck.BorderThickness = new Thickness(0, 0, 0, 0);
                            btnCheck.BorderBrush = Brushes.Transparent;
                            btnCheck.FontFamily = new FontFamily("HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif");
                            btnCheck.HorizontalAlignment = HorizontalAlignment.Left;
                            btnCheck.VerticalAlignment = VerticalAlignment.Center;
                            btnCheck.HorizontalContentAlignment = HorizontalAlignment.Center;
                            btnCheck.VerticalContentAlignment = VerticalAlignment.Center;
                            Thickness margin = btnCheck.Margin;
                            margin.Right = 10;
                            margin.Left = 0;
                            margin.Top = 0;
                            margin.Bottom = 0;
                            btnCheck.Margin = margin;
                            //btnCheck.Click += new RoutedEventHandler(btnTemp_Click);
                            Grid.SetColumn(btnCheck, 4);
                            Grid.SetRow(btnCheck, 1);
                            Grid.SetRowSpan(btnCheck, 3);
                            grdcheck.Children.Add(btnCheck);
                        }
                    }
                }
            }
            catch (Exception ex)
            {
                CustomMessageBox.Show(ex.Message);
                ErrorLog.WriteErrorLog(ErrorLog.GetLogFilePath(), ex);
            }

        }

        public void FillTableContainer(string Containerlist)
        {
            try
            {
                string[] jsons = Containerlist.Split(']');
                string jsonContainerlist = "[" + jsons[0].Split('[')[1] + "]";
                dtContainerlist = JsonConvert.DeserializeObject<DataTable>(jsonContainerlist);

                if (dtContainerlist.Rows.Count > 0)
                {

                    int NoofContainerlist = dtContainerlist.Rows.Count;

                    string path;
                    String exePath = System.Reflection.Assembly.GetExecutingAssembly().GetModules()[0].FullyQualifiedName;
                    var root = System.IO.Path.GetDirectoryName(exePath);
                    var newpath = root + "\\images";
                    int j = 0;

                    Grid grdTableContainer;
                    Button btnTable;
                    TextBlock tb;
                    Button btnResize;

                    #region Fill Container
                    for (int row = 0; row < dtContainerlist.Rows.Count; row++)
                    {
                        btnResize = new Button();
                        btnTable = new Button();
                        path = newpath + "\\Imgtb\\" + "table" + dtContainerlist.Rows[row]["image"].ToString() +
                            "-" + dtContainerlist.Rows[row]["color"] + ".png";
                        var ib = new ImageBrush
                        {
                            ImageSource =
                                new BitmapImage(
                                new Uri(path, UriKind.Relative)
                                )
                        };


                        ControlTemplate template = new ControlTemplate(typeof(Button));
                        var image = new FrameworkElementFactory(typeof(Image));
                        template.VisualTree = image;
                        image.SetValue(Image.SourceProperty, new BitmapImage(new Uri(path)));

                        //ControlTemplate ct;
                        //ct = this.Resources["buttonTemplate"] as ControlTemplate;
                        //Image img = ct.LoadContent() as Image;
                        //image.Source = new BitmapImage(new Uri(path));
                        //btnTable.Template = template;

                        canvascontainer = new Canvas();

                        grdTableContainer = new Grid();
                        grdButtons = new Grid();
                        if (dtContainerlist.Rows[row]["angle"].ToString() != "")
                        {
                            RotateTransform rotateTransform = new RotateTransform(double.Parse(dtContainerlist.Rows[row]["angle"].ToString()));
                            grdButtons.LayoutTransform = rotateTransform;
                        }
                        grdButtons.Name = "grdButtons" + row.ToString();
                        grdButtons.Background = ib;
                        grdButtons.HorizontalAlignment = HorizontalAlignment.Left;
                        grdButtons.VerticalAlignment = VerticalAlignment.Top;
                        Thickness margin = grdButtons.Margin;
                        margin.Left = 0;// 754 * (double.Parse(dtContainerlist.Rows[row]["tx"].ToString()) / 100);
                        margin.Top = 0;// 962 * (double.Parse(dtContainerlist.Rows[row]["ty"].ToString()) / 100);
                        grdButtons.Margin = margin;
                        grdButtons.Width = Int32.Parse(dtContainerlist.Rows[row]["size_x"].ToString());
                        grdButtons.Height = Int32.Parse(dtContainerlist.Rows[row]["size_y"].ToString());

                        grdTableContainer.HorizontalAlignment = HorizontalAlignment.Left;
                        grdTableContainer.VerticalAlignment = VerticalAlignment.Top;
                        margin = grdTableContainer.Margin;
                        margin.Left = 754 * (double.Parse(dtContainerlist.Rows[row]["tx"].ToString()) / 100);
                        margin.Top = 962 * (double.Parse(dtContainerlist.Rows[row]["ty"].ToString()) / 100);
                        grdTableContainer.Margin = margin;
                        grdTableContainer.Width = Int32.Parse(dtContainerlist.Rows[row]["size_x"].ToString());
                        grdTableContainer.Height = Int32.Parse(dtContainerlist.Rows[row]["size_y"].ToString());

                        tb = new TextBlock();
                        tb.Text = dtContainerlist.Rows[row]["table_name"].ToString();
                        tb.HorizontalAlignment = HorizontalAlignment.Center;
                        tb.VerticalAlignment = VerticalAlignment.Center;
                        tb.FontFamily = new FontFamily("Helvetica");
                        tb.FontSize = 12;
                        //margin = tb.Margin;
                        //margin.Left = 0;
                        //margin.Top = 40;
                        //tb.Margin = margin;
                        if (dtContainerlist.Rows[row]["angle"].ToString() != "")
                        {
                            RotateTransform rotate = new RotateTransform(-double.Parse(dtContainerlist.Rows[row]["angle"].ToString()));
                            tb.LayoutTransform = rotate;
                        }

                        path = newpath + "\\rotate_icon.png";
                        ib = new ImageBrush
                        {
                            ImageSource =
                                new BitmapImage(
                                new Uri(path, UriKind.Relative)
                                )
                        };
                        template = new ControlTemplate(typeof(Button));
                        image = new FrameworkElementFactory(typeof(Image));
                        template.VisualTree = image;
                        image.SetValue(Image.SourceProperty, new BitmapImage(new Uri(path)));

                        btnTable.Background = ib;
                        Style st = FindResource("InformButton") as Style;
                        btnTable.Style = st;
                        btnTable.ToolTip = dtContainerlist.Rows[row]["table_name"].ToString();
                        btnTable.Foreground = Brushes.Black;
                        btnTable.Content = "";// dtContainerlist.Rows[row]["table_name"].ToString();
                        btnTable.Name = "btnTable" + j.ToString();
                        //btnTable.Width = Int32.Parse(dtContainerlist.Rows[row]["size_x"].ToString());
                        //btnTable.Height = Int32.Parse(dtContainerlist.Rows[row]["size_y"].ToString());
                        btnTable.Width = 15;
                        btnTable.Height = 15;
                        btnTable.FontSize = 12;
                        btnTable.BorderThickness = new Thickness(0, 0, 0, 0);
                        btnTable.BorderBrush = Brushes.Transparent;
                        btnTable.FontFamily = new FontFamily("Helvetica");
                        btnTable.HorizontalAlignment = HorizontalAlignment.Left;
                        btnTable.VerticalAlignment = VerticalAlignment.Bottom;
                        btnTable.HorizontalContentAlignment = HorizontalAlignment.Center;
                        btnTable.VerticalContentAlignment = VerticalAlignment.Bottom;
                        //margin = btnTable.Margin;
                        //margin.Left = 0;
                        //margin.Top = 70;
                        //btnTable.Margin = margin;
                        //btnTable.MouseLeftButtonDown += new rect1_MouseLeftButtonDown(btnTemp_Click);

                        path = newpath + "\\drag-icon.png";
                        ib = new ImageBrush
                        {
                            ImageSource =
                                new BitmapImage(
                                new Uri(path, UriKind.Relative)
                                )
                        };

                        template = new ControlTemplate(typeof(Button));
                        image = new FrameworkElementFactory(typeof(Image));
                        template.VisualTree = image;
                        image.SetValue(Image.SourceProperty, new BitmapImage(new Uri(path)));

                        btnResize.Background = ib;
                        st = FindResource("InformButton") as Style;
                        btnResize.Style = st;
                        btnResize.Foreground = Brushes.Black;
                        btnResize.Name = "btnResize" + j.ToString();
                        btnResize.Width = 16;
                        btnResize.Height = 16;
                        btnResize.FontSize = 12;
                        btnResize.BorderThickness = new Thickness(0, 0, 0, 0);
                        btnResize.BorderBrush = Brushes.Transparent;
                        btnResize.FontFamily = new FontFamily("Helvetica");
                        btnResize.HorizontalAlignment = HorizontalAlignment.Right;
                        btnResize.VerticalAlignment = VerticalAlignment.Bottom;
                        btnResize.HorizontalContentAlignment = HorizontalAlignment.Right;
                        btnResize.VerticalContentAlignment = VerticalAlignment.Bottom;
                        btnResize.Cursor = Cursors.SizeNWSE;
                        //btnResize.PreviewMouseLeftButtonDown += new MouseButtonEventHandler(canvascontainer_PreviewMouseLeftButtonDown);
                        //btnResize.PreviewMouseLeftButtonUp += new MouseButtonEventHandler(DragFinishedMouseHandler);
                        margin = btnResize.Margin;
                        margin.Right = 0;
                        margin.Bottom = 0;
                        btnResize.Margin = margin;

                        Grid.SetColumn(btnTable, 0);
                        Grid.SetRow(btnTable, 0);
                        Grid.SetColumn(tb, 0);
                        Grid.SetRow(tb, 0);
                        Grid.SetColumn(btnResize, 0);
                        Grid.SetRow(btnResize, 0);

                        grdButtons.Children.Add(tb);
                        Grid.SetColumn(grdButtons, 0);
                        Grid.SetRow(grdButtons, 0);
                        Grid.SetColumn(canvascontainer, 0);
                        Grid.SetRow(canvascontainer, 0);
                        //Canvas.SetLeft(grdButtons, 150);
                        //Canvas.SetTop(grdButtons, 150);
                        canvascontainer.Children.Add(grdButtons);
                        grdTableContainer.Children.Add(canvascontainer);
                        grdTableContainer.Children.Add(btnTable);
                        grdTableContainer.Children.Add(btnResize);
                        grdTable.Children.Add(grdTableContainer);

                    }
                    #endregion


                }
            }
            catch (Exception ex)
            {
                CustomMessageBox.Show(ex.Message);
                ErrorLog.WriteErrorLog(ErrorLog.GetLogFilePath(), ex);
            }

        }

GridView using JQuery

2015-05-03T08:30:00.001-05:00

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JqueryGridView.WebForm1" %>

<!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 id="Head1" runat="server">
    <title></title>
<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
    .Pager span
    {
        text-align: center;
        color: #999;
        display: inline-block;
        width: 20px;
        background-color: #A1DCF2;
        margin-right: 3px;
        line-height: 150%;
        border: 1px solid #3AC0F2;
    }
    .Pager a
    {
        text-align: center;
        display: inline-block;
        width: 20px;
        background-color: #3AC0F2;
        color: #fff;
        border: 1px solid #3AC0F2;
        margin-right: 3px;
        line-height: 150%;
        text-decoration: none;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<%--<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>--%>
<script src="ASPSnippets_Pager.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        GetCustomers(1);
    });
    $(".Pager .page").live("click", function () {
        GetCustomers(parseInt($(this).attr('page')));
    });
    function GetCustomers(pageIndex) {
        $.ajax({
            type: "POST",
            url: "CS.aspx/GetCustomers",
            data: '{pageIndex: ' + pageIndex + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response.d);
            },
            error: function (response) {
                alert(response.d);
            }
        });
    }

    function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        alert(xml);
        var customers = xml.find("AccountingHistoryLog");
        var row = $("[id*=gvCustomers] tr:last-child").clone(true);
        $("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
        $.each(customers, function () {
            var customer = $(this);
            $("td", row).eq(0).html($(this).find("AHL_Action").text());
            alert($("td", row).eq(0).html());
            $("td", row).eq(1).html($(this).find("AHL_Comment").text());
            $("td", row).eq(2).html($(this).find("AHL_DateTime").text());
            $("[id*=gvCustomers]").append(row);
            row = $("[id*=gvCustomers] tr:last-child").clone(true);
        });
        var pager = xml.find("Pager");
        $(".Pager").ASPSnippets_Pager({
            ActiveCssClass: "current",
            PagerCssClass: "pager",
            PageIndex: parseInt(pager.find("PageIndex").text()),
            PageSize: parseInt(pager.find("PageSize").text()),
            RecordCount: parseInt(pager.find("RecordCount").text())
        });
    };
</script>
</head>
<body>
    <form id="form1" runat="server">
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" RowStyle-BackColor="#A1DCF2"
    HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White">
    <Columns>
        <asp:BoundField ItemStyle-Width="150px" DataField="AHL_Action" HeaderText="Action" />
        <asp:BoundField ItemStyle-Width="150px" DataField="AHL_Comment" HeaderText="Comment" />
        <asp:BoundField ItemStyle-Width="150px" DataField="AHL_DateTime" HeaderText="DateTime" />
    </Columns>
</asp:GridView>
<br />
<div class="Pager"></div>
    </form>
</body>
</html>

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.Web.Services;
using System.Data.SqlClient;
using System.Configuration;

namespace JqueryGridView
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        private static int PageSize = 10;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindDummyRow();
            }
        }

        private void BindDummyRow()
        {
            DataTable dummy = new DataTable();
            dummy.Columns.Add("AHL_Action");
            dummy.Columns.Add("AHL_Comment");
            dummy.Columns.Add("AHL_DateTime");
            dummy.Rows.Add();
            gvCustomers.DataSource = dummy;
            gvCustomers.DataBind();
        }

        [WebMethod]
        public static string GetCustomers(int pageIndex)
        {
            string query = "select * from AccountingHistoryLog";
            SqlCommand cmd = new SqlCommand(query);
            cmd.CommandType = CommandType.Text;
            cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
            cmd.Parameters.AddWithValue("@PageSize", PageSize);
            cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
            return GetData(cmd, pageIndex).GetXml();
        }

        private static DataSet GetData(SqlCommand cmd, int pageIndex)
        {
            string strConnString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
            using (SqlConnection con = new SqlConnection(strConnString))
            {
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    cmd.Connection = con;
                    sda.SelectCommand = cmd;
                    using (DataSet ds = new DataSet())
                    {
                        sda.Fill(ds, "AccountingHistoryLog");
                        DataTable dt = new DataTable("Pager");
                        dt.Columns.Add("PageIndex");
                        dt.Columns.Add("PageSize");
                        dt.Columns.Add("RecordCount");
                        dt.Rows.Add();
                        dt.Rows[0]["PageIndex"] = pageIndex;
                        dt.Rows[0]["PageSize"] = PageSize;
                        dt.Rows[0]["RecordCount"] = cmd.Parameters["@RecordCount"].Value;
                        ds.Tables.Add(dt);
                        return ds;
                    }
                }
            }
        }
    }
}