Tópicos Especiais

em Análise e
Desenvolvimento de
Sistemas
 Material Teórico
Introdução ao Desenvolvimento Asp.net Web Forms Utilizando
o Visual Studio

Responsável pelo Conteúdo:

Prof. Ms. Luiz Carlos Reis

Revisão Textual:
Prof. Ms. Luciano Vieira Francisco
 Introdução ao Desenvolvimento Asp.net
Web Forms Utilizando o Visual Studio

• Introdução

• Entendendo o ASP.NET Framework

• Ambiente Visual Studio Express 2013 for Web

··Nesta Unidade abordaremos o conceito de desenvolvimento web.

··O Asp.net é compilado antes da execução. Isto possibilita um
ganho de performance, pois é distribuído gratuitamente com
o Windows e possui controles de alta produtividade, como
arrastar e puxar componentes, as DLL não necessitam de
grandes configurações.
··Por ser um código compilado possui um bom desempenho e
também a possibilidade de armazenar as informações em cache.
··As configurações estão em XML e para utilizar o Asp.net é
preciso do Framework.NET e do servidor IIS.

Atividade de sistematização: os exercícios disponibilizados são de autocorreção para que

você pratique o que aprendeu na disciplina, além de identificar os pontos em que precisa
prestar mais atenção, ou pedir esclarecimentos ao tutor. Além disso, as notas atribuídas aos
exercícios serão parte de sua média final na disciplina.
Atividade de aprofundamento: veja a atividade que será disponibilizada.
Material complementar e referências bibliográficas: nestes links você poderá ampliar
seus conhecimentos.
Videoaula: nestes links serão apresentadas algumas ferramentas e também a resolução de
alguns exercícios de forma prática. Observação: este item não aparecerá em todas as unidades.

5
 Unidade: Introdução ao Desenvolvimento Asp.net Web Forms Utilizando o Visual Studio

Contextualização

Atualmente é mais viável e rentável tanto para o cliente quanto para a empresa desenvolvedora
criarem sistemas para web. Além de tudo, é ainda o futuro das atividades de computação para
as organizações atuais.
Mantendo-se a compatibilidade entre os navegadores, tudo pode ser migrado para a web,
desde simples sistemas de controle até grandes sistemas de Enterprise Resource Planning (ERP).

6
 Introdução

Nesta Unidade você criará, revisará e executar o projeto padrão no Visual Studio, que
permitirá sua familiarização com as características do ASP.NET.
Para esta etapa, será necessário que seja realizado o download da versão web do Visual Studio.
»» Acesse o site disponível em: <http://www.visualstudio.com/en-us/products/visual-
studio-express-vs.aspx> e selecione a versão Express 2013 for Web.

Figura 1 – Download da versão web do Visual Studio.

Mude o idioma e selecione instalar agora:

Figura 2 – Download da versão web do Visual Studio.

7
 Unidade: Introdução ao Desenvolvimento Asp.net Web Forms Utilizando o Visual Studio

Selecione a versão Express 2013 para Windows Web.

Figura 3 – Download da versão web do Visual Studio.

Aparecerá a tela reproduzida na Figura 4. Leia o termo de licença e caso concorde, selecione
Install. O processo de download e instalação se iniciará (figuras 5 e 6).
Figura 4 Figura 5 Figura 6

Pronto! Após a finalização você poderá executar o Visual 2013.

Entendendo o ASP.NET Framework

ASP.NET Web Forms permite construir websites dinâmicos utilizando os modelos familiares
drag and drop e event driven. A superfície do design e milhares de controles e componentes
possibilitam criar rapidamente uma sofisticada e poderosa interface gráfica com acesso a dados.
A loja Wingtip Toy é baseada no ASP.NET Web Forms, mas inúmeros dos conceitos que você
aprenderá nesta série de tutoriais são aplicáveis a todo ASP.NET.

8
 ASP.NET oferece quatro frameworks de desenvolvimento primários:
