Introduction

This guide will help you to use Web Mapping (APIs) and link it to the database that supports creating, editing, and listing. Below are the screenshots of the application you’ll build. It includes a page that displays a list of donors and displaying the donor's data on the Maps.

Note: The complete Map Functionality will be available in my next article. Alternatively you can follow this project here

 

What you'll Build

You can download the full tutorial here.

 

Description

The Source code is written in C#, CSHTML and JavaScripts is also used in some pages. Microsoft Bing Mapping AJAX API ver 7.0 is used to provide mapping functionality. The purpose of this project is to demonstrate the integration of the MVC4 with the BING Map API. The Partial view is used o reduce the code. The Project is designed in Visual Studio 11, ASP.NET MVC 4 and uses Razor view engine with Microsoft SQL Compact. Microsoft Bing Mapping AJAX API ver 7.0 is used to provide mapping functionality. The code-first development workflow is used in the Entity Framework 4.5. The purpose of this project is to create a website for locate a particular blood group donor in your area, the users will be able to locate a nearest donors using hand held devices.

Getting Started

Start by running Visual Web Developer 2011 Express and select New Project from the Start page.

Step- 1 Creating Your First Application

 You can create applications using either Visual Basic or Visual C# as the programming language. Select Visual C# on the left and then select ASP.NET MVC 4 Web Application. Name your project "BloodDonors" and then click OK.

In the New ASP.NET MVC 4 Project dialog box, select Internet Application. and use Razor as the default view engine.

It will create the Controller, Model and View folder in your project and also some other required files.

Step -2 Create The Model Class

 First We will Create a Donor Class. right Click the Model Folder and Click Add - >New Item. Add MVC4 Controller Class and name it Donor.cs and paste the following code in it.

C#
Edit|Remove
using System; 
using System.ComponentModel.DataAnnotationsusing System.Linqusing System.Web.Mvc; 
 
namespace BloodDonors.Models 
{ 
    public class Donor 
    { 
        [HiddenInput(DisplayValue = false)] 
        public int DonorID { getset; } 
        public string FirstName { getset; } 
        public string LastName { getset; } 
        public string BloodGroup { getset; } 
        public string Title { getset; } 
        public DateTime DateSubmit { getset; } 
        public string Description { getset; } 
        public string ContactPhone { getset; } 
        public string CellPhone { getset; } 
        public string Email { getset; } 
        public string Address { getset; } 
        public string Country { getset; } 
               public double Latitude { getset; } 
               public double Longitude { getset; } 
 
        [UIHint("LocationDetail")] 
        [NotMapped] 
        public LocationDetail Location 
        { 
            get 
            { 
                return new LocationDetail() { Latitude = this.Latitude, Longitude = this.Longitude, Title = this.Title, Address = this.Address }; 
            } 
            set 
            { 
                this.Latitude = value.Latitude; 
                this.Longitude = value.Longitude; 
                this.Title = value.Title; 
                this.Address = value.Address; 
            } 
        } 
    } 
 
    public class LocationDetail 
    { 
        public double Latitude; 
        public double Longitude; 
        public string Title; 
        public string Address; 
    } 
    } 
Donor.cs
Step-3 Create DataBase Context Class
The main class that coordinates Entity Framework functionality for a given data model is the database context class. You create this class by deriving from the System.Data.Entity.DbContext class. In your code you specify which entities are included in the data model. You can also customize certain Entity Framework behaviour. In the code for this project, the class is named DonorDBContext.cs
Create a DAL folder. In that folder create a new class file named DonorDBContext.cs, and replace the existing code with the following code.

  In the DAL folder, create a new class file name DonorInitializer.cs replace the existing code with the following code, which causes a database to be created when needed and loads test data into the new database

C#
Edit|Remove
using System; 
using System.Collections.Genericusing System.Data.Entityusing BloodDonors.Models; 
using System.Data.Entity.ModelConfiguration.Conventions; 
 
namespace BloodDonors.Models 
{ 
    public class DonorDBContext : DbContext 
    { 
        public DbSet<Donor> Donor { getset; } 
 
        protected override void OnModelCreating(DbModelBuilder modelBuilder) 
        { 
            modelBuilder.Conventions.Remove<PluralizingTableNameConvention>(); 
        } 
    } 
}
 

Step-4 Initializing the database with test data

In the DAL Folder, create a new class file name DonorInitializer.cs and replace the existing code with the following code, which causes the database to be created when needed and loads the test data into the new database.
C#
Edit|Remove
using System; 
using System.Collections.Genericusing System.Linqusing System.Webusing System.Data.Entity;  
using BloodDonors.Models; 
 
namespace BloodDonors.DAL 
{ 
    public class DonorInitializer : DropCreateDatabaseIfModelChanges<DonorDBContext> 
    { 
        protected override void Seed(DonorDBContext context) 
        { 
            var donors = new List<Donor>  
            {  
                new Donor { FirstName = "A", LastName = "Sara", Title = "First Donor", BloodGroup = "A+", Description = "test description-1", DateSubmit = DateTime.Parse("2005-09-01"), ContactPhone ="12122323", Address = "Address-1", Country ="USA"  },  
            
            }; 
            donors.ForEach(s => context.Donor.Add(s)); 
            context.SaveChanges(); 
 
        } 
    } 
}
 
 
Make the following changes in the Global.asax.cs file to cause this initializer code to run when the application begins.
 
Add the following using statements:
C#
Edit|Remove
using System.Data.Entityusing BloodDonors.Modelsusing BloodDonors.DAL;
In the Application_Start method, call an Entity Framework method that runs the database initializer code: 
 
C#
Edit|Remove
Database.SetInitializer<DonorDBContext>(new DonorInitializer());
Note: When you deploy an application to a production web server, you must remove this code that seeds the database.

Step-5 Add a Controller 

Right-Click the Controller folder and create a new DonorsController.

Click Add. Visual Web Developer creates the following files and folders:

Run the application and browse to the Donors controller by appending /Donors to the URL in the address bar of your browser

For more information and complete source code , see http://blooddonors.codeplex.com/