Anuncie seus apps conosco

Aplicativos patrocinadores


Autor: Mauricio Junior
Publicado em: 9/19/2016 6:24:12 PM

Web Api - Importante Parte 5

 

Olá pessoal hoje eu vou falar como editar o dado do GridView usando simplesmente o Web Service com REST Json. Lembre-se que o Web Api já está pronto e funcionando e agora vamos consumir os dados por um site web feito em ASP.NET. Os dados estão vindo do Web Api para preencher o componente GridView e a ideia principal é editar algum dado já preenchido.

 

O problema é atualizar os dados e pra isso precisamos colocar um botão Editar e campo escondido do tipo Hidden. O campo escondido é para armazenar o identificador buscado do banco de dados. Esse campo fica sempre escondido e serve para ajudar o sistema com as variáveis temporárias. O botão Editar precisa ficar invisível e precisa aparece apenas quando o usuário clicar em Editar dentro do GridView. Note que na listagem 1 existe a propriedade ValidationGroup em alguns objetos da tela, isso porque precisa fazer a validação dos dados no momento que o usuário for colocar os dados. Vamos conseguir informar quais campos e objetos serão validados no clique ou na saída de foco. A listagem 1 mostra o HTML da página.

 

Listagem 1 - HTML da página

<asp:HiddenField ID="hdIdConta" runat="server" />
<div class="col-md-6">
            <h2>Contas</h2>
            <p>
                <asp:TextBox runat="server" CssClass="form-control" ID="txtDescricao" placeholder="Digite o título."  ValidationGroup="form"/>
                <asp:RequiredFieldValidator ErrorMessage="Digite uma descrição." ValidationGroup="form" Display="Dynamic" ForeColor="Red" ControlToValidate="txtDescricao" runat="server" />
            </p>
            <p>
                <asp:Button Text="Editar" ID="cmdEditar" CssClass="btn btn-primary btn-lg" OnClick="cmdEditar_Click" ValidationGroup="form" Visible="false" runat="server" />
                <asp:Button Text="Adicionar" ID="cmdEnviar" CssClass="btn btn-primary btn-lg" runat="server" OnClick="cmdEnviar_Click" ValidationGroup="form" />
                <asp:Button Text="Limpar" ID="cmdLimpar" CssClass="btn btn-primary btn-lg" OnClick="cmdLimpar_Click" runat="server" />
                <asp:ValidationSummary runat="server" ValidationGroup="form" Visible="false" />
            </p>
        </div>
 

 

Imagem 1 - Mostrando formulário

 

O próximo passo é preencher no GridView criado anteriormente e com a propriedade chamada OnRowCommand vamos pegar os dados para edição. O objeto consequentemente gera o método chamado grdContas_RowCommand na parte do código C#. Esse método faz com que o nome do comando seja pego e os valores do Grid sejam enviados para os campos. Como todos os dados que precisamos já estão no GridView e por isso não precisou pesquisar no banco de dados novamente. Muitos precisam passar o identificador para pesquisar no banco de dados novamente e depois atribuir os valores aos objetos da tela, mas no nosso caso não precisa disso. Sem precisar buscar os dados novamente a interação fica bem mais rápida para o usuário.

 

É necessário colocar mais uma linha de código dentro do objeto GridView e com comando chamado Editar. Essa linha é de um botão chamado ButtonField e com o CommandName igual a Editar. Ele será verificado para dar andamento à edição dos dados. Veja a listagem 2.

 

Listagem 2 - Objeto GridView 

 
<asp:GridView runat="server" ID="grdContas" DataKeyNames="IdConta" AllowPaging="true" 
 Width="100%" PageSize="50" GridLines="None" AutoGenerateColumns="false" 
 OnRowDeleting="grdContas_RowDeleting" OnRowCommand="grdContas_RowCommand">
                    <AlternatingRowStyle BackColor="#f1f1f1" />
                    <HeaderStyle BackColor="#cccccc" />
                    <Columns>
                        <asp:BoundField DataField="IdConta" HeaderText="Id" />
                        <asp:BoundField DataField="DescricaoConta" HeaderText="Nome da Conta" />
                        <asp:CommandField ButtonType="Button" CancelText="Cancelar" DeleteText="Deletar" ShowDeleteButton="true" HeaderText="Deletar" />
                        <asp:ButtonField ButtonType="Button" CommandName="Editar" HeaderText="Editar" Text="Editar" />
                    </Columns>
                </asp:GridView>
 

 

Imagem 2 - Mostrando GridView

 

É muito importante entender o que foi feito na listagem 2 para dar sequência na listagem 3. O método RowCommand pode ser usado para qualquer tipo de operação necessária em sua aplicação. A primeira linha de código da listagem 3 verifica se o nome do comando é Editar, se for então ele pega o index através do comando de argumento e por fim buscar a chave pelo DataKey. Com a chave na mão basta pegar os dados e atribuir para os objetos de tela. Foi necessário utilizar um script para transformar de HTML para texto plano porque o GridView deixa tudo com comandos HTML, por exemplo: % @& e tudo mais. No final precisamos colocar o botão de editar visível e botão de enviar invisível. Veja a listagem 3.

 

 

Listagem 3 - Pegando os dados e colocando nos objetos de tela.

        protected void grdContas_RowCommand(object sender, GridViewCommandEventArgs e)

        {

            if (e.CommandName == "Editar")

            {

                int index = int.Parse((string)e.CommandArgument);

                string chave = grdContas.DataKeys[index]["IdConta"].ToString();

                

                hdIdConta.Value = chave.ToString();

                txtDescricao.Text = HtmlToText.StripHTML(grdContas.Rows[index].Cells[1].Text, true);

 

                cmdEditar.Visible = true;

                cmdEnviar.Visible = false;

 

            }

        }

 

O botão de editar é o que vai comunicar com o Web Api mandando os dados necessários para update ou atualização os dados. No Web Api o método responsável para atualização de dados é o PUT, não se esqueça disso. A primeira linha pega o client server, depois precisamos preencher todos os valores da classe Conta e para finalizar, utilizamos o responseMessage chamando o endereço PUT passando a chave como parâmetro.  O PUT precisa passar a chave como parâmetro na URL e dentro da classe Conta. É uma regra do PUT, basta verificar a documentação. Se a resposta vier positiva, basta mostrar uma mensagem para o usuário ou então redirecionar para uma página. No nosso caso, redirecionei para a mesma página passando parâmetros. Veja a listagem 4.

 

Listagem 4 - Atualizando os valores

protected void cmdEditar_Click(object sender, EventArgs e)

        {

            //pega o client server

            var client = HttpClientRequest.getClient();

 

            //preenche os dados

            var _conta = new Conta()

            {

                IdConta = int.Parse(hdIdConta.Value.ToString()),

                DescricaoConta = txtDescricao.Text,

                IdUsuario = int.Parse(Session["MONEY_IDUSUARIO"].ToString())

            };

 

            System.Net.Http.HttpResponseMessage response = client.GetAsync(ConstantesUteis.PUT_CONTA + hdIdConta.Value).Result;

            response = client.PutAsJsonAsync(ConstantesUteis.PUT_CONTA + hdIdConta.Value, _conta).Result;

            Uri envioUri = response.Headers.Location;

 

            if (response.IsSuccessStatusCode)

            {

                Response.Redirect("AddContas?guid=" + Guid.NewGuid() + "&id=editsucesso");

            }

            else

                Response.Write(response.StatusCode.ToString() + " - " + response.ReasonPhrase.ToString());

        }

 

 

Imagem 3 - Recebendo mensagem depois de editar

 

Bom, espero que tenha gostado pois o objetivo foi mostrar passo a passo de como atualizar informações no banco de dados através do consumo do Web Api utilizando ASP.NET com a linguagem C#. Qualquer dúvida pode entrar em contato pelo site www.mauriciojunior.org.

 

Udocs.me