Guida al linguaggio di Programmazione ASPNET

Fabrizio S.

12 anni fa

Guida al linguaggio di Programmazione ASPNET

ASPNET ossia Active Server Pages e NeT sono due sistemi progettati da Microsoft per rendere facile lo scoraggiatane compito di creare pagine Web dinamiche , interattive e basate essenzialmente su dati.

Il suffisso .Net sta per Microsoft.NET Framework, introdotto nel 2002 e rappresenta il sistema di base di Aps , capirete meglio in seguito. Quando abbiamo iniziato la scrittura di questa mini guida avevamo a disposizione due possibili vie ossia la progettazione di Aspnet con visual basic oppure introdurre l’innovativo C sharp o piu’ semplicemente C#, che l’innovativo linguaggio introdotto da Microsoft che nelle linee guida ricalca il Java.

Per utilizzare Asp.net il primo passo da fare è quello di scaricare dalla pagina Web di Microsoft il programma Visual WeB Developer che tanto per rendere l’idea è un po’ come il php per Dreamweaver.

Lo potete trovare al seguente indirizzo

http://www.microsoft.com/express/vwd

Nel caso microsoft l’avesse spostato ricercatelo con google. Quindi Scaricate e procedete con l’installazione, e quindi terminate e avviate il programma

La prima schermata che troverete se tutto è andata bene è la seguente…

Vediamo adesso come creare la nostra primissima pagina web, ossia andiamo su nuovo file e dopo selezioniamo su web C#, e da li sulla successiva finestra web form

Vi apparirà il seguente listato che andiamo ad esaminare

<%@ Page Language=”C#” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<script runat=”server”>

</script>

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title></title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>

</div>
</form>
</body>
</html>

Quindi partendo dalla prima riga in alto abbiamo

<%@ Page Language=”C#” %>

è un markup significa che stiamo utilizzando una pagina ASP con linguaggio C#, la seconda riga

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

rappresenta lo standard della W3C organizzazioni che abbiamo utilizzato in questo foglio di stile…

mentre il rigo

indica al server che tale script verrà eseguito sul Server e a seguire tutto il codice html della pagina che come potete vedere per il momento è ancora ridotto veramente all’essenziale.. Nei prossimi capitoli incominceremo ad introdurre altro materiale..

I Comandi Server

Iniziamo adesso a vedere quelli che sono i comandi server, vi ricordare di avere gia’ visto l’attributo runat impostato su server. Iniziamo subito dicendovi che il codice C# che inseriremo nella nostra pagina web , dovra’ essere sempre racchiusa fra i tag di apertura e chiusura

<% e %>

Incominciamo subito dunque ad analizzare l’oggetto Response e scriviamo il seguente script

Response.Write(“I love”);

Response. Write(“<br/>”);

Response.Write (“Visual Web Developer”);

alla fine nel nostro VWD dovrebbe apparire scritto

<%@ Page Language=”C#” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<script runat=”server”>

</script>

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title></title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<%
Response.Write(“I love”);
Response. Write(“<br/>”);
Response.Write (“Visual Web Developer”);
%>

<br /> I ammo visual web developer <br />
</div>
</form>
</body>
</html>

Facciamo un passo successivo ossia abbiniamolo con l’oggetto Request.

Se il Browser ha necessità di passare ha necessità di passare informai al server, utilizza i parametri della query. Si tratta di coppie chiave/valore che tipicamente si vedono dopo le URL, ad esempio : http://www.moneycentral.msn.cm/detail/stock_quote?qdi&Symbol=MSFT

Questo esempio è una URL che punta al sito centrale MSN money per ricercare la quotazione del titolo Microsoft. Tutto ciò che si trova dopo il ? in http://www.moneycentral…… è un parametro costituito da una coppia nome/valore.

L’oggetto Request di Asp.net vi aiuta a processare questi parametri, pertanto andiamo a definire un parametra per mostrarvi come funziona. Esaminate il seguente codice.

Response.Write(“I Love”)

Response.Write (“<br/>”);

Reesponse.Write (Request.QueryString[“value”]);

La terza riga recupererà un parametro di nome “value” e lo scriverà nel markup HTML. Se non viene passato nulla, nulla verrà scritto in HTML..

IL BROWSER

Ora che abbiamo visto come potere fare per effettuare a scrivere un file guardiamo come si esegue in un browser web. Prima di tutto per fare questo occorre salvare il file in un’apposita cartella..

E per fare questo al momento basta digitare Save File As e dgt Salva. A questo punto il file è salvato.

A cesto punto basta selezionare View in Browser dal Menu File oppure l’icona View in Browser che trovare sulla .

A questo punto vi si aprirà il browser che avete come predefinito e vi apparirà la relativa schermata , per il momento bianca. VI chiederete, ma per caricare una pagina web non si necessita di un server? Esattamente si, il bello di questo programma è che al suo interno ha anche un mini server incorporato che vi permetterà di vedere subito quello che state facendo senza la necessità di caricare il vostro file sul Web.

Incominciamo ad aggiungere un po’ di codice alla pagina appena creata ossia, scriviamo

Io amo Visual Web Developer,

magari incominciamo anche ad introdurre dei marcatori html e per fare questo facciamo immettiamo prima e dopo <br> e <br/>

come vedrete il programma cercherà di aiutargli suggerendoci le parole da inserire. Una volta fatto il listato che ci dovrebbe apparire sarà il seguente.

<%@ Page Language=”C#” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<script runat=”server”>

</script>

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title></title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<br>I ammo visual web developer <br />
</div>
</form>
</body>
</html>

Visualizzate nel browser il nuovo risultato ottenuto, come noterete la scritta è appunto comparsa.

A questo punto come accade nelle pagine html normali possiamo aggiungere anche del codice html tanto per aggiungere funzionalità alla nostra pagina Javascript.

Primo Sito Web

In questo capitolo impareremo i rudimenti per la costruzione del primo Sito Web quindi dal men File scegliamo New Web Site e dopo Sito Web Aspnet, se fate caso a questo passaggio avete anche l’indicazione di dove trovare il vostro progetto all’interno del vostro Sito all’interno del vostro Computer. Per comodità cimiamo questo Sito PersonalPort. Apriamo l’origine del codice appena creato e a avremmo

<%@ Page Language=”VB” AutoEventWireup=”false” CodeFile=”Default.aspx.vb” Inherits=”_Default” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

</div>
</form>
</body>
</html>

che come vedete differisce dal precedente creato per alcuni particolari che sono rispettivamente

AutoEventWireip, Codefile e Inherits

Vediamo cosa sono rispettivamente

AutoEventWireup è generato per default da Visual Web Developer, praticamente anche se ancora non sappiamo cos’e’ è un gestore di evento, diciamo che ogni qual cosa si verifica un evento tipo pressione di un tasto questo viene generato automaticamente per essere poi gestito.

Codefile impostato a Default.aspx.cs indica al VWD di compilare il codice in questo file. Per esempio il Default.aspx.cs (Clicca due volte sulla destra Default.aspx ) è

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

Response;

}
}

Notate la presenza della funzione Page_Load che automaticamente carica la pagina appena questa viene aperta..

A questo punto provate a cliccare sulla freccia verde nella toolbar vicino a Visualizza nel Browser, si chiama avvia debug e alla successiva schermata che vi si apre cliccate su ok e ovviamente vi apparirà una pagina vuota del vostro browser predefinito.

Chiudete la finestra del browser, (importante altrimenti il server rimane sempre attivo)

Ed iniziamo ad analizzare il file web.config che è presente sulla destra sotto Default.aspx. Fateci un doppio click sopra e vi si aprirà una sfilza di dati in xml, in pratica è un file che auto generà il VWD per configurare il vostro sito.

Tolo di Amministrazione

Alcune specifiche di alcuni portali web consigliano di introdurre nel sito dei requisiti di sicurezza, ed iniziamo ad introdurne il prmo ossia , vediamo un po’ come realizzarlo.

Andiamo in Solution Esplorer apriamo il progetto Personal Portal precedentemente creato e procediamo nel seguente modo, ci spostiamo sulla destra dove è presente Esplora Soluzioni e clicchiamo sull’icona Configurazione Asp.net. Per intendersi è l’icona con il martelletto accanto al mondo web.

Una volta dgt si apre la pagina web del vostro browser predefinito. Come mostrato nella figura sottostante.

Dove fondamentalmente potete vedere tre schede.

Scheda Sicurezza Dove si impostano e si modificano gli utenti i ruoli e i permessi di accesso al sito.

Scheda Applicazione. Permette di gestire alcune impostazioni di configurazione al sito fra la quale le piu’ importanti sono le server e-mail e le impostazione di status debugghino e Trading.

Scheda Provider. Specifica dove e come memorizzare i dati di amministrazione dal sito Web.

Per il momento vedremo solamente la prima scheda per arrivare alla terza dobbiamo attendere i capitoli piu’ avanti.

Dimenticavo prima di partire appuratevi di avere installato sul vostro computer locale il relativo database sql server , noi consigliamo il 2005 o meli è quello con cui abbiamo realizzato la presente guida. Procediamo

Clicchiamo sulla scheda Sicurezza.

Dalla Sezione User Clicchiamo il collegamene Select autentication Type.

Selezioniamo From the intente e clicchiamo Done a questo punto dovremmo essere nella prima pagina che ci permette di effettuare l’inserimento del primo utente se tutto è filato liscio.

Ovviamente inserite voi stessi e sempre per prova provate a inserire una seconda utenza. Ovviamente sempre dalla schermata sicurezza potrete trovare anche le specifiche per gestire l’utenza , (edita user ) oppure direttamente cancellarla (delete user) a seconda ovviamente delle vostre esigenze.

Ora che il database con dentro le nostre password è stato creato procediamo un attimo ad esaminarlo e lo facciamo nel seguente modo

Ritorniamo nel VWD andiamo su esplora soluzioni diamo un refresh e vedremo comparire una nuovo oggetto in ASPENTTDB.MDF

Andiamo ad analizzarlo, clicchiamoci sopra andiamo sulla cartella Tables ed iniziamo ad aprire le cartelle che sono contenute in esse.

Individuiamo la cartella aspnet_User a questo punto compiamo due operazioni doppio click per vedere da quali campi la tabela è composta e invece tasto destro e click e dopo mostra dati tabella per visualizzare i dati che vi sono contenuti in essa..

A questo punto abbiamo cmq un’idea di quello che abbiamo fatto e procediamo alla creazione della prima pagina effettiva di login . Andiamo quindi su Esplora Soluzioni o Solutions Esplorerei a seconda che abbiate preso la versione in italiano o in inglese visualizzate il percorso

C:\…\PersonalPortal

e dopo tasto destro del mouse e selezionate aggiungete nuovo oggetto, selezionate dalla pagina che vi si apre la scritta Web Form e digitare Login.aspx nel campo Name, lasciate selezionato Pace Code in Separate File (ossia “posizionare il codice in un file separato” ).

Andate nella colonna di destra e scorretele finche’ non trovate il menu Accesso, apritelo e una volta fatto cercate login a questo punto non vi resta che trascinarlo all’interno della pagina dinamoca aspnet, assicurandovi pero’ prima di essere in progettazione.

Nella icona appena creata potete fare tutti gli opportuni cambiamenti che ritenete necessari agendo per esempio su formattazione automatica, cambierete cosi’ il layout della pagina che avete creato, cioè cio’ che i ovstri utenti vedranno arrivando nella pagina stessa.

Addirittura se volete che i vostri utenti effettuino il login quando entrano nella pagina come prima operazione potete settare questo comportamento nel seguente modo, in questo momento vi ricordiamo che la pagina che verrà caricata per prima diciamo di default è la pagina Default.aspx.

Andate quindi su Solution Explorer e selezionate la pagina login.aspx, tasto destro e cliccate su imposta come pagina principale.

A questo punto selezionate il controllo server login che sarebbe l’icona che abbiamo creato in progettazione e cliccate su proprietà , nella relativa icona che vi si è aperta sulla destra , con scritto Proprietà sopra, selezionate DestinatinPageUrl e dopo selezionate i … a questo punto vi si apre una nuova finestra e voi selezionate Default.aspx e cliccate su ok.

A questo punto il gioco è fatto potete andare sulla toolbar e digitare Runa per visualizzare il tutto.

Ovviamente se avrete effettuato correttamente il login la pagina che vi si aprirà sarà quella di default e quindi completamente vuota. Se sbaglierete l’accesso vi verrà visualizzato tentativo di login non corretto. Procediamo ancora introducendo i controlli server LoginName e LoginStatus.

Su molti siti Web, quando gli utenti sono loggati , il loro nome utente appare sul sito unitamente alla possibilità di eseguire il logout dal sito . Per questo Asp.Net mette a disposizione una rivoluzionaria classi di comandi che sono Login Name e Login Status.

Le Master Page

In questo capitolo inizieremo a fare la conoscenza con le pagine mastro una nuova innovativa tecnologia messa a disposizione da aspnet, in pratica si tratta di veri e propri template che permetto di centrallizzare il mark up del portale , detto proprio in soldoni si crea un template in una pagina aspnet e poi si permette alle altre pagine di utilizzare queste pagine.

Vediamo cmq in pratica come si utilizza. Andiamo su Esplora Soluzioni e selezioniamo aggiungi nuovo elemento, dalla finestra che si apre selezionare Pagina Master e digitare il nome PersonalPortal.master nella pagina che si è aperta e dopo aggiungi a questo punto la prima pagina mastro è stata creata.

Controlliamo il codice di questa pagina master appena creata ed iniziamo subito facendovi notare una sostanziale differenza , questa volta è presente un nuovo tag che si chiama

<asp:ContentPlaceHolder id=”ContentPlaceHolder1″ runat=”server”>

</asp:ContentPlaceHolder>

E ora vediamo fattivamente come utilizzarla.

Quando si utilizza una pagina master, questa fornisce tutto il markup e il codice che è comune a una pagina, che pertanto non dovrà avere i tag html, head o form la pagina master coniene questi tag.

Iniziamo a collegare la pagina di default.aspx alla Master Page nel seguente modo, prendiam la pagina default.aspx e cancelliamo per intero il suo contenuto, tranne la prima riga che rimarrà e quindi avremo:

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

mandiamo in esecuzione con il solito run o visualizza nel browser col risultato di ottenere una pagina completamente bianca. Adesso rincominciamo a rimettere i comandi controllo server precede mente introdotti.

