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
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
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
Select this template and click OK.
The project template includes an example controller and data object.
How to Improve the Quality of Your Web Design
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.
Expand Common on the left and select Azure Mobile Services. Then select Azure Mobile Services Table Controller. Click Add
In the Add Controller dialog:
- Under Model class, select EmpModel.
- Under Data context class, select MobileServiceContext.
- Name the controller “EmployeeController”.
- Click Add.
Adds a file named EmployeeController.cs to the project.
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
- Adds a new Salary for Employee
- Updates the player salary.
- 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.
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
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.
In the Publish dialog, click Azure Mobile Services.
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.
