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.