Guida Aspnet Lezione 6. Interfaccia Utente Basata sui Dati del Database Ms Sql

Ora che abbiamo visto come realizzare anche le interrogazioni facciamo un passo ulteriore, ossia la visualizzazione tramite il Visual C# su video relativamente alla connessione effettuata con il Database Microsoft Sql Server o MS Sql, introdurremo cioe’ i dataset.

I Dataset di Aspnet per leggere il database MS Sql

Quindi apriamo nuovamente il progetto Personal Portal se prima l’avevamo chiuso eselezionando Esplora soluzioni, aggiungiamo nuovo elemento e questa volta selezioniamo DataSet e nel campo nome mettiamo il seguente valore ToDoDataSet

e clicchiamo su si alle finestre che si aprono, in questo modo il file verrà posizionato dentro la cartella App_Code.

A questo punto aprimao il file PPDatabase in Esplora Database e cliccate sulla tabella creata e come suggerisce la scritta della pagina del dataset trascinate la tabella nello spazio, se tutto è andato a buon fine questo è quello che otterrete visualizzato.

Quello che avete creato si chiama Datatable ossia una rappresenzatione virtuale del database, alcune voltre si trova anche con la dicitura database virtuale. Sotto notiamo anche la scritta ToDoTableAdapter, questo invece si chima un TableAdapter e rappresenta come si possono aggiungere, aggiornare e eliminare i dati memorizzati in un datatable, come potete vedere è gia’ stato creato un metodo Fill. Vediamo adesso come possiamo configurarlo.

Clic destro sul metodo Fill sul metodo di ToDoTableAdapter e dalla schermata che segue selezionate Configura.

Nella finestra che si è aperta la Query è gia’ stgata scritta, selezioniamo adesso Generatore di Query

e praticamente siamo ritornati alla schermata gia’ incontrata alcune volte fa. Anche qui avremmo potuto mettere la clausola Where e ottenere i soliti risultati.

Si puo’modificare il metodo esistenze ma vediamo adesso come crearne uno partendo da zero. Sempre con il file ToDoDataSet.xsd aperto in progettazione procediamo come segue.

Clicc destr sulla sezione ToDoTableAdapter con ToDoDataSet.xsd sulla superficie di progettazione.

Selezionare Aggiungi Query, digitare avanti nelle successive finestre, quella che ci richiede di utilizzare sql e quella che richiede l’utilizzo di Select.

A questo punto cliccare su Generatore di Query e vediamo il risultato, ma possiamo fare molto di piu’ ad esempio nel pannello SQL quello per intendersi dove è scritto

SELECT ToDoId, Name, Complete

From To Do

Aggiungete la seguente scritta

WHERE Complete = @IsComplete

questo @IsComplete ossia la chiocciolina seguta da un nome viene chiamato parametro dinamico e ha lo scopo appunto di variare dinamicamente la scelta, infatti clicchiamo su Esegui Query e si aprirà una finestrella che ci chiederà di settare il parametro

Noi lo settiamo su False e dgt Ok a questo punto il VWD visualizza il risultato della nostra Query

Digitando Ok il VWD visualizza appunto la query opportunamente modificata clicchiamo a questo punto su avanti e selezioniamo solamente Restituisci un DataTable.

Digitare GetToDoByStatus nel campo nome metodo che rappresenta cosa fa la query.

Clicchiamo su avanti a questo punto ci appare la schermata di chiusura e digitiamo fine. il Componente dovrebbe apparire nella finestra di progettazione del sistema se tutto è andato a buon fine ovviamente

………………………………………..

…………………………………………

Ora che abbiamo visto come si crea il dataset procediamo a creargli l’interfaccia utente vera e propria. Riprendiamo il nostro default.aspx e modifichiamo cosi’ fino ad ottenere il seguente risultato

Abbiamo cioè definito la nostra interfaccia Content che conterrà l’intefaccia per il Database ToDo

Creiamo dunque la nostra interfaccia grafica ma non con i dati contenuti nel database ma nel dataset creando un controll DropDownList

Per il momento seguite le istruzioni che vi diamo poi alla fine spiegheremo il tutto.

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
<asp:ListItem Selected="True" Value="False">Not Done</asp:ListItem>
<asp:ListItem Value="True">Done</asp:ListItem>
</asp:DropDownList>

in pratica queste due righe significano che avremo un menu a tendina avente i valori Done e Not Done ma con selezionato il valore Not Done.

Inseriamo ora il controll Grid View o trascinandolo nel file da Progettazione oppure aggiungendo le righe nell’origine

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
</asp:GridView>

Andiamo adesso in progettazione e sulla freccia relativa al Gridview facciamo tast destro del mouse

e selezioniamo nuova origine dei dati in scegli rigine dei dati, nella successiva schermata che si apre scegliere oggetto e ObjectDataSource1 ed infine Ok. Nel menu successivo che si apre selezionare

ToDoDataSetTableAdapters.ToDoTableAdapter e cliccare avanti, nella successiva pagina selezinare Control nella richiesta dell’rigine dei parametri e Selezinare DropDownList1 dal menu a discesa del ControllID abbiam finito cliccare Finish.

In pratica abbiamo associato i dati contenuti nel dataset (non database) all’oggetto ObjectDataSource1 che si occupera’ di visualizzarli nell’interfaccia.

A questo punto eseguite e verificate. Il listato grosso modo che vi dovreste trovare in default.aspx è iil seguente.

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile ="~/MasterPages/PersonalPortal.master" CodeFile="~/Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="SomeContent" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<div id='myMap' style ="position:relative; width:600px; height:400px" > </div>

What:<input id="txtWhat" type="text" name="txtWhat" />
Where:<input id="txtWhere" type="text" name="txtWhere" />
<input id="find" type="button" value="Find" name="find" onclick="Find(txtWhat.value,txtWhere.value);" />
Status:
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
<asp:ListItem Selected="True" Value="False">Not Done</asp:ListItem>
<asp:ListItem Value="True">Done</asp:ListItem>
</asp:DropDownList>

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
AllowSorting="True" AutoGenerateColumns="False" 
DataSourceID="ObjectDataSource1">
<Columns>
<asp:BoundField DataField="ToDoId" HeaderText="ToDoId" InsertVisible="False" 
ReadOnly="True" SortExpression="ToDoId" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:CheckBoxField DataField="Complete" HeaderText="Complete" 
SortExpression="Complete" />
</Columns>


</asp:GridView>

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
InsertMethod="Insert" OldValuesParameterFormatString="original_{0}" 
SelectMethod="GetToDoByStatus" 
TypeName="ToDoDataSetTableAdapters.ToDoTableAdapter">
<SelectParameters>
<asp:ControlParameter ControlID="DropDownList1" Name="IsComplete" 
PropertyName="SelectedValue" Type="Boolean" />
</SelectParameters>
<InsertParameters>
<asp:Parameter Name="Name" Type="String" />
<asp:Parameter Name="Complete" Type="Boolean" />
</InsertParameters>
</asp:ObjectDataSource>

</asp:Content>

Come potete vedere è possibile visualizzare i dati ma non è possibile cambiarli, diciamo per esempio che ad un certo punto un processo risulta completato e quindi vogliamo modificare tale valore.

Quindi andiamo su origine di ToTableAdapter di ToDoDataSet.xsd e tasto destro aggiungiamo una query, selezioniamo Uso Sql e avanti dopo selezioniamo UPDATE

Clicchiamo su Generatore di Query e dopo ok, nel riquadro superiore aggiungiamo una tabella con il tastro destro del mouse e clicca chiudi, nello spazio Sql andiamo a scrivere

UPDATE ToDo
SET Name = @Name, Complete = @Complete
WHERE (ToDoId = @original_ToDoId)

dove l’ultima riga viene interpretata come ToDoId= orginale chiave primaria.

Nella pagina successiva , lasciare il nome di default UpdateQuery e dgt fine.

Andiamo adesso a modificare il GridView nel default.

Quindi si seleziona il controllo ToDo GridView nel designer. Da qui modifica Colonna e si soccre fin quando non si trova CommandField.

Si seleziona Modifca, Aggiorna, Annulla e si clicca aggiungi. Si sposta nello spazio Sottostante tramite l’utilizzo delle frecce Modifica, Aggiorna, Annulla in prima posizione. Si clicca su Ok

A questo punto sempre su Designer si va sul ObjectDataSource1 sotto il controllo GridView e si selezione Configura soregente dati, cliccare su Update e selezionare UpdateQuery e cliccare finish

Il Gioco è fatto cliccare su Run e verificare il risultato ottenuto.