Artigos / Tekever.eu

Artigos de desenvolvimento e opinião em tecnologia.

Secções:

Linux | Windows | .NET / ASP | LAMP | Java | Só Conversa |

 


Formularios 2. Criar Campos - ASP.NET/C#

  2006-06-11




Uma das funcionalidades mais usadas hoje em dia, quer em programação web quer noutras, são os formulários para acesso/actualização de informação organizada (em bases de dados).
Vamos então criar aqui um formulário de exemplo básico para demonstração e proceder à validação dos seus campos.
No formulario o utilizador insere alguns dados como o nome, email, e escolhe outros de listagens, como a cidade e o país.



A validação é também um ponto indispensavel para que a informação venha o mais correcta possível e deve ser sempre feita para um formulário mais “correcto”.
O nosso código a inserir deve ser feito entre as tags de , visto tratar-se de um formulário que lida com informação, tags que são escritas logo à partida no ficheiro quando é criado.

Criação de uma TextBox (caixa de inserção de texto)

Para criar uma caixa de texto onde o utilizador insere por exemplo o seu nome basta escolher o objecto Textbox na Toolbox à esquerda em Standard. Clique no objecto e arraste-o para o código na zona indicada (entre as tags de form).Note-se que existem variadissimos itens (botões, links, imagens, checkbox, etc) e que para adiciona-los nada tão simples como apenas arrasta-los para o ecrã onde está o nosso codigo (no centro). É alias o que faremos em seguida com os outros objectos. Caso esteja a trabalhar no modo “Design” o codigo é automaticamente inserido no sitio correcto.



Podemos depois de arrastar o objecto pretendido alterar as suas propriedades como por exemplo o nome, associar-lhe uma formatação específica de uma classe de um ficheiro CSS, etc. Basta faze-lo à direita em baixo na janela de propriedades. Note que colocando o cursor na zona do codigo inserido, as propriedades referentes à textbox aparecem automaticamente.

 

<%--Campo de Nome--%>

Nome: <asp:TextBox ID="frmNome" runat="server" Width="274px"></asp:TextBox>

 




O mesmo procedimento é usado para o utilizador inserir o seu email:

 

<%--Campo de email--%>

Email: <asp:TextBox ID="frmEmail" runat="server" Width="213px"></asp:TextBox>

 

 


Criação de uma DropdownList (lista de itens)

Para criar uma DropDown List arrastar o objecto DropDownList para o código.
Para adicionar itens à lista de um modo muito simples, escolha o modo de visualização de “Design” (na janela de programação central em baixo). Até agora temos trabalhado no modo de visualização “Source”. Localize a DropDownList inserida e seleccione-a. Repare que quando está selecionada existe uma seta apontada para a direita na zona superior:



Clique na seta com o botão esquerdo do rato e seleccione a opção Edit Items. Aparecerá uma caixa onde podera adicionar itens bem como o seu valor. Tudo é feito graficamente e o código vai sendo escrito de fundo automaticamente. No nosso caso adicionámos o seguinte:

 

<%--DropDown List de itens inseridos --%>

Cidade: <asp:DropDownList ID="frmCidade" runat="server" >

            <asp:ListItem Value="1">Escolher</asp:ListItem>

            <asp:ListItem Value="2">Lisboa</asp:ListItem>

            <asp:ListItem Value="3">Obidos</asp:ListItem>

            <asp:ListItem Value="4">Viana de Castelo</asp:ListItem>

            <asp:ListItem Value="5">Tavira</asp:ListItem>

</asp:DropDownList>

 


No caso de querermos que a informação provenha de uma base de dados vamos fazer o seguinte:
Em primeiro lugar e ainda no modo de visualização “Design” vamos arrastar para o final da nossa pagina (zona mais inferior) um ojecto do tipo Data da Toolbox, com o nome de SQLData Source.



Uma vez adicionado, seleccione-o e verifique novamente a existência de uma seta. Clique na seta com o botão esquerdo do rato e escolha Configure Data Source.



Neste caso escolhemos a base de dados criada anteriormente com os paises. Clique Next.
Seguidamente o Visual Studio pergunta se queremos guardar essa conexão com algum nome que queiramos dar. Em seguida podemos editar o nosso query à base de dados, isto é a informação que queremos saber:



O query pode ser mais ou menos complexo, podemos adicionar clausulas WHERE, ORDER BY etc, embora para casos de complexidade muito específica o melhor seja talvez editar o query directamente no Page Load do ficheiro com extensão cs, e associa-lo depois ao SQL Data Source. Veremos como isso se faz em exemplos posteriores. De qualquer forma para quem se está a iniciar torna-se mais simples usar as ferramentas disponíveis. Depois de escolhidos os campos desejados, fazemos Next, e podemos inclusive testar se o query está realmente a funcionar clicando em Test Query. Para terminar escolher Finish.
Para associar agora a nossa DropdownList ao Data Source que colocámos no fundo da pagina, vamos seleccionar a DropdownList e na seta clicar com o botão esquerdo e escolher Chose Data Source (em oposto a Edit Items como fizemos no caso anterior). Na caixa de opções que é mostrada em seguida escolher SQLDataSource1 (a que editámos). Escolher os items correspondentes para a visualização das hipóteses e seus valores associados e clique OK para continuar.



Os itens da DropdownList estão agora associados à base de dados e aos valores dela recebidos:

 

<%--Dropdown List de Países provenientes da base de dados--%>

Pais: 

<asp:DropDownList ID="frmPais" runat="server" DataSourceID="SqlDataSource1"

DataTextField="paises_nome" DataValueField="paises_id"

CausesValidation="false"></asp:DropDownList>

 


Criação de uma RadioButtonList (lista de botões “rádio”)

Vamos ainda adicionar no nosso formulário uma lista de botões “radio” para escolha de um destino de férias. Tal como fizemos para os outros casos, vamos à Toolbox e escolhemos uma RadioButtonList e editamos tal como na primeira DropdownList, os items que queremos mostrar.

 

<%--Radio Button List de Destinos de Férias--%>

Destino de Férias:<br />

<asp:RadioButtonList ID="rblFerias" runat="server">     

    <asp:ListItem Value="1">St Petersburg</asp:ListItem>

    <asp:ListItem Value="2">Tokyo</asp:ListItem>

    <asp:ListItem Value="3">Viena</asp:ListItem>

 </asp:RadioButtonList>  

 


nota: ver o código completo em Formularios 3. Validar Campos


Escrito por Tânia Penedo
Website do autor: http://www.taniapenedo.com
Dados do autor: Programação multi-plataforma; C#, PHP, Java, MySQL, SQL-Server.

Comentários

Comentários a este artigo

Enviado em 2009-10-24 por José Barbosa de Souza
Gostei bastante da explicação, mas é que eu estou começando agora e sou chucro, voce pode me enviar estes códigos completos somente para que eu possa fazer alterações e validá-lo em meu sita?
Obrigado.

Enviado em 2009-09-16 por Robson
Parabéns, no entanto gostaria de saber se você não têm e pode me disponibilizar alguma apostila de C# para web, pois estou aprendendo na faculdade e o professor é péssimo.Utilizo o visual estúdio 2008.Obrigado.

Enviado em 2007-04-29 por Pereira
Quero criar um formulario para comentario como esse seu mas não consigo. que devo fazer.

Aguardo resposta

Obrigado

Enviado em 2006-09-24 por arthur
quero criar botão para por no meu Site e não consigo!

Enviado em 2006-09-24 por joaov
arthur, poderias ser mais específico? o que queres dizer com meter um botão no teu website relacionado com o assunto deste artigo?

Faça um comentário

Comentário

Nome
E-mail

Este comentário só ficará válido depois de fazer clique no link que lhe será enviado já a seguir para o e-mail indicado. Como tal garanta que o seu e-mail está válido e operacional, se não receber o nosso e-mail verifique os seus filtros de SPAM, ou a caixa de Lixo/Trash do seu cliente de e-mail.

 

Avaliar artigo

Avalie este artigo

 



Nome
E-mail

Este voto só ficará contabilizado depois de fazer clique no link que lhe será enviado já a seguir para o e-mail indicado. Como tal garanta que o seu e-mail está válido e operacional, se não receber o nosso e-mail verifique os seus filtros de SPAM, ou a caixa de Lixo/Trash do seu cliente de e-mail.

 

 

 

 

Recomendar este artigo a alguém

Envie a alguém conhecido

De:  
Nome E-mail
 
Para:  
Nome E-mail
Será enviado um link da página deste artigo para o e-mail que indicar como destino.