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.

Advertisements

Consuming Bing API 2.2(XML+JSON),REST Services in Windows 8 Metro Style Apps with XAML


In Windows 8 Metro Style Apps , we have previewed some great apps like Weather/Stocks consuming Live Streaming data with XAML/HTML5,JavaScript. These Metro Style Apps are based on Live XML/JSON API & formatted data in XAML to preview the corresponding output.

  • Just like the Weather Sample in Windows 8 Metro Style Apps:

  • With Consumption of Live Data the apps preview the UI according to XAML designing format like GridView,ListView,FlipView with streaming videos.

  • Along with that, they have nice app bars which helps to add application functionalities making Metro Style apps for User-Interactive.

  • In this example , We will develop a Metro Style Apps which helps to preview Live Stream Images from Bing API in XML/JSON with REST Services. The same can be also consumed by building a simple WCF Services with OData Feed in AtomPub/XML Format.
  • Lets start by creating a Metro Style Apps project in VS 11 Developer Preview.

  •  Add a few XAML in MainPage.xaml:

<UserControl x:Class=”BingMapsIntegration.MainPage”

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243;

xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;

mc:Ignorable=”d”

d:DesignHeight=”768″ d:DesignWidth=”1366″>

<Grid x:Name=”LayoutRoot” Background=”#FF0C0C0C”>

<StackPanel Orientation=”Vertical”>

<StackPanel Orientation=”Horizontal” Height=”48″>

<TextBlock Text=”Enter Keyword:” FontSize=”14″ VerticalAlignment=”Center”

Height=”32″></TextBlock>

<TextBox x:Name=”txtKeyword” Width=”300″ Height=”32″></TextBox>

<Button x:Name=”btnSearch” Width=”40″ Content=”Search” Height=”32″></Button>

</StackPanel>

<StackPanel Orientation=”Horizontal”>

<ListBox x:Name=”PhotoList” HorizontalAlignment=”Left” Width=”250″

ScrollViewer.VerticalScrollBarVisibility=”Visible”>

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Orientation=”Vertical”>

<Image Source=”{Binding MediaUrl}” Width=”200″ Height=”200″

Stretch=”UniformToFill” Grid.Column=”0″ />

<TextBlock Text=”{Binding Title}” Width=”200″

Height=”14″ FontSize=”12″ />

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</Grid>

</UserControl>

  • Add a new Class in your app called BingMaps & add the following codes:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

namespace BingMapsIntegration

{

class BingMaps

{

public string Title { get; set; }

public string MediaUrl { get; set; }

}

}

  • You need to also Sign-Up for the Developer API Key in Bing . To Sign up visit: http://www.bing.com/developers
  • Modify the MainPage.xaml.cs with the code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using  Windows.Foundation;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Data;

using System.Net.Http;

using System.Xml.Linq;

namespace BingMapsIntegration

{

partial class MainPage

{

public MainPage()

{

InitializeComponent();

  Loaded += new RoutedEventHandler(MainPage_Loaded);

}

void btnSearch_Click(object sender, RoutedEventArgs e)

{

string strSearch = txtKeyword.Text;

FetchBingPics( strSearch, PhotoList);

}

public async void FetchBingPics(string strKeyWord, object control)

{

String strBingAppID = “[51D201080D27C665353AFD9AB807416147559F43]”;

XNamespace xmlns = http://schemas.microsoft.com/LiveSearch/2008/04/XML/multimedia;

HttpClient client = newHttpClient();

HttpResponseMessage response = await   client.GetAsync( http://api.bing.net/xml.aspx?AppId=51D201080D27C665353AFD9AB807416147559F43&Version=2.2&Market=en-US&Image.Count=50&Sources=Image&Query=&#8221;+strKeyWord);

string xml = response.Content.ReadAsString();

XDocument doc = XDocument.Parse(xml);

IEnumerable<BingMaps> images = from img in doc.Descendants(

xmlns + “ImageResult”)

where !img.Element(xmlns + “MediaUrl”).Value.EndsWith(“.bmp”)

selectnewBingMaps

{

Title = img.Element(xmlns + “Title”).Value,

MediaUrl = img.Element(xmlns + “MediaUrl”).Value

};

if (control isListBox)

(control  asListBox).ItemsSource = images;

else

(control  asGridView).ItemsSource = images;

}

}

  • Check out the Output of the App:

  • Lets modify the Sample by adding some GridView functionality to have more rich UI experience in XAML for Metro Style Apps:
  • Add the following code in MainPage.xaml after the ListBox:

<GridView x:Name=”PhotoGrid” Width=”1100″

ScrollViewer.HorizontalScrollBarVisibility=”Visible” Canvas.Left=”240″>

<GridView.ItemsPanel>

<ItemsPanelTemplate>

<WrapGrid MaximumRowsOrColumns=”3″ VerticalChildrenAlignment=”Top”

HorizontalChildrenAlignment=”Left” Margin=”0,0,0,0″ />

</ItemsPanelTemplate>

</GridView.ItemsPanel>

<GridView.ItemTemplate>

<DataTemplate>

<StackPanel Orientation=”Vertical”>

<Image Source=”{Binding MediaUrl}” Width=”200″ Height=”200″

Stretch=”UniformToFill” Grid.Column=”0″ />

<TextBlock Text=”{Binding Title}” Width=”200″ Height=”14″  FontSize=”12″ />

</StackPanel>

</DataTemplate>

</GridView.ItemTemplate>

</GridView>

  • Along with that Add the Following code in MainPage.xaml.cs :
  • Add the EventHandlers in MainPage’s Constructor:

public MainPage()

{

InitializeComponent();

btnSearch.Click += newRoutedEventHandler(btnSearch_Click);

PhotoList.SelectionChanged += new SelectionChangedEventHandler(PhotoList_SelectionChanged);

PhotoGrid.SelectionChanged += new  SelectionChangedEventHandler(PhotoGrid_SelectionChanged);

}

  • Add the following methods in MainPage’s Code-behind:

void btnSearch_Click(object sender, RoutedEventArgs e)

{

string strSearch = txtKeyword.Text;

FetchBingPics( strSearch, PhotoList);

}

void PhotoList_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if (!(PhotoList.SelectedItem == null))

{

string strTitle = (PhotoList.SelectedItem asBingMaps).Title;

FetchBingPics(strTitle, PhotoGrid);

}

}

void PhotoGrid_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if (!(PhotoGrid.SelectedItem == null))

{

string strTitle = (PhotoGrid.SelectedItem asBingMaps).Title;

FetchBingPics(strTitle, PhotoList);

}

}

  • Format the output as follows:

  • The complete Metro Style Apps with GridView in XAML  consumed Live Bing API Feed in XML/JSON REST Services.

  • Formatted GridView in XAML 4.5 for Windows 8 Metro Style Apps.

%d bloggers like this: