Criando um projeto ASP.Net no Visual Studio 2008

Transcrição

1 Criando um projeto ASP.Net no Visual Studio 2008 Ao abrir o Visual Studio 2008, vá no menu File > New > Project (como mostra a imagem abaixo) ou simplesmente pressionando as teclas Ctrl + Shift + N. Nas opções de projeto, selecione na árvore de opções o seguinte: Visual Basic > Web [1] e ao lado direito a opção ASP.NET Web Application [2]. Dê o nome do projeto [3] e a localização [4], o.net Framework considera arquivos compilados da rede inseguros e não os executa por padrão. Utilizaremos então, o disco D: e salvaremos os projetos na pasta da turma, dentro de uma pasta LP1. O caminho ficaria assim: D:\MIF3AN\LP1.

2 Quando a interface do Visual Studio carregar, veremos a interface básica do Visual Studio padrão, uma seção para a solução, outra para as propriedades, a toolbox e a tela central com o ambiente de desenvolvimento. Vale atentar para a barra inferior do Visual Studio, quando abrimos uma página aspx, vemos três opções de visualização da página, são elas: Design, Split e Source. Cada uma faz com que visualizemos de forma diferente o nosso documento no projeto. No caso do Design, vemos nossa página com os controles visuais como ela seria exibida no navegador. O que chamamos de WYSIWYG (What You See Is What You Get O que você vê é o que você tem), de forma que podemos ver como a página irá ficar quando colocamos um controle, sem que tenhamos que executar o projeto para conferir no navegador. Na opção Source, vemos o código que o servidor irá interpretar para gerar o HTML, é a marcação (fonte) de tags da nossa página, nela vemos as tags HTML e outras, como também as tags dos componentes ASP.Net. Toda a tag que se inicia com <asp: é uma tag de componente asp.net. Um exemplo é a tag de caixa de texto (textbox), que pode ter a seguinte sintaxe: <asp:textbox ID="txtQuantidade" runat="server"></asp:textbox> Note que é similar a uma tag html, porém tem algumas características próprias: é obrigatório possuir um ID próprio e único naquela página (similar a propriedade name dos controles Windows forms) e também a tag runat definida como server para informar que este componente estará visível no arquivo de classe.aspx.vb; A opção Split é como se dividíssemos a nossa tela de trabalho em duas, e assim, visualizássemos as duas telas (Design e Source) ano mesmo tempo. A vantagem neste caso é que você pode trabalhar tanto em uma, quanto em outra. Porém a desvantagem é o tamanho da tela, quando muito pequena temos pouco espaço para visualizar tanto o código quanto a página. Acessando o arquivo de código VB: Para acessar o código da classe VB da página, podemos clicar no componente que iremos criar a rotina (assim o visual studio se encarrega de criar a rotina) ou na área que se visualiza o solution explorer, clicar na opção Show All Files e em seguida, expandir a página aspx que queremos editar, assim podemos visualizar o arquivo.aspx.vb e em seguida dar um duplo clique nele. Na figura ao lado, podemos ver o passo a passo de como acessar o arquivo de código da classe da página Default.aspx (o arquivo de nome Default.aspx.vb). Lembrando que deve-se tomar cuidado com o arquivo a se editar. Em hipótese alguma altere o código do arquivo.aspx.designer.vb! Ele é gerado automaticamente pelo Visual Studio.

3 Componentes do ASP.Net: Tanto em Windows Forms quanto em Web Forms (como são chamados as páginas com componentes ASP.Net) temos controles para criarmos o layout da nossa página, podemos inclusive mesclar estes componentes com tags HTML. Por exemplo para criarmos um layout em forma de tabela, podemos usar css (veremos isto posteriormente), mas também podemos usar a tag table (o que não é recomendável) para gerar o grid de layout. Vamos a um exemplo disto: Este é o exemplo de layout da página usando tag table como uma espécie de grid. O fonte da página (para a criação dos controles) seria similar a este: <table> <tr> <asp:label ID="lbl1" runat="server" Text="Nome: "></asp:label> <asp:textbox ID="txtNome" runat="server"></asp:textbox> <asp:label ID="lbl2" runat="server" Text="Estado Civil: "></asp:label> <asp:dropdownlist ID="cboEstCiv" runat="server"> <asp:listitem Value="Casado">Casado(a)</asp:ListItem> <asp:listitem Value="Solteiro">Solteiro(a)</asp:ListItem> <asp:listitem Value="Divorciado">Divorciado(a)</asp:ListItem> <asp:listitem Value="Viuvo">Viúvo(a)</asp:ListItem> </asp:dropdownlist> </tr> <tr> <asp:label ID="lbl3" runat="server" Text="Endereço: "></asp:label> <asp:textbox ID="txtEndereco" runat="server"></asp:textbox> <asp:label ID="lbl4" runat="server" Text="Sexo: "></asp:label> <asp:radiobuttonlist ID="rdlSexo" runat="server" RepeatDirection="Horizontal" CssClass="rd"> <asp:listitem Value="masc">Masculino</asp:ListItem> <asp:listitem Value="fem">Feminino</asp:ListItem> </asp:radiobuttonlist> </tr>

