REST Services for Mobile ASP.NET MVC 4 with Code-First Entity Framework & Web API with SQL Azure on Visual Studio 2012 Ultimate


REST based services are quite easier to access via ASP.NET MVC 4 Mobile Web applications with Web API framework. With REST , each object can be uniquely identified & accessed via Code Access URL with its own Routing logic & behaviour. To implement a REST services for Mobile ASP.NET MVC 4 application with Web API & entity framework , lets start by creating a new ASP.NET MVC 4 web applivation from VS 2012 Ultimate.

  • Select the Project type as Internet Application by default.

  • Delete the default Model  folders file & create a new class & name it as Contacts.cs. Add the following code into it.

using  System;

using  System.Collections.Generic;

using  System.Linq;

using System.Web;

using System.Globalization;

namespace  ContactsApp.Models

{

public class Contact

{

public int ContactId { get; set; }

public string Name { get; set; }

public string Address { get; set; }

public string City { get; set; }

public string State { get; set; }

public string Zip { get; set; }

public string Email { get; set; }

public string Twitter { get; set; }

public string Self

{

get

{

returnstring.Format(CultureInfo.CurrentCulture,“api/contacts/{0}”, this.ContactId);

}

set { }

}

}

}

  • Delete the default controllers & Build thee solution & create a new Controller by selecting the Contact Model class.

  • Now select Tools -> Library Extension Manager -> Package Manager Console & paste the following commands.

enable-migrations

 add-migration Initial

Now , select the Configuration.cs file from Migrations folder & paste the following code.

namespace

ContactsApp.Migrations

{

using System;

using System.Data.Entity;

using System.Data.Entity.Migrations;

using System.Linq;

using ContactsApp.Models;

internalsealedclassConfiguration : DbMigrationsConfiguration<ContactsApp.Models.ContactsAppContext>

{

public Configuration()

{

AutomaticMigrationsEnabled = false;

}

protected override void Seed(ContactsApp.Models.ContactsAppContext context)

{

context.Contacts.AddOrUpdate(p => p.Name, new Contact

{

Name = “Debra Johnson”,

Address = “1234 Main St”,

City = “Redmond”,

State = “WA”,

Zip = “10999”,

Email = “debra@example.com”,

Twitter = “debra_example”

},

new Contact

{

Name = “Thorsten Weinrich”,

Address = “5678 1st Avenew W”,

City = “Redmond”,

State = “WA”,

Zip = “10999”,

Email = “thorsten@example.com”,

Twitter = “thorsten_example”

},

new Contact

{

Name = “Yuhong Li”,

Address = “9012 State St”,

City = “Redmond”,

State = “WA”,

Zip = “10999”,

Email = “yuhong@example.com”,

Twitter = “yuhong_example”

},

new Contact { Name = “Jon Orton”, Address = “3456 Maple St”, City = “Redmond”, State = “WA”, Zip = “10999”, Email = “jon@example.com”, Twitter = “jon_example” },

newContact { Name = “Diliana Alexieva-Bosseva”, Address = “7890 2nd Street E”, City = “Redmond”, State = “WA”, Zip = “10999”, Email = “diliana@example.com”, Twitter = “diliana_example” }

);

}

}

}

  • In the package-Manager console , enter the following code :

update-database

Build the solution & add the following code in index.cshtml :

@model IEnumerable<ContactsApp.Models.Contact>

@{

ViewBag.Title = “Home”;

}