Ma prima alcune precisazioni. La pagina master PersonalPortal ha fornito tutto il markup HTML della pagina, pertanto se si aggiunge ulteriore HTML o codice a PersonalPortal.master, qualsiasi pagina che la utilizza avrà questo markup e questo codice automaticamente aggiunto a essa.

Facciamo adesso il caso contrario ossia e se si volesse che il markup o il codice appaiono solo sulla stessa pagina e non su ogni pagina? Asp net mette per questo a disposizione un ulteriore controllo che si chiama ContentPlaceHolder . Si utilizza questo controllo sulla pagina master per determinare dove il markup verrà posizionato e il controlli Content sulla pagina per posizionare il markup e il codice specifico a quella pagina.

Come si puo’ notare dal listato dalla pagina master scritta e non ancora modificata.

<%@ Master Language=”C#” AutoEventWireup=”true” CodeFile=”PersonalPortal.master.cs” Inherits=”PersonalPortal” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>

tale listato mostra che i controlli sono posizionati nel tag <head> e nel tag <div> del form. Il markup delle pagine che utilizzano la pagina master PersonalPortal hanno queste due posizione per aggiungere il contenuto.

Torniamo alla pagina Default.aspx e aggiungiamo un tag <asp:Content> nella pagina con un testo casuale I ADORO IL VSWD, la pagina dovrà risultare in questa maniera

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

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

IO ADORO IL VISUAL WEB DEVELOPER
</asp:Content>

Adesso che abbiamo visto il funzionamento basilare della master page incominciamo ad introdurvi degli altri elementi ossia le table. Quindi andiamo su PersonalPortal.master in modalità design e facciamo doppio click selezioniamo l’interno del content e andiamo in tabella ed inseriamo una tabella se l’operazione è andata a buon fine ci dovrebbe comparire una schermata del tipo.

Per questa prova mettiamo 3 righe e 2 colonne. Per chi è gia’ esperto di editor visuali potrà notare come il VWD riproduce tutte le funzionalità vedi unione di due o piu’ celle adiacenti e cosi’ via.

Per chi non ha esperienza consigliamo di spippolare un po’ con i comandi della figura sopra…danno non lo si potrà cmq fare.

Ad esempio sarà possibile appunto selezionare due celle adiacenti e con il tasto destro del mouse unirle.

Questa è una primissima infarinatura vedremo in seguito comandi piu’ approfonditi come i CSS e come poterli introdurre dentro il VWD

A questo punto raggiungiamo i Controlli login e LoginStatus come visto precedentemente nel capitolo 2. Ma questa volta le inseriamo nella Pagina Master, ossia dentro le tabelle create in precedenza.

alla fine dovremmo ottenere il seguente risultato

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

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

IO ADORO IL VISUAL WEB DEVELOPER
</asp:Content>

per la pagina di default mentre per la master page avremo

<%@ Master Language=”C#” AutoEventWireup=”true” CodeFile=”PersonalPortal.master.cs” Inherits=”PersonalPortal” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title></title>
<asp:ContentPlaceHolder id=”head” runat=”server”>
</asp:ContentPlaceHolder>
<style type=”text/css”>
.style1
{
width: 100%;
}
</style>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:ContentPlaceHolder id=”ContentPlaceHolder1″ runat=”server”>

</asp:ContentPlaceHolder>

<asp:LoginStatus ID=”LoginStatus1″ runat=”server” />
</td>
<td>
<asp:Login ID=”Login1″ runat=”server”>
</asp:Login>
</td>
</tr>
<tr>
<td>
 </td>
<td>
 </td>
</tr>
<tr>
<td colspan=”2″>
 </td>
</tr>
</table>

</div>
</form>
</body>
</html>

Vedremo adesso un esempio di Master Pages nidificate.

Partiamo dal controllo server LoginName che permette di visualizzare il nome dell’utente nel caso questo sia loggato, mentre LoginStatus è un link verso una pagina che permette all’utente loggato di effettuare il relativo logout dalla pagina, entrambi li trovate nel menu accesso a questo punto non vi rimane che inserirli nella pagina Default.aspx sempre in progettazione. E Fare la relativa anteprima nel browser, come visto prima.

Volendo sempre da Accesso possiamo immettere anche il server controll per il change password una novità esclusiva di VWD 2008

E con questo concludiamo questo capitolo e passiamo al prossimo dove vi parleremo di un argomento molto interessante ed importante che sono le pagine master.

Controlli Server

Iniziamo l’introduzione ai controlli Server con l’aggiunta del comando label, quindi aprite il Personal Portal e introducete il comando label che trovate nella colonna di sinistra del vostro Visual Web Developer, nella sezione standard una volta introdotto digitate proprietà e vedete questa volta nella colonna di destra tutte le proprietà che potete modificare.

Niente di piu’ semplice.

