{
  "name": "hpdp-maas",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6",
    "jquery": "3.1.1"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.2",
    "typings":"^1.3.2"
  }
}

    

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "../../node_modules/@types/"
    ]
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules/*",
    "**/*-aot.ts"
  ]
}

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': '../node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            'bootstrap': 'node_modules/bootstrap/dist/js/bootstrap.min.js',
            'jquery': 'node_modules/jquery/dist/jquery.js',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
            '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: '../../app/main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

Project List in .NET Technologies

#1:Online Shopping Cart Project in ASP.NET

Step By Step Source Code : Project Source Code

To Purchase This Project Drop a Message on fb.com/20fingers2brains Project Link :Online Shopping Cart in ASP.NET C# Technologies To Learn In This Project :

#2:Gmail Facebook Chat in ASP.NET C# SQL Server

Step By Step Source Code :

To Purchase This Project Drop a Message on fb.com/20fingers2brains Project Link : Technologies To Learn In This Project :

1. Model binding allows you to map and bind the HTTP request data with a model.
2. Model binding implicitly goes to work when an action method has parameter.
3. Model binding can be explicitly invoked using UpdateModel and TryUpdateModel method.

1. UpdateModel
2. TryUpdateModel

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

namespace SampleRegisterForm.ViewModel
{
    public class Register
    {
        [Required(ErrorMessage="FirstName is Mandatory !!")]
        public string FirstName { get; set; }

        [Required(ErrorMessage = "LastName is Mandatory !!")]
        public string LastName { get; set; }

        [Required(ErrorMessage = "Email is Mandatory !!")]
        public string Email { get; set; }

        [Required(ErrorMessage = "Password is Mandatory !!")]
        public string Password { get; set; }

        [Required(ErrorMessage = "Confirm Password is Mandatory !!")]
        [Compare("Password")]
        public string ConfirmPassword { get; set; }
    }
}
    

@model SampleRegisterForm.ViewModel.Register
@{
    ViewBag.Title = "Register";
}

<h2>Register</h2>

@using (Html.BeginForm())
{
    @Html.EditorForModel("Register")
    <br />
    <br />
    <input type="submit" value="Submit" />
    <input type="reset"  value="Reset" />
}
    

[HttpPost]
        public ActionResult Register(FormCollection collection)
        {
            SampleRegisterForm.ViewModel.Register register = new SampleRegisterForm.ViewModel.Register();
            try
            {
                UpdateModel(register);
            }
            catch (Exception e)
            {
                return View(register);
            }
            return View();   
        }
    

[HttpPost]
        public ActionResult Register(FormCollection collection)
        {
            SampleRegisterForm.ViewModel.Register register = new SampleRegisterForm.ViewModel.Register();
            if (TryUpdateModel(register))
            {
                return View();
            }
            else
            {
                return View(register);
            }
        }
    

1. Model binding is an interesting feature in Asp.net MVC.
2. It allows you to map and bind the HTTP request data with a model.
3. The Model Binding reduces the effort to get posted values from the request.
4. In this article we will see why we need Model binding and how we can achieve it.

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

<h2>Index3</h2>


@using (Html.BeginForm())
{
    <text>Name:</text>@Html.TextBox("Name")<br /><br />
    <text>Age: </text>@Html.TextBox("Age")<br /><br />

    <input type="submit" value="Submit" />
}
    

[HttpPost]
        public ActionResult Index3(string Name,int Age)
        {
            return View();
        }
    

