Angulr Part - 3

angular-part-2

Default startup & app.settings file in API Project

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Builder;

using Microsoft.AspNetCore.Hosting;

using Microsoft.AspNetCore.HttpsPolicy;

using Microsoft.AspNetCore.Mvc;

using Microsoft.Extensions.Configuration;

using Microsoft.Extensions.DependencyInjection;

using Microsoft.Extensions.Logging;

using Microsoft.Extensions.Options;

//Default Startup File

namespace DntAppApi

{

    public class Startup

    {

        public Startup(IConfiguration configuration)

        {

            Configuration = configuration;

        }

        public IConfiguration Configuration { get; }

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

        //container.

        public void ConfigureServices(IServiceCollection services)

        {

            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)

        {

            if (env.IsDevelopment())

            {

                app.UseDeveloperExceptionPage();

            }

            else

            {

                app.UseHsts();

            }

            app.UseHttpsRedirection();

            app.UseMvc();

        }

    }

}

Angular Part - 2

Getting started default files(main.ts,app.component.ts,app.module,app,conponent.html,) notations.

1). ng g c home  -s --spec false

 2).ng g m account

 3).cd D:\DntApp\src\app\account 

 4).ng g c login -s --spec false

 5).ng g c register -s --spec false

 6).cd D:\DntApp\src\app

 7).ng generate module app-routing --flat --module=app 

 Notes*

 1).
 imports: [ RouterModule.forRoot(routes) ],
 The method is called forRoot() because you configure the router at the application's root level. 
 The forRoot() method supplies the service providers and directives needed for routing, 
 and performs the initial navigation based on the current browser URL.


 2). The <router-outlet> tells the router where to display routed views.
        The RouterOutlet is one of the router directives that became available to the AppComponent because AppModule imports AppRoutingModule which exported RouterModule.

3). <a routerLink="/heroes">Heroes</a>
       Here routerLink is the selector for the RouterLink directive that turns user clicks into router navigations. It's another of the public directives in the RouterModule.
   

4). { path: '', redirectTo: '/dashboard', pathMatch: 'full' },

Angular Part - 1

List of basic and commonly used CLI Commands

1).ng --version (cmd) -- See Angular Verion.
2).npm install -g @angular/cli -- install Angular Verion.
3).ng generate --help
4).cd D:
5).ng new DntApp :- ng new command creates an Angular workspace folder and generates a new app skeleton. A workspace can contain multiple apps and libraries.
6).cd DntApp
7).ng serve --o
==============================================================
==============================================================
1).ng generate  : - ng generate command to add new files for additional components and services, and code for new pipes, directives, and so on.
Commands such as add and generate, which create or operate on apps and libraries, must be executed from within a workspace or project folder.

2).ng g c --help :- for to configure options for generating new componnent
==============================================================
==============================================================
COMMAND ALIAS
DESCRIPTION

add NA Adds support for an external library to your project.

build b
Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.

config
Retrieves or sets Angular configuration values.

generate g
Generates and/or modifies files based on a schematic.

help
Lists available commands and their short descriptions.

new n
Creates a new workspace and an initial Angular app.

serve s
Builds and serves your app, rebuilding on file changes.

test t
Runs unit tests in a project.

update
Updates your application and its dependencies. See https://update.angular.io/

version v
Outputs Angular CLI version.

xi18n
Extracts i18n messages from source code.

Simpe Captcha Code Verification Project

**********************CaptchaSelf.js**********************

function randomIntFromInterval(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}
function VerifyEBot(e) {
    _CaptchaFlag = e
    alert(e == true ? 'Looks like you are not a robot...' : 'You have selected wrong image...');
    return _CaptchaFlag;
}
var LoadCaptcha = function (eleId) {
    var aa = randomIntFromInterval(1, 90);
    var bb = aa + 1;
    var htmlStr = '';

    var _diffImgIndex = randomIntFromInterval(0, 4);
    var _sameImg = '<td onclick=VerifyEBot(false)><img src="/Captcha/icons/dark/icon-' + aa + '.png" alt="Alternate Text" /></td>';
    var _diffImg = '<td onclick=VerifyEBot(true)><img src="/Captcha/icons/dark/icon-' + bb + '.png" alt="Alternate Text" /></td>';
    switch (_diffImgIndex) {
        case 0:
            htmlStr += _diffImg
            htmlStr += _sameImg
            htmlStr += _sameImg
            htmlStr += _sameImg
            htmlStr += _sameImg
            break;
        case 1:
            htmlStr += _sameImg
            htmlStr += _diffImg
            htmlStr += _sameImg
            htmlStr += _sameImg
            htmlStr += _sameImg
            break;
        case 2:
            htmlStr += _sameImg
            htmlStr += _sameImg
            htmlStr += _diffImg
            htmlStr += _sameImg
            htmlStr += _sameImg
            break;
        case 3:
            htmlStr += _sameImg
            htmlStr += _sameImg
            htmlStr += _sameImg
            htmlStr += _diffImg
            htmlStr += _sameImg
            break;
        default:
            htmlStr += _sameImg
            htmlStr += _sameImg
            htmlStr += _sameImg
            htmlStr += _sameImg
            htmlStr += _diffImg
            break;
    };
    $('#' + eleId).append(htmlStr);
};



********************************Index.html*************************************


@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>app</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="~/Captcha/CaptchaSelf.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
    @*<script src="~/Captcha/js/script.js"></script>
        <link href="~/Captcha/style/css/style.css" rel="stylesheet" />*@
    <style>
        #ID_Captcha_Table {
            margin: 5px;
        }

        #ID_TD_Captcha td {
            border: 5px solid black !important;
            background-color: green;
            border-color: white;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
        }

            #ID_TD_Captcha td:hover {
                background-color: darkgray;
                border-color: white;
                text-align: center;
                vertical-align: middle;
                cursor: pointer;
                transition: border-width 0.2s ease-out;
            }
    </style>
</head>
<body>
    <div class="col-xl-12 col-lg-12">
        <div class="col-xl-4 col-lg-4">
            <label class="col-xl-4 col-lg-4 label-info form-control">name</label>
            <input id="id_name" class="col-xl-8 col-lg-8 form-control" type="text" name="name" />
        </div>
    </div>
    <div class="col-xl-12 col-lg-12">
        <div class="col-xl-4 col-lg-4">
            <label class="col-xl-4 col-lg-4 label-info form-control">password</label>
            <input id="id_password" class="col-xl-8 col-lg-8 form-control" type="password" name="password" />
        </div>
    </div>
    <div class="col-xl-12 col-lg-12">
        <div class="col-xl-4 col-lg-4">
            <label class="col-xl-4 col-lg-4 label-info form-control">Select an odd image from below</label>
        </div>
    </div>

    <div class="col-xl-4 col-lg-4">
        <div class="col-xl-4 col-lg-4">
            <table id="ID_Captcha_Table" class="table table-bordered">
                <tr id="ID_TD_Captcha"></tr>
            </table>
        </div>
    </div>
    <div class="col-xl-12 col-lg-12">
        <div class="col-xl-4 col-lg-4">
            <input id="ID_Save_Btn" type="button" name="name" value="Save" />
        </div>
    </div>
</body>
</html>
<script>
    var _CaptchaFlag = false;
    $(document).ready(function () {
        LoadCaptcha('ID_TD_Captcha', _CaptchaFlag);
    });
    $('#ID_Save_Btn').click(function () {
        console.log(document.getElementById('ID_TD_Captcha'))
        var _name = $('#id_name').val();
        var _password = $('#id_password').val();
        if (_name == undefined || _name == "") {
            alert('Please enter name');
            return;
        }
        if (_password == undefined || _password == "") {
            alert('Please enter password');
            return;
        }
        if (_CaptchaFlag == false) {
            alert('Please verify captch verification');
            return;
        }
        alert('Verified \nname : ' + _name + '\nPassword : ' + _password + '\nCaptchaFlag : ' + _CaptchaFlag);
    });
</script>

SP For Login_Valid_User

ALTER Proc [dbo].[Login_Valid_User]

@username varchar(50) = 'mayurgnu',

@passowd varchar(50) = 'mayurgnu',

@out int = 0 out

as 

begin

if exists(

select 1 from MST_Employee where UserName = @username and Password = @passowd)

begin

  set @out = 1

  print @out

end

else

begin

set @out = 0

print @out

end

end 

PracticalTest.Controller

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using WebApplication1.Models;
using Microsoft.Office.Interop;


namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        private IMS_AppEntities _context = new IMS_AppEntities();
        public ActionResult Index()
        {
            return View();
        }

        public JsonResult Get_Users_List()
        {
            return Json(new { aaData = _context.GetUser() }, JsonRequestBehavior.AllowGet);
        }

        public JsonResult Get_Stone_List()
        {
            return Json(new { aaData = _context.MST_Stone.ToList() }, JsonRequestBehavior.AllowGet);
        }

        //public string Export_Excel_Data()
        //{
        //     Microsoft.Office.Interop.Excel.Application();
        //    Exce wb = new ExcelWorkbook();
        //    wb.Worksheets.Add("TEST EXCEL" + DateTime.Now.ToString());
        //    ExcelPackage p = new ExcelPackage();
        //    ExcelWorksheet ws = wb.Worksheets[1];
        //    ws = (ExcelWorksheet)wb.Worksheets.get_Item(1);
        //    ws.Name = "TEST EXCEL"; //Setting Sheet's name
        //    ws.Cells.Style.Font.Size = 11; //Default font size for whole sheet
        //    ws.Cells.Style.Font.Name = "Calibri"; //Default Font name for whole sheet
        //    ws.Cells[1, 1].Value = "STONE NO";
        //    wb.("your-file-name.xls");
        //    return "";
        //}
       
        private void Download_File()
        {
            var path = Request.QueryString["filepath"];
            var file = new FileInfo(path);
            Response.Clear();
            Response.ContentType = "application/vnd.ms-excel";
            Response.AddHeader("Content-Disposition", "attachment; filename=\"" + file.Name + "\"");
            Response.AddHeader("Content-Length", file.Length.ToString());
            Response.TransmitFile(file.FullName);
            HttpContext.ApplicationInstance.CompleteRequest();
        }
    }
}