4 <tr> <asp:label ID="lbl5" runat="server" Text="Cep: "></asp:label> <asp:textbox ID="txtCep" runat="server"></asp:textbox> <asp:label ID="lbl6" runat="server" Text="Idade: "></asp:label> <asp:textbox ID="txtIdade" runat="server"></asp:textbox> </tr> </table> Repare que, na página aspx temos controles asp.net (iniciados pela tag <asp: e também controles html, no aso as tags table, tr e td). Estas tags podem coexistir perfeitamente em uma página, pois o.net Framework na hora de compilar\interpretar a página aspx, converte todos estes componentes asp.net em componentes HTML. E quanto as tags HTML, ele simplesmente as copia sem alterar nada em seu conteúdo. Note, pela imagem abaixo, que o fonte gerado é HTML puro: Falando um pouco sobre os componentes: Os componentes ASP.Net mais comuns são: Textbox. Combobox. Listbox. Button. E alguns outros, como o CheckBoxList e o RadioButtonList. Vejamos as propriedades comuns em cada um destes:

5 Textbox Propriedade MaxLength TextMode Columns Rows Text AutoPostBack Valor Valor inteiro de 1 a N, sendo 0 ilimitado. SingleLine, Password (para senhas) ou Multiline Define a largura da caixa de texto, em números de caracteres. Define a altura da caixa de texto em numero de caracteres. Define o texto exibido na caixa de texto. Envia o valor contido na caixa de texto, sempre que se pressionar TAB ou o controle perder o foco. Combobox (DropDownList): Itens(x).Selected Identifica se o item x do DropDownList foi ou não selecionado. Itens(x).Text Identifica a descrição do item x. Itens(x).Value Identifica o valor associado ao item x. SelectedIndex Define o número do Item atualmente marcado como escolhido no Listbox. SelectedItem Define o ListItem assinalado no DropDownList no momento. AutoPostBack Envia a página para o servidor, sempre que o usuário muda o item selecionado. Listbox: Itens(x).Selected Identifica se o item x do DropDownList foi ou não selecionado. Itens(x).Text Identifica a descrição do item x. Itens(x).Value Identifica o valor associado ao item x. SelectedIndex Define o número do Item atualmente marcado como escolhido no Listbox. SelectionMode Define se no ListBox o usuário pode fazer múltiplas escolhas ou não. Multiple ou Single (padrão). AutoPostBack Envia a página para o servidor, sempre que o usuário muda o item selecionado. Button: Propriedade Enabled Text Visible Valor Ativa ou Desativa o botão. Quando desativado, o texto do botão ficará cinza. Define um texto que irá aparecer no botão. Deixar o botão visível ou oculto.

6 CheckBoxList: CellPadding O CheckBoxList é visto como parte de uma tabela. A tabela é composta de caixas contendo um texto associado a um checkbox individual. Esta propriedade define o tamanho destas caixas. CellSpacing Define a distância entre as caixas na tabela. Itens(x).Selected Identifica se o item x do CheckBoxList foi selecionado. Itens(x).Text Recupera o texto do checkbox de numero x. Itens.Count Serve para saber quantos itens existem no CheckBoxList. RepeatDirection Definem se os Checkboxes devem ser listados na horizontal ou na vertical quando exibidos na página. RepeatColluns Numero de colunas para listar os itens do CheckBoxList. AutoPostBack Envia a página para o servidor sempre que um dos checkboxes é mudado (marcado ou desmarcado). RadioButtonList: CellPadding O RadioButtonList é visto como parte de uma tabela. A tabela é composta de caixas contendo um texto associado a um radiobutton individual. Esta propriedade define o tamanho destas caixas. CellSpacing Define a distância entre as caixas na tabela. SelectedIndex Indica o número da opção selecionada. Itens(x).Text Recupera o texto do radiobutton de numero x. Itens.Count Serve para saber quantos itens existem no CheckBoxList. RepeatDirection Definem se os Checkboxes devem ser listados na horizontal ou na vertical quando exibidos na página. RepeatColluns Numero de colunas para listar os itens do CheckBoxList. AutoPostBack Envia a página para o servidor sempre que um dos RadioButtonList é mudado (marcado ou desmarcado).