Creating an Employee App with Azure Mobile Services .NET Backend

Today we will walk you through the process of creating an employee app with Azure mobile services .net backend. Let’s have a look at step by step process below:

33+ Inspirations for Single-Page Web Design

32+ Inspirations for Large-Background Website Design

30+ Inspirations for Minimalist Web Design

Azure Mobile Services

  • Employee

An employee works as a list of employes for a information purpose along with there names and Salary of each employee that they holds. Employee is a real-world application that is needed for employee information purposes.

5 Web Design Blogs You Must Check Out

Modern Web Design Trends to Follow

Image 1

One can easily append Employee and then can submit a salary obtained by each employee. At the time you are presenting a employee’s score, you will comes across a mobile application that completely calculates every new ranking of actors. On the back end, the mobile service generates a database with the help of two tables namely:

Best 5 Blogs for Aspiring Web Designers

30+ Free HTML Editors for Web Designers

Employee ID:  Defines the EmpID and name.

Name:  Defines a  employee name.

Salary: Is the employee salary.

  • Creating the Project

Launch Visual Studio and then create a new ASP.NET Web Application project by naming project Employee.

80+ Firefox Tools for Web Designers

Image 2

Select this template and click OK.

Image 3

The project template includes an example controller and data object.

How to Improve the Quality of Your Web Design

image 4

  • Adding Data Models

using Microsoft.WindowsAzure.Mobile.Service;

namespace Employee.DataObjects

{

   public class EmpModel : EntityData

   {

       public string Name { get; set; }

   }

}

Adding another class named SalaryModel.

using Microsoft.WindowsAzure.Mobile.Service;

using System.ComponentModel.DataAnnotations.Schema;

namespace Employee.DataObjects

{

   public class SalaryModel : EntityData

   {

       public int Salary { get; set; }

       public int Designation { get; set; }

       [ForeignKey(“Id”)]

       public virtual EmpModel EmployeeInfo { get; set; }

   }

}

  • Add Web API Controllers

Add Web API controllers for EmplModel and SalaryModel

Right click the Controllers folder > Add > New Scaffolded Item.

Image 5
Expand Common on the left and select Azure Mobile Services. Then select Azure Mobile Services Table Controller. Click Add

In the Add Controller dialog:

  1. Under Model class, select EmpModel.
  2. Under Data context class, select MobileServiceContext.
  3. Name the controller “EmployeeController”.
  4. Click Add.

Adds a file named EmployeeController.cs to the project.

Image 7

  • Working With DTO to Return Related Entities

Recall that SalaryModel has a related EmpModel entity:

namespace Employee.DataObjects

{

   public class SalaryModel : EntityData

   {

       public int Salary { get; set; }

       public int Designation { get; set; }

 

       [ForeignKey(“Id”)]

       public virtual EmpModel EmployeeInfo { get; set; }

   }

}

See below the raw HTTP response for GET /tables/EmpModel:

HTTP/1.1 200 OK

Cache-Control: no-cache

Pragma: no-cache

Content-Length: 97

Content-Type: application/json; charset=utf-8

Expires: 0

Server: Microsoft-IIS/8.0

Date: Mon, 21 Dec 2015 17:58:43 GMT

[{“id”:”1″,”rank”:1,”score”:150},{“id”:”2″,”rank”:3,”score”:100},{“id”:”3″,”rank”:1,”score”:150}]

DTO is an object that guides about how data is sent over the network.  To create a DTO system for SalaryModel, you need to append a new class that can be named as SalaryDto in the DataObjects folder.

namespace Employee.DataObjects

{

   public class SalaryDto

   {

       public int EmpId { get; set; }

       public string EmpName { get; set; }

       public decimal Salary { get; set; }

       public string Designation { get; set; }

   }

}

In  EmpModelController class, put the  LINQ Select method to convert Salary instances into SalaryDto  instances. Then update the GetAllEmpModel and GetAllSalaryDto controller methods.

