Web Forms - Cadastro em Memória

O Objetivo da aula de hoje é fazer um formulário contendo os campos nome e telefone e quando enviarmos as informações clicando no botão ok, serão enviados para um modelo de classe Usuário, que terá um método save onde os dados serão enviados para uma lista, ou seja , um objeto List de Usuario.

Após clicarmos no botão ok, vamos mostrar o que acabamos de colocar na memória para a nossa Lista.

Então o objetivo é gravar tudo em memória, ou seja, nada em banco de dados. Faremos o formulário para enviar esses dados e gravar em memória. Note que os dados ficarão na memória do servidor e quando executamos um reload na página, esses dados se mantem cadastrados até que a aplicação seja derrubada.

A partir do momento que a aplicação é derrubada com um Down, a memória será limpa e este ciclo se renova.

Dessa forma quando os dados são guardados em memória, guardamos em memória volátil e não memória física. Por isso que banco de dados como SqlServerr, MySql, MongoDB, etc..são muito utilizados.

Panel

Tambem vamos utilizar um componente chamado Panel, onde podemos manipular componentes que ficarão visiveis ou invisíveis, esconder ou mostrar os componentes da página.Para isso utilizaremos uma propriedade chamada Visible. Quando a propriedade visible do componente panel for true, será mostrado na tela e quando for false, ficará escondido.

Request - método POST

Toda vez que fazemos um formulário, precisamos necessariamente informar qual é o método do Http que vamos enviar os dados para o servidor. Normalmente quando criamos um formulário de cadastro, utilizamos um método chamado POST.

O método POST faz o envio dos dados que estão no browser local do seu cliente para o servidor, gravando os dados.

Podemos utilizar um request mais específico quando fazemos POST que podem ser Request.form ou Request.query . O request.query é utilizado para pegar parâmetros por querystring.

Quando utilizamos somente o Request, pegamos os parâmetros que vem tanto do form como por querystring.

Agora vamos fazer um formulário utilizando o método POST

Clicando com o botão direito no projeto, selecionamos menu:

• Add;
• Add new Item;
• web form;
• Visual C#;
• Name: Cadastro.aspx;
• Clicar no botão Add.

Agora vamos adicionar uma nova classe

Clicando com o botão direito no projeto, selecionamos menu:

• Add;
• Add new Item;
• Class;
• Name: Usuario.cs

      
        
        public Class Usuario
        
        {
          public Usuario(){}
          
          public string Nome { get; set; }
          public string Telefone { get; set; }
          public static List< Usuario> Lista = new List< Usuario>();

          public List< Usuario> Todos()
          {
            return Usuario.Lista;
          }

          public void Salvar()
          {
            Usuario.Lista.add(this);
          }

        }  
       
    

No arquivo cadastro.aspx vamos construir o formulário inserindo os componentes panel, label e textbox:

O código escrito como asp é convertido para um código HTML quando for feita a compilação.

      
         
        
        < html xmlns="http://www/w3.org/1999/xhtml">
        < head runat="server> 
          < title > < /title>
        < /head>
        < body>
            < form id="form1" runat="server"
              < div>
                < asp:Panel ID="pnlCamposCadastro" runat="server">
                  < asp:Label ID="lblNome" runat="server" Text="Nome"> < /asp:Label>
                  < asp:TextBox ID="txtNome" runat="server">< /asp:TextBox>
                  < br />
                  < asp:Label ID="Label2" runat="server" Text="Telefone">< /asp:Label>
                  < asp:TextBox ID="txtTelefone" runat="server">< /asp:TextBox>
                  < br />
                  < br />
                  < asp:Button ID="btnSalvar" runat="server" Text= "Salvar">
                < /asp:Panel>
              < /div>
            < /form>
        < /body>
        < html>
       
    

Vamos incluir outro componente panel e um GridView para listar as informações.

Também vamos inserir um botão para cadastro chamado Novo Cadastro.

      
         
        
        < html xmlns="http://www/w3.org/1999/xhtml">
        < head runat="server> 
          < title > < /title>
        < /head>
        < body>
            < form id="form1" runat="server"
              < asp:Panel ID="pnlResultado" runat="server">
                
                < asp:Button ID="btnIrCadastro" runat="server" Text= "Novo Cadastro">
                
                < asp:GridView ID="gridResultado" runat="server">
                < /asp:GridView>

              < /asp:Panel>
            < /form>
        < /body>
        < html>
       
    