Incominciamo adesso a creare un menu di navigazione per il nostro sito. Quindi facciamo i seguenti passi.

1. Clic destro sul progetto in Esplora Soluzioni e seleziona Aggiungi nuovo elemento.

2. Seleziona Mappa del Sito nel campo name digita Web in modo da creare web.sitemap che potrai vedere su Esplora Soluzioni.

se tutto è andato a buon fine troverete il seguente codice relativo

<?xml version=”1.0″ encoding=”utf-8″ ?>
<siteMap xmlns=”http://schemas.microsoft.com/AspNet/SiteMap-File-1.0″ >
<siteMapNode url=”” title=”” description=””>
<siteMapNode url=”” title=”” description=”” />
<siteMapNode url=”” title=”” description=”” />
</siteMapNode>
</siteMap>

come potete vedere si tratta di un campo xml in cui dovere e potere inserire i valori, facciamo il seguente esempio, modificate il file in modo da ottenere

<?xml version=”1.0″ encoding=”utf-8″ ?>
<siteMap xmlns=”http://schemas.microsoft.com/AspNet/SiteMap-File-1.0″ >
<siteMapNode url=”~/Default.aspx” title=”Home” description=””>
<siteMapNode url=”~/Admin/ChangePassword.aspx” title=”Change Password” description=”Change Your Password” />
<siteMapNode url=”” title=”” description=”” />
</siteMapNode>
</siteMap>

Come vedete abbiamo descritto il nodo radice e i sotto nodi alla radice. D’ora in avanti ogni volta che dovete aggiungere una nuova voce di menu per puntare a una pagina del sito, aprite questo file XML e modificatelo di conseguenza.

Vediamo adesso come possiamo connetterci a questo file. E per fare questo utilizziamo il comando SiteMapDataSource, andiamo quindi in Design e trasciniamo il controllo dalla sezione Data nei comandi del Visual Web Developer di Sinistra. Sempre assicurandovi di essere in nel Design di Personal Portal

Questo controllo di suo non è un controllo visuale e quindi per renderlo visibile bisogna connettersi e quindi sempre sulla sinistra andate su esplorazione e trascinate il controller Menu nel design sopra il sitemadatasource

A questo punto cliccate sulla freccetta in rilievo che è comparsa affianco del nuovo elemento introdotto ed in selezionare righine dei dati mettere SitemapDataSource1 come si puo’ vedere chiaramente in figura.

Create una directory Admin e dopo un file ChangePassword in esso per permettere ipoteticamente di potere cambiare pagina.

a questo punto non vi rimane che verificare che tutto sia andato effettivamente a buon fine cliccando run.

VI apparirà la scritta home e accanto ad essa la scritta Change Password cliccandoci sopra potrete andare alla pagina desiderata.

Visual Earth

Sicuramente ne’ avete gia’ sentito parlare, se ancora non l’avete fatto è sicuramente questa un’ottima occasione per introdurla, stiamo parlando di una tecnologia totalmente made in microsoft chiamata Visual Earth, molt comoda se avete un’azienda e volete abbellire il vostro sito.

Andate all’indirizzo

http://www.bing.com/maps/

non è lo scopo di questa guida spiegarvi dettagliatamente cosa sia virtuale art cmq chi desidera saperne di piu’ puo’ visitare il sito

http://dev.live.com/virtualearth/sdk/

Vediamo dunque come integrarlo nel nostro sito web. In pratica bisogna referenziare la pagina e si fa nel seguente modo

<script type=”text/javascript”

src=”http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6″> </script>

aggiungiamo anche un p’ di codice javascript in modo da potere utilizzare meli la mappa,

var map = null;

function GetMap()

{

map = new VEMap(‘myMap’);

map.LoadMap(null, 10, ‘h’, false);

}

l’oggetto VEMap e LoadMap esulano lo scopo di questa guida cmq sono i comandi per potere caricare determinate porizioni della mappa.

A questo punto modifichiamo il body in modo tale che la funzione GetMap venga caricato con la pagina e facciamo

queste due porzioni di codice vanno inserite nel personal Portal in modo tale che alla fine il codice risulti il seguente.

<%@ Master Language=”C#” AutoEventWireup=”true” CodeFile=”PersonalPortal.master.cs” Inherits=”PersonalPortal” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title></title>
<asp:ContentPlaceHolder id=”head” runat=”server”>
</asp:ContentPlaceHolder>

<script type=”text/javascript”

src=”http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6″> </script>

<script type =”text/javascript” >
var map = null;

function GetMap() {

map = new VEMap(‘myMap’);

map.LoadMap(null, 10, ‘h’, false);

}

</script>

<style type=”text/css”>
.style1
{
width: 100%;
}
.style2
{
height: 23px;
}
</style>
</head>
<body onload=”GetMap(); “>

<form id=”form1″ runat=”server”>
<div>
<asp:ContentPlaceHolder id=”ContentPlaceHolder1″ runat=”server”>