// GET tables/SalaryDto

       public IQueryable<SalaryDto> GetAllSalaryDto()

       {

           return Query().Select(x => new SalaryDto()

          {

              Designation= x.Designation,

              EmpName= x.EmpName,

              Salary= x.Salary

          });

       }

 // GET tables/SalaryDto/48D68C86-6EA6-4C25-AA33-223FC9A27959

       public SingleResult<SalaryDto> GetSalaryDto(string id)

       {

           var result = Lookup(id).Queryable.Select(x => new SalaryDto()

           {

               Id = x.Id,

               EmpName = x.EmpName,

               Salary = x.Salary,

               Designation = x.Designation

           });

           return SingleResult<SalaryDto>.Create(result);

       }

there are  two GET methods return SalaryDto objects to the client. The SalaryDto.EmpName property is set to the employee name. Look at the example below:

HTTP/1.1 200 OK

Cache-Control: no-cache

Pragma: no-cache

Content-Length: 160

Content-Type: application/json; charset=utf-8

Expires: 0

Server: Microsoft-IIS/8.0

Date: Mon, 21 Dec 2015 19:57:08 GMT

  • Define a Custom API to Submit Scores

Adds a class named EmpDesignation to the DataObjects folder.

namespace Employee.DataObjects

{

   public class EmpDesignation : EntityObject

   {

       public string EmpId { get; set; }

       public int Designation { get; set; }

   }

}

In SalaryModelController class, move the MobileServiceContext variable from the constructor to a class variable:

public class SalaryModelController : TableController<SalaryModel>

{

   MobileServiceContext context = new MobileServiceContext();

   protected override void Initialize(HttpControllerContext controllerContext)

     {

        base.Initialize(controllerContext);

        // Delete this:

        // MobileServiceContext context = new MobileServiceContext();

        DomainManager = new EntityDomainManager<SalaryModel>(context, Request, Services);

     }

}

Delete all the  methods below from SalaryModelController:

  • PatchSalaryModel
  • PostSalaryModel
  • DeleteSalaryModel

Next add the  code to SalaryModelController

Route(“api/salary”)]

public async Task<IHttpActionResult> PostSalaryModel(SalaryModel data)

{

   // Does this Employee exist?

   var count = context.Employees.Where(x => x.Id == score.EmpId).Count();

   if (count < 1)

   {

       return BadRequest();

   }

   // Try to find the Salary entity for this employee. If not found, create a new one.

   SalaryModel salary= await context.SalaryModel.FindAsync(score.EmpId);

   if (salary== null)

   {

       info = new SalaryModel { Id = score.EmpId };

       info.Salary = data.Salary;

       context.SalaryModel.Add(rank);

   }

   else

   {

       info.Salary = data.Salary;

   }

   await context.SaveChangesAsync();

}

The PostSalaryModel method takes a EmployeeSalary instance as input. It functions as following

  1. Adds a new Salary for Employee
  2. Updates the player salary.
  3. Runs an SQL query that updates all of the employee salary.

The [Route] attribute defines a custom route for this method:

[Route(“api/salary”)]

Create the Windows Store App

Add a new Windows Store App project to the solution.

Image 8

Use NuGet Package Manager to add the Mobile Services client library.

Add Model Classes

namespace EmployeeApp.Models

{

   public class Employee

   {

       public string Id { get; set; }

       public string EmployeeName { get; set; }

}

  public class EmployeeSalary

   {

       public string Id { get; set; }

       public string EmployeeName { get; set; }

       public string Designation  { get; set; }

       public decimal Salary { get; set; }

   }

   public class EmployeeDesignation

   {

       public int EmployeeId { get; set; }

       public string Designation { get; set; }

   }

}

Creating a View Model

Model-View-ViewModel (MVVM) is a part of Model-View-Controller that helps separate application logic from presentation efficiently.

The model is confined with the domain data

A view model is an abstract representation of the view.

The view defines the  view model

Image 9

Add a class named EmployeeViewModel.

using EmployeeApp.Models;

using Microsoft.WindowsAzure.MobileServices;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.ComponentModel;