@model List<ModelBindingDemo.ViewModel.EmployeeViewModel>
@{
    ViewBag.Title = "Index1";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index1</h2>


@using (Html.BeginForm())
{
    if (Model != null)
    {
        for (int i = 0; i < Model.Count; i++)
        {
        
    <div>
    <table>
    <tr>
    <td>@Html.LabelFor(m => m[i].Name)</td>
    <td>
    @Html.EditorFor(m => m[i].Name)</td>
    </tr>
    <tr>
    <td>@Html.LabelFor(m => m[i].Designation)</td>
    <td>@Html.EditorFor(m => m[i].Designation)</td>
    </tr>
    <tr>
    <td>@Html.LabelFor(m => m[i].City)</td>
    <td>@Html.EditorFor(m => m[i].City)</td>
    </tr>
    </table>
    </div>    
        }
    }   
    <input type="submit" value="Submit" />
    }
    

public ActionResult Index1()
        {
            List<EmployeeViewModel> list = new List<EmployeeViewModel>();
            list.Add(new EmployeeViewModel { City = "City1", Designation = "Sw 1", Name = "Name 1" });
            list.Add(new EmployeeViewModel { City = "City2", Designation = "Sw 2", Name = "Name 2" });
            list.Add(new EmployeeViewModel { City = "City3", Designation = "Sw 3", Name = "Name 3" });
            return View(list);
        }

        [HttpPost]
        public ActionResult Index1(List<EmployeeViewModel> listEmp)
        {
            return View();
        }
    

1. ASP.NET MVC Model binding allows you to map HTTP request data to a model.
2. The MVC runtime uses DefaultModelBinder named workhorse to build the parameters.
3. Model binding implicitly goes to work when an action method has parameter.
4. Model binding can be explicitly invoked using UpdateModel and TryUpdateModel method.
5. The by-product of Model binding is ModelState.

1. Data Annotation makes it easy to validate your model.
2. Most of the time we implement the validation at server side, i.e. the form is posted to the server and if the model is invalid the response is sent back to the client and user is displayed with error messages.
3. The same feature can be achieved at client side, that means the form will be validated at client side, before it is posted to the server.
4. If the form validation passes, the form is posted otherwise the error message is shown.
5. In this article we will see how to enable the client side validation.

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

namespace DataAnnotation.ViewModel
{
    public class RegisterViewModel
    {
        [Required]
        public string FirstName { get; set; }

        public string LastName { get; set; }

        [Required]
        public string Email { get; set; }

        [Required]
        public string Password { get; set; }

        [Required]
        public string ConfirmPassword { get; set; }
    }
}
    

@model DataAnnotation.ViewModel.RegisterViewModel
@{
    Layout = "../Shared/_Layout.cshtml";
}

<!DOCTYPE html>

<html>
<head>
    <title>RequiredDemo</title>
</head>
<body>
    <div>
        @using (Html.BeginForm())
        {
            @Html.EditorForModel("Register")
            <br />
            <input type="submit" value="Submit" />
            <input type="reset" value="Reset" />
        }
    </div>
</body>
</html>
    

[HttpPost]
        public ActionResult RequiredDemo(RegisterViewModel model)
        {
            if (ModelState.IsValid)
            {
                return View();
            }
            else
            {
                return View(model);
            }
        }
    

• In this article we are going to see what to do when JavaScript is disabled on client browser and Remote attribute does not validate the logic.
• To understand this article better read Remote Validation article first, we have used same UserName validation scenario in this article.

 
[HttpPost]
        public ActionResult Index(UserViewModel model)
        {
            RemoteValidationService service = new RemoteValidationService();
            if (service.IsValidUserName(model.UserName))
            {
                ModelState.AddModelError("UserName", "Username already exist");
                return View(model);
            }
            service.SaveUser(model);
            return View();
        }
    

• Remote validation allows the application to call the controller actions using client side script.
• This is extremely useful when you want to perform a back end query without having to perform a full server postback.
• Remote Validation is basically an ajax call to an action method which queries the database to validate username in our case and returns true or false based on validation result.
• The process of Remote Validation does not involve postback.

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

namespace RemoteValidationMVCRazor.ViewModel
{
    public class UserViewModel
    {
        public string Name { get; set; }

        [Remote("IsValidUserName", "Home", ErrorMessage = "Username Exist !")]
        public string UserName { get; set; }

        [DataType(DataType.Password)]
        public string Password { get; set; }
    }
}
    

@model RemoteValidationMVCRazor.ViewModel.UserViewModel
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>


@using (Html.BeginForm())
{
    @Html.EditorForModel("UserViewModel")

    <br /><br />
    <input type="submit" value="Submit" />
}
    

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using RemoteValidationMVCRazor.Service;
using RemoteValidationMVCRazor.ViewModel;

namespace RemoteValidationMVCRazor.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

        public JsonResult IsValidUserName(string UserName)
        {
            RemoteValidationService service = new RemoteValidationService();
            return Json(service.IsValidUserName(UserName), JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        public ActionResult Index(UserViewModel model)
        {
            RemoteValidationService service = new RemoteValidationService();
            service.SaveUser(model);
            return View();
        }

    }
}
    

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using RemoteValidationMVCRazor.Models;
using RemoteValidationMVCRazor.ViewModel;

namespace RemoteValidationMVCRazor.Service
{
    public class RemoteValidationService
    {
        public bool IsValidUserName(string username)
        {
            using (RemoteValidationEntities dbContext = new RemoteValidationEntities())
            {
                return !dbContext.Users.Any(user => user.Username == username);
            }
        }

        public void SaveUser(UserViewModel model)
        {
            Users user = new Users();
            user.Name = model.Name;
            user.Username = model.UserName;
            user.Password = model.Password;
            using (RemoteValidationEntities dbContext = new RemoteValidationEntities())
            {
                dbContext.Users.AddObject(user);
                dbContext.SaveChanges();
            }
        }
    }
}
    

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
</head>

<body>
    @RenderBody()
</body>
</html>
    

• Remote Validation is use to validate user input against database without full postback using ajax call.
• The remotely method called should return boolean value as JsonResult.
• The three script files must be referred on View or on Layout file i.e. jquery-1.5.1.min.js or higher version, jquery.validate.min.js, and jquery.validate.unobtrusive.min.js.
• The web.config must contains keys ClientValidationEnabled and UnobtrusiveJavaScriptEnabled set to true under appSettings.
• The Remote Validation will not work if the Javascript is disabled on the browser.

• We commonly use HTML helpers and model binding while working with MVC Razor.
• MVC framework smartly renders HTML for different type of data like textbox for string or int and checkbox for bool proeprty, when EditorFor or EditorForModel helper is used to render the control.
• We often have requirement where we want something more like rendering dropdown for model's property of type enum.
• This is where editor template comes to rescue the situation.
• In this example, we will render a dropdown control for enum type model property.

        using System;
        using System.Collections.Generic;
        using System.Linq;
        using System.Web;
        using System.ComponentModel.DataAnnotations;

        namespace BindingDropdownToEnum.Models
        {
            public class DropdownModel
            {
                [UIHint("DropDownList")]
                public players playerList { get; set; }
            }

            public enum players
            {
                Fabregas = 1,
                Rocisky = 2,
                Ozil = 3,
                Cazorla = 4
            }
        }
    

    @model BindingDropdownToEnum.Models.DropdownModel

    @{
        ViewBag.Title = "DropdownBinding";
    }

    <h2>DropdownBinding</h2>

    @Html.EditorForModel()

    @using BindingDropdownToEnum.Models

    @Html.DropDownList("playerList", Enum.GetValues(typeof(players)).Cast<players>().Select(c => new SelectListItem { Text = c.ToString(), Value = c.ToString() }))

• Thus the editor templates can be used with EditorFor or EditorForModel helpers.
• The editor templates can be used to render any type of control for model property.

• In this article we will see how to upload multiple files to database. 
• The main trick is to select multiple files and post it to the controller's action method.
• The saving code will be same, but will iterate for each file.

• FileId - This is primary key identity column.
• ContentType - This column stores the file type.
• ImageBytes - This column is of type varbinary and stores file bytes.

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

        namespace FileUpload.ViewModel
        {
            public class FileUploadViewModel
            {
                public IEnumerable<HttpPostedFileBase> File { get; set; }
            }
        }
    

    @model FileUpload.ViewModel.FileUploadViewModel

@{
    ViewBag.Title = "FileUpload";
}

<h2>FileUpload</h2>



    <div>
        @using (Html.BeginForm("UploadMultipleFiles", "FileUpload", FormMethod.Post, new { @enctype = "multipart/form-data" }))
        {
            @Html.TextBoxFor(c => c.File, new { type = "file", multiple = "true" })
            <input type="submit" style="margin-left:40px;cursor:pointer;" id="upload" value="Upload"/>
        }
    </div>

       [HttpPost]
        public ActionResult UploadMultipleFiles(FileUploadViewModel fileModel)
        {
            FileUploadService service = new FileUploadService();
            foreach (var item in fileModel.File)
            {
                service.SaveFileDetails(item);
            }
            return View("FileUpload");
        }
    

       public class FileUploadService
    {
        public void SaveFileDetails(HttpPostedFileBase file)
        {
            UploadedFiles newFile = new UploadedFiles();
            newFile.ContentType = file.ContentType;
            newFile.ImageBytes = ConvertToBytes(file);
            using (FileUploadEntities dataContext = new FileUploadEntities())
            {
                dataContext.UploadedFiles.AddObject(newFile);
                dataContext.SaveChanges();
            }
        }

        public byte[] ConvertToBytes(HttpPostedFileBase file)
        {
            byte[] imageBytes = null;
            BinaryReader reader = new BinaryReader(file.InputStream);
            imageBytes = reader.ReadBytes((int)file.ContentLength);
            return imageBytes;
        }
    }
    

• We need to set the multiple attribute to true of the file control.
• The view model's property should of type IEnumerable.
• Iterate on the posted files and save it to the database.

• In this article we are concentrating on two ways by which we can call stored procedure using entity framework.
• Entity Framework performs below expectation when fetching large data, so often we use stored procedure to fetch data.
• In the application where one has used entity framework, one can use entity framework itself to call stored procedure.

        using (SampleAPPEntities dataContext = new SampleAPPEntities())
            {
                List<Register> userList = dataContext.ExecuteStoreQuery<Register>("RegisteredUsers").ToList();
            }
    

        using (SampleAPPEntities dataContext = new SampleAPPEntities())
            {
                List<Register> userList1 = dataContext.GetRegisteredUsers().ToList();
            }
    

• The Local storage in HTML5 is used to store data on client side.
• The Local storage stores the saved data on a user's computer even after closing the browser window.
• We need to be careful while using Local storage, as it could slow down your site.
• In this article we will see how not to use Local storage.

• Do not serialize unnecessarily
• Do not use excessive keys
• Do not use excessive gets/sets
• Do not block the UI
• Do not assume local storage will always work
• Do not use key names that collide

        function store(key, val) {
            localStorage.setItem(key, JSON.stringify(val));
        }
            store('num', 1);
            store('on', true);
            store('name', 'HTML5');
    

        function store(key, val) {
          localStorage.setItem(key, val);
        }
        store('num', '1');
        store('on', 'true');
        store('name', 'HTML5');
    

        localStorage.setItem('first', 'HTML5');
        localStorage.setItem('middle', 'Storage');
        localStorage.setItem('last', 'Local Storage');
    

        localStorage.setItem('name', 'Local Storage');
    

        $('input[type="checkbox"]').click(function() {
          localStorage.setItem($(this).attr('name'), $(this).is(':checked'));
        });
    

        window.onunload = function() {
          $('input[type="checkbox"]').each(function() {
            localStorage.setItem($(this).attr('name'), $(this).is(':checked'));
          });
        };
    

        <head>
        <script>
            $('#name').html(localStorage.getItem('name'));
        </script>
        </head>
    

        <html>
        <body></body>
        <script>
            window.onload = function () {
                $('#name').html(localStorage.getItem('name'));
            };
        </script>
        </html>
    

        $('button').click(function() {
          var name = localStorage.getItem('name');
          $('#name').html(name);
        });
    

        $('button').click(function() {
          window.setTimeout(function() {
            var name = localStorage.getItem('name');
            $('#name').html(name);
          }, 10);
        });
    

        $('textarea').keydown(function() {
          localStorage.setItem('text', $(this).text());
        });
    

        $('textarea').keydown(function() {
          $.debounce(250, function() {
            localStorage.setItem('text', $(this).text());
          });
        });
    

        localStorage.setItem('Hello', 'World');
    

        if (window.localStorage) {
          localStorage.setItem('Hello', 'World');
        }
    

        if (window.localStorage) {
          try {
            localStorage.setItem('Hello', 'World');
          } catch(e) {
            if (e.name === 'QUOTA_EXCEEDED_ERR' || e.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
            } else {
            }
          }
        }
    

        localStorage.setItem('name', 'HTML5');
    

        localStorage.setItem('first-name', 'HTML5');
    

• HTML5 provides database storage to store data on client's machine using a Structured Query Language (SQL) database.
• It uses a temporary database to store data for a specified period of time.
• In order to use this feature we need to open database connection, then we can execute SQL queries on database using two basic functions i.e. transaction() and executeSql().

Opening an connection

        var db = openDatabase('HTML5DB', '1.0', 'Client Side DB', 50 * 1024 * 1024);

        //With Callback Function
        var db = openDatabase('HTML5DB', '1.0', 'Client Side DB', 50 * 1024 * 1024, function () {
                alert("DB Created");
            });
    

The preceding code snippet creates a database object, db, with the title HTML5DB, a version number of 1.0, along with a description and approximate size and callback function in later one.

We need to pass basic four arguments to the openDatabase method and callback function if needed.

• Database name
• Version number
• Text Description
• Size (Approx)
• Callback 

The callback function is called when the database is being created. The return value from the openDatabase method contains the transaction methods needed to perform SQL operations (queries) on database.
If you try to open a database that doesn’t exist, the API will create it on the fly for you. You also don’t have to worry about closing databases.

Size
The default database size is 5MB for borwsers. The Safari browser shows prompt if user tries to create database exceeding the default database size.

Version
The version number is required argument to openDatabase. 
You can change or update version of database using changeVersion method.
Using this method we can know which version of database user is using and then we can upgrade. The changeVersion method is supported only in chrome and opera.


Transaction

In very simple words Transaction is a single unit of work. If a transaction is successful, all of the data modifications made during the transaction are committed and become a permanent part of the database. If a transaction encounters errors and must be canceled or rolled back, then all of the data modifications are erased.
  The ability to rollback if some error occurs is why we use transaction for executing sql queries. There are also error ans success callbacks on the transaction, so you can manage errors.

    //A simple transaction
        db.transaction(function (tx) {
        //using tx object we can execute multiple sql queries.
                tx.executeSql("CREATE TABLE IF NOT EXISTS EMPLOYEE (id unique,name Text)");
            });
    

In the preceding code snippet we have used transaction and used executeSql method inside transaction. The above SQL query creates a table EMPLOYEE.

executeSql method
The executeSql method is used to execute a SQL query on database.
The executeSql method takes four arguments:

1. a string query.
2. an array of strings to insert the values for place holders in string query.
3. success callback function.
4. failure calback function.

Its a good practice to use SQL quesries or executeSql method inside transaction.

Query to Create Table

    $("#CreateTable").click(function () {
            db.transaction(function (tx) {
                tx.executeSql("CREATE TABLE IF NOT EXISTS EMPLOYEE (id unique,name Text)", [], function () {
                    alert("Table Created");
                }, function () {
                    alert("Error");
                });
            });
        });
    

The preceding code snippet creates a table EMPLOYEE with id and name as parameter. We have also defined callback functions for success and failure of executeSql method.

You can check chrome's developer tool to verify the Database and Table creation. You can verify this under Resources tab.

We have created EMPLOYEE table under HTML5DB database. We can verify the table created under Web SQL.

Insert Record

$("#InsertRecord").click(function () {
            db.transaction(function (tx) {
                tx.executeSql("INSERT INTO EMPLOYEE (id,name) VALUES (1,'Jack Wilshere')", [], function () {
                    alert("Record Inserted");
                }, function () {
                    alert("Error");
                });
            });
        });
    

        var id = "2";
        var name = "Thierry Henry";

        $("#InsertRecord").click(function () {
            db.transaction(function (tx) {
                tx.executeSql("INSERT INTO EMPLOYEE (id,name) VALUES (?,?)", [id, name], function () {
                    alert("Record Inserted");
                }, function () {
                    alert("Error");
                });
            });
        });
    

        $("#SelectRecord").click(function () {
            db.transaction(function (tx) {
                tx.executeSql('SELECT * FROM EMPLOYEE', [], function (tx, results) {
                    var len = results.rows.length, i;
                    var ulEle = $("<ul/>");
                    for (i = 0; i < len; i++) {
                        ulEle.append("<li>" + results.rows.item(i).name + "</li>");
                    }
                    $("#targetDiv").append(ulEle);
                });
            });
        });
    

results.rows.item(i).name

        $("#DeleteRecord").click(function () {
            db.transaction(function (tx) {
                tx.executeSql("DELETE FROM EMPLOYEE WHERE id=1", [], function () {
                    alert("Record Deleted");
                }, function () {
                    alert("Error");
                });
            });
        });
    

        $("#DropTable").click(function () {
            db.transaction(function (tx) {
                tx.executeSql("DROP TABLE EMPLOYEE", [], function () {
                    alert("Table Deleted");
                }, function () {
                    alert("Error");
                });
            });
        });