Tuesday, 20 June 2017

Create Indexing in Entity Framework code first

You can create an index on one or more columns using the IndexAttribute. Adding the attribute to one or more properties will cause EF to create the corresponding index in the database when it creates the database, or scaffold the corresponding CreateIndex calls if you are using Code First Migrations.

Clustered Index:
In case if we are creating the clustered index on non-primary key column and want to make the uniqueness on the index column so we can use the “IsUnique” parameter of “IndexAttribute”.
public class Student
{
    public int Id { get; set; }
    public string Name { get; set; }

    [Index("RegistrationNumber", IsClustered = true)]   
    public int RegistrationNumber { get; set; }
}

Using Fluent API
modelBuilder.Entity<Student>()
                .Property(x => x.RegistrationNumber)
                .HasColumnAnnotation("Index",
                    new IndexAnnotation(new IndexAttribute("RegistrationNumber") { IsClustered = true }));

By default, the index will be named IX_<property name> (i.e. IX_RegistrationNumber in the above example). You can also specify a name for the index though. The following example specifies that the index should be named RegistrationNumberIndex.

Clustered Index with Unique:
In case if we are creating the clustered index on non-primary key column and want to make the uniqueness on the index column so we can use the “IsUnique” named parameter of “IndexAttribute”. By default, indexes are non-unique.
public class Student
{
    public int Id { get; set; }
    public string Name { get; set; }

   [Index("RegistrationNumber", IsClustered = true, IsUnique = true)]   
    public int RegistrationNumber { get; set; }
}

Using Fluent API
modelBuilder.Entity<Student>()
                .Property(x => x.RegistrationNumber)
                .HasColumnAnnotation("Index",
                    new IndexAnnotation(new IndexAttribute("RegistrationNumber") { IsClustered = true, IsUnique = true }));


Non-Clustered Index:
By default, index created by EF are non-clustered. So, modal class can have multiple non-clustered indexes. Non-clustered index also can be a unique in nature.
public class Student
{
    public int Id { get; set; }

    [Index] //default index creation without passing the name
    public string Name { get; set; }

     [Index("RegistrationNumber") //default index creation with passing the name
    public int RegistrationNumber { get; set; }
}

 


Single Column Index:

public class Student
{
    public int Id { get; set; }

    [Index ("Name")]
    public string Name { get; set; }  

    public int RegistrationNumber { get; set; }
}

 

Using Fluent API

modelBuilder.Entity<Student>()
                .Property(x => x.Name)
                .HasColumnAnnotation("Index", new IndexAnnotation(new IndexAttribute("Name")));



Multi Column Index:

Indexes that span multiple columns can also be scaffold by using the same index name on multiple properties.
public class Student
{
            public int Id { get; set; }

            [Index("NameAndRegistration", Order: 1)]
            public string Name { get; set; }
           
            [Index("NameAndRegistration", Order: 2)]
            public int RegistrationNumber { get; set; }
}

Using Fluent API
modelBuilder.Entity<Student>()
                .Property(x => x.Name)
                .HasColumnAnnotation("Index", new IndexAnnotation(new IndexAttribute("NameAndRegistration", 1)));
            modelBuilder.Entity<Student>()
                .Property(x => x.RegistrationNumber)
                .HasColumnAnnotation("Index", new IndexAnnotation(new IndexAttribute("NameAndRegistration", 2)));

 

 

Index Ordering:

Index can be order by setting the Ordernamed parameter of IndexAttribute.
public class Student
{
            public int Id { get; set; }

            [Index("Name", Order: 1)]
            public string Name { get; set; }
           