</asp:ContentPlaceHolder>

<table class=”style1″>
<tr>
<td>

<asp:LoginStatus ID=”LoginStatus1″ runat=”server” />
</td>
<td>
<asp:Login ID=”Login1″ runat=”server”>
</asp:Login>
</td>
</tr>
<tr>
<td>
 </td>
<td>
 </td>
</tr>
<tr>
<td colspan=”2″>
<asp:Label ID=”Label1″ runat=”server” Font-Bold=”True”
Text=”Quest Site è di propriety exclusive mea “></asp:Label>
</td>
</tr>
</table>

</div>
<asp:Menu ID=”Menu1″ runat=”server” DataSourceID=”SiteMapDataSource1″>
</asp:Menu>
<asp:SiteMapDataSource ID=”SiteMapDataSource1″ runat=”server” />
</form>
</body>
</html>

manca un ultima aggiunta e finalmente potremmo andare a vedere il risultati finale

e apriamo il nostro default.aspx nel seguente modo

<%@ 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>
</asp:Content>

come potete verde nel div id abbiamo richiamato myMap che è l’oggetto che abbiamo istanziato prima nel Javascript.

Ma possiamo fare molto di piu’ sempre andando a leggere la documentazione di Visual Earth ci accorgiamo anche della presenza della funzione Find e quindi andiamo ad utilizzarla nel seguente modo aggiungendo nel JavaScript la seguente riga di comando.

map.Find (null, ‘Rome’ );

facciamo un altro passo avanti

Dove e Cosa

Facciamo un ulteriore passo in avanti e introduciamo un testo per potere poi ricercare una località specifica.

vediamo come modifichiamo il PersonalPortal introducendo la funzione Find nel seguente modo

<%@ Master Language=”C#” AutoEventWireup=”true” CodeFile=”PersonalPortal.master.cs” Inherits=”PersonalPortal” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title></title>
<asp:ContentPlaceHolder id=”head” runat=”server”>
</asp:ContentPlaceHolder>

<script type=”text/javascript”

src=”http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6″> </script>

<script type =”text/javascript” >
var map = null;

function GetMap() {

map = new VEMap(‘myMap’);

map.LoadMap(null, 10, ‘h’, false);

map.Find(null, ‘Rome’);

}

function Find(what, where) {

try
{
map.Find(what, where);
}

catch(e) {
alert (e.message);
}

}

</script>

<style type=”text/css”>
.style1
{
width: 100%;
}
.style2
{
height: 23px;
}
</style>
</head>
<body onload=”GetMap(); “>

<form id=”form1″ runat=”server”>
<div>
<asp:ContentPlaceHolder id=”ContentPlaceHolder1″ runat=”server”>

</asp:ContentPlaceHolder>

<table class=”style1″>
<tr>
<td>

</body>
</html>

e il default.aspx come segue

<%@ 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>

<p>
What
<input id=”txtWhat” type=”text” name=”txtWhat” /></p>

<p>
Where
<input id=”txtWhere” type=”text” name=”txtWhere” /></p>

<p>
Sottometti
<input id=”find” type=”button” value =”Find” name=”find” onclick=”Find(TxtWhat.value, txtWhere.value);”
/></p>

</asp:Content>

Come potete vedere abbiamo modificato il default introducendo dei tag html come input txtwhat e txtwhere, digitando il bottone find questi valori che abbiamo inserito vengono passati alla funzione Find che fara’ il gioco ossia trovare il luogo ricercato.

Debug

Debugging (o semplicemente debug) è un’attività che consiste nella individuazione della porzione di software affetta da errore (bug) rilevati nei software a seguito dell’utilizzo del programma.

Dobbiamo pero’ introdurre subito una limitazione e cioe’il debugging di visual web developer è possibile sol con Microsoft Internet Explorer.

Quindi avviamo IE andiamo su Strumenti, Options dal menu, cliccare su avanzate, deselezionare disattiva script debugging

Torniamo al progetto VWB andiamo su Esplora Soluzioni, teniamo selezionat C:\…| e click tasto destro scegliamo Pagina delle proprietà e da qui opzioni di avvio, a questo punto deselezionare se gia’ non lo è la casella ASP.NET e quindi digitare invio.

E viene eseguito il debugging del sito per intero altrimenti si potrà scegliere anche di fare debugging pass passo, riga. Scegliamo infatti dal menu F11 per eseguire ogni istruzione passo per passo.

Una tecnica piu’ avanzata per analizzare il Javascript è quella dei break point ossia mettere dei Toggle Breakpoint attraverso il tasto F9 ed analizzare solamente spezzoni di codice

Database

Ed eccoci qui ad introdurre un argomento totalmente nuovo visto pero’ dalla parte dei Database, ossia i grandi raccoglitori di dati con cui lavorano appunto i linguaggi di programmazione. Ma cosa sono i Database. Occorre prendere familiarità quindi con le tabelle e i tipi di dati.