Practical.index

@{
    Layout = null;
}

<!DOCTYPE html>
<link href="~/Content/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/ui-grid-3.0.0-rc.14/ui-grid.css" rel="stylesheet" />
<script src="~/Content/angularjs/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="~/Content/ui-grid-3.0.0-rc.14/ui-grid.js"></script>
<html ng-app="MYAPP">

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style>
        .spanGrid {
            border: 2px solid black;
            background-color: lightgray;
            height: 36px;
            width: 100%;
            text-align: center;
            line-height: 35px;
            font-weight: bolder;
        }

        .MyHeaderClass {
            background-color: skyblue;
        }
    </style>
</head>
<body ng-controller="MYCTRL">
    <div class="row">

        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <button class="btn btn-info" ng-click="ExportExcel()"><i class="glyphicon glyphicon-export"></i>&nbsp;EXPORT</button>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 spanGrid">Stone Details</div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div ui-grid="gridOptionsUser" class="grid table table-striped" style="height: calc(100vh - 78px);"
                 ui-grid-pagination ui-grid-auto-resize ui-grid-grouping
                 ui-grid-edit ui-grid-cellnav ui-grid-move-columns ui-grid-exporter
                 ui-grid-pinning ui-grid-resize-columns ui-grid-validate />
        </div>
    </div>
</body>

</html>
<script>
    var app = angular.module("MYAPP", ['ngTouch','ui.grid', 'ui.grid.edit', 'ui.grid.autoResize', 'ui.grid.pagination', 'ui.grid.grouping', 'ui.grid.cellNav', 'ui.grid.moveColumns', 'ui.grid.exporter', 'ui.grid.pinning', 'ui.grid.resizeColumns', 'ui.grid.selection']);
    app.controller("MYCTRL", ['$scope', '$filter', '$timeout', '$http', '$interval', 'uiGridConstants', 'uiGridGroupingConstants', '$q',
        function ($scope, $filter, $timeout, $http, $q, uiGridConstants, uiGridGroupingConstants, $interval, $window) {
            $scope.MYCTRL = {};
            $scope.Message = 'HIIII';
            $scope.gridOptionsUser = {};
            $scope.gridOptionsUser = {
                columnDefs: [
                    { field: 'stone_id', name: 'stone_id', displayName: 'stone_id', width: "*" },
                    { field: 'stone_no', name: 'stone_no', displayName: 'stone_no', width: "*" },
                    {
                        field: 'weightincarats', name: 'WT', displayName: 'WT', width: "*",
                        footerCellTemplate: '<div class="ui-grid-cell-contents">Total {{col.getAggregationValue()  }}</div>', aggregationType: uiGridConstants.aggregationTypes.sum
                    },
                    { field: 'liveraprate', name: 'liveraprate', displayName: 'liveraprate', width: "*" },
                    { field: 'rapamount', name: 'rapamount', displayName: 'rapamount', width: "*" },
                    { field: 'websitediscount', name: 'websitediscount', enableCellEdit: true, displayName: 'websitediscount', width: "*" },
                    { field: 'websiterate', name: 'websiterate', displayName: 'websiterate', width: "*" },
                    { field: 'websiteamount', name: 'websiteamount', displayName: 'websiteamount', width: "*" },
                    {
                        field: 'Gender', name: 'Gender', displayName: 'Gender', width: "*",
                        enablCellEdit: true,
                        editableCellTemplate: 'ui-grid/dropdownEditor',
                        editDropdownValueLabel: 'Gender',
                        editDropdownOptionsArray: [
                          { id: 1, Gender: 'male' },
                          { id: 2, Gender: 'female' }
                        ]
                    },
                    {
                        name: 'size', displayName: 'Clothes Size', width: '20%', editableCellTemplate: 'ui-grid/dropdownEditor',
                        cellFilter: 'mapSize', editDropdownValueLabel: 'size', editDropdownRowEntityOptionsArrayPath: 'sizeOptions'
                    }
                ]
            }

            $scope.maleSizeDropdownOptions = [
               { id: 1, size: 'SM' },
               { id: 2, size: 'M' },
               { id: 3, size: 'L' },
               { id: 4, size: 'XL' },
               { id: 5, size: 'XXL' }
            ];

            $scope.femaleSizeDropdownOptions = [
              { id: 6, size: '8' },
              { id: 7, size: '10' },
              { id: 8, size: '12' },
              { id: 9, size: '14' },
              { id: 10, size: '16' }
            ];

            $scope.gridOptionsUser.headerCellTemplate = '<div ng-style="{ height: col.headerRowHeight }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="MyHeaderClass" ng-header-cell></div>'
            $scope.gridOptionsUser.enableHorizontalScrollbar = 1;
            $scope.gridOptionsUser.enableVerticalScrollbar = 1;
            $scope.gridOptionsUser.enableSelectAll = false;
            $scope.gridOptionsUser.suppressScrollLag = true;
            $scope.gridOptionsUser.exporterMenuPdf = false;
            $scope.gridOptionsUser.enableGridMenu = false;
            $scope.gridOptionsUser.showColumnFooter = true;
            $scope.gridOptionsUser.enableSorting = true;
            $scope.gridOptionsUser.useExternalSorting = false;
            $scope.gridOptionsUser.enableFiltering = true;
            $scope.gridOptionsUser.useExternalFiltering = false;
            $scope.gridOptionsUser.enablePaginationControls = false;
            $scope.gridOptionsUser.enableCellEdit = false;
            $scope.gridOptionsUser.showGridFooter = false;
            $scope.gridOptionsUser.paginationPageSize = 500000,
            $scope.gridOptionsUser.rowHeight = 22;
            //$scope.gridOptionsUser.rowTemplate = rowTemplateOnDbclick();
            $scope.gridOptionsUser.onRegisterApi = function (gridApi) {
                $scope.gridOptionsUserApi = gridApi;
                gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
                    //if (colDef.field == "websiterate") {
                    //    if ($scope.SalesOrderAN.RapDiscPer != undefined && $scope.SalesOrderAN.RapDiscPer != 0) {
                    //        rowEntity.OrderRate = oldValue;

                    //    }
                    //    else {
                    //        rowEntity.OrderRate = newValue == "" ? oldValue : newValue;
                    //    }
                    //    rowEntity.OrderDiscount = parseFloat(((parseFloat(rowEntity.OrderRate) - parseFloat(rowEntity.LiveRapaRate)) * 100) / parseFloat(rowEntity.LiveRapaRate)).toFixed(4);
                    //    rowEntity.FinalDiscount = rowEntity.OrderDiscount;
                    //    rowEntity.OrderAmount = parseFloat(parseFloat(rowEntity.OrderRate) * parseFloat(rowEntity.WT)).toFixed(4);
                    //}
                });

            };

            $scope.Fill_User_GRID = function () {
                debugger
                $http({
                    method: 'GET',
                    url: '@Url.Action("Get_Stone_List", "Home")',
                    dataType: 'json'
                }).then(function success(data) {
                    $scope.gridOptionsUser.data = data.data.aaData;
                });
            }
            $scope.Fill_User_GRID();

            $scope.FUNCTION_Check_ALL = function () {
                debugger
                alert($scope.MYCTRL.CheckAll);
            }

            $scope.ExportExcel = function () {
                $http({
                    method: 'GET',
                    url: '@Url.Action("Export_Excel_Data", "Home")',
                    dataType: 'json'
                }).then(function success(data) {
                    $scope.DownloadExcel("C:\\Users\\Akash\\Downloads\\MST_Stone.xlsx");
                });
            }
            $scope.DownloadExcel = function (path) {
                var url = '@Url.Action("Download_File", "Home")/?filepath=' + path;
                var hiddenIFrameID = 'hiddenDownloaderReportResult';
                var iframe = document.getElementById(hiddenIFrameID);
                if (iframe === null) {
                    iframe = document.createElement('iframe');
                    iframe.id = hiddenIFrameID;
                    iframe.style.display = 'none';
                    document.body.appendChild(iframe);
                }
                iframe.src = url;
            };

            @*$scope.DownloadExcel = function (path) {
                var url = '@Url.Action("Download_File", "Home")/?filepath=' + path;
                var hiddenIFrameID = 'hiddenDownloaderReportResult';
                var iframe = document.getElementById(hiddenIFrameID);
                if (iframe === null) {
                    iframe = document.createElement('iframe');
                    iframe.id = hiddenIFrameID;
                    iframe.style.display = 'none';
                    document.body.appendChild(iframe);
                }
                iframe.src = url;
            };*@
        }]);
</script>