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↳JavaScript116 conteúdosJavaScript em 2020: O que esperarDev (Back & Front) · jan 2020Campos públicos e privados em classes JavaScript – O que vem por aí no ESNextDev (Back & Front) · abr 201929 anos de JavaScript!Dev (Back & Front) · jan 2025Ver tudo em Dev (Back & Front) →. 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↳Banco de dados134 conteúdosSQL ou NoSQL: eis a questão!!Data · mar 2020Banco de dados: como organizar e dar segurança para milhões de dados de loteriasData · mai 20215 serviços gratuitos na cloud para bancos de dados PostgresData · fev 2025Ver tudo em Data →. 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.