Home Tutoriais Desenvolvimento Uso de WebGrid Helper


Iniciaremos WebMatrix e selecionaremos criar  um novo projeto baseando-nos em um layout (Template).

Dentro dos layouts disponíveis escolheremos Site vazio (Inglês), lhe daremos o nome de MercadoDoAutomovel-XML (optamos por retirar o acento) e clicaremos sobre o botão OK.

Inicialmente nos encontraremos na visão de Site. Clicamos sobre Files e passamos a visualizar o painel de Files.

Iniciaremos criando a pasta na que alojaremos a base de dados de nosso projeto. Deve denominar-se App_Data e encontrar-se na raiz do diretório de nosso projeto. Clicamos com o botão direito do mouse sobre o nome do projeto e y selecionamos New Folder.

Damos a ele o nome indicado e pressionamos a tecla Retorno. A seguir, clicamos sobre o nome da pasta com o botão direito do mouse e selecionamos Add Existing File.

Se abrirá uma caixa de diálogo para localizar o arquivo a ser incluído na pasta. Temos de localizar os arquivos de base de dados XML Vendas-2010-01-06.xml e Vendas-2010-01-06.xsd. Se os salvamos em documentos, ali a localizaremos e se criará uma copia de eles na nossa pasta App_Data.

Posteriormente poderemos ver a base de dados em nosso projeto, se não for assim , pressione o botão direito do mouse sobre a referência do nome do projeto e selecione Refresh.

Na visão Files clicamos com o botão direito do mouse sobre o nome de nosso projeto e selecionamos New File.

Se abrirá a janela Choose a File Type e selecionamos CSHTML, lhe damos o nome VendasXMLWebGrid-Linq.cshtml e pressionamos sobre o botão OK.

Aparecerá a referencia de VendasXMLWebGrid-Linq.cshtml na árvore de referencias de nosso projeto (se não o virmos, clique com o botão direito do mouse sobre el nome de nosso projeto e selecionar Refresh).

Para utilizar a base de dados em um WebGrid, clicamos duas vezes sobre o nome do arquivo VendasXMLWebGrid-Linq.cshtml, passar a modo edição no painel da direita, selecionamos todo o seu conteúdo e o substituímos, simplesmente, pelo seguinte código:

@using System.Xml.Linq

@{
var file = XDocument.Load(Server.MapPath(@”/App_Data/Vendas-2010-01-06.xml”));
var results = from e in file.Root.Elements()
select new { Marca = e.Element(“Marca”).Value, Vendas = e.Element(“Vendas”).Value };
var grid = new WebGrid(results);
}

<!DOCTYPE html>

<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title></title>
</head>
<body>
<h1>Vendas de automóveis</h1>
@grid.GetHtml();
</body>
</html>

Diferentemente do que acontecia com as bases de dados SQL, com as XML temos de utilizar o Framework denominado Linq to XML, daí a primeira declaração Razor do arquivo:

@using System.Xml.Linq

Posteriormente tudo segue de uma maneira bastante similar, se realiza a varga do arquivo XML e se consulta -uma consulta não SQL- dos campos que desejamos incluir no WebGrid, passando , finalmente, os resultados ao WebGrid do documento, como no caso de uma base de dados SQL, que vimos no exemplo anterior:

@{
var file = XDocument.Load(Server.MapPath(@”/App_Data/Ventas-2010-01-06.xml”));
var results = from e in file.Root.Elements()
select new { Marca = e.Element(“Marca”).Value, Vendas = e.Element(“Vendas”).Value };
var grid = new WebGrid(results);
}

Finalmente, pressione com o botão direito do mouse sobre o nome do arquivo (VendasXMLWebGrid-Linq.cshtml, no nosso exemplo) e selecione a opção Launch in browser, nos mostrará seu conteúdo no explorador.

Com o WebGrid Helper em ação, temos a possibilidade de realizar ordenações simples, em função do cabeçalho dos campos da base de dados (as colunas da tabela). Por exemplo, clique sobre Marca e obterá os registros ordenados alfabeticamente por este campo.

Fonte: http://www.criarweb.com/artigos/uso-webgrid-helper.html

   

Leave a Reply

This blog is kept spam free by WP-SpamFree.