using System.Net.Http;

using System.Threading.Tasks;

namespace EmployeeApp.ViewModel

{

   class EmployeeViewModel : INotifyPropertyChanged

   {

       MobileServiceClient _client;

       public EmployeeViewModel(MobileServiceClient client)

       {

           _client = client;

       }

       public event PropertyChangedEventHandler PropertyChanged;

   }

}

Implement INotifyPropertyChanged on the view model,

using EmployeeApp.Models;

using Microsoft.WindowsAzure.MobileServices;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.ComponentModel;

using System.Net.Http;

using System.Threading.Tasks;

namespace EmployeeApp.ViewModel

{

   class EmployeeViewModel : INotifyPropertyChanged

   {

       MobileServiceClient _client;

       public EmployeeViewModel(MobileServiceClient client)

       {

           _client = client;

       }

       public event PropertyChangedEventHandler PropertyChanged;

       public void NotifyPropertyChanged(string propertyName)

       {

           if (PropertyChanged != null)

           {

               PropertyChanged(this,

                   new PropertyChangedEventArgs(propertyName));

           }

       }

   }

}

Add observable properties.

class EmployeeViewModel : INotifyPropertyChanged

{

   // …

   // New code:

   // View model properties

   private MobileServiceCollection<Employee, Employee> _Employees;

       public MobileServiceCollection<Employee, Employee> Employees

       {

           get { return _Employees; }

           set

           {

               _Employees = value;

               NotifyPropertyChanged(“Employee”);

           }

       }

       private MobileServiceCollection<EmployeeSalary, EmployeeSalary> _Salaries;

       public MobileServiceCollection<EmployeeSalary, EmployeeSalary> Salaries

       {

           get { return _Salaries; }

           set

           {

               _Salaries = value;

               NotifyPropertyChanged(“Salaries”);

           }

       }

       private bool _IsPending;

       public bool IsPending

       {

           get { return _IsPending; }

           set

           {

               _IsPending = value;

               NotifyPropertyChanged(“IsPending”);

           }

       }

       private string _ErrorMessage = null;

       public string ErrorMessage

       {

           get { return _ErrorMessage; }

           set

           {

               _ErrorMessage = value;

               NotifyPropertyChanged(“ErrorMessage”);

           }

       }

}

Add methods that call through to the service layer.

class LeaderboardViewModel : INotifyPropertyChanged

{

   // …

   // New code:

   // Service operations

   public async Task GetAllEmployeesAsync()

       {

           IsPending = true;

           ErrorMessage = null;

           try

           {

               IMobileServiceTable<Employee> table = _client.GetTable<Employee>();

               Employees = await table.OrderBy(x => x.EmployeeName).ToCollectionAsync();

           }

           catch (MobileServiceInvalidOperationException ex)

           {

               ErrorMessage = ex.Message;

           }

           catch (HttpRequestException ex2)

           {

               ErrorMessage = ex2.Message;

           }

           finally

           {

               IsPending = false;

           }

       }

       public async Task AddEmployeeAsync(Employee employee)

       {

           IsPending = true;

           ErrorMessage = null;

           try

           {

               IMobileServiceTable<Employee> table = _client.GetTable<Employee>();

               await table.InsertAsync(employee);

               Employees.Add(employee);

           }

           catch (MobileServiceInvalidOperationException ex)

           {

               ErrorMessage = ex.Message;

           }

           catch (HttpRequestException ex2)

           {

               ErrorMessage = ex2.Message;

           }

           finally

           {

               IsPending = false;

           }

       }

       public async Task SubmitDesignationAsync(Employee employee, string designation)

       {

           IsPending = true;

           ErrorMessage = null;

           var emnployeeDesignation = new EmployeeDesignation()

           {

               EmployeeId = employee.Id,

               Designation = designation

           };

           try

           {

               await _client.InvokeApiAsync<EmployeeDesignation, object>(“designation”, emnployeeDesignation);

               await GetAllSalariesAsync();

           }

           catch (MobileServiceInvalidOperationException ex)

           {

               ErrorMessage = ex.Message;

           }

           catch (HttpRequestException ex2)

           {

               ErrorMessage = ex2.Message;

           }

           finally

           {

               IsPending = false;

           }

       }