I database sono identificati univocamente da dei nomi , da delle tabelle con al loro interno dei dati messi in accordo con il tipo di dato che lo spazio (cella ) di quella tabella possiede. Facciamo un esempio , consideriamo di avere un tabella chiamata Laureati, quindi avremo come colonne

La colonna id che identifica il numero del laureato di tipo in

La colonna Nome e Cognome che identifica appunto il nominativo del laureato di tipo string

La Colonna Tipo di laurea che identifica la laurea conseguita di tipo string

La Colonna Votazione nella quale è messo il voto conseguito. di tipo in

Quindi in base a questi parametri la nostra tabella potrebbe essere popolata di questi valori

001 Michele Micheli Economia 110

002 Michela Magni Giurisprudenza 110

003 Elisabetta Greg oraci Lettere 100

E cosi’ via a scendere , ma che dati sono questi tipi di dati? Beh di vario tipo, per i numeri esatti , cioè senza virgola si usano i seguenti

bigint numeri interi di grossi dimensioni

int numeri interi di medie dimensioni

smallint piccole dimensioni

etc. etc.

Per le definizione esatte dei range di valori si rimanda ai testi specifici, qui ci preme soltanto sottolineare che la differenza è sostanziale in quanto quando si ha a che fare con grossi database l’utilizzo di memoria deve essere ottimizzato, ossia non ci si puo’ permettere di utilizzare un tipo di dato inappropriato se pur funzionante.

Continuiamo la notar trattazione con i numeri approssimati che sono

i Float e i real come sempre funzionano entrambe cambia il range che per il real va da -3.4 * 10^38 a 3.4 * 10^38 e cosi’ via.

Per i tipi di dato che rappresentano le date abbiamo

datetime e smalldatetime per convenienza utilizzate sempre il primo e diciamo che vi troverete sempre bene…

Per i caratteri abbiamo il solito char con varchar e maxchar, mentre per il testo abbiamo appunto la variabile text.

Queste tabelle pero’ possono essere messe in unione le une con le altre , questo tipo di correlazione fra tabelle che mette in dipendenza i dati delle une con quelli delle altre si chiama join, ma anche per questo rimandiamo ad una trattazione piu’ specifica che potrete trovare anche nelle nostre guide.

Le Query

Ora che abbiamo un’idea molto rudimentale di cosa sono i Database, vediamo come questi interagiscono con il linguaggio C# e il Visual Web Developer.

In verità tutti i database interagiscono con i linguaggi attraverso un meccanismo chiamato di Query che volgarmente significa interrogazioni.

Select

Incominciamo con la prima operazione , la piu’ semplice ossia la selezione la cui sintassi è

SELECT <nome colonna> From <nome tabella>

la cui comprensione è abbastanza immediata, se per esempio facevamo

SELECT Votazioni From Laureati

Ottenevamo i seguenti risultati

110

100

Facciamo un ulteriore passo introduciamo la clausola Where la cui sintassi è

SELECT <nome colonna> From <nome tabella> WHERE <nome colonna> <operatore> <valore>

Dove l’operatore supportati sono molteplici

=, <>, >,<,>= ,=<, BETWEEN, LIKE, IN

E siamo cmq sicuri che ne abbiamo dimenticati altri.

Altri tipi di Query sono le INSERT

per l’inserimento dei dati nel database

UPDATE

Per eseguire l’aggiornamento di dati gia’ presenti nel Database

Delete

Per cancellare una riga di dati presenti nel Database.

Ripetiamo che questa è una trattazione veramente superficiale del vasto mondo dei Database Sql Server nel particolare ma di tutto SQL in generale.

Tanto per dare un’idea per una trattazione completa occorrono dei libri.

Database e Visual Web Developer

Incominciamo adesso a vedere come interagiscono fra di loro Database e Visual Web Developer.

Primo pass VWD rappresenta un ottimo server quando è in funzione ma non un Database quindi vi occorre un Database , andate sul sito di Microsoft e scaricatevi SQL Server 2008 , al momento ancora stranamente in versione beta dato che siamo gia’ nel 2009, oppure il 2005 stabilissimo e piu’ che sufficiente per imparare a programmare.

Creiamo quindi adesso una tabella chiamata Toldo che avrà al suo interno le seguenti Colonne

ToDold che rappresenterà l’identificatore di riga della tabella, partirà da 1 e verrà incrementato ogni volta dello stesso valore.

Name che rappresenterà come verranno chiamati gli utenti

Complete che rappresenterà se le cose da fare sono state completate o meno e per questo gli attribuiremo un valore balenano

Quindi avviamo il Visual Web Developer e avviamo il nostro progetto Personal Portal come ormai siamo capacissimi di fare.

Quindi andiamo come sempre su Esplora Soluzione, selezioniamo C:\…\percorso url sito

