First MVC 4 Mobile Application Using Entity Framework

This article demonstrates how to make a mobile application using a MVC 4 web application.

Getting Started

  • Create a new Project. Open Visual Studio 2010.
  • Go to File => New => Project
  • Select Web in installed templates
  • Select ASP.NET MVC 4 Web Application
  • Enter the Name and choose the location.
  • Click OK


image1.jpg

Image 1.

image2.jpg

Image 2.

Database Script

USE [RealEstateDB]

GO

/****** Object:  Table [dbo].[Estate]    Script Date: 10/05/2012 16:30:51 ******/

SET ANSI_NULLS ON

GO

SET QUOTED_IDENTIFIER ON

GO

CREATE TABLE [dbo].[Estate](

      [EstateId] [int] IDENTITY(1,1) NOT NULL,

      [EstateName] [nvarchar](200) NULL,

      [EstateAddress] [nvarchar](max) NULL,

      [EstatePhone] [nvarchar](20) NULL,

      [EstateCity] [nvarchar](50) NULL,

      [EstateState] [nvarchar](50) NULL,

 CONSTRAINT [PK_Estate] PRIMARY KEY CLUSTERED

(

      [EstateId] ASC

)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]

) ON [PRIMARY]

GO

image3.jpg

Image 3.

Now add a new ADO.NET Entity Data Model using right-click and Add New Item in Data tab.

image4.jpg

Image 4.

image5.jpg

Image 5.

image6.jpg

Image 6.

image7.jpg

Image 7.

image8.jpg

Image 8.

Let's add a new controller. We are using an ADO.NET entity data model so we don't need to create a model now, the model is created automatically.

image9.jpg

Image 9.

image10.jpg

Image 10.

Once you click on the Add button, it creates five views (Index, Create, Delete, Detail, and Edit) in the Views folder.

Now time to run the application to see the result. I am not using any mobile device and any simulator.

You can redirect to a new views index page, you need to make the modification in RouteConfig.cs or you can add a new link in the home index view like this:
 

<p>Real Estates List</p>

 

    <ul data-role="listview" data-inset="true">

        <li data-role="list-divider">Navigation</li>

        <li><%: Html.ActionLink("About", "About", "Home") %></li>

        <li><%: Html.ActionLink("Contact", "Contact", "Home") %></li>

        <li><%: Html.ActionLink("RealEstates", "Index", "RealEstates")%></li>

    </ul>

image11.jpg

Image 11.

Click on the Real Estates tab.

image12.jpg

Image 12.

Click on Edit

image13.jpg

Image 13.

Click on the detail link.

image14.jpg

Image 14.

Click on the delete link.
 


Similar Articles