Passo a Passo: Criando um aplicativo com Dados AJAX Ativados
Esse passo a passo descreve como criar um aplicativo Web com AJAX ativado que pode funcionar como uma lista de tarefas.Ele te ajuda a criar um interface básica para criação, gerenciamento, e exclusão de listas e itens nessas listas.Todos os a inserção, Atualizar, excluir, classificar e paginação operações são executadas dentro uma UpdatePanel controle que usa AJAX.
Você pode usar o UpdatePanel Controle para ativar assíncronas postagens em uma página.Por definição, ASP.NET atualiza a página inteira quando um postback ocorre.No entanto, quando você usar o UpdatePanel controle para criar postagens assíncronas, apenas os elementos de página que são dentro de UpdatePanel controle são alterados.Isso faz com que a página seja mais dinâmica e mais rápida, e isso proporciona uma experiência mais rica ao usuário.
Tarefas ilustradas nesta explicação passo a passo incluem o seguinte:
Criação de um banco de dados SQL e adição de dados.
Adicionando um LinqDataSource Controlar a uma página.
Adicionando um Classes LINQ para SQL Arquivo.
Usando o ListView Controle para exibir, editar e excluir dados.
Usando o LinqDataSource Controle para se conectar a um banco de dados usando Language-Integrated Consulta (LINQ).Para obter mais informações, consulte Language-Integrated Query (LINQ).
Usando o UpdatePanel Controle para adicionar funcionalidade de AJAX à página.
Pré-requisitos
Para concluir a explicação passo a passo, você precisará do seguinte:
Microsoft ou .Para Baixar informações, consulte o Visual Studio Development Center Site da Web.
SQL Server Express Edition instalado em seu computador.Se você possui o SQL Server instalado, você pode usá-lo, mas deve fazer pequenos ajustes em alguns procedimentos.
Criando um site da Web
Nesta parte da explicação passo a passo, você irá criar um site e adicionar uma nova página a ele.Na próxima seção, você se conectará à um banco de dados.Se você já tiver criado um site da Web (por exemplo, seguindo as etapas no. Demonstra Passo a passo: Criando uma página da Web básica no Visual Web Developer, você poderá usar esse site para este exame Através.Caso contrário, crie um novo site seguindo as seguintes etapas.
Para criar um novo site de sistema de arquivos
Em Visual Web Developerin a File Menu, clique em NovoSite.
O Novo Site da Web caixa de diálogo é exibida.
Em Modelos Visual Studio instaladoClique em Web Site ASP.NET.
Na Local caixa, clique em Sistema de arquivos e tipo o nome da pasta na qual você deseja manter as páginas do site da Web.
Na Linguagem lista, clique em Visual Basic ou **Visual C#**e em seguida, clique em OK.
.gif "Observação")
Observação:A linguagem de programação que você escolheu será o padrão para o site Web, mas você pode definir a linguagem de programação para cada página individualmente.
Visual Web Developer Cria a pasta e um Nova Página nomeado Padrão.aspx.
Criando um novo banco de dados do SQL Server
Agora que você tenha um site da Web, a Avançar etapa é criar um banco de dados e adicionar uma referência ao banco de dados em Server Explorer.(No , Server Explorer é denominado Banco de Dados Do Explorer.) Quando você Adicionar um banco de dados para Server ExplorerVocê pode usar Visual Studio Para adicionar tabelas, procedimentos armazenados, Exibições e assim por diante.Você também pode exibir os dados da tabela ou criar suas próprias consultas à mão ou graficamente, usando o Construtor de consultas a janela.
Para adicionar um novo banco de dados ao projeto
Em Explorer soluçãoClique com o botão direito do mouse o nome do site da Web em Adicionar novo item.
O Adicionar novo item caixa de diálogo é exibida.
Select SQL DatabaseNomeie o banco de dados Tarefas.mdf e depois clique em OK.
Quando Visual Studio pergunta se o banco de dados deve ser armazenado na pasta App_Data, clique em Sim.
Criando um esquema e um exemplo de dado para o banco de dados
Você pode usar o design de banco de dados e ferramentas de edição para criar um esquema para a nova tabela que guardará os itens tarefas.
Criando um esquema e um exemplo de dado para o banco de dados
Em Explorer soluçãoAbrir o App_Data Pasta e Duplo - clique em Tasks.mdf.
A hierarquia de árvore do banco de dados tarefas é exibida no Server Explorer (ou Banco de Dados Do Explorer).
Clique com o botão direito do mouse o Tabelas Pasta e, em seguida, clique em Adicionar nova tabela.
No editor de tabelas de banco de dados, crie as seguinte colunas na tabela:
Nome da coluna
Tipo de dados
Propriedades
taskId
int
Permitir nulos:No
taskName
nvarchar(50)
Permitir nulos:No
dateCreated
datetime
Permitir nulos:No
isComplete
bit
Permitir nulos:No
Clique com o botão direito do mouse na linha que contém TaskID e em seguida, clique em Definir chave primária.
Com o TaskID Linha ainda Selecionado, in a Propriedades da coluna Guia, abrir o Identificar especificação seção e, em seguida, definir (É identidade) para Sim.
Salvar a tabela e nomeie-TasksLista.
Clique com o botão direito do mouse na tabela na Server Explorer e clique em Mostrar tabela de dados.
Uma janela é exibida onde você pode exibir e adicionar dados.
Adicione quatro ou cinco registros à tabela, e então feche o designer de banco de dados.
Não é necessário especificar um valor para TaskIDporque ela é uma coluna de identidade cujo valor é atribuído automaticamente.Você deve especificar um Falso ou True Para o isComplete Campo.
Criando um Controle de Acesso à Dados
Nesta seção, você usará o LinqDataSource controlar e criar classes que representam entidades de banco de dados.O controle e as classes que são criada são as camadas de acesso à dados que serão usadas nesse tutorial.
O LinqDataSource Controle expõe idioma integrada de consulta (LINQ) para Desenvolvedores da Web por meio de dados do ASP.NET - arquitetura controle do código-fonte.O LinqDataSource Controle cria o código para selecionar, inserir, atualizar e excluir objetos no banco de dados.LINQ utiliza os princípios de programação orientada à objetos para dados relacionais.Isso fornece uma modelo de programação unificado para requisitar e atualizar dados de diferentes fontes e estende as capacidades dos dados diretamente para o C# e Visual Basic languages.Para obter mais informações sobre LINQ, consulte Language-Integrated Query (LINQ).
Mapeando o Banco de Dados de Tarefas para um Objeto de Contexto de Dados SQL
Para iniciar a criação de camadas de acesso de dados, você adiciona um dataset tipado ao projeto.
Para criar a classe para a tabela TaksList
Se o site ainda não tiver uma pasta App_Code, no. Explorer soluçãoClique com o botão direito do mouse o nome do site, clique em Adicionar pasta ASP.NETe em seguida, clique em App_Code.
Clique com o botão direito do mouse na pasta App_Code e em seguida, clique em Adicionar novo item.
Em Modelos Visual Studio instaladoSelecione Classes LINQ para SQLRenomear o arquivo para Tasks.dbml e em seguida, clique em Adicionar.
O Object Relational Designer é exibida.
Em Server ExplorerArraste a tabela TasksList em de Object Relational Designer a janela.
Salve o arquivo Tasks.dbml.
Quando você Salvar o arquivo Visual Studio cria dois arquivos a App_Code Pasta em Tasks.dbml.O primeiro arquivo é Tasks.dbml.Layout.O segundo arquivo é Tasks.designer.cs ou Tasks.designer.vb, the Pendente no idioma que você selecionou quando você criou o arquivo Tasks.dbml.
Em Explorer soluçãoAbrir o arquivo Tasks.designer.cs ou Tasks.designer.vb.
Observe que o código contém classes chamadas TasksDataContext e TasksList.O TasksDataContext classe representa o banco de dados e o TasksList classe representa os dados Tabela de Base.O parâmetro Menos construtor para o TasksDataContext Classe lê o Cadeia de Caracteres da Conexão do arquivo web.config.
Abra o arquivo Web.config.
Observe que uma conexão Cadeia de Caracteres para a Tasks.mdf Banco de dados tenha sido adicionado na connectionStrings Elemento.
Fechar o arquivo de classe a Object Relational Designer janela e o arquivo web.config.
Criando e configurando um Controle LinqDataSource
Agora que você tenha um tabela de banco de dados e as classes que representam entidades de banco de dados, você pode usar um LinqDataSource Controle em um página da Web o ASP.NET para acessar o banco de dados.
Criando e configurando um Controle LinqDataSource
Abra ou alterne para a página Default.aspx.
Switch Para Design Exiba.
Arraste um LinqDataSource controlar até a página.
Você pode deixar o ID a propriedade como LinqDataSource1.
Na Tarefas LinqDataSource Marca Inteligente Image, clique em Configurar fonte de dados.
Observação:Se o Marca Inteligente painel não for exibido, clique com o botão direito do mouse o LinqDataSource Controle e em seguida, clique em Mostrar marcas inteligentes.
Na Escolha seu objeto de contexto Na lista, selecione TasksDataContexte em seguida, clique em Next.
Na Tabela Na lista, selecione **TasksListas (tabela < TasksList >)**e em seguida, clique em Finish.
A partir de Tarefas LinqDataSource menu, selecione Habilitar exclusão, Ativar inserire Ativar atualização.
Note que você não precisa especificar qualquer comando de banco de dados para selecionar os dados.
Salve a página.
Usando o Controle de Fonte de Dados
Nessa seção, você irá adicionar controles à página que usa o arquivo LINQ to SQL Classes que mapeou a tabela de banco de dados à classes.Você também usará o LinqDataSource controle para criar um Basic de dados de aplicativos.
Você adicionará um ListView Controle para exibir dados de um banco de dados SQL Server.Você, em seguida, adicionará um DropDownList Controlar a Filtro os dados que aparecem na ListView o controle.Posteriormente no explicação passo a passo você colocará os controles em um UpdatePanel Controle para adicionar recursos postback assíncrono.
Exibindo os Dados com um Controle ListView
O ListView o controle é útil para exibir dados em qualquer estrutura de repetição, semelhante de DataList e Repeater Controles.No entanto, diferentemente desses controles, o ListView controle oferece suporte a Editar, inserir e exclusão de operações, bem como a classificação e paginação.
Você adicionará um ListView controle que mostra todas as tarefas.Mais tarde, você adicionará uma lista suspensa que te permite filtrar os dados.O ListView Controle Formatos a apresentação dos dados e exibe botões que podem ser usado para editar e atualizar o conteúdo, ou inserir o novo conteúdo.
Para adicionar um controle ListView a página
Abra ou alterne para a página w aqui é adicionado a LinqDataSource o controle.
A partir de Dados Guia das ToolbarArraste um ListView controlar até a página.
Na Tarefas de ListView Menu, in a Escolher fonte de dados Na lista, selecione LinqDataSource1.
Isso vincula o ListView Para o LinqDataSource controle que você configurou anteriormente no explicação passo a passo.
Na Tarefas de ListView Marca Inteligente Image, clique em Configurar ListView.
Na Configurar ListView caixa de diálogo, selecione Habilitar edição,Habilitar Inserção,Habilitar exclusãoe Habilitar paginação.
Clique em OK.
Salve a página.
Adicionando um Controle DropDownList para Filtrar os Dados
Você pode filtrar os dados que são exibidos na ListView Controle criando um Soltar-Para Baixo list que permite que você Selecionar quais tarefas para mostrar.Para esse exemplo, você criará uma lista que exibir tanto tarefas que estão ativas quanto tarefas que foram completadas.
Você pode colocar código na ListView Controle para gerar Automáticomaticamente um local para exibir somente os registros que correspondem à seleção na cláusula de DropDownList o controle.
Adicionando um controle para filtrar dados
Abrir ou alterne para a página default.aspx e alternar para Origem Exiba.
Dentro de Formulário Elemento e acima de ListView Controle, Adicionar marcação a seguir:
< intervalo ID = "filtro" > Atual lista de Filtrar: < ASP:DropDownList ID = "DropDownList1" AutoPostBack = "Verdadeiro" runat = "server" > < ASP:ListItem texto = "ativo" Valor = "false" / ≫ < ASP:ListItem texto = "concluído" Valor = "true" / ≫ < / ASP:DropDownList > < / intervalo > < hr ID = "Separadores" / ≫Na LinqDataSource Controlar, defina o AutoGenerateWhereClause Propriedade para verdadeiroConforme mostrado no exemplo o seguir:
< ASP:LinqDataSource ID = "LinqDataSource1" runat = "server" ConTextoTypeNome = "TasksDataConTexto" TableName = "TasksListas" EnableExcluir = "true" EnableInsert = "true" EnableUpdate = "true" AutoGenerateWhereClause = "true">Adicionar marcação a seguir para onde os parâmetros entre a Abrindo e marcas de fechamento de LinqDataSource o controle.
< WhereParâmetros > < ASP:ControlParâmetro nome = "isConcluir" ControlID = "DropDownList1" Tipo = "booleano" / ≫ < / WhereParameters >Salve a página.
Você pode agora testar a página para certificar-se que ela exibe os dados que você selecionou.
Para testar a página
Pressione CTRL+F5 para exibir a página no navegador.
Select Completed a partir de drop-down list.
Se você possui tarefas que estão marcadas como concluídas, você verá apenas essas tarefas.
Adicionando Funcionalidade AJAX à página
Nesta seção você adicionará um ScriptManager Controlar para a página para habilitar os AJAX recursos do ASP.NET.Você, em seguida, adicionará um UpdatePanel Controle para a página, que permite que você por Tarefas de Formulário in a ListView Controle sem um Completo página postback.
Adicionando um Controle ScriptManager
Para usar quaisquer recursos ASP.NET AJAX, como o UpdatePanel o controle, você deve adicionar um ScriptManager controlar até a página.
Para adicionar um controle ScriptManager à página.
Abrir ou alterne para a página default.aspx e alternar para Origem Exiba.
Na AJAX extensões guia da caixa de ferramentas, clique duas vezes o ScriptManager controle para adicioná-lo para a página dentro de Formulário Elemento.
Colocando o Controle ListView em um Controle UpdatePanel.
Para esse exemplo, você colocará o ListView Em um UpdatePanel o controle.Altera para o ListView Controle não exigirá um postback completo.
Colocando o Controle ListView em um Controle UpdatePanel.
Na página default.aspx, adicione a marcação a seguir diretamente após a abertura < formulário > marca:
< ASP:UpdatePanel ID = "UpdatePanel1" runat = "server" > < ContentModelo >Adicione o seguinte código diretamente antes de fechamento < / formulário > marca:
< / ContentTemplate > < / ASP:UpdatePanel >Esse código coloca um UpdatePanel Controle ao redor de ListView controle e a DropDownList o controle.
Salve a página.
Agora você pode testar a página.
Para testar a página
Pressione CTRL+F5 para exibir a página no navegador.
Observe que quando você seleciona Active ou Completed do filtro de lista, um postback completo não ocorrerá e a ListView Exibe a lista atualizada dos dados sem um cintilação.
Próximas etapas
Essa explicação passo a passo como adicionar mostramos um ListView Para uma página com um LinqDataSource Controle para adicionar, modificar e excluir as tarefas de um banco de dados.Você, em seguida, adicionados a funcionalidade de AJAX usando o UpdatePanel o controle.
Você pode obter mais informações sobre como trabalhar com dados Bases em orientações como Demonstra Passo a passo: Ligação para um objeto de negócios Personalizar de dados e Explicação Passo a Passo: Criando Páginas Web Mestre/Detalhes no Visual Studio.