e selezioniamo aggiungi nuovo elemento nella finestra che si apre selezioniamo Database Sql Server e nel campo nome mettiamo PPDatabase e aggiungi alle successive finestre che si aprono clicchiamo si, in pratica chiede di mettere il nuovo file nella directory App_Data, se tutto è andato a buon fine ci dovremmo ritrovare ad avere la seguente situazione nella Finestra esplora soluzioni

Vediamo ora come popolare i campi di tale tabella, andiamo quindi sempre sulla destra nella finestra Esplora Database, se non è stata attivata procedete nel seguente modo o andate su Visuali e cliccate su Esplora Database oppure Direttamente da Tastiera digitate

CTRL + ALT + S

Quindi adesso che siete in esplora Database espandete cliccando sul + di PPDDatabase.mdf e vi aprirà tutta una serie di sottocartelle fra le quali Tabella , la selezionate e tasto destro del mouse cliccate su aggiungi nuova tabella e completatela in modo da ottenere il seguente risultato

Selezione la Colonna ToDoId e andate sulla finestra Proprieta colonna e scorretela fin quando non trovate

Proprietà Colonne da qui Specifica identità ponetelo su si automaticamente incremento identità e inizio identità si posizionerà automaticamente su 1, questo vuole dire che ogni qual volta verrà effettuato un inserimento di dati nel Database, il campo corrispettivo a questa colonna verrà incrementato in modo automatico da solo di uno, poi in base alle vostre esigenze imparerete a incrementarlo come riterrete piu’ opportuno.

A questo punto non ci rimane che assegnare un nome al tutto quindi con nome colonna selezionato tasto destro del mouse e clicchiamo su Proprietà sulla relativa finestrella di destra chiamata proprietà diamo un nome al nostro oggetto in corrispondenza della casella (Nome) e lo chiamiamo appunto ToDo a questo punto con la tabella selezionata tasto destro e digitate Save ToDo, la tabella è definitivamente salvata.

Ora che abbiamo creato la tabella vediamo come dobbiamo farla per popolarla, ossia il VWD ha incorporato una funzione che ci permette di inserire i dati direttamente nel database senza ricorrere ad altri programmi di ausilio, vediamo come fare.

Da Esplora Database selezioniamo la tabella ToDo appena creata , tasta destro del mouse e clicchiamo questa volta su mostra dati tabella

Interrogare le tabelle del Database

Adesso che abbiamo imparato a creare le tabelle dei database e sappiamo anche come popolarle vediamo come potere estrapolare i dati in esse contenute attraverso il Visual Web Developer.

Andiamo nuovamente su Esplora Database e da qui selezioniamo la tabella ToDo come sempre tasto destro del Mouse e questa volta digitiamo Nuova Query e Aggiungiamo la tabella ToDo che oltretutto per il momento è anche l’unica che abbiamo creato.

Il prima passo è stato raggiunto adesso vediamo come realizzare praticamente l’istruzione Select. Dal riquadro che si è creato selezioniamo i campi ToDold, Name e Complete , che è un po’ come selezionare (tutte le colonne)

A questo punto andate su Progettazione Query e dopo ancora su esegui SQL oppure digitate direttamente CTRL R se tutto è andato esattamente vi apparirà una nuova tabella che sarà il risultato della query che avete eseguito, il risultato dovrebbe essere grosso modo il seguente.

con le opportune modifiche dovute al caso, vediamo adesso anche nello specifico come aggiungere anche la clausola Where a questo sistema. Nel Pannello Sql dove c’è scritto SELECT etc. etc. digitare e ottenere la seguente scritta

SELECT ToDoId, Name, Complete

FROM ToDo

Where Complete =’True’

verifichiamo la sintassi del SQL inserito andando su Progettazione Query e dal menu prendiamo la seconda voce ossia Verifica Sintassi SQL.

Se la sintassi è corretta possiamo a questo punto digitare CTRL + R e verificare il risultato. Se tutto è andato nel verso giusto sarà visualizzata solamente la riga contra distanza dalla colonna avente come ToDoId pari a 2.

Interfaccia Utente Basata sui Dati del Database

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, introdurremo cioe’ i dataset.

Quindi apriamo nuovamente il progetto Personal Portal se prima l’avevamo chiuso e selezionando 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 rappresentazione virtuale del database, alcune volte si trova anche con la dicitura database virtuale. Sotto notiamo anche la scritta ToDoTableAdapter, questo invece si chiama 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’ stata 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 può 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 destra 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 seguita 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 questo punto ci appare la schermata di chiusura e digitiam 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’interfaccia 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 selezionare Control nella richiesta dell’rigine dei parametri e Selezionare 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 occuperà di visualizzarli nell’interfaccia.

A questo punto eseguite e verificate. Il listato grosso modo che vi dovreste trovare in default.aspx è il 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 tasto 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= originale 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 scorre 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 sorgente dati, cliccare su Update e selezionare UpdateQuery e cliccare finish

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