ASP .NET – Criando uma aplicação MVC4 Mobile com Entity Framework

Este artigo vai mostrar como criar uma aplicação mobile usando uma aplicação Web MVC4, usando o Visual Web Developer 2010 Express Edition.

Abra o Visual Web Developer 2010 Express e no menu File clique em New Project e selecione o template Visual C# -> ASP .NET MVC 4 Web Application, informe o nome Mvc4_Mobile e clique no botão OK.

Na sequência selecione o template Mobile Application e o View Engine ASPX e clique no botão OK.

Será criada uma solução chamada Mvc4_Mobile contendo uma estrutura pronta usando o padrão MVC.

Na estrutura da solução temos as pastas Controllers, Models e Views além de uma estrutura com recursos prontos para serem usados e ajustados.

Definindo o banco de dados a tabela e a conexão

Neste momento vamos definir o banco de dados, a tabela e a conexão usada no projeto. Abra a janela DataBase Explorer e clique com o botão direito sobre Add Connections e a seguir clique em Add Connection.

Na janela Add Connection, selecione o Data Source – Microsoft SQL Server e informe em Server name: .\sqlexpress. Selecione o banco de dados Cadastro da relação de bancos de dados expostos:

Obs: Se o banco de dados não existir, crie o banco de dados Cadastro no SQL Server 2008 Express Edition usando o Management Studio.

Na janela DataBase Explorer você deverá ver a relação de tabelas do banco de dados Cadastro. Selecione a tabela Clientes que deve possuir a estrutura conforme mostra a figura abaixo. Se a tabela não existir crie a tabela com base na estrutura exibida.

Dessa forma iremos usar o banco de dados Cadastro.mdf e a tabela Clientes que contém os campos: id, nome, endereço, telefone e e-mail.

Incluindo um Entity Data Model no projeto

Vamos criar um Entity Data Model e realizar o mapeamento ORM entre a tabela Clientes e a entidade correspondente usando o Entity Framework.

No menu Project clique em Add New Item e a seguir selecione o template Visual C# -> Data -> ADO .NET Entity Data Model, informe o nome Cliente e clique no botão Add;

Na próxima janela selecione Generate from database e clique em Next>. Selecione a conexão com o banco de dados Cadastro e aceite os valores padrões conforme a figura abaixo e clique em Next>.

Selecione a tabela Clientes e marque as opções conforme a figura abaixo, clicando a seguir no botão Finish:

Será criada a entidade Cliente e o container : CadastroEntities contendo o mapeamento OR/M para nossa tabela Clientes:

Criando a aplicação MVC 4 Mobile

Vamos incluir um novo Controller em nossa aplicação que irá usar o Entity Framework.

Clique com o botão direito sobre a pasta Controllers e no menu suspenso selecione Add -> Controller. A seguir, defina os dados da janela Add Controle conforme a figura abaixo:

Ao clicar no botão Add, será criado o arquivo MobileController.cs na pasta Controllers e serão criadas 5 novas Views na pasta Views:

Antes de executar a aplicação, eu vou fazer alguns ajustes no arquivo Site.Master e no arquivo Index da pasta Home incluindo o link para as páginas da pasta Mobile:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="Title" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: ViewBag.Message %></h2>
    <p>
    <a href="http://www.macoratti.net" title="Macoratti .net">http://www.macoratti.net </a>.
    </p>

    <ul data-role="listview" data-inset="true">
        <li data-role="list-divider">Navegação</li>
        <li><%: Html.ActionLink("About", "About", "Home") %></li>
        <li><%: Html.ActionLink("Contact", "Contact", "Home") %></li>
        <li><%: Html.ActionLink("Mobile", "Index", "Mobile") %></li>
    </ul>
</asp:Content>

Eu não vou usar nenhum emulador ou dispositivo Mobile vou executar a aplicação diretamente no Visual Web Developer.

Executando o projeto iremos obter:

1. A view Index.aspx da pasta Home exibindo a opção Mobile: