Introdução ao ASP.NET Web Pages – Noções básicas sobre formulários HTML

por Tom FitzMacken

Este tutorial mostra os conceitos básicos de como criar um formulário de entrada e como lidar com a entrada do usuário ao usar ASP.NET Páginas da Web (Razor). E agora que você tem um banco de dados, usará suas habilidades de formulário para permitir que os usuários encontrem filmes específicos no banco de dados. Ele pressupõe que você concluiu a série por meio da Introdução à Exibição de Dados usando ASP.NET Páginas da Web.

O que você aprenderá:

• Como criar um formulário usando elementos HTML padrão.
• Como ler a entrada do usuário em um formulário.
• Como criar uma consulta SQL que obtém dados seletivamente usando um termo de pesquisa fornecido pelo usuário.
• Como ter campos na página "lembrar" o que o usuário inseriu.

Recursos/tecnologias discutidos:

• O objeto Request.
• A cláusula SQL Where .

O que você construirá

No tutorial anterior, você criou um banco de dados, adicionou dados a ele e, em seguida, usou o WebGrid auxiliar para exibir os dados. Neste tutorial, você adicionará uma caixa de pesquisa que permite encontrar filmes de um gênero específico ou cujo título contém qualquer palavra que você inserir. (Por exemplo, você poderá encontrar todos os filmes cujo gênero é "Ação" ou cujo título contém "Harry" ou "Aventura".

Quando terminar este tutorial, você terá uma página como esta:

A parte de listagem da página é a mesma do último tutorial : uma grade. A diferença será que a grade mostrará apenas os filmes que você pesquisou.

Sobre formulários HTML

(Se você tiver experiência com a criação de formulários HTML e com a diferença entre GET e POST, você pode ignorar esta seção.)

Um formulário possui elementos de entrada de usuário — caixas de texto, botões, botões de rádio, caixas de seleção, listas suspensas, entre outros. Os usuários preenchem esses controles ou fazem seleções e, em seguida, enviam o formulário clicando em um botão.

A sintaxe HTML básica de um formulário é ilustrada por este exemplo:

<form method="post">
  <input type="text" name="name" value="" />
  <br/>
  <input type="submit" name="submit" value="Submit" />
</form>

Quando essa marcação é executada em uma página, ela cria uma forma simples semelhante a esta ilustração:

O <form> elemento inclui elementos HTML a serem enviados. (Um erro fácil de cometer é adicionar elementos à página, mas depois esquecer de colocá-los dentro de um <form> elemento. Nesse caso, nada é enviado.) O method atributo informa ao navegador como enviar a entrada do usuário. Você definirá isto como post se estiver realizando uma atualização no servidor ou como get se estiver apenas buscando dados do servidor.

A maioria dos elementos de entrada do usuário são elementos HTML <input> . Se assemelham a <input type="type" name="name">, onde tipo indica o tipo de controle de entrada do usuário desejado. Esses elementos são os mais comuns:

• Caixa de texto: <input type="text">
• Caixa de seleção: <input type="check">
• Botão de opção: <input type="radio">
• Botão: <input type="button">
• Botão Enviar: <input type="submit">

Você também pode usar o <textarea> elemento para criar uma caixa de texto multilinha e o <select> elemento para criar uma lista suspensa ou uma lista rolável. (Para obter mais informações sobre elementos de formulário HTML, consulte Html Forms e Input no site W3Schools.)

O name atributo é muito importante, pois o nome é como você obterá o valor do elemento mais tarde, como você verá em breve.

A parte interessante é o que você, o desenvolvedor de páginas, faz com a entrada do usuário. Não há nenhum comportamento interno associado a esses elementos. Em vez disso, você precisa obter os valores que o usuário inseriu ou selecionou e fazer algo com eles. Isso é o que você aprenderá neste tutorial.

Criando o formulário

Em WebMatrix, no espaço de trabalho Arquivos, abra a página Movies.cshtml.

Após a marca de fechamento </h1> e antes da marca de abertura <div> da grid.GetHtml chamada, adicione a seguinte marcação:

<form method="get">
  <div>
    <label for="searchGenre">Genre to look for:</label>
    <input type="text" name="searchGenre" value="" />
    <input type="Submit" value="Search Genre" /><br/>
    (Leave blank to list all movies.)<br/>
    </div>
</form>

Essa marcação cria um formulário que tem uma caixa de texto nomeada searchGenre e um botão enviar. A caixa de texto e o botão enviar são colocados em um <form> elemento cujo method atributo é definido como get. (Lembre-se de que se você não colocar a caixa de texto e o botão de envio dentro de um <form> elemento, nada será enviado quando você clicar no botão.) Você usa o verbo GET aqui porque está criando um formulário que não faz nenhuma alteração no servidor, resultando apenas em uma pesquisa. (No tutorial anterior, você usou um post método, que é como você envia alterações ao servidor. Você verá isso no próximo tutorial novamente.)

Execute a página. Embora você não tenha definido nenhum comportamento para o formulário, você pode ver a aparência dele:

Insira um valor na caixa de texto, como "Comedy". Em seguida, clique em Pesquisar Gênero.

Anote a URL da página. Como você define o <form> atributo do method elemento como get, o valor inserido agora faz parte da cadeia de caracteres de consulta na URL, assim:

http://localhost:45661/Movies.cshtml?searchGenre=Comedy

Lendo valores de formulário

A página já contém algum código que obtém dados de banco de dados e exibe os resultados em uma grade. Agora você precisa adicionar algum código que leia o valor da caixa de texto para que você possa executar uma consulta SQL que inclua o termo de pesquisa.

Como você define o método do formulário como get, você pode ler o valor que foi inserido na caixa de texto usando código como o seguinte:

var searchTerm = Request.QueryString["searchGenre"];

O Request.QueryString objeto (a QueryString propriedade do Request objeto) inclui os valores dos elementos que foram enviados como parte da GET operação. A Request.QueryString propriedade contém uma coleção (uma lista) dos valores enviados no formulário. Para obter qualquer valor individual, especifique o nome do elemento desejado. É por isso que você precisa ter um name atributo no <input> elemento (searchTerm) que cria a caixa de texto. (Para obter mais informações sobre o Request objeto, consulte a barra lateral mais tarde.)

É bastante simples ler o valor da caixa de texto. Mas se o usuário não inseriu nada na caixa de texto, mas clicou em Pesquisar de qualquer maneira, você pode ignorar esse clique, já que não há nada para pesquisar.

O código a seguir é um exemplo que mostra como implementar essas condições. (Você ainda não precisa adicionar esse código; você fará isso em um momento.)

if(!Request.QueryString["searchGenre"].IsEmpty() ) {
     // Do something here
}

O teste é interrompido dessa forma:

• Obtenha o valor de Request.QueryString["searchGenre"], ou seja, o valor que foi inserido no <input> elemento chamado searchGenre.
• Descubra se ele está vazio usando o IsEmpty método. Esse método é a maneira padrão de determinar se algo (por exemplo, um elemento de formulário) contém um valor. Mas realmente, você só se importa se não está vazio, portanto...
• Adicione o operador ! à frente do teste IsEmpty. (O ! operador significa NÃO lógico).

Em termos simples, toda a if condição é traduzida da seguinte forma: Se o elemento searchGenre do formulário não estiver vazio, então...

Este bloco prepara o cenário para criar uma consulta que usa o termo de pesquisa. Você fará isso na próxima seção.

Criando uma consulta usando um termo de pesquisa

Agora que você sabe como obter o termo de pesquisa inserido pelo usuário, você pode criar uma consulta que o use. Lembre-se de que, para obter todos os itens de filme do banco de dados, você está usando uma consulta SQL semelhante a esta instrução:

SELECT * FROM Movies

Para obter apenas determinados filmes, você precisa usar uma consulta que inclua uma Where cláusula. Essa cláusula permite que você defina uma condição na qual as linhas são retornadas pela consulta. Veja um exemplo:

SELECT * FROM Movies WHERE Genre = 'Action'

O formato básico é WHERE column = value. Você pode usar operadores diferentes além de apenas =, como > (maior que), < (menor que), <> (não igual a), <= (menor ou igual a), etc., dependendo do que você está procurando.

Caso esteja se perguntando, as instruções SQL não são sensíveis a maiúsculas/minúsculas — SELECT é o mesmo que Select (ou mesmo select). No entanto, as pessoas geralmente capitalizam palavras-chave em uma instrução SQL, como SELECT e WHERE, para facilitar a leitura.

Passando o termo de pesquisa como um parâmetro

Pesquisar um gênero específico é fácil o suficiente (WHERE Genre = 'Action'), mas você deseja ser capaz de pesquisar qualquer gênero que o usuário insira. Para fazer isso, você cria uma consulta SQL que inclui um placeholder para o valor a ser pesquisado. Ele será semelhante a este comando:

SELECT * FROM Movies WHERE Genre = @0

O espaço reservado é o caractere @ seguido por zero. Como você pode imaginar, uma consulta pode conter vários espaços reservados, e eles seriam nomeados @0, @1, @2, etc.

Para configurar a consulta e realmente passar o valor, use o código como no exemplo a seguir:

selectCommand = "SELECT * FROM Movies WHERE Genre = @0";
selectedData = db.Query(selectCommand, Request.QueryString["searchGenre"]);

Esse código é semelhante ao que você já fez para exibir dados na grade. As únicas diferenças são:

• A consulta contém um espaço reservado (WHERE Genre = @0").
• A consulta é colocada em uma variável (selectCommand); antes, você passou a consulta diretamente para o db.Query método.
• Ao chamar o método db.Query, você passa tanto a consulta quanto o valor a ser usado como espaço reservado. (Se a consulta tivesse vários espaços reservados, você passaria todos eles como valores separados para o método.)

Se você juntar todos esses elementos, obterá o seguinte código:

if(!Request.QueryString["searchGenre"].IsEmpty() ) { 
    searchTerm = Request.QueryString["searchGenre"];
    selectCommand = "SELECT * FROM Movies WHERE Genre = @0";
    selectedData = db.Query(selectCommand, searchTerm);
}

Atualizando a página de filmes com o código de pesquisa

Agora você pode atualizar o código no arquivo Movies.cshtml . Para começar, substitua o código no bloco de código na parte superior da página por este código:

var db = Database.Open("WebPagesMovies");
var selectCommand = "SELECT * FROM Movies";
var searchTerm = "";

A diferença aqui é que você colocou a consulta na variável selectCommand, que você passará para db.Query mais tarde. Colocar a instrução SQL em uma variável permite alterar a instrução, que é o que você fará para executar a pesquisa.

Você também removeu essas duas linhas, que você colocará novamente mais tarde:

var selectedData = db.Query("SELECT * FROM Movies");
var grid = new WebGrid(source: selectedData, rowsPerPage: 3);

Você ainda não deseja executar a consulta (ou seja, chamar db.Query) e também não deseja inicializar o auxiliar WebGrid ainda. Você fará essas coisas depois de descobrir qual instrução SQL deve ser executada.

Após esse bloco reescrito, você pode adicionar a nova lógica para lidar com a pesquisa. O código concluído será semelhante ao seguinte. Atualize o código em sua página para que ele corresponda a este exemplo:

@{
    var db = Database.Open("WebPagesMovies") ;
    var selectCommand = "SELECT * FROM Movies";
    var searchTerm = "";

    if(!Request.QueryString["searchGenre"].IsEmpty() ) {
        selectCommand = "SELECT * FROM Movies WHERE Genre = @0";
        searchTerm = Request.QueryString["searchGenre"];
    }

    var selectedData = db.Query(selectCommand, searchTerm);
    var grid = new WebGrid(source: selectedData, defaultSort: "Genre", rowsPerPage:3);
}

A página agora funciona assim. Sempre que a página é executada, o código abre o banco de dados e a selectCommand variável é definida como a instrução SQL que obtém todos os registros da Movies tabela. O código também inicializa a searchTerm variável.

No entanto, se a solicitação atual incluir um valor para o elemento searchGenre, o código define selectCommand como uma consulta diferente, ou seja, uma que inclui a cláusula Where para pesquisar por um gênero. Ele também configura searchTerm conforme o que foi passado para a caixa de pesquisa (que pode não ser nada).

Independentemente de qual instrução SQL está em selectCommand, o código então chama db.Query para executar a consulta, passando ele o que estiver em searchTerm. Se não houver nada em `searchTerm`, não importa, porque nesse caso não há parâmetro para passar o valor para `selectCommand` de qualquer maneira.

Por fim, o código inicializa o WebGrid auxiliar usando os resultados da consulta, assim como antes.

Você pode ver que, colocando a instrução SQL e o termo de pesquisa em variáveis, você adicionou flexibilidade ao código. Como você verá mais adiante neste tutorial, você pode usar essa estrutura básica e continuar adicionando lógica para diferentes tipos de pesquisas.

Testando o recurso Pesquisar por Gênero

No WebMatrix, execute a página Movies.cshtml . Você vê a página com a caixa de texto para o gênero.

Insira um gênero que você inseriu para um de seus registros de teste e clique em Pesquisar. Desta vez, você verá uma listagem de apenas os filmes que correspondem a esse gênero:

Insira um gênero diferente e pesquise novamente. Tente inserir o gênero usando todas as letras minúsculas ou maiúsculas para que você possa ver que a pesquisa não diferencia maiúsculas de minúsculas.

"Lembrando" o que o usuário inseriu

Você deve ter notado que depois de inserir um gênero e clicar em Pesquisar Gênero, você viu uma listagem para esse gênero. No entanto, a caixa de texto de pesquisa estava vazia – em outras palavras, ela não se lembrava do que você havia inserido.

É importante entender por que esse comportamento ocorre. Quando você envia uma página, o navegador envia uma solicitação para o servidor Web. Quando ASP.NET obtém a solicitação, ela cria uma nova instância da página, executa o código nela e, em seguida, renderiza a página para o navegador novamente. Na verdade, porém, a página não sabe que você estava apenas trabalhando com uma versão anterior de si mesma. Tudo o que ele sabe é que ele recebeu uma solicitação que tinha alguns dados de formulário nele.

Toda vez que você solicita uma página , seja pela primeira vez ou enviando-a , você está recebendo uma nova página. O servidor Web não tem memória da sua última solicitação. Tampouco o ASP.NET, tampouco o navegador. A única conexão entre essas instâncias separadas da página são os dados que você transmite entre elas. Se você enviar uma página, por exemplo, a nova instância de página poderá obter os dados de formulário que foram enviados pela instância anterior. (Outra maneira de passar dados entre páginas é usar cookies.)

Uma maneira formal de descrever essa situação é dizer que as páginas da Web são sem estado. Os servidores Web e as próprias páginas e os elementos na página não mantêm nenhuma informação sobre o estado anterior de uma página. A Web foi projetada dessa forma porque manter o estado para solicitações individuais esgotaria rapidamente os recursos dos servidores Web, que geralmente lidam com milhares, talvez até centenas de milhares, de solicitações por segundo.

Então é por isso que a caixa de texto estava vazia. Depois de enviar a página, ASP.NET criou uma nova instância da página e executou o código e a marcação. Não havia nada nesse código que disse ao ASP.NET para colocar um valor na caixa de texto. Portanto, ASP.NET não fez nada e a caixa de texto foi renderizada sem um valor nela.

Na verdade, há uma maneira fácil de contornar esse problema. O gênero que você inseriu na caixa de texto está disponível para você no código .Request.QueryString["searchGenre"]

Atualize a marcação da caixa de texto para que o atributo value obtenha seu valor de searchTerm, como neste exemplo:

<input type="text" name="searchGenre" value="@Request.QueryString["searchGenre"]" />

Nesta página, você também pode ter definido o value atributo para a searchTerm variável, já que essa variável também contém o gênero inserido. Mas usar o Request objeto para definir o value atributo, conforme mostrado aqui, é a maneira padrão de realizar essa tarefa. (Supondo que você queira fazer isso , em algumas situações, talvez você queira renderizar a página sem valores nos campos. Tudo depende do que está acontecendo com seu aplicativo.)

Execute a página novamente, insira um gênero e clique em Pesquisar Gênero. Desta vez, você não só vê os resultados da pesquisa, mas a caixa de texto se lembra do que você inseriu da última vez:

Pesquisando qualquer palavra no título

Agora você pode procurar qualquer gênero, mas também pode querer procurar um título. É difícil obter um título exatamente certo quando você pesquisa, então, em vez disso, você pode procurar uma palavra que apareça em qualquer lugar dentro de um título. Para fazer isso no SQL, use o LIKE operador e a sintaxe da seguinte maneira:

SELECT * FROM Movies WHERE Title LIKE '%adventure%'

Esse comando obtém todos os filmes cujos títulos contêm "aventura". Ao usar o operador LIKE, você inclui o caractere curinga % como parte do termo de pesquisa. A pesquisa LIKE 'adventure%' significa "começando com 'adventure'". (Tecnicamente, isso significa "A string 'adventure' seguida de qualquer coisa.") De maneira similar, o termo de pesquisa LIKE '%adventure' significa "qualquer coisa seguida pela string 'adventure'", que é outra forma de dizer "terminando com 'adventure'".

Assim, o termo de pesquisa LIKE '%adventure%' significa "com 'aventura' em qualquer lugar no título". (Tecnicamente, "qualquer coisa no título, seguida de 'aventura', seguida de qualquer coisa.")

Dentro do elemento <form>, adicione a seguinte marcação logo abaixo da tag de fechamento </div> para a pesquisa de gênero (logo antes do elemento de fechamento </form>):

<div>
  <label for="SearchTitle">Movie title contains the following:</label>
  <input type="text" name="searchTitle" value="@Request.QueryString["searchTitle"]" />
  <input type="Submit" value="Search Title" /><br/>
</div>

O código para lidar com essa pesquisa é semelhante ao código da pesquisa de gênero, exceto que você precisa montar a LIKE pesquisa. Dentro do bloco de código na parte superior da página, adicione este if bloco logo após o if bloco para a pesquisa de gênero:

if(!Request.QueryString["searchTitle"].IsEmpty() ) {
    selectCommand = "SELECT * FROM Movies WHERE Title LIKE @0";
    searchTerm = "%" + Request["searchTitle"] + "%";
}

Esse código usa a mesma lógica que você viu anteriormente, exceto que a pesquisa usa um LIKE operador e o código coloca "%" antes e depois do termo de pesquisa.

Observe como foi fácil adicionar outra pesquisa à página. Tudo o que você tinha que fazer era:

• Crie um if bloco testado para ver se a caixa de pesquisa relevante tinha um valor.
• Defina a selectCommand variável como uma nova instrução SQL.
• Defina a searchTerm variável para o valor a ser passado para a consulta.

Aqui está o bloco de código completo, que contém a nova lógica para uma pesquisa de título:

@{
    var db = Database.Open("WebPagesMovies") ;
    var selectCommand = "SELECT * FROM Movies";
    var searchTerm = "";

    if(!Request.QueryString["searchGenre"].IsEmpty() ) {
        selectCommand = "SELECT * FROM Movies WHERE Genre = @0";
        searchTerm = Request.QueryString["searchGenre"];
    }

   if(!Request.QueryString["searchTitle"].IsEmpty() ) {
        selectCommand = "SELECT * FROM Movies WHERE Title LIKE @0";
        searchTerm = "%" + Request["searchTitle"] + "%";
    }

    var selectedData = db.Query(selectCommand, searchTerm);
    var grid = new WebGrid(source: selectedData, defaultSort: "Genre", rowsPerPage:8);
}

Aqui está um resumo do que este código faz:

• As variáveis searchTerm e selectCommand são inicializadas na parte superior. Você definirá essas variáveis para o termo de pesquisa apropriado (se houver) e o comando SQL apropriado com base no que o usuário faz na página. A pesquisa padrão é um procedimento simples para obter todos os filmes armazenados do banco de dados.
• Nos testes para searchGenre e searchTitle, o código define searchTerm como o valor que você deseja pesquisar. Esses blocos de código também configuram selectCommand com um comando SQL apropriado para essa pesquisa.
• O db.Query método é invocado apenas uma vez, usando qualquer comando SQL em selectedCommand e qualquer valor em searchTerm. Se não houver nenhum termo de pesquisa (nenhum gênero e nenhuma palavra de título), o valor será uma cadeia de searchTerm caracteres vazia. No entanto, isso não importa, porque nesse caso a consulta não requer um parâmetro.

Testando o recurso de pesquisa de título

Agora você pode testar sua página de pesquisa concluída. Execute Movies.cshtml.

Insira um gênero e clique em Pesquisar Gênero. A grade exibe filmes desse gênero, como antes.

Insira uma palavra de título e clique em Pesquisar Título. A grade exibe filmes que têm essa palavra no título.

Deixe as duas caixas de texto em branco e clique em qualquer um dos botões. A grade exibe todos os filmes.

Combinando as consultas

Você pode notar que as pesquisas que você pode executar são exclusivas. Você não pode pesquisar o título e o gênero ao mesmo tempo, mesmo que ambas as caixas de pesquisa tenham valores neles. Por exemplo, você não pode pesquisar todos os filmes de ação cujo título contém "Aventura". (Como a página está codificada agora, se você inserir valores para gênero e título, a pesquisa de título obterá precedência.) Para criar uma pesquisa que combine as condições, você teria que criar uma consulta SQL que tenha sintaxe como a seguinte:

SELECT * FROM Movies WHERE Genre = @0 AND Title LIKE @1

E você teria que executar a consulta usando uma instrução como a seguinte (aproximadamente falando):

var selectedData = db.Query(selectCommand, searchGenre, searchTitle);

Criar uma lógica para permitir muitas permutações de critérios de pesquisa pode se tornar um pouco complexo, como você pode ver. Portanto, vamos parar aqui.

A seguir

No próximo tutorial, você criará uma página que usa um formulário para permitir que os usuários adicionem filmes ao banco de dados.

Lista completa para página de filmes (atualizada com pesquisa)

@{
    var db = Database.Open("WebPagesMovies") ;
    var selectCommand = "SELECT * FROM Movies";
    var searchTerm = "";

    if(!Request.QueryString["searchGenre"].IsEmpty() ) {
        selectCommand = "SELECT * FROM Movies WHERE Genre = @0";
        searchTerm = Request.QueryString["searchGenre"];
    }

    if(!Request.QueryString["searchTitle"].IsEmpty() ) {
        selectCommand = "SELECT * FROM Movies WHERE Title LIKE @0";
        searchTerm = "%" + Request["searchTitle"] + "%";
    }

    var selectedData = db.Query(selectCommand, searchTerm);
    var grid = new WebGrid(source: selectedData, defaultSort: "Genre", rowsPerPage:3);
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Movies</title>
    <style type="text/css">
      .grid { margin: 4px; border-collapse: collapse; width: 600px; }
      .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
      .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
      .alt { background-color: #E8E8E8; color: #000; }
    </style>
  </head>
  <body>
    <h1>Movies</h1>
      <form method="get">
        <div>
        <label for="searchGenre">Genre to look for:</label>
        <input type="text" name="searchGenre" value="@Request.QueryString["searchGenre"]" />
        <input type="Submit" value="Search Genre" /><br/>
        (Leave blank to list all movies.)<br/>
        </div>

        <div>
          <label for="SearchTitle">Movie title contains the following:</label>
          <input type="text" name="searchTitle" value="@Request.QueryString["searchTitle"]" />
          <input type="Submit" value="Search Title" /><br/>
        </div>
      </form>

    <div>
      @grid.GetHtml(
        tableStyle: "grid",
        headerStyle: "head",
        alternatingRowStyle: "alt",
        columns: grid.Columns(
          grid.Column("Title"),
          grid.Column("Genre"),
          grid.Column("Year")
        )
      )
    </div>
  </body>
</html>

Recursos adicionais

• Introdução à programação web ASP.NET usando a sintaxe Razor
• Cláusula SQL WHERE no site do W3Schools
• Artigo Definições de Método no site do W3C