AngularJS, HTML5, JavaScript

Using HTML5 LocalStorage with AngularJS

Today , I will talk about LocalStorage Support of HTML5.

We can store named key/value pairs locally, within the client web browser. Like cookies, this data persists even after you navigate away from the web site, close your browser tab, exit your browser, or what have you. Unlike cookies, this data is never transmitted to the remote web server (unless you go out of your way to send it manually). Unlike all previous attempts at providing persistent local storage, it is implemented natively in web browsers, so it is available even when third-party browser plugins are not.

HTML5 STORAGE SUPPORT
IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID
8.0+ 3.5+ 4.0+ 4.0+ 10.5+ 2.0+ 2.0+

Based on different browsers , we can get 2 MB to 5MB (even more) space in LocalStorage . To get more idea on space check out this link …

BY the below code , we can check our browser supports LocalStorage or Not !

function supports_html5_storage() {
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch (e) {
        return false;
    }
}

Also we can use Modernizr to check this .

if (Modernizr.localstorage) {
    // window.localStorage is available!
} else {
    // no native support for HTML5 storage :(
}

Lets develop a simple LocalStorage Cache framework with AngularJS .

For this , am gonna create an AngularJS Factory Service to communicate with the HTML5 LocalStorage .

'use strict';

valApp.factory('storageService', function ($rootScope) {

    return {
        
        get: function (key) {
           return localStorage.getItem(key);
        },

        save: function (key, data) {
           localStorage.setItem(key, JSON.stringify(data));
        },

        remove: function (key) {
            localStorage.removeItem(key);
        },
        
        clearAll : function () {
            localStorage.clear();
        }
    };
});

localStorage keyword in the upper is the core API which is responsible for providing LocalStorage facility .

I have not used this storageService directly in the client .I am gonna use another Mid Layer Factory which will communicate with storageService and client code will call this Mid Layer Factory named cacheService . This is like below :::

'use strict';

valApp.factory('cacheService', function ($http, storageService) {
    
    return {
        
        getData: function (key) {
            return storageService.get(key);
        },

        setData: function (key,data) {
            storageService.save(key, data);
        },
        
        removeData: function (key) {
            storageService.remove(key);
        }
    };
});

You can see , I have injected storageService to cacheService .

Now from my AJs Controller , I will call cacheService’s Function to serve my purpose .

Now below is the example , how you can use this Cache Framework …

In My Controller , I’ve simply injected cacheService and can use all the features of it .

var city = [
                  { Id: 1, Name: 'Dhaka' },
                  { Id: 2, Name: 'Ctg' }
    ];
    cacheService.setData('city', city);

I have used the Mid Layer , if we need any new logic later, we can easily add those to the Mid Layer .

Its easy and awesome , right ?

Cheers 🙂

Standard
ASP.Net MVC, EntityFramework

EntityFramework in C# – Part1 : Welcome To EF

Entity Framework (EF) is an object-relational mapper that enables .NET developers to work with relational data using domain-specific objects. It eliminates the need for most of the data-access code that developers usually need to write.

I am gonna write an article on EF with an easy approach and i am trying to clearly show a CRUD application with EF .

For this example , I used one DB Table for simplicity . My DB is like below :::

Welcome to EntityFramework

Welcome to EntityFramework

To make the app simple , I took a ASP.Net Form Application which has a UI like below :::

Welcome to EntityFramework ASP.Net C# Web

The Markup code for my UI is like below :::

<h2>
        Welcome to EntityFramework!
    </h2>
  

  <table>
   <tr>
    <td>    
       Name
    </td>  
    <td>
    :
    </td>
    <td>
        <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
    </td>
   </tr>
  

    <tr>
    <td>    
       Address
    </td>  
    <td>
    :
    </td>
    <td>
        <asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>
    </td>
   </tr>

    <tr>
    <td>    
       Salary
    </td>  
    <td>
    :
    </td>
    <td>
        <asp:TextBox ID="txtSalary" runat="server"></asp:TextBox>
    </td>
   </tr>

     <tr>
    <td>    
   
    </td>  
    <td></td>
   
    <td>
        <asp:Button ID="Button1" runat="server" Text="Save" onclick="Button1_Click" />
    </td>
   </tr>

  </table>

  <br />
       <asp:GridView ID="employeeGrid" runat="server">
    </asp:GridView>

<h1>Delete One Row By Id</h1>

  <table>
   <tr>
    <td>    
       Put Delete Id
    </td>  
    <td>
    :
    </td>
    <td>
        <asp:TextBox ID="txtDeleteId" runat="server"></asp:TextBox>
    </td>
    <td>
       <asp:Button ID="btnDelete" runat="server" Text="Delete"
            onclick="btnDelete_Click"  />
    </td>
   </tr>
  </table>

   <h1>Update Value By Id</h1>

  <table>
   <tr>
    <td>    
       Put Update Id
    </td>  
    <td>
    :
    </td>
    <td>
        <asp:TextBox ID="TxtUpdateId" runat="server"></asp:TextBox>
    </td>

     <td>    
       Put New Address
    </td>  
    <td>
    :
    </td>
    <td>
        <asp:TextBox ID="txtUpdateAddress" runat="server"></asp:TextBox>
    </td>

    <td>
       <asp:Button ID="btnUpdate" runat="server" Text="Update" onclick="btnUpdate_Click"
             />
    </td>
   </tr>
  </table>

I have Three buttons for CREATE , UPDATE , DELETE and have a method for READ .

Lets see CREATE first .

protected void btnSave_Click(object sender, EventArgs e)
        {
            ImportantDBEntities dbEntities = new ImportantDBEntities();            
            EF_Employee employee = new EF_Employee();
            employee.Name = txtName.Text;
            employee.Address = txtAddress.Text;
            employee.Salary = Convert.ToDecimal(txtSalary.Text) ;

            dbEntities.EF_Employee.AddObject(employee);
            dbEntities.SaveChanges();

            FillEmployeeGrid();
        }

Here ImportantDBEntities is my SQL Server DB Context as you saw the DB image that my DB name is ImportantDB.

And That FillEmployeeGrid() method is my READ method which will pull the data from DB table .

private void FillEmployeeGrid()
        {
            ImportantDBEntities dbEntities = new ImportantDBEntities();

            if (dbEntities.EF_Employee != null)
            {
                var employees = dbEntities.EF_Employee;
                employeeGrid.DataSource = employees;
                employeeGrid.DataBind();
            }
        }

We can also Delete a record of an ID.

protected void btnDelete_Click(object sender, EventArgs e)
        {
            int Id = Convert.ToInt32(txtDeleteId.Text);

            ImportantDBEntities dbEntities = new ImportantDBEntities();
            EF_Employee employee = dbEntities.EF_Employee.SingleOrDefault(i => i.Id == Id);
            dbEntities.EF_Employee.DeleteObject(employee);
            dbEntities.SaveChanges();

            FillEmployeeGrid();
        }

Update is also not a big deal .

protected void btnUpdate_Click(object sender, EventArgs e)
        {
            int id = Convert.ToInt32(TxtUpdateId.Text);

            ImportantDBEntities dbEntities = new ImportantDBEntities();
            EF_Employee employee = dbEntities.EF_Employee.SingleOrDefault(i => i.Id == id);
            employee.Address = txtUpdateAddress.Text;
            dbEntities.SaveChanges();

            FillEmployeeGrid();
        }

Hope , it helps them who are new to EF .
I will write more deeper things related to EF in Part 2 .So keep an eye on my Site.

Till Then , Cheers …

Standard