@section Scripts {

@ Scripts.Render(“~/bundles/knockout”)

<script type=”text/javascript”>

function ContactsViewModel() {

var self = this;

self.contacts = ko.observableArray([]);

self.addContact =

function () {

$.post(“api/contacts”,

$( “#addContact”).serialize(),

function (value) {

self.contacts.push(value);

},

“json”);

}

self.removeContact = function (contact) {

$.ajax({

type: “DELETE”,

url: contact.self,

success:

function () {

self.contacts.remove(contact);

}

});

}

$.getJSON( “api/contacts”, function (data) {

self.contacts(data);

});

}

ko.applyBindings(new ContactsViewModel());

</script>

}

<ul id=”contacts”data-bind=”foreach:contacts”>

<li class=”ui-widget-content ui-corner-all”>

<h1 data-bind=”text:Name”class=”ui-widget-header”></h1>

<div><spandata-bind=”text:$data.Address ||      ‘Address?'”></span></div>

<div>

<span data-bind=”text:$data.City || ‘City?'”></span>

<span data-bind=”text:$data.State || ‘State?'”></span>

<span data-bind=”text:$data.Zip || ‘Zip'”></span>

</div>

<div data-bind=”if:$data.Email”><adata-bind=”attr:{href:  ‘mailto:’+Email},text:Email”></a></div>

<div data-bind=”ifnot:$data.Email”><span>Email?</span></div>

<div data-bind=”if:$data.Twitter”><adata-bind=”attr:{href:     ‘http://twitter.com/&#8217; +Twitter},text:’@@’+Twitter”></a></div>

<div data-bind=”ifnot:$data.Twitter”><span>Twitter?</span></div>

<p><a data-bind=”attr:{href:Self},click:$root.removeContact”

class=”removeContact ui-state-default ui-corner-all”>Remove</a></p>

</li>

</

ul>

<form id=”addContact”data-bind=”submit:addContact”>

<fieldset>

<legend>Add New Contact</legend>

<ol>

<li>

<label for=”Name”>Name</label>

<input type=”text”name=”Name”/>

</li>

<li>

<label for=”Address”>Address</label>

<input type=”text”  name=”Address”/>

</li>

<li>

<label for=”City”>City</label>

<input type=”text”name=”City”/>

</li>

<li>

<label for=”State”>State</label>

<input type=”text”name=”State”/>

</li>

<li>

<label for=”Zip”>Zip</label>

<input type=”text”name=”Zip”/>

</li>

<li>

<label for=”Email”>E-mail</label>

<input type=”text” name=”Email”/>

</li>

<li>

<label for=”Twitter”>Twitter</label>

<input type=”text”name=”Twitter”/>

</li>

</ol>

<input type=”submit”value=”Add”/>

</fieldset>

</form>

  • Render the View on IE 10 & Check the script & view on iPhone & BlackBerry browsers.

ASP.NET MVC 4 with Windows Azure for Windows Phone 7, BlackBerry, Android & i-Os.


Though MVC 4 is still in developer preview , not released in RTM phase but there is cool staff of development of ASP.NET MVC 4 applications for desktop & Mobile with Windows Azure environment.

Since it’s always been a great experience with working of MVC with Windows Azure of rich web experiences in Cloud. So , Lets a Windows Azure application targeted for Mobile Smart devices (Windows Phone 7, BlackBerry 7 , i-Os, Android ) & deploy in Azure of Microsoft Data Centeres.

  • Let’s Create a new Windows Azure Application from Visual Studio & do not add any webrole to it as we will add our ASP.NET MVC 4 webrole with it . (P.S:  Those  who have already MVC4 Webrole Template installed in Windows Azure environment of Visual Studio , can go & take a MVC 4 Web Role Template).
  • For those who dont have MVC 4 WebRole Template for Windows Azure environment for Visual Studio can simply create the blank Azure Project as we will add ASP.NET MVC 4 web application project later.

  •  Check out the  WebRole sections, Click OK as we dont need to take WebRole from default WebRole options.

  •  Next , Check out the Blank Azure Project created in your Visual Studio solution with ServiceConfiguration.cscfg & ServiceDefinition.csdef files.
  • Now , Time to add a new ASP.NET MVC 4 Project from Visual Studio , so on the solution explorer right click the solution -> add -> new project -> choose New ASP.NET MVC 4 Web Application.

  • Next , Add the ASP.NET MVApplication C 4 application with Windows Azure Project . To do this , right click on Roles of your Windows Azure project & select Web Role Project in Solution . Redirect to Associate Web Role Project in Solution Window  & Click OK.

        Check the ASP.NET MVC 4 web application has been added as webrole in Windows Azure Roles.

    • Click OK to add the existing MVC 4 solution with Windows Azure Application.
  •  Now it’s time to run the Windows Azure Project with ASP.NET MVC 4 in development fabric. So hit F5.

  •  Now time to test the application in Mobile Devices so , test in Windows Phone as this asp.net MVC 4 web application project has been enabled for Mobile apps.

  •  Associate Page View 

  •  Now , Test it in Android 2.2 & Android 3 Tablet device.

  •  Android 3.0 Tablet View for ASP.NET MVC 4 Windows Azure Application.

  •  Run it on BlackBerry OS of BlackBerry 9800 device.

  •  So the Windows Azure Application with ASP.NET MVC 4 for mobile is ready for development fabric , so deploy it Azure VM & run it from cloud to mobile.

 

 

 

%d bloggers like this: