REST Services for Mobile ASP.NET MVC 4 with Code-First Entity Framework & Web API with SQL Azure on Visual Studio 2012 Ultimate
July 17, 2012 1 Comment
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
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/’ +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.
Anindita's Blog 
You must be logged in to post a comment.