ASP.NET Web Forms: o framework Web Forms é o alvo dos desenvolvedores que preferem
a programação declarativa e baseada em controles, assim como o Microsoft Windows Forms
(WinForms) e o WPF/XAML/Silverlight. Oferece um WYSIWYG modelo de desenvolvimento
de design, então é popular com desenvolvedores olhando para um rápido ambiente de
desenvolvimento de aplicação (RAD) para um desenvolvimento web. Se você é novo(a) em
programação web e familiar com as tradicionais ferramentas de desenvolvimento de cliente
RAD (por exemplo, para Visual Basic e Visual C#), você poderá construir rapidamente uma
aplicação web sem ter experiência em HTML e JavaScript.
ASP.NET MVC: é o alvo para desenvolvedores que estão interessados em padrões e princípios
como o desenvolvimento de teste dirigido, separação de interesses, Inversão de Controle (IoC)
e Injeção de Dependências (DI). Esse framework encoraja separação da Business Logic Layer
(BLL) – Camada de Regra de Negócios – de uma aplicação web da sua camada de apresentação.
ASP.NET Web Pages: é o alvo para quem quer um desenvolvimento web simples, ao longo
de linhas do PHP. No modelo Web Pages pode-se criar páginas HTML e então adicionar códigos
baseados em servidor a fim de controlar dinamicamente como a marcação é renderizada. Web
Pages é especificamente desenhada para ser um framework leve e é o ponto de entrada mais
fácil do ASP.NET para pessoas que conhecem HTML mas não têm experiência em programação
– por exemplo, estudantes ou “hobbistas”. É também uma boa maneira para desenvolvedores
web que conhecem PHP ou frameworks similares para começar a usar ASP.NET.
ASP.NET Single Page Application: ASP.NET Single Page Application (SPA) ajuda a construir
aplicações que incluem interações cliente-side significantes utilizando HTML5, CSS3 e JavaScript.
O ASP.NET e Web Tools 2012.2 Update enviam um novo template para construir aplicações
single page usandoknockout.js e ASP.NET Web API. Em adição ao novo template SPA, novos
templates SPA criados pela comunidade também estão disponíveis para download.
Em adição aos quatro principais frameworks de desenvolvimento, ASP.NET também oferece
tecnologias adicionais que são importantes para seu conhecimento e familiarização, embora
não sejam cobertos nesta série de tutoriais:
ASP.NET Web API – um framework para a construção de serviços HTTP que alcança uma
ampla gama de clientes, incluindo navegadores e mobile devices.

ASP.NET SignalR – uma biblioteca que facilita o desenvolvimento web em tempo real.

Nossa primeira aplicação Web.Net

Após configurado o ambiente e conhecida a ferramenta de desenvolvimento Visual Studio,
desenvolveremos nossa primeira aplicação web utilizando a linguagem C#.

Criando um novo projeto

No Menu File/New project escolha o tipo de projeto e a linguagem que serão utilizados. Para
este exemplo utilizaremos a linguagem C#.

9
 Unidade: Introdução ao Desenvolvimento Asp.net Web Forms Utilizando o Visual Studio

Figura 7 – Criando um novo projeto.

Figura 8 – Criando um novo projeto.

Atribua um nome para a aplicação e o local onde será gravado este projeto.

10
 Figura 9 – Criando um novo projeto.

Selecione o template Web Forms e clique no botão OK.

Levará um tempo até que o projeto seja criado. Quando estiver pronto, abra a página Default.aspx.

Familiarizando com algumas janelas

Solution Explorer – esta janela exibe os detalhes estruturais do projeto que está aberto
(Figura 10).
Toolbox – contém os controles que podem ser adicionados nas páginas (Figura 11).
Figura 10 – Janela Solution Explorer. Figura 11 – Janela Toolbox

11
 Unidade: Introdução ao Desenvolvimento Asp.net Web Forms Utilizando o Visual Studio

Janela de design e código – aqui a página é projetada e construída por meio do código fonte exibido.
Figura 12 – Janela de design e código.

Visual Studio cria algumas pastas e arquivos iniciais para o projeto. Os primeiros arquivos
que você trabalhará posteriormente no tutorial são os seguintes:

Quadro 1 – Arquivos iniciais do Virtual Studio.

Arquivo Propósito
Default.aspx Tipicamente a primeira página exibida quando a aplicação é executada no navegador.

Uma página que lhe permite criar um layout consistente e utilizá-lo como
Site.Master
comportamento padrão nas páginas de sua aplicação.

Um arquivo opcional que contém um código para responder eventos appication-

Global.asax
level e session-level levantados pelo ASP.NET ou pelos módulos HTTP.

Web.config Dados de configuração para uma aplicação.

12
 Ambiente Visual Studio Express 2013 for Web

Figura 13 – Áreas do Visual Studio.

Pode-se identificar as seguintes áreas no IDE:

1. Janela Solution Explorer – exibe a solução, os projetos e seus respectivos arquivos e pastas;
2. Janela de propriedades – exibe as propriedades do componente selecionado;
3. Janela de documentos – exibe o arquivo selecionado;
4. ToolBox – exibe os controles disponíveis conforme o componente selecionado;
5. Tab de visões do documento – permite indicar os modos de exibição do arquivo selecionado.

Você pode alternar para o tipo de exibição source ou no modo split permitir a visualização
dos dois tipos: design e o seu respectivo source.

Criando o banco de dados

Após criar o projeto, deve-se adicionar um banco de dados para que seja possível armazenar
os dados. Para tanto, com o botão direito do mouse em projeto selecione New Item, conforme
a Figura 14:

13
 Unidade: Introdução ao Desenvolvimento Asp.net Web Forms Utilizando o Visual Studio

Figura 14 – Criação de banco de dados.

No item abaixo, selecione a opção SQL Server Database e registre um nome ao banco de
dados. Para este exemplo, daremos o nome de Dados.mdf:

Figura 15 – Criação de banco de dados.

14
 Perceba que adicionaremos dentro da pasta App_Data:
Figura 16 – Criação de banco de dados.

Clique duas vezes no banco de dados Dados.mdf acima e se abrirá uma janela de Server
Explorer, onde poderemos criar a nossa tabela (Figura 17).
Com o botão direito sobre Tables, selecione Add New Table. (Figura 18)

Figura 17 – Criação de banco de dados. Figura 18 – Criação de banco de dados.

Figura 19 – Criação de banco de dados.

15
 Unidade: Introdução ao Desenvolvimento Asp.net Web Forms Utilizando o Visual Studio

Criaremos uma tabela conforme a estrutura abaixo, alterando o nome para Alunos:
Figura 20 – Criação de banco de dados.

Após isso, selecionaremos Update para gerarmos a tabela e na janela abaixo selecionaremos
Update Database:

Figura 21 – Criação de banco de dados.

16
 Na janela Server Explorer, atualize o banco de dados e veja que a tabela foi criada:
Figura 22 – Criação de banco de dados.

Agora alteraremos a página Default.aspx para que seja possível criar uma página onde se
possa digitar os dados para que sejam incluídas informações no banco de dados. A página deve
ter o seguinte formato:

Figura 23 – Formato da nova página default.

17
 Unidade: Introdução ao Desenvolvimento Asp.net Web Forms Utilizando o Visual Studio

Portanto, abra o arquivo Default.aspx e o substitua pelo código abaixo:

<%@ Page Title=”Home Page” Language=”C#” MasterPageFile=”~/Site.Master”

AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”WebApplication1._
Default” %>
<asp:Content ID=”BodyContent” ContentPlaceHolderID=”MainContent” runat=”server”>
<br>
<div>
<asp:Label ID=”Label1” runat=”server” Text=”RGM: “></asp:Label>
<asp:TextBox ID=”txtRgm” runat=”server”></asp:TextBox>
</div>
<br>
<div>
<asp:Label ID=”Label2” runat=”server” Text=”Nome: “></asp:Label>
<asp:TextBox ID=”txtNome” runat=”server” Width=”331px”></asp:TextBox>
</div>
<br>
<div>
<asp:Label ID=”Label3” runat=”server” Text=”Nota1: “></asp:Label>
<asp:TextBox ID=”txtNota1” runat=”server”></asp:TextBox>
</div>
<br>
<div>
<asp:Label ID=”Label4” runat=”server” Text=”Nota2: “></asp:Label>
<asp:TextBox ID=”txtNota2” runat=”server”></asp:TextBox>
</div>
<br />
<asp:Button ID=”btnIncluir” runat=”server” Text=”Incluir” /> &nbsp;
<asp:Button ID=”btnAlterar” runat=”server” Text=”Alterar” />&nbsp;
<asp:Button ID=”btnExcluir” runat=”server” Text=”Excluir” />
<br />
<br />
<asp:Label ID=”lblMensagem” runat=”server”></asp:Label>
<br />
<br />
</asp:Content> 

18
 Após substituir o código, execute o projeto e veja como ficará no browser que se abrirá:
Figura 24 – Substituição do código.

Caso queira parar a execução, selecione o botão abaixo:

Figura 25 – Parada da execução do projeto.

Adicionaremos uma classe com nome “Aluno”, a qual representará a estrutura da tabela
criada. Na página Solucion Explorer selecione o Projeto.

19
 Unidade: Introdução ao Desenvolvimento Asp.net Web Forms Utilizando o Visual Studio

Figura 26 – Adição da classe “Aluno”.

Figura 27 – Adição da classe “Aluno”.

20
Na tela da Figura 28, atribua o nome “Aluno.cs” e clique em Add.

Figura 28 – Adição da classe “Aluno”.

Para a classe gerada, substitua o código abaixo:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplication1.App_Code
{
public class Aluno
{
public Aluno()
{
}
public Aluno(string rgm, string nome, float n1, float n2)
{
this.RGM = rgm;
this.Nome = nome;
this.Nota1 = n1;
this.Nota2 = n2;

21
 Unidade: Introdução ao Desenvolvimento Asp.net Web Forms Utilizando o Visual Studio

}
public string RGM { set; get; }
public string Nome { set; get; }
public float Nota1 { set; get; }
public float Nota2 { set; get; }
}
}
Esta classe criará os métodos set e get dos atributos desenvolvidos na tabela e seu construtor.
Agora criaremos outra classe com o nome de “AlunoDAO”, a qual será responsável pela
conexão com o banco de dados e a programação para incluir, alterar e excluir registros. Repita
os procedimentos acima e para esta classe atribua o nome de “AlunoDAO.cs” e a substitua pelo
seguinte código:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;

namespace WebApplication1
{
public class AlunoDAO
{
SqlConnection conexao = new SqlConnection(@”Data Source=(LocalDB)\
v11.0;AttachDbFilename=|DataDirectory|\Dados.mdf;Integrated Security=True”);

SqlCommand cmd;
SqlDataReader dr;

public AlunoDAO()
{
try
{
conexao.Open();
}
catch (Exception)
{
throw;
}
}
public string salvarAluno(Aluno aluno)
{
string resp = “”;
string sql = “”;
int retorno;
try
{
22
 sql = “INSERT INTO Alunos(rgm, nome, nota1, nota2) VALUES(‘” + aluno.RGM
+ “’,’”;
sql += aluno.Nome + “’,” + aluno.Nota1 + “, “ + aluno.Nota2 + “)”;
cmd = new SqlCommand(sql, conexao);
retorno = cmd.ExecuteNonQuery();
if (retorno > 0)
{
return “OK”;
}
else
{
return “Falha ao inserir o registro: “ + sql;
}
}
catch (Exception ex)
{
resp = “ERRO: “ + ex.ToString() + “ SQL: “ + sql;
}
return resp;
}

public string atualizarAluno(Aluno aluno)

{
string resp = “”;
string sql = “”;
int retorno;
try
{
sql = “UPDATE Alunos SET nome=’” + aluno.Nome + “’, nota1=” + aluno.
Nota1 + “,”;
sql += “nota2=” + aluno.Nota2 + “ WHERE rgm=’” + aluno.RGM + “’”;
cmd = new SqlCommand(sql, conexao);
retorno = cmd.ExecuteNonQuery();
if (retorno > 0)
{
return “OK”;
}
else
{
return “Falha ao atualizar o registro: “ + sql;
}

}
catch (Exception ex)
{
resp = “ERRO: “ + ex.ToString() + “ SQL: “ + sql;
}

23
 Unidade: Introdução ao Desenvolvimento Asp.net Web Forms Utilizando o Visual Studio

return resp;
}

public string excluirAluno(Aluno aluno)

{
string resp = “”;
string sql = “”;
int retorno;
try
{
sql = “DELETE FROM Alunos WHERE rgm=’” + aluno.RGM + “’”;
cmd = new SqlCommand(sql, conexao);
retorno = cmd.ExecuteNonQuery();
if (retorno > 0)
{
return “OK”;
}
else
{
return “Falha ao excluir o registro: “ + sql;
}

}
catch (Exception ex)
{
resp = “ERRO: “ + ex.ToString() + “ SQL: “ + sql;
}
return resp;
}
}
}

Perceba que criamos os objetos de conexão e os métodos para incluir, alterar e excluir os
registros. Agora devemos inserir a programação em cada botão.

Volte na tela Default.apsx no modo Design e dê um duplo clique no botão “Incluir”.

Figura 29 – Inserção de programação nos botões.

Será aberta a tela abaixo, onde acrescentaremos o código para a inclusão:

Figura 30 – Inserção de programação nos botões.

Neste método adicionaremos o seguinte código de inclusão:

protected void btnIncluir_Click(object sender, EventArgs e)
{
if (txtRgm.Text.Trim() == “”)

24
 {
lblMensagem.Text = “Preencha o RGM do aluno”;
txtRgm.Focus();
}
else if (txtNome.Text.Trim() == “”)
{
lblMensagem.Text = “Preencha o nome do aluno”;
txtNome.Focus();
}
else if (txtNota1.Text.Trim() == “”)
{
lblMensagem.Text = “Preencha a nota 1”;
txtNota1.Focus();
}
else if (txtNota2.Text.Trim() == “”)
{
lblMensagem.Text = “Preencha a nota 2”;
txtNota2.Focus();
}
else
{

Aluno aluno = new Aluno(txtRgm.Text, txtNome.Text, float.Parse(txtNota1.Text), float.

Parse(txtNota2.Text));
String retorno = new AlunoDAO().salvarAluno(aluno);

if (retorno == “OK”)
{
lblMensagem.Text = “Sucesso na inserção”;
//GridView1.DataBind();
}
else
{
lblMensagem.Text = retorno;
}

}
}

Repita os procedimentos para os outros dois botões – Alterar e Excluir.

Botão Alterar:
protected void btnAlterar_Click(object sender, EventArgs e)
{
if (txtRgm.Text.Trim() == “”)
{
lblMensagem.Text = “Preencha o RGM do aluno”;
txtRgm.Focus();

25
 Unidade: Introdução ao Desenvolvimento Asp.net Web Forms Utilizando o Visual Studio

}
else if (txtNome.Text.Trim() == “”)
{
lblMensagem.Text = “Preencha o nome do aluno”;
txtNome.Focus();
}
else if (txtNota1.Text.Trim() == “”)
{
lblMensagem.Text = “Preencha a nota 1”;
txtNota1.Focus();
}
else if (txtNota2.Text.Trim() == “”)
{
lblMensagem.Text = “Preencha a nota 2”;
txtNota2.Focus();
}
else
{
Aluno aluno = new Aluno(txtRgm.Text, txtNome.Text, float.Parse(txtNota1.Text),
float.Parse(txtNota2.Text));
String retorno = new AlunoDAO().atualizarAluno(aluno);

if (retorno == “OK”)
{
lblMensagem.Text = “Sucesso na alteração”;
//GridView1.DataBind();
}
else
{
lblMensagem.Text = retorno;
}
}
}
Botão Excluir:
protected void btnExcluir_Click(object sender, EventArgs e)
{
string rgm = txtRgm.Text;

if (rgm.Trim() == “”)
{
lblMensagem.Text = “Preencha o RGM do aluno”;
txtRgm.Focus();
}
else
{
Aluno aluno = new Aluno();
aluno.RGM = rgm;

26
 String retorno = new AlunoDAO().excluirAluno(aluno);

if (retorno == “OK”)
{
lblMensagem.Text = “Sucesso na exclusão”;
//GridView1.DataBind();
}
else
{
lblMensagem.Text = retorno;
}

}
}
Agora execute o projeto e teste as três funcionalidades descritas acima.
 
Aprimorando nossa aplicação com GridView
Um dos objetos mais utilizados quando trabalhamos com acesso a dados no ASP.NET é o
GridView, que permite a exibição em tabelas as informações que estão no banco de dados.
Volte à página Default.aspx e altere-a para o modo design, conforme abaixo:
Figura 31 – Aplicação do GridView.

27
 Unidade: Introdução ao Desenvolvimento Asp.net Web Forms Utilizando o Visual Studio

Nesta parte, adicionaremos o GridView.

Na janela Toolbox, selecione o item Data e o elemento GridView, arrastando-o para a parte
indicada na Figura 31.
Figura 32 – Aplicação do GridView.

Ficando da seguinte forma:

Figura 33 – Aplicação do GridView.

28
Agora criaremos uma conexão com o banco de dados através o item Data Source do GridView.
Figura 34 – Aplicação do GridView.

Figura 35 – Aplicação do GridView.

29
 Unidade: Introdução ao Desenvolvimento Asp.net Web Forms Utilizando o Visual Studio

Figura 36 – Aplicação do GridView.

Figura 37 – Aplicação do GridView.

30
Figura 38 – Aplicação do GridView.

Digite a seguinte Query:

Figura 39 – Aplicação do GridView.

31
 Unidade: Introdução ao Desenvolvimento Asp.net Web Forms Utilizando o Visual Studio

Teste a Query e perceba que será mostrado o resultado. Se tudo ocorrer bem, selecione Finish.
Figura 40 – Aplicação do GridView.

Agora volte aos botões incluir, alterar e excluir e retire o seguinte comentário (destacado
em verde):

32
 Figura 41 – Aplicação do GridView.

O método DataBind do GridView irá atualizá-lo toda vez que ocorrer uma inclusão, alteração
ou exclusão.
Execute novamente o projeto e veja o resultado:

Figura 42 – Projeto em execução.

33
 Unidade: Introdução ao Desenvolvimento Asp.net Web Forms Utilizando o Visual Studio

Material Complementar

Para facilitar o aprendizado, assista a uma videoaula disponível em:

<http://www.youtube.com/watch?v=ekuMGSd9yNk> explicando como criar uma aplicação
web e também uma master page.
A série completa está disponível em:
http://www.youtube.com/watch?v=GE_7wBWU2_I&list=PLJQL6rmQXweUxDgBa8xda5ZtJU4KMIeVV

34
 Referências

CASE STUDIES: examples of how .NET delivers business value. [2014?]. Disponível em:
<http://www.microsoft.com/net/CaseStudies>.

DEITEL, H. M. C#: como programar. São Paulo: Pearson Education do Brasil, 2003.

______. Visual Basic.Net: como programar. São Paulo: Pearson Education do Brasil, 2004.

.NET FRAMEWORK DEVELOPER CENTER. [2014?]. Disponível em: <http://msdn.microsoft.

com/pt-br/vstudio/aa496123>.

VISÃO GERAL DO .Net Framework. [2014?]. Disponível em: <http://msdn.microsoft.com/pt-

br/library/zw4w595w.aspx>.

35
 Unidade: Introdução ao Desenvolvimento Asp.net Web Forms Utilizando o Visual Studio

Anotações

36
www.cruzeirodosulvirtual.com.br
Campus Liberdade
Rua Galvão Bueno, 868
CEP 01506-000
São Paulo SP Brasil
Tel: (55 11) 3385-3000