Dot Net Problem and Technique Discussion.

Connect TFS to visual studio code

noreply@blogger.com (Ketan Patel) — Thu, 22 Feb 2018 08:16:00 -0800

Hello Friend’s,

Visual studio code is very important tool when working with angular 2 and other languages.

Most of times TFS is used for source control. We need to do some setting for that.

Below settings are needs to done.

1. Open the Setting in visual studio code as shown in below screen shot.

2. Below Codes are needed to do in settings.


{
"tfvc.location": "C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\Common7\\IDE\\tf.exe",
"tfvc.restrictWorkspace": true
}

After this you will receive below error.

(team) You are not connected to a Team Foundation Server. Please run the 'team signin' command.

Now run Sign in command. Or you may click on below icon.

Enter your TFS user name and password. After login in you are successfully connect to TFS.

Now you can see your changes at Source Control menu.

Visual Studio code does not show extension List. Proxy Issue

noreply@blogger.com (Ketan Patel) — Thu, 22 Feb 2018 08:02:00 -0800

Hello Friend’s,

It's always hard time when working with Visual studio code and Git repository behind the proxy. Don't know for others but for me yes.

Some time you might face problem to access extension in visual studio code if you are behind proxy. Below is way to handle it.

1. Open the Setting in visual studio code as shown in below screen shot.

2. 2. Enter the Setting as shown below. These are setting for Http and Https Proxy.



 // Place your settings in this file to overwrite the default settings
 {
 "http.proxy":"proxy name",
 "https.proxy":"proxyname",
 "http.proxyStrictSSL": false
 }

Hope it will work.

If still not working then one more setting need to do.

Please note I have done this setting to access bit bucket repository from proxy behind. Open you user folder. (C-> Users -> Your user name) Make note pad file with extension .npmrc Add below setting in that files.



registry=https://registry.npmjs.org/
http-blrproxy.igate.com=YOUR PROXY
https-blrproxy.igate.com=YOUR PROXY
proxy=http://DOMAIN%USERNAME:PASSWORD@PROXY/
strict-ssl=false

Replace PROXY with your company proxy.

Replace DOMAIN,USERNAME and PASSWORD with current values.

Add Read More note with web site link When Someone Copies Text from your website.

noreply@blogger.com (Ketan Patel) — Sun, 5 Nov 2017 09:40:00 -0800

Hello,

Below code use full when you want to add your link when some one copy from your website.

Put below java script code in main Master page.


function addLink() {
    //Get the selected text and append the extra info
    var selection = window.getSelection();
    pagelink = ". Read more at: " + document.location.href;
    copytext = selection + pagelink;
 //Create a new div to hold the prepared text
    newdiv = document.createElement('div');

    //hide the newly created container
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';

    //insert the container, fill it with the extended text, and define the new selection
    document.body.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);

    window.setTimeout(function () {
        document.body.removeChild(newdiv);
    }, 100);
}
document.addEventListener('copy', addLink);

Hope this will help.

Format JSON Date.

noreply@blogger.com (Ketan Patel) — Wed, 1 Nov 2017 04:09:00 -0700

Hello,

Below is way to format JSON Date.

var date = new Date(parseInt(jsonDate.substr(6)));

The substr function takes out the "/Date(" part, and the parseInt function gets the integer and ignores the ")/" at the end. The resulting number is passed into the Date constructor.

if you are using newtonsoft then see at below location.
https://www.newtonsoft.com/json

How to bind Event on dynamically created elements in JQuery.

noreply@blogger.com (Ketan Patel) — Wed, 25 Oct 2017 23:54:00 -0700

We can achieve this using jQuery.fn.on.
(Details document available at https://api.jquery.com/on/#on-events-selector-data-handler)

Let’s have an example.

Suppose your page creating element with the class name 'Applyevent'
you would bind the event to a parent which already exists
mainly 'document'



$(document).on('mouseover', '.Applyevent', function(){

    // what you want to happen when mouseover 

    // occurs on elements that match '.Applyevent'

});

Any parent that exists at the time the event is bound is fine. For example




$('.dynamicgenerate').on('click', 'button', function(){

    // code here

});



<div class="dynamicgenerate">

     

              <---- Dynamic Controls here ---->

              --- Suppose <button>


</div>

How to remove specific session in asp.net

noreply@blogger.com (Ketan Patel) — Wed, 23 Aug 2017 22:19:00 -0700

You can set session element to null.

Example:-

Session["sessionname"] = null;

How to parse html in C#?

noreply@blogger.com (Ketan Patel) — Wed, 23 Aug 2017 05:13:00 -0700

First

You Can use Html Agility Pack
Details is availbale at
http://html-agility-pack.net/?z=codeplex

This is an agile HTML parser that builds a read/write DOM and supports plain XPATH or XSLT (you actually don't HAVE to understand XPATH nor XSLT to use it, don't worry...). It is a .NET code library that allows you to parse "out of the web" HTML files. The parser is very tolerant with "real world" malformed HTML. The object model is very similar to what proposes System.Xml, but for HTML documents (or streams).

Second

using Fizzler that takes a jQuery/Sizzler approach to selecting HTML elements. It's based on HTML Agility Pack.Details available at below location.

https://code.google.com/archive/p/fizzler/

Sending mail from my gmail account through .Net

noreply@blogger.com (Ketan Patel) — Wed, 23 Aug 2017 04:57:00 -0700

Below is sample to send mail from your gmail account.

We will use System.Net.Mail to send mail from gmail account.

using System.Net;

using System.Net.Mail;

var fromAddress = new MailAddress("fromaddress@gmail.com", "Your Name");

var toAddress = new MailAddress("toaddress@example.com", "Receipt Name");

const string fromPassword = "YourPassword";

const string subject = "Subject";

const string body = "Body";

var smtp = new SmtpClient

{

    Host = "smtp.gmail.com",

    Port = 587,

    EnableSsl = true,

    DeliveryMethod = SmtpDeliveryMethod.Network,

    UseDefaultCredentials = false,

    Credentials = new NetworkCredential(fromAddress.Address, fromPassword)

};

using (var message = new MailMessage(fromAddress, toAddress)

{

    Subject = subject,

    Body = body

})

{

    smtp.Send(message);

}

Difference between ScriptManager and ScriptManagerProxy in asp.net

noreply@blogger.com (Ketan Patel) — Wed, 23 Aug 2017 04:28:00 -0700

You can only have one script manager per page but you can have multiple ScriptManagerProxy.

Used ScriptManagerProxy if you have the script manager in your master for instance which will go across all pages but you want a script manager reference in an underlying page or user control.

In that instance you would add the proxy. If you added another script manager the page would error.

Run First Application in Angular 2 (Angular 2 base project).

noreply@blogger.com (Ketan Patel) — Mon, 14 Aug 2017 23:37:00 -0700

Run First Application in Angular 2 (Angular 2 base project).

è Need to install node.js from below location.

https://nodejs.org/en/

(Install Latest version of node.js)

è Run below command from node.js command prompt

npm install –g @angular/cli

ng new myapp

cd myapp

ng serve

Now you will see blow output.

Now run your application from localhost:4200 (mention in above command output). You may see different output base on version.

How to upgrade Node.Js to latest version

noreply@blogger.com (Ketan Patel) — Mon, 14 Aug 2017 22:41:00 -0700

How to upgrade Node.Js to latest version.

For Linux/Max

sudo npm cache clean -f

sudo npm install -g n

sudo n stable

Instead of stable you can also specify a desired version.

Sudo n 0.8.21

For windows

You can update npm using below command.

npm update npm -g

However to update node.js better you will reinstall from node.js website.

https://nodejs.org/en/

Common Error in Angular2. Can't bind to 'ngModel' since it isn't a known property of 'input'

noreply@blogger.com (Ketan Patel) — Thu, 6 Jul 2017 20:44:00 -0700

Common Error in Angular2.
Can't bind to 'ngModel' since it isn't a known property of 'input'

This error you will received if you didn't included FormModule in your module.

Better way to resolve this defect is include FormModule in app.module.ts


import { FormsModule } from '@angular/forms';


@NgModule({

  imports: [

    FormsModule

  ],

})

Angular 2 trigger change detection.

noreply@blogger.com (Ketan Patel) — Thu, 6 Jul 2017 06:11:00 -0700

There are three way to implement change detection in Angular 2.

1. ChangeDetectorRef.detectChanges()

This is most common used.
This will Checks only in component and its children.
Details of class can be read at
https://angular.io/api/core/ChangeDetectorRef#!#detectChanges-anchor

2. ApplicationRef.tick()

It will check for full component tree.
Details of class can be read at
https://angular.io/api/core/ApplicationRef#!#tick-anchor

3. NgZone.run(callback)

It will check the full component tree after executing the callback function.
Details of class can be read at
https://angular.io/api/core/NgZone#!#run-anchor

You can choose one method from above.

inject ApplicationRef, NgZone, or ChangeDetectorRef into your component

Hope this will be help full.

Share value from one component to another component in Angular 2.

noreply@blogger.com (Ketan Patel) — Tue, 4 Jul 2017 20:44:00 -0700

Hello,

You can share value between components using Shared service.

Below is sample code for it.

in Share Service.



export class SharedService {
  private name = '';

  savedata(str){
    this.name=str; 
  }

  getData:string()
  {
    return this.name;
  }
}

In First Component.



@Component({
  template: `
    

    <input #myVal type="text" />

    <button (click)="send(myVal.value)>Send</button>

      `,

})

export class FirstComponent{

  constructor(service:SharedService){
    this.service=service;
  }

  send(str){
    this.service.saveData(str); 
  }

}

In Second Component



export class SecondComponent   {

  constructor(service:SharedService)
  {
    this.service=service;   
    this.myName=service.getData();
  }

}

Hope this will help you.

Scroll to top of page in Angular 2 (Using routing)

noreply@blogger.com (Ketan Patel) — Mon, 3 Jul 2017 22:04:00 -0700

Hello,

Sometime we need to move on next page using clicking on page bottom link.

In Angular 2 there is a problem. Next page will not move directly to the top of the page.

This may give bad impression to end user.

Below is one way to move focus on top of the page.

register a listener of route change on main component and scroll to
top on route changes.

Shown in below example.

 


import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
    selector: 'main-app',
    template: '',
})

export class MainComponent implements OnInit {
    constructor(private router: Router) { }

    ngOnInit() {
        this.router.events.subscribe((evt) => {
            if (!(evt instanceof NavigationEnd)) {
                return;
            }
            window.scrollTo(0, 0)
        });
    }
}

You can also used document.body.scrollTop = 0.

Hope this will helpful.

Generate Guid In Angular 2 Application (type Script)

noreply@blogger.com (Ketan Patel) — Thu, 22 Jun 2017 22:56:00 -0700

Generate Guid In Angular 2 Application (type Script)

Hello,

Below is code block to generate GUID in angular 2 application.

 function newguidgen() {  
  function id() {  
   return Math.floor((1 + Math.random()) * 0x10000)  
    .toString(16)  
    .substring(1);  
  }  
  return id() + id() + '-' + id() + '-' + id() + '-' +  
   id() + '-' + id() + id() + id();  
 }

Could not load file or assembly 'system.web.http' or one of its dependencies. The located seembly's manifest definition does not match the assemblr reference (Exception from HRESULT : 0x80121040)

noreply@blogger.com (Ketan Patel) — Tue, 24 Jan 2017 21:13:00 -0800

Hello,

Sometime we receive below error message.

Could not load file or assembly 'system.web.http' or one of its dependencies. The located seembly's manifest definition does not match the assemblr reference (Exception from HRESULT : 0x80121040)

Solution :-
It will be fix with reinstall of Package.
Run below command in Package manager.

Update-Package Microsoft.AspNet.WebApi -reinstall

Error in Upgrade of Node.JS

noreply@blogger.com (Ketan Patel) — Thu, 19 Jan 2017 02:10:00 -0800

Hello,

Below is command use to upgrade node.js.

npm install npm@latest -g (Upgrade node.js)

Sometime we get the error in upgrade like

In most of cased the problem with Proxy setting.

To check proxy try to access below url.

https://registry.npmjs.org/

if it works then your proxy is fine else some problem with proxy.

After resetting my proxy it's work fine.

Hope this will helpful..

Enjoy!!!

npm install command fails in Angular2

noreply@blogger.com (Ketan Patel) — Fri, 9 Sep 2016 09:34:00 -0700

Hello,

Recently I am working on Angular2 application.

My Client provided application. I have to extend the functionality. I have to run npm install. In my machine I have new environment. I have to run "npm install" command in node.js command prompt. But it's fail every time.

I have double check the version and lots other thing but didn't work.

Then I have run below command which set the registry. And after setting this registry "npm install" works successfully.

Command is

npm set registry https://registry.npmjs.org/

Please don't forgot to comment if this article help you.

How to Run Angular2 Application in local environment.

noreply@blogger.com (Ketan Patel) — Sat, 27 Aug 2016 22:39:00 -0700

Hello,

Below steps need to follow to run Angular2 Application on local machine.

1. First Install node.js from below location.
https://nodejs.org/en/download/

2. You will see below installed command prompt in your system

3. Now we are going to install web server. Run below command in nodejs command prompt.

npm install live-server -g

We will use live-server package. This server written in Node, update the
package automatic when changes the source code.

4. Now we install typescript. Typescript is languae which used to write angular
2 application.

npm install typescript

5. I am using Visual studio code as a editor. Install it from below location.
https://code.visualstudio.com/Download

6. Now you can run your first application. Below is sample application which I have created.

I know above screen shot is not enough for first example. We will see details code of First Example later. Here I have only shown How to run Angular 2 application.

Let me know if you have query.

How to do paging in AngularJS

noreply@blogger.com (Ketan Patel) — Sun, 17 Jul 2016 00:15:00 -0700

The paging is most usefull feature of web appliation.

Below is code block to achive Paging in AngularJS.

<html ng-app="todos"/>

<head>
  <link data-require="bootstrap-css@3.3.4" data-semver="3.3.4" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"></link>
  <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="http://code.angularjs.org/1.3.15/angular.min.js"></script>
  <script data-require="angular-ui-bootstrap@0.12.1" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
  <link href="style.css" rel="stylesheet"></link>
  <script src="script.js"></script>
</head>

<body ng-controller="TodoController">
  <h1>
Todos</h1>
<h4>
{{todos.length}} remain</h4>
<ul>
<li ng-repeat="todo in filteredTodos">{{todo.text}}</li>
</ul>
<pagination boundary-links="true" class="pagination-sm" max-size="maxSize" ng-model="currentPage" total-items="todos.length">
  </pagination>
</body>

Running Example

Call Web API From AngularJS

noreply@blogger.com (Ketan Patel) — Tue, 28 Jun 2016 10:11:00 -0700

WebAPI support below HTTP verbs

POST, GET, PUT, DELETE, PATCH.

Lets make a sample application on that we pass some data from AngularJS to Web API and retrieve some data from Web API to AngularJS.

Create a Web API with simple steps.

Select Empty Project template. You can also select Web API templates.

Create a Model School class. In this class, define some property of the school.

Now, in controller folder, create a SchoolController. In this controller, define two methods, Get and Post.

You can give any name, but you have to use HTTP verbs over the method name.

Now, our WEB API is ready. To check if Web API is working or not, just run the solution.

We can see the Get method that returns proper data. So our Web API development is done.

Now, we have to create a HTML page with the help of AngularJS. Through this page, we pass the data and retrieve the data.

So, let's start doing the coding of our HTML page.

I am creating two folders- UI and scripts. In UI folder, I kept all my HTML pages and in Scripts Folder, all JS Files.

Create a School.html page and in this page, take reference of Angular.js file and my script file and two buttons, where one is for Get and another for Post.

Now, we have to do Angular coding.

Create a module and a controller. In the controller, we inject $http service, which is used to pass and retrieve the data from Web API. In this controller, we will create two functions, getData and postData.

It will look as shown below:

Run the solution and when we click on Get Button, the data comes from Web API and binds to all the text boxes.

When we give some value to text box and click Post button, the controller data shows:

In SchoolController, the data is being displayed as:

ui-router Benefits (ui-router advantage)

noreply@blogger.com (Ketan Patel) — Mon, 30 May 2016 08:43:00 -0700

ui-router Benefits (ui-router advantage)

ui-router is a 3rd-party module and is very powerful.
It supports everything the normal ngRoute can do as well as many extra functions.

Here are some common reason ui-router is chosen over ngRoute:

1. ui-router allows for nested views and multiple named views. This is very useful with larger app where you may have pages that inherit from other sections.

2. ui-router allows for you to have strong-type linking between states based on state names. Change the url in one place will update every link to that state when you build your links with ui-sref. Very useful for larger projects where URLs might change.

3. There is also the concept of the decorator which could be used to allow your routes to be dynamically created based on the URL that is trying to be accessed. This could mean that you will not need to specify all of your routes before hand.

4. states allow you to map and access different information about different states and you can easily pass information between states via $stateParams.

5. You can easily determine if you are in a state or parent of a state to adjust UI element (highlighting the navigation of the current state) within your templates via $state provided by ui-router which you can expose via setting it in $rootScope on run.
In essence, ui-router is ngRouter with more features, under the sheets it is quite different. These additional features are very useful for larger applications.

Below is more information details.