            [Index("RegistrationNumber", Order: 2)]
            public int RegistrationNumber { get; set; }
}




Friday, 16 June 2017

Sum of an array of numbers in Typescript

var shoppingListItems = [
    {name: "Milk", number: 100},
    {name: "Sugar", number: 22},
    {name: "Bread", number: 12}
];

// creates an array of the `number` property: [100, 22, 12]
var numbers = shoppingListItems.map(i => i.number);

// gets the sum of the array of numbers: 134
var sum = numbers.reduce((a, b) => a + b, 0);






Wednesday, 14 June 2017

Entity Framework and AsNoTracking

In the Entity Framework based applications, the DbContext / Object Context is responsible for tracking the changes done in the objects, so the correct update is done to the database when the SaveChanges() method of the context is called. When we retrieve entities using an object query, the Entity Framework puts these entities in a cache and tracks whatever changes are made on these entities until the savechanges method is called.
Sometimes we do not want to track some entities because the data is only used for viewing purposes and other operations such as insert, update and delete are not done. For example the view data in a read-only grid.
The AsNoTracking() extension method returns a new query and the returned entities will not be cached by the context (DbContext or Object Context). This means that the Entity Framework does not perform any additional processing or storage of the entities that are returned by the query. Please note that we cannot update these entities without attaching to the context.

How to use AsNoTracking:
The “System.Data.Entity” namespace contains this extension and it is very easy to use in our applications. The following is an example of how to use the AsNoTracking method.
The first query returns all the employees from the database table and we apply the AsNoTrack method on the DbQuery object. The second query returns all the employee rows with an EmployeeId greater than or equal to 3 and here we apply the AsNoTrack method on the IQueryable object.
  1. using(Entities context = new Entities())  
  2. {  
  3.     var employee = context.Employees.AsNoTracking().ToList();  
  4.     var employee2 = context.Employees  
  5.                     .Where(p => p.EmployeeId >= 3)  
  6.                     .AsNoTracking().ToList();  
  7. } 

Query performance with AsNoTracking:
The AsNoTracking method can save both execution times and memory usage. Applying this option really becomes important when we retrieve a large amount of data from the database.
Consider the following example code. Here I am querying an employee entity with and without the AsNoTrack method. To analyze the SQL query and execution time, I am enabling the SQL logging feature of the Entity Framework.
  1. using(Entities context = new Entities())  
  2. {  
  3.     var employeeWith = context.Employees.AsNoTracking().ToList();  
  4.     var employeeWithout = context.Employees.ToList();   
  5. } 

Output:








CSS Flexbox Cheat Sheet

1. Create a flex container:
The first step in any flexbox layout is to create a flex container. To do that, set the display property to flex. In Safari, you will still have to use the -webkit prefix.
.flex-container {
   display: -webkit-flex;
   display: flex;
}


2. Put flex items into a row:
Flex items are the children of a flex container. They are positioned along a main axis and a cross axis. The main axis is horizontal by default, so the items flow into a row. You can flip the main axis by setting flex-direction to column, it's set to row by default.
/*On the flex container*/
.flex-container {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
}



3. Put flex items into a column:
.flex-container {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
}
  


4. Move flex items to the top:
How you move flex items to the top depends on the orientation of the main axis. If it's vertical, you set align-items. If it's horizontal, you set justify-content.
.flex-container {
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
}


.flex-container {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-align-items: flex-start;
   align-items: flex-start;
}



5. Move flex items to the left:
Moving items to the left or right also depends on the orientation of the main axis. If flex-direction is set to row, then you set justify-content, otherwise if it's set to column you set align-items
.flex-container {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
}


.flex-container {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: flex-start;
   align-items: flex-start;
}




6. Move flex items to the right:
 .flex-container {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-justify-content: flex-end;
   justify-content: flex-end;
}




.flex-container {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: flex-end;
   align-items: flex-end;
}

 



7. Center everything:
Vertical and horizontal centering within a flexcontainer is trivial. Just set justify-content and/or align-items to center. Again, it depends on the orientation of the main axis, so whether flex-direction is set to row or column.
.flex-container {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row /* works with row or column */
   flex-direction: row;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}


8. Grow a flex item X times as big as other flex items:
You can define how an individual flex item grows and shrinks relative to other flex items in the container. To do this set the flex property on each flex item you want to grow or shrink.
.bigitem {
   /* This will be twice as big as the small item. */
   -webkit-flex: 2 0 0;
   flex: 2 0 0;
}
.smallitem {
   -webkit-flex: 1 0 0;
   flex: 1 0 0;
}
Syntax- flex: [ <‘flex-grow’> <‘flex-shrink’> || <‘flex-basis’> ]
 






9. Wrap flex items into multiple rows:
At the moment browser support for wrapping flex items is limited to webkit browsers and IE11. Firefox does not support wrapping yet. (Bad Firefox, BAD!)
/* On the flex container */
.flex-container {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   /* You can set flex-wrap and flex-direction individually */
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   /* Or do it all in one line with flex flow */
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
   /* tweak the where items line up on the row */
   /* valid values are: flex-start, flex-end, space-between, space-around, stretch */
   -webkit-align-content: flex-end;
   align-content: flex-end;
}









10. Wrap flex items into multiple columns:
.flex-container {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-flex-flow: column wrap;
   flex-flow: column wrap;
   -webkit-align-content: stretch;
   align-content: stretch;
}




11. Remove the space from wrapped rows or columns:
The align-content property gives you options for distributing the space around wrapped rows or columns. The options are flex-start, flex-end, space-between, space-around and stretch. To simply remove the space around wrapped columns, set align-content to center.
.flex-container {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-flex-flow: column wrap;
   flex-flow: column wrap;
   -webkit-align-content: center;
   align-content: center;
}





12. Pin an element to one side of the flex container:
You can control the align-items value for individual elements with align-self. You can also use margins to move individual elements up or down or left or right. e.g. on a column layout you can move an individual flex item all the way to the left of the container by setting margin-right: auto.
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 60px;
    min-height: 100px;
    margin: 10px;
}

.item1 {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
.item2 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
}

.item3 {
    -webkit-align-self: center;
    align-self: center;
}

.item4 {
    -webkit-align-self: baseline;
    align-self: baseline;
}

.item5 {
    -webkit-align-self: stretch;
    align-self: stretch;
}

<div class="flex-container">
  <div class="flex-item item1">flex-start</div>
  <div class="flex-item item2">flex-end</div>
  <div class="flex-item item3">center</div>
  <div class="flex-item item4">baseline</div>
  <div class="flex-item item5">stretch</div>
</div>