Vamos esconder o panel gridResultado para inicialmente mostrar somente o formulário na tela:

      
        public partial class Cadastro : System.Web.UI.Page 
        {
  
          protected void Page_Load(object sender, EventArgs e)
          {
            mostrarLista();
          }

          private void mostrarLista()
          {
            pnlCamposCadastro.Visible = false;
            pnlResultado.Visible = true;
          }

          private void mostrarCadastro()
          {
            pnlCamposCadastro.Visible = true;
            pnlResultado.Visible = false;
          }
            
        }  
       
    

Ao clicar no botão Salvar, vamos deixar visivel a Lista:

    
      public partial class Cadastro : System.Web.UI.Page 
      {

        protected void btnIrCadastro_Click(object sender, EventArgs e)
        {
          mostrarCadastro();
        }

        protected void btnSalvar_Click(object sender, EventArgs e)
        {
          mostrarLista();
        }
          
      }  
     
  

Toda vez que utilizarmos o método mostrarLista, vamos preencher o DataGridview gridResultado e utilizar dois métodos deste componente:

• Datasource preenchido com o retorno da propriedade Usuario.Lista
• Databind mostra os dados no grid.

    
      public partial class Cadastro : System.Web.UI.Page 
      {

        protected void Page_Load(object sender, EventArgs e)
        {
          mostrarLista();
        }
 
        private void mostrarLista()
        {
          pnlCamposCadastro.Visible = false;
          pnlResultado.Visible = true;

          gridResultado.DataSource = Usuario.Lista;
          gridResultado.DataBind();
        }
         
      }  
     
  

Agora no cadastro, quando os dados forem inseridos, vamos utilizar estes dados para começar a preencher o Usuario.

Criaremos uma variavel usuario que será o objeto de uma nova instância da classe Usuario e preenchemos as propriedades nome e o telefone.

Ao chamar o método Salvar(), os dados serão salvos em memória na variavel do tipo List que foi criado na classe Usuario e limparemos os dados preenchidos na tela

    
      public partial class Cadastro : System.Web.UI.Page 
      {

        protected void btnSalvar_Click(object sender, EventArgs e)
        {
          var usuario = new Usuario();
          usuario.Nome = txtNome.Text;
          usuario.Telefone = txtTelefone.Text;
          usuario.Salvar();

          txtNome.Text = "";
          txtTelefone.Text = "";
          mostrarLista();
        }

      }  
     
  

Vamos mostrar abaixo todo código html no C# e inserir uma separação("risco") entre o botão Novo Cadastro e o DataGridView, que é a tag hr .

    
       
      
      < html xmlns="http://www/w3.org/1999/xhtml">
      < head runat="server> 
        < title > < /title>
      < /head>
      < body>
          < form id="form1" runat="server"
            < div>
              < asp:Panel ID="pnlCamposCadastro" runat="server">
                < asp:Label ID="lblNome" runat="server" Text="Nome"> < /asp:Label>
                < asp:TextBox ID="txtNome" runat="server">< /asp:TextBox>
                < br />
                < asp:Label ID="Label2" runat="server" Text="Telefone">< /asp:Label>
                < asp:TextBox ID="txtTelefone" runat="server">< /asp:TextBox>
                < br />
                < br />
                < asp:Button ID="btnSalvar" runat="server" Text= "Salvar">
              < /asp:Panel>
            < /div>
            < asp:Panel ID="pnlResultado" runat="server">
              < asp:Button ID="btnIrCadastro" runat="server" Text= "Novo Cadastro">
              < hr / >
              < asp:GridView ID="gridResultado" runat="server">
            < /asp:GridView>

          < /asp:Panel>
          < /form>
      < /body>
      < html>
     
  

Agora o próximo passo que vamos mostrar para vocês é o HTML no browser.

Ao clicarmos no browser com o botão direito do mouse , no menu exibir código fonte da página, veremos que serão inseridos algumas informações no ViewState, como ja foi explicado nas aulas anteriores.

O panel virou uma < div> no html.

O gridResultado virou uma tabela , onde temos o nome e o telefone em um < tr> e os dados em outra < tr>

É dessa forma abaixo que o código aspx se transforma no HTML.

    
      < div id="pnlResultado"
        < input type="submit" name="btnIrCadastro" value="Novo Cadastro" id="btnIrCadastro" /> 
        < hr />
        < table cellspacing="0" rules="all" border="1" id="gridResultado" style="border-collapse: collapse;">
          < tr> 
            < th scope="col"> Nome < /th>
            < th scope="col"> Telefone < /th>
          < /tr>
    
          < tr> 
            < td > danilo< /td>
            < td > 87687876< /td>
          < /tr>
    
          < tr> 
            < td > fabiana< /td>
            < td > 98797898< /td>
          < /tr>
    
        < /table>
      < /div>