       public async Task GetAllSalariesAsync()

       {

           IsPending = true;

           ErrorMessage = null;

           try

           {

               IMobileServiceTable<EmployeeSalary> table = _client.GetTable<EmployeeSalary>();

               Salaries = await table.OrderBy(x => x.Salary).ToCollectionAsync();

           }

           catch (MobileServiceInvalidOperationException ex)

           {

               ErrorMessage = ex.Message;

           }

           catch (HttpRequestException ex2)

           {

               ErrorMessage = ex2.Message;

           }

           finally

           {

               IsPending = false;

           }

       }

}

Adding A Mobile Service Client Instance

// New code:

using Microsoft.WindowsAzure.MobileServices;

namespace EmployeeApp

{

   sealed partial class App : Application

   {

       // New code.

       // TODO: Replace ‘port’ with the actual port number.

       const string serviceUrl = “http://localhost:port/“;

       public static MobileServiceClient MobileService = new MobileServiceClient(serviceUrl);

       // …

   }

}

Creating the Main Page

public sealed partial class MainPage : Page

{

   // New code:

  EmployeeViewModel viewModel = new EmployeeViewModel(App.MobileService);

   public MainPage()

   {

       this.InitializeComponent();

       // New code:

       this.DataContext = viewModel;

   }

  // …

The list of salaries is displayed in a ListBox:

<ListBox Width=”200″ Height=”400″ x:Name=”EmployeeListBox”

   ItemsSource=”{Binding Employees}” DisplayMemberPath=”EmployeeName”/>

Salaries are displayed in a ListView:

Copy to Clip Board Copy

<ListView x:Name=”SalariesListView” ItemsSource=”{Binding Salaries}” SelectionMode=”None”>

   <!– Header and styles not shown –>

   <ListView.ItemTemplate>

       <DataTemplate>

           <Grid>

               <Grid.ColumnDefinitions>

                   <ColumnDefinition Width=”*”/>

                   <ColumnDefinition Width=”2*”/>

                   <ColumnDefinition Width=”*”/>

               </Grid.ColumnDefinitions>

               <TextBlock Text=”{Binding Path=Salary}”/>

               <TextBlock Text=”{Binding Path=EmployeeName}” Grid.Column=”1″/>

               <TextBlock Text=”{Binding Path=Designation}” Grid.Column=”2″/>

           </Grid>

       </DataTemplate>

   </ListView.ItemTemplate>

</ListView>

All data binding occurs through the view model.

Publish Mobile Service

In Solution Explorer, right-click the Leaderboard project and select Publish.

Image 10

In the Publish dialog, click Azure Mobile Services.

Publish

There are wide number of ASP.NET development companies who posses high proficiency skills in ASP.NET Development sector. But to become one of the best ASP.NET Development Company, it  is essential for every employer to focus on hiring an efficiently sound asp .net developer who will output optimized results.

Some of our areas of .NET expertise includes:

  • High performance application architectures
  • Stringent Coding practices
  • Ease of Maintenance systems
  • Cost Effective Delivery Modes

To work with ASP.NET MVC Data Annotations, it is necessary to hire a highly experienced .NET developer who possesses high.NET coding skills.

Qualities of A Good .NET Developers

  • Experienced and qualified professionals
  • Strong technical knowledge
  • Proven methodologies
  • Effective communication
  • Thorough technical expertise
  • Fast turnaround time
  • Committed to deliver ASP.NET development services to match client’s expectations
  • Analytical Approach towards programming

This Case Study is a guest post written by Kaira Clark an asp.net Developer at Xicom Technologies Ltd. she’s always happy to share his passion for Web Development and Designing. If you’re planning to Hire Asp.net Developers for a brilliant online presence, she is the one for you.