Associare un foglio di lavoro al database utilizzando Worksheets Designer in VS.Net 2005
Associare un foglio di lavoro al database utilizzando Worksheets Designer in VS.Net 2005
Lo scopo di questo articolo è consentire a tutti gli sviluppatori di apprendere come creare un’applicazione di data binding inVS.Net 2005 e comprendere l’uso e il ruolo diProgettista di fogli di lavoro editore. Il modo migliore per imparare e capire qualsiasi cosa è attraverso esempi. Quindi, in questo articolo, sarebbe anche meglio per noi creare un’applicazione di esempio per dimostrare l’uso diProgettista di fogli di lavoroin fogli di lavoro vincolanti con database. Creiamo un’applicazione passo dopo passo.
Passaggio 1: creazione di un database di esempio
Prima di tutto creeremo un database di esempio che verrà utilizzato in questo articolo. Abbiamo utilizzato MS Access per creare un database di esempio contenenteProdotti tabella il cui schema è riportato di seguito:
Figura: Informazioni di progettazione diProdotti tavolo
Alcuni record fittizi vengono aggiunti al fileProdotti tabella come mostrato di seguito nella figura:
Figura: Registra inProdotti tavolo
Passaggio 2: progettazione dell’applicazione di esempio
UnASP.NET Applicazione web è creato e progettato in Visual Studio.NET 2005 come mostrato nelle figure seguenti. Queste schermate sono utili per quegli sviluppatori che non hanno molta familiarità con l’utilizzo di Aspose.Cells.GridWeb in Visual Studio.Net 2005.
Primo avvio VS.Net 2005.
Figura: Avvio di VS.Net 2005
Crea un nuovo sito Web dal menu File|Nuovo|Sito Web….
Figura: Creazione di un nuovo sito web
Dopo aver fatto clic sull’opzione di menu File|Nuovo|Sito Web…,Nuovo sito web viene visualizzata la finestra di dialogo. Clicca ilNavigare pulsante al suo interno.
**Figura:**Finestra di dialogo Nuovo sito Web
Dopo aver cliccato sulNavigare pulsante, scegliere la cartella di posizione nell’IIS locale. È possibile creare una nuova cartella e renderla come cartella virtuale come mostrato nella figura.
Figura: Creazione di una nuova cartella
Dopo aver cliccato sulAprire pulsante nelScegli Posizione dialogo,Nuovo sito web sarà simile alla finestra di dialogo.
Figura: Impostazione della posizione del progetto
Ora il progetto è creato
Figura: Progetto creato
Modalità XHTML e HTML
Aspose.Cells.GridWeb supporta completamente la modalità XHTML che è implementata per impostazione predefinita in VS.Net 2005 dalModalità Xhtml proprietà delGrigliaWeb il controllo è impostato suVero per impostazione predefinita quando si posiziona il controllo sulla pagina Web. Ma se vuoi implementare la modalità HTML per il controllo in VS.Net 2005, puoi farlo abbastanza facilmente. Devi modificare il**<!DOCTYPE>** tagga un po' nel codice sorgente della pagina web e imposta il file**Modalità Xhtml** proprietà del**GrigliaWeb** controllo a**Falso** .
In questo argomento utilizzeremo la modalità HTML per il controllo. Quindi segui i passaggi seguenti
1. Passare alla vista Sorgente della pagina web e trovare il seguente tag <!DOCTYPE> nel codice sorgente.
XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Una volta trovato quel tag, seleziona quel tag completo nel codice sorgente come mostrato di seguito.
Figura: Selezionetag <!DOCTYPE>
Sostituisci il**<!DOCTYPE>** tag dal tuo codice sorgente con il seguente.
XML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Figura: Modificatag <!DOCTYPE>
2. Dopo aver aggiunto il controllo GridWeb al modulo web. È necessario selezionare il controllo e scegliere la proprietà XhtmlMode dalla finestra Proprietà per impostarla su False.
Aggiunta di GridWeb al WebForm
Fare clic con il tasto destro suCassetta degli attrezzi e selezionaScegli gli articoli… dal menù.
Figura: Scelta degli articoli
Ora selezionaGrigliaWeb componente e fare clicOK
Figura: SelezioneGrigliaWeb componente nella finestra di dialogo del componente
Ora ilGrigliaWeb viene aggiunto come mostrato nella figura seguente.
Figura: GrigliaWeb viene aggiunto nella casella degli strumenti
Posiziona ilGrigliaWeb sul modulo web come mostrato di seguito.
Figura: PosizionamentoGrigliaWeb sulla pagina web
Passaggio 3: connessione al database tramite Esplora server e impostazione dell’oggetto di connessione
Per prima cosa aggiungiamo il database MS Access al progetto che abbiamo precedentemente creatoPasso 1 . Potresti vederlodb.mdb il file viene aggiunto al progetto.
Figura: Database aggiunto alla cartella del progetto
Ora, andiamo aProgettista di componenti finestra del modulo Web utilizzando l’opzione del menu di scelta rapida della pagina Web.
Figura: SelezioneVisualizza Progettazione componenti opzione
La finestra Component Designer è mostrata come sotto.
Figura: Finestra Progettazione componenti
Fare doppio clic suConnessione OleDb componente dal pannello Dati per posizionare l’oggetto oleDbConnection1 nella finestra.
Figura: oggetto oleDbConnection1
Ora è il momento di connettersi con il database. Possiamo farlo facilmente usandoEsplora server in Visual Studio.NET 2005. Basta selezionareConnessione dati inEsplora server e clic destro. Vedrai apparire un menu contestuale davanti a te. Selezionare**Aggiungi connessione…**opzione dal menu come mostrato di seguito nella figura:
Figura: SelezioneAggiungi connessione… opzione dal menu
Dopo aver selezionatoAggiungi connessione… opzione dal menu,Aggiungi connessione si aprirà la finestra di dialogo eNavigare per selezionare il file del database come mostrato di seguito.
Figura: Selezione del file di database
Puoi testare la connessione.
Figura: Testare la connessione
Puoi sfogliare la connessione per controllare la tabella e i suoi campi.
Figura: Controllo della tabella e dei relativi campi della connessione
Ora se selezionioleDbConnection1 oggetto nelProgettista di componenti è possibile selezionare la stringa di connessione relativa alla connessione esistente appena creata, è presente nella proprietà “ConnectionString” deloleDbConnection1 oggetto nella finestra Proprietà.
Figura: Selezione della stringa di connessione per l’oggetto
Infine il modificatore dell’oggetto viene cambiato inProtetto per una migliore accessibilità.
Figura: Impostazione del modificatore dell’oggetto
Passaggio 4: configurazione dell’oggetto adattatore dati
Ora, aggiungi unOleDbDataAdapter componente dal pannello Dati nella casella degli strumenti per configurarlo. Fare doppio clic suOleDbDataAdapter nel pannello Dati del toolbox, avvierà la sua procedura guidata di configurazione e selezionerà la connessione esistente come mostrato in figura:
Figura: Procedura guidata di configurazione dell’adattatore dati
Dopo aver cliccatoProssimo pulsante, fare clic sulCostruttore di query per aggiungere ilProdotti tabella, selezionare Tutte le colonne e fare clicOK pulsante.
Figura: Aggiunta della tabella dei prodotti
Figura: Costruttore di query
Ora fai clicFine pulsante per terminare la procedura guidata.
Figura: Finire la procedura guidata
Dopo aver configurato la procedura guidata, oleDbDataAdapter1 viene aggiunto automaticamente alla finestra come mostrato di seguito. Inoltre, puoi impostare il suo modificatore suProtetto.
Figura: Recupero dell’oggetto OleDbDataAdapter nella finestra di progettazione
Passaggio 5: generazione del set di dati
Poiché abbiamo creato la connessione al database e gli oggetti dell’adattatore dati, abbiamo ancora bisogno di qualcosa in cui possiamo archiviare i dati dopo la connessione al database. UNSet di datioggetto può memorizzare i dati con precisione e possiamo anche generarli facilmente utilizzando VS.NET 2005 IDE. Per farlo, selezionaoleDbDataAdaper1 e clic destro. Verrà visualizzato un menu contestuale con alcune opzioni. Selezionarecreare Set di dati… opzione dal menu come mostrato sotto nella figura.
Figura: Selezionecreare Set di dati… opzione dal menu
Dopo aver selezionatocreare Set di dati… opzione dal menu, aGenera set di dati si aprirà la finestra di dialogo. Usando questa finestra di dialogo, possiamo selezionare quale sarebbe il nome del nuovoSet di dati oggetto da creare e a quali tabelle aggiungereSet di dati . Dai un’occhiataAggiungi questo set di dati a designer opzione e fare clicOK pulsante come mostrato sotto nella figura.
Figura: CliccandoOK pulsante per generareSet di dati
Ora puoi vedere adataSet11 oggetto aggiunto al designer come mostrato di seguito nella figura. Imposta il modificatore oggetto suProtetto.
Figura: Set di dati generato e aggiunto alla finestra del designer
Determinato codice viene generato automaticamente nella connessione correlata al file .cs, nell’adattatore dati, nell’oggetto set di dati.
Figura: Codice generato
Passaggio 6: utilizzo di Designer di fogli di lavoro
Ora è il momento di aprire il segreto. Selezionare il controllo e fare clic con il tasto destro. Si aprirà un menu contestuale. Selezionare l’opzione Worksheets Designer… dal menu come mostrato di seguito nella figura.
Figura: SelezioneProgettista di fogli di lavoro… opzione dal menu
Dopo di cheEditor della raccolta di fogli di lavoro dialogo (chiamato ancheProgettista di fogli di lavoro ) verrà aperto, puoi vedere diverse proprietà che possono essere configurate per associare il fileFoglio1 con qualsiasi tabella nel database. SelezioniamoFonte di dati proprietà. ScriveredataSet11 in esso (che abbiamo generato e aggiunto alla finestra del designer nel passaggio precedente). Quindi fare clic suDataMember proprietà. ScrivereProdotti come nome di tabella qui come mostrato di seguito nella figura:
Figura: CollocamentoFonte di dati eDataMember proprietà
Ora puoi configurareAssocia colonne proprietà. Dopo aver fatto clic su di esso, ora puoi aggiungere le colonne di rilegatura e impostare il fileDidascalia , Campo dati (Dovrebbe essere uguale aProdotti campi tabella) e altre proprietà. Puoi impostare ilÈ creato automaticamente aVERO e applicareConvalida e impostare ilNumeroTipodi diversi campi per le vostre esigenze.
Figura: CliccandoAssocia colonne proprietà
Figura: Editor della raccolta BindColumn dialogo
Passaggio 7: aggiunta di alcune righe di codice per la pagina Web
Abbiamo usatoProgettista di fogli di lavoro facilmente e ora non ci resta che aggiungere alcune righe di codice
Per prima cosa aggiungeremoOnInit codice relativo all’evento da inizializzareInizializzaComponente metodo per inizializzare e creare oggetti connessione, comando, dataadapter e set di dati. Queste righe di codice non vengono aggiunte con il codice generato automaticamente, quindi dobbiamo aggiungerle manualmente.
Figura: Aggiunta di codice1
Figura: Aggiunta di codice2
Ora aggiungiamo del codice nel filePagina_Carica gestore di eventi per il riempimentodataSet11 oggetto con dati dal database (utilizzandooleDbDataAdapter1 ) e vincolanteGrigliaWeb controllare condataSet11 chiamando il suoDataBind metodo.
Esempio:
C#
//Implementing Page_Load event handler
protected void Page_Load(object sender, EventArgs e)
{
//Checking if there is not any PostBack
if (!IsPostBack)
{
try
{
//Filling DataSet with data
oleDbDataAdapter1.Fill(dataSet11);
//Binding GridWeb with DataSet
GridWeb1.DataBind();
}
finally
{
//Finally, closing database connection
oleDbConnection1.Close();
}
}
}
VB.NET
'Implementing Page_Load event handler
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'Checking if there is not any PostBack
If Not IsPostBack Then
Try
'Filling DataSet with data
oleDbDataAdapter1.Fill(dataSet11)
'Binding GridWeb with DataSet
GridWeb1.DataBind()
Finally
'Finally, closing database connection
oleDbConnection1.Close()
End Try
End If
End Sub
Puoi anche controllare il codice aggiunto aPagina_Carica gestore di eventi come mostrato di seguito nella figura:
Figura: Codice aggiunto aPagina_Carica gestore di eventi
Di gran lunga, abbiamo creato un’applicazione di database molto utile. Ma questa applicazione ti consente solo di visualizzare i dati della tabella. Sebbene sia possibile modificare i dati inGrigliaWeb controllo ma quando chiuderai la finestra del browser e aprirai il tuo database. Scoprirai che non è cambiato nulla. Significa che le modifiche apportate non vengono salvate nel database. Quindi, c’è qualcosa che devi fare.
Ora aggiungeremo del codice alla nostra applicazione in modo cheGrigliaWeb può salvare le sue modifiche al database effettivo. ApriamoProprietà riquadro e selezionareSalvaComando evento delGrigliaWeb controllo dall’elenco dei relativi eventi. Se fai doppio clic suSalvaComando evento quindi VS.NET 2005 IDE creeràGridWeb1_SaveCommand gestore di eventi per te. Aggiungi del codice a questo gestore di eventi per l’aggiornamento del database con i dati modificati contenuti inSet di dati (legato con il foglio di lavoro) utilizzandooleDbDataAdapter1.
Esempio:
C#
//Implementing the event handler for SaveCommand event
protected void GridWeb1_SaveCommand(object sender, EventArgs e)
{
try
{
//Getting the modified data of worksheet as a DataSet
DataSet dataset = (DataSet)GridWeb1.WebWorksheets[0].DataSource;
//Updating database according to modified DataSet
oleDbDataAdapter1.Update(dataset);
}
finally
{
//Closing database connection
oleDbConnection1.Close();
}
}
VB.NET
'Implementing the event handler for SaveCommand event
Protected Sub GridWeb1_SaveCommand(ByVal sender As Object, ByVal e As System.EventArgs)
Handles GridWeb1.SaveCommand
Try
'Getting the modified data of worksheet as a DataSet
Dim dataset As DataSet = CType(GridWeb1.WebWorksheets(0).DataSource, DataSet)
'Updating database according to modified DataSet
oleDbDataAdapter1.Update(dataset)
Finally
'Closing database connection
oleDbConnection1.Close()
End Try
End Sub
Puoi anche controllare il codice aggiunto aGridWeb1_SaveCommand gestore di eventi come mostrato di seguito nella figura:
Figura: Codice aggiunto aGridWeb1_SaveCommand gestore di eventi
Ora, se salverai le modifiche al database utilizzandoSalva pulsante delGrigliaWeb , sarebbero sicuramente salvati.
Passaggio 8: eseguire l’applicazione
Infine, possiamo compilare ed eseguire la nostra applicazione premendo entrambiCtrl+F5 o facendo clicInizio pulsante. Nella finestra di dialogo di debug, è possibile specificare l’opzione di debug appropriata e fare clicOK pulsante come mostrato sotto nella figura.
Figura: Applicazione in esecuzione
Dopo la compilazione,Predefinito.aspx pagina della nostra applicazione web verrà aperta in una nuova finestra del browser in cui possiamo vedere tutti i dati caricati dal database come mostrato di seguito:
Figura: Dati caricati inGrigliaWeb controllo dal database
Quando i dati vengono caricati inGrigliaWeb control allora sentiresti che Aspose.Cells.GridWeb fornisce un controllo implicito dei dati ai suoi utenti. Controlliamo che tipo di funzionalità di manipolazione dei dati sono offerte daGrigliaWeb ai suoi utenti.
Convalida dei dati
Aspose.Cells.GridWeb crea automaticamente regole di convalida appropriate per tutte le colonne associate in base ai tipi di dati definiti nel database. Puoi vedere il tipo di convalida di una cella passando il puntatore del mouse su di essa come mostrato di seguito nella figura:
**Figura:**Verifica del tipo di convalida di una cella
Nella figura sopra, possiamo vedere che la cella selezionata contiene**<INT>** tipo di convalida, il che significa che gli utenti possono inserire solo un valore intero, altrimenti si verificherà un errore di convalida. Inoltre,**<OBBLIGATORIO>** mostra che il valore di**Codice prodotto** deve essere inviato dall’utente.
Eliminazione di righe
Per eliminare una riga, devi prima selezionare una riga (o qualsiasi cella della riga) e selezionareElimina riga opzione dal menu di scelta rapida come mostrato di seguito:
Figura: SelezioneElimina riga opzione dal menu
Dopo aver selezionatoElimina riga dal menu, la riga viene eliminata dal fileGrigliaWeb . Ora fai clicSalva pulsante delGrigliaWeb per eliminare quel record nella tabella del database originale.
Figura: Dati della griglia (dopo l’eliminazione di una riga)
Modifica righe
Puoi anche modificare i dati in celle o righe e quindi fare clicSalva pulsante per salvare le modifiche.
Figura: Dati griglia (Editing Record1)
Figura: Dati griglia (Editing Record2)
Aggiunta di righe
Per aggiungere una riga, selezionaAggiungi riga opzione dal menu di scelta rapida come mostrato di seguito:
Figura: SelezioneAggiungi riga opzione dal menu
Una nuova riga verrà aggiunta al foglio alla fine delle righe dopo la selezioneAggiungi riga opzione dal menu. A sinistra della riga appena aggiunta, noterai unasterisco segno, che indica che la riga è stata aggiunta di recente.
Figura: Nuova riga aggiunta a Grid
Dopo aver inserito i valori nella nuova riga, fare clic suSalva pulsante per confermare le modifiche nella tabella del database originale come mostrato di seguito
Figura: Salvataggio delle modifiche alla tabella del database facendo clicSalva pulsante