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

Este tutoria 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;

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;

Informe em Server name: .\sqlexpress e 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, endereco, telefone e email.

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;

No menu suspenso selecione Add -> Controller e 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:

2- A relação dos clientes cadastrados na tabela Clientes quando clicarmos a guia Mobile:

3- A View Edit.aspx permitindo a edição das informações:

4- A view Details exibindo os detalhes do Cliente:

5- A vew Delete exibindo o registro selecionado para exclusão:

Pegue o projeto completo aqui: Mvc4_Mobile.zip

Rom 3:10 como está escrito: Não há justo, nem sequer um.

Rom 3:11 Não há quem entenda; não há quem busque a Deus.

Rom 3:12 Todos se extraviaram; juntamente se fizeram inúteis. Não há quem faça o bem, não há nem um só.

Efs 2:8 Porque pela graça sois salvos, por meio da fé; e isto não vem de vós, é dom de Deus;

Joã 14:6 Respondeu-lhe Jesus: Eu sou o caminho, e a verdade, e a vida; ninguém vem ao Pai, senão por mim.

        Rom 5:1 Justificados, pois, pela fé, tenhamos paz com Deus, por nosso Senhor Jesus Cristo,

        Rom 5:2 por quem obtivemos também nosso acesso pela fé a esta graça, na qual estamos firmes, e gloriemo-nos na esperança da glória de Deus.

Referências:

José Carlos Macoratti