WebMatrix e JQuery Forms

Temos recebido alguns pedidos através de fóruns e e-mail sobre exemplos que mostram como criar forms alimentados por AJAX. Vamos montar então um pequeno exemplo para adicionar um registro no banco utilizando JQuery.

Este artigo é baseado no WebMatrix Beta 1. Alguns itens foram alterados nas versões finais.

Provavelmente, o JQuery é a biblioteca mais popular do JavaScript. Ele foi
criado para proporcionar funcionalidades simples, para questões até então complexas do Javascript, o que torna relativamente fácil para iniciantes criar efeitos fantásticos com pouco conhecimento em Javascript. Esse é o perfil do desenvolvedor que normalmente utiliza o WebMatrix: procura soluções rápidas e fáceis.

A
pasta de scripts é gerada automaticamente e preenchida com uma
variedade de arquivos javascript, incluindo uma versão da biblioteca
central.

O
primeiro arquivo que vamos utilizar é a última biblioteca jQuery (1.4.2
agora), e então você precisa navegar até a parte de download da
interface do usuário. Escolha todas as partes da interface do usuário do
core, e depois escolha Draggable e Resizableda na seção de Interações, seguido por Button, de Dialog e DatePicker de Widgets. Finalmente, selecione destaque da seção Effects, que irá garantir que o core será automaticamente selecionado. Deixei o tema como o padrão de UI Lightness, embora você possa escolher qualquer que você preferir. Depois
de clicar em download, você receberá um pequeno pacote que inclui um
arquivo js e css personalizados para o seu tema escolhido e componentes.

Vamos começar a exemplificar. Como mencionei anteriormente, este exemplo é simples e mostra como inserir um registro em um banco de dados. Para seguir de forma simples, vou focar apenas nas partes centrais da
“aplicação” para ilustrar como as coisas são feitas, sem qualquer
validação real ou manipulação de erro.

A
parte principal do exemplo é uma única página chamada Default.cshtml,
que contém um formulário de entrada de dados para adição de livros, e
uma tela para exibir os dados atuais. Um
botão irá chamar o formulário em um diálogo modalmodal dialog, e quando o
formulário foi preenchido e enviado, a tela será atualizada para
mostrar a entrada do novo livro na parte superior da página de dados.

A tela será gerada a partir de um segundo arquivo chamado
BookGrid.cshtml, que está incluído no Default.cshtml usando o método RenderPage
(). O método para adicionar uma entrada no banco de dados está de forma separado, para sua melhor conveniencia.

Veja abaixo o código para o formulário de entrada de dados no Default.cshtml:

Este código é quase idêntico ao formulário básico que usamos, mas há três diferenças. O atributo de ação para o formulário aponta para uma URL diferente (/Métodos/AddBook), e o form é envolvido em um div. Finalmente temos uma ID de modo que ele pode ser referenciado com facilidade usando jQuery. No topo da página, um código é adicionado para receber os dados do banco de dados para preencher a lista para autores e categorias:

Em seguida, é necessário algum código para recuperar dados e gerar o html. Isto está em um arquivo chamado BookGrid.cshtml, e é colocado em uma pasta chamada Parciais:

Você deve observar 2 coisas:

Inicialmente, repare que o grid é Ajaxified, onde a propriedade ajaxUpdateContainerId é definida no construtor. Em segundo lugar, os estilos das tabelas e do cabeçalho foram definidos a partir do tema CSS jQuery. Você verá sua cara um pouco mais tarde. Mas, em sua essência, vamos renderizar um html <table>. Este arquivo deve ser referenciado a partir do arquivo Default.cshtml para que a tabela renderizada possa ser incluída juntamente com um botão para adicionar novos livros:

Se você executar a página agora, vai encontrar uma grande bagunça. Precisamos da referência de alguns arquivos CSS e os arquivos jQuery, e então usar jQuery para criar alguma “mágica”.

Primeiro, inclua o código abaixo no head do Default.cshtml.

Agora veja a parte principal do jQuery. Todo o código está aí, incluindo as explicações:

A primeira parte do código cria uma caixa de modal dialog a partir do conteúdo da div dialog-form. Isso irá escondê-lo quando a página for requisitada. Algumas opções são definidas como termos de altura e largura da caixa de diálogo, juntamente com um argumento que diz o formulário não abrir automaticamente.

Em seguida, os botões no formulário são adicionados. Um deles é chamado Add Book. Clique nele. O jQuery é usado para organizar o conteúdo e postá-lo de forma assíncrona para a URL Métodos/AddBook. Com isso iremos conhecer o arquivo AddBook.cshtml, em uma pasta chamada Métodos. Veremos o que ele faz depois.

Se a requisição do AJAX for bem sucedida, o formulário está fechado, e as div com o id do “grid” serão carregadas apenas com a parte do HTML obtida de forma assíncrona com o arquivo Default.cshtml. O destaque do jQuery é aplicado para o livro recém-adicionado. O botão cancelar foi criado simplesmente para podermos fechar o formulário.

Precisamos fazer apenas mais 2 coisinhas. A primeira delas é aplicar o jQuery Datepicker no campo de Date Published, para que você possa controlar o formato que os dados são inseridos nessa caixa. E, finalmente, no botão Add Book, para termos uma aparência melhor. Realmente é tudo muito simples.

Este será nosso primeiro resultado.

Ao clicar no botão Add New Book, o formulário é exibido:

E finalmente, quando clicarmos no botão Add Book, o arquivo Methods/AddBook.cshtml é solicitado com os valores do formulário passados pelo Request.Form:

Este código assegura se estamos solicitando um POST, e então procura no Request.Form pelos valores desejados.

É isso aí. Simples e eficiente. No entanto, como afirmei no início do artigo, temos um mundo de possibilidades que podemos aplicar ao exemplo. Por exemplo, a validação do form.

Sintam-se a vontade para “brincar” com o código. Você pode fazer o donwload por aqui.