Github: https://github.com/angular-ui/ui-router
Documentation:
API Reference: http://angular-ui.github.io/ui-router/site/#/api
Guide: https://github.com/angular-ui/ui-router/wiki
FAQs: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
Sample Application: http://angular-ui.github.io/ui-router/sample/#/

AngularJS Interview Question

noreply@blogger.com (Ketan Patel) — Thu, 26 May 2016 07:33:00 -0700

AngularJS Interview Question -1

AngularJS Interview Question -2

noreply@blogger.com (Ketan Patel) — Thu, 26 May 2016 07:31:00 -0700

What are expressions in AngularJS?

Angular expressions are unit of code which resolves to value. This code is written inside curly braces “{“.

AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.


Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}

<div ng-app="">

  <p>My first expression: {{ 5 + 5 }}</p>

</div>

The below expression displays a controller scoped variable.


<div ng-controller="CustomerVM">

The value of Customer code is {{CustomerCode}} 

</div>

Difference between AngularJS Expressions and JavaScript Expressions

Like JavaScript expressions, AngularJS expressions can contain literals, operators, and variables.

Unlike JavaScript expressions, AngularJS expressions can be written inside HTML.

AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.

AngularJS expressions support filters, while JavaScript expressions do not.

What is the digest cycle, watchers and dirty checking?
Digest cycle: - It is a simple loop which updates the model and view.
Watchers :- They are listeners which are attached to expression and angular directives and fire when the model data changes.
Dirty check :- This is a extra digest loop which runs to check any cascading left over updates due to the first digest cycle.

Lets look in details.

Angular is a MVW framework. It helps us to bind the model and the view.
In other words when any change happens in the model the view gets updated.
This updation of the model and the view is done by a loop called as digest cycle.
Digest cycle follows four important steps:-

Step 1:- Some kind of event is triggered by the end user like typing (onchange), button click etc and due to this activity model value changes.
Step 2:- Angular first checks if the new value and old values are same. If they are same he does not do anything. If they are not it then it invokes the digest cycle.
Step 3:- Digest cycle then runs through the scope objects to check which objects are getting affected because of this change. Every object in the scope have watchers. Watchers as the name says it listens whether the model has changed or not. Digest cycle informs the watchers about the model change and then watchers synchronize the view with the model data.
Step 4 :- In step 3 watchers update the view and due that update its very much possible that the model changes again. Now due to this model change we have to reevaulate the view again. So the digest loop runs once again to ensure that all things are synched up. This second loop which runs is termed as dirty check loop.
Below is the figure where in we have highlighted all the four steps.

How do you reset a “$timeout”, and disable a “$watch()”?
The key to both is assigning the result of the function to a variable.

To cleanup the timeout, just “.cancel()” it:


var customTimeout = $timeout(function () {

  // arbitrary code

}, 55);

$timeout.cancel(customTimeout);

The same applies to “$interval()”.

To disable a watch, just call it.

// .$watch() returns a deregistration function that we store to a variable
var deregisterWatchFn = $rootScope.$watch(‘someGloballyAvailableProperty’, function (newVal) {
if (newVal) {
// we invoke that deregistration function, to disable the watch
deregisterWatchFn();
...
}
});

List at least three ways to communicate between modules of your application using core AngularJS functionality.

Common ways to communicate between modules of your application using core AngularJS functionality include:

Using services
Using events
By assigning models on $rootScope
Directly between controllers, using $parent, $$childHead, $$nextSibling, etc.
Directly between controllers, using ControllerAs, or other forms of inheritance

Do I need Jquery for AngularJS?
No , you do not need Jquery for Angular. It’s independent of Jquery.

How is the data binding in AngularJS ?
Its two way binding. So whenever you make changes in one entity the other entity also gets updated.

Mention what are the styling form that ngModel adds to CSS classes ?

ngModel adds these CSS classes to allow styling of form as well as control
ng- valid
ng- invalid
ng-pristine
ng-dirty

Difference between angular-route and angular-ui-router
See below description

Explain AngularJS boot process.

When the page is loaded in the browser, following things happen:

• HTML document is loaded into the browser, and evaluated by the browser. AngularJS JavaScript file is loaded; the angular global object is created. Next, JavaScript which registers controller functions is executed.

• Next AngularJS scans through the HTML to look for AngularJS apps and views. Once view is located, it connects that view to the corresponding controller function.

• Next, AngularJS executes the controller functions. It then renders the views with data from the model populated by the controller. The page gets ready.