Bindning av ett kalkylblad med databas med hjälp av kalkylbladsdesigner i VS.Net 2005
Bindning av ett kalkylblad med databas med hjälp av kalkylbladsdesigner i VS.Net 2005
Syftet med den här artikeln är att låta alla utvecklare lära sig hur du kan skapa en databindande applikation iVS.Net 2005 och förstå användningen och rollen avArbetsbladsdesigner redaktör. Det bästa sättet att lära sig och förstå allt är genom exempel. Så i den här artikeln skulle det också vara bäst för oss att skapa en exempelapplikation för att demonstrera användningen avArbetsbladsdesigner bindande arbetsblad med databas. Låt oss skapa en ansökan steg för steg.
Steg 1: Skapa en exempeldatabas
Först och främst kommer vi att skapa en exempeldatabas som kommer att användas i den här artikeln. Vi har använt MS Access för att skapa en exempeldatabas som innehållerProdukter tabell vars schema visas nedan:
Figur: Designinformation avProdukter tabell
Få dummy-poster läggs tillProdukter tabell som visas nedan i figuren:
Figur: Rekord iProdukter tabell
Steg 2: Designa exempelapplikation
EnASP.NET Webbapplikation är skapad och designad i Visual Studio.NET 2005 som visas i figurerna nedan. Dessa skärmdumpar är användbara för de utvecklare som inte är så bekanta med att använda Aspose.Cells.GridWeb i Visual Studio.Net 2005.
Första start VS.Net 2005.
Figur: Startar VS.Net 2005
Skapa en ny webbplats från Arkiv|Ny|Webbplats…-menyn.
Figur: Skapa en ny webbplats
Efter att ha klickat på Arkiv|Ny|Webbplats… menyalternativ,Ny webbplats dialogrutan visas. Klicka påBläddra knappen i den.
**Figur:**Ny webbplatsdialog
Efter att ha klickat påBläddra knappen väljer du platsmappen i den lokala IIS. Du kan skapa en ny mapp och göra den till en virtuell mapp enligt bilden.
Figur: Skapa en ny mapp
Efter att ha klickat påÖppen knappen iVälj Plats dialog,Ny webbplats dialogrutan kommer att se ut.
Figur: Ställa in projektplats
Nu är projektet skapat
Figur: Skapade projekt
XHTML och HTML lägen
Aspose.Cells.GridWeb stöder helt XHTML Mode som är implementerat som standard i VS.Net 2005 sedanXhtml-läge egendom avGridWeb kontroll är inställd påSann som standard när du placerar kontrollen på webbsidan. Men om du vill implementera HTML Mode för kontrollen i VS.Net 2005, kan du göra det ganska enkelt. Du måste ändra**<!DOCTYPE>** tagga lite i webbsidans källkod och ställ in**Xhtml-läge** egendom av**GridWeb** kontroll till**Falsk** .
I det här ämnet kommer vi att använda HTML Mode för kontrollen. Så följ stegen nedan
1. Växla till källvyn på webbsidan och hitta följande <!DOCTYPE>-tagg i källkoden.
XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
När du har hittat den taggen, välj den fullständiga taggen i källkoden som visas nedan.
Figur: Väljer**<!DOCTYPE>-taggen**
Ersätt**<!DOCTYPE>** tagga från din källkod med följande.
XML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Figur: Modifierar**<!DOCTYPE>-taggen**
2. Efter kommer du att lägga till GridWeb-kontrollen i webbformuläret. Du bör välja kontrollen och välja egenskapen XhtmlMode i fönstret Egenskaper för att ställa in den på False.
Lägger till GridWeb till WebForm
Högerklicka påVerktygslåda och väljVälj objekt… från menyn.
Figur: Att välja artiklar
Välj nuGridWeb komponent och klickaOK
Figur: VäljerGridWeb komponent i komponentdialogrutan
Nu denGridWeb läggs till som visas i figuren nedan.
Figur: GridWeb läggs till i verktygslådan
PlaceraGridWeb på webbformuläret som visas nedan.
Figur: PlaceringGridWeb på webbsidan
Steg 3: Ansluta till databasen med Server Explorer och ställa in anslutningsobjekt
Först lägger vi till MS Access-databasen till projektet som vi tidigare skapat iSteg 1 . Du kanske ser detdb.mdb filen läggs till i projektet.
Figur: Lade till databas i projektmappen
Nu går vi tillKomponentdesigner fönstret i webbformuläret med hjälp av webbsidans högerklicksmenyalternativ.
Figur: VäljerVisa komponentdesigner alternativ
Komponentdesignerfönstret visas enligt nedan.
Figur: Komponentdesignerfönster
Dubbelklicka påOleDbConnection komponent från datapanelen för att placera oleDbConnection1-objekt till fönster.
Figur: oleDbConnection1-objekt
Nu är det dags att ansluta till databasen. Vi kan göra det enkelt genom att användaServer Explorer i Visual Studio.NET 2005. Välj baraUppkoppling iServer Explorer och högerklicka. Du kommer att se en snabbmeny som visas framför dig. Välj**Lägg till anslutning…**alternativ från menyn som visas nedan i figuren:
Figur: VäljerLägg till anslutning… alternativ från menyn
Efter att ha valtLägg till anslutning… alternativ från menyn,Lägg till anslutning dialogrutan kommer att öppnas ochBläddra för att välja databasfil som visas nedan.
Figur: Välja databasfil
Du kan testa anslutningen.
Figur: Testar anslutningen
Du kan bläddra i anslutningen för att kontrollera tabellen och dess fält.
Figur: Kontrollera tabellen och dess fält för anslutningen
Om du nu väljeroleDbAnslutning1 objekt iKomponentdesigner fönstret, kan du välja anslutningssträngen relaterad till den befintliga anslutningen som just skapades, den finns där i “ConnectionString”-egenskapen föroleDbAnslutning1 objekt i fönstret Egenskaper.
Figur: Väljer anslutningssträngen för objektet
Slutligen ändras objektets modifierare tillSkyddad för bättre tillgänglighet.
Figur: Ställa in objektets modifierare
Steg 4: Konfigurera dataadapterobjekt
Lägg nu till enOleDbDataAdapter komponent från panelen Data i verktygslådan för att konfigurera den. Dubbelklicka påOleDbDataAdapter i verktygslådans datapanel kommer den att starta sin konfigurationsguide och välja den befintliga anslutningen som visas i bilden:
Figur: Konfigurationsguide för dataadapter
Efter att ha klickatNästa knappen klickar du påFrågebyggare att lägga tillProdukter tabell, välj Alla kolumner och klickaOK knapp.
Figur: Lägger till produkttabell
Figur: Frågebyggare
Klicka nuAvsluta knappen för att avsluta guiden.
Figur: Avslutar guiden
Efter att ha konfigurerat guiden läggs oleDbDataAdapter1 automatiskt till i fönstret som visas nedan. Du kan också ställa in dess modifierare tillSkyddad.
Figur: Hämtar OleDbDataAdapter-objektet i designerfönstret
Steg 5: Generera datauppsättning
Eftersom vi har skapat databasanslutning och dataadapterobjekt men ändå behöver vi något där vi kan lagra data efter att ha kopplat till databasen. ADatasetobjekt kan lagra data exakt och vi kan också generera det enkelt med VS.NET 2005 IDE. För att göra det, väljoleDbDataAdaper1 och högerklicka. En snabbmeny skulle dyka upp med några alternativ. VäljGenerera Datauppsättning… alternativ från menyn som visas nedan i figuren.
Figur: VäljerGenerera Datauppsättning… alternativ från menyn
Efter att ha valtGenerera Datauppsättning… alternativ från menyn, aGenerera datauppsättning dialogrutan skulle öppnas. Med den här dialogrutan kan vi välja vad som skulle vara namnet på den nyaDataset objekt som ska skapas och vilka tabeller som ska läggas tillDataset . Kolla uppLägg till denna datauppsättning till designern alternativet och klickaOK knappen som visas nedan i bilden.
Figur: KlickarOK knappen för att genereraDataset
Nu kan du se endatauppsättning11 objekt lagts till designern som visas nedan i figuren. Ställ in objektmodifieraren tillSkyddad.
Figur: Dataset genereras och läggs till i designerfönstret
Viss kod genereras automatiskt i den .cs-filrelaterade anslutningen, dataadaptern, datasetobjektet.
Figur: Genererad kod
Steg 6: Använda Worksheets Designer
Nu är det dags att öppna hemligheten. Välj kontrollen och högerklicka. En snabbmeny skulle öppnas. Välj alternativet Arbetsbladsdesigner… från menyn som visas nedan i figuren.
Figur: VäljerArbetsbladsdesigner… alternativ från menyn
Efter detRedaktör för kalkylbladssamling dialog (även kalladArbetsbladsdesigner ) kommer att öppnas kan du se flera egenskaper som kan konfigureras för att bindaBlad 1 med valfri tabell i databasen. Låt oss väljaDatakälla fast egendom. Skrivadatauppsättning11 i den (som vi genererade och lade till i designerfönstret i föregående steg). Klicka sedan påDataMember fast egendom. SkrivaProdukter som ett tabellnamn här som visas nedan i figuren:
Figur: MiljöDatakälla ochDataMember egenskaper
Nu kan du konfigureraBindColumns fast egendom. Efter att ha klickat på den kan du nu lägga till bindningskolumnerna och ställa inRubrik , Data fält (Det borde vara samma somProdukter tabellfält) och andra egenskaper. Du kan ställa inÄr AutoCreated tillSann och ansökaGodkännande och ställ inNumberTypeolika fält för dina behov.
Figur: KlickarBindColumns fast egendom
Figur: BindColumn Collection Editor dialog
Steg 7: Lägga till några rader kod för webbsidan
Vi har använtArbetsbladsdesigner enkelt och nu måste vi bara lägga till några rader kod
Först lägger vi tillOnInit händelserelaterad kod att initieraInitializeComponent metod för att initiera och skapa anslutnings-, kommando-, dataadapter- och datasetobjekt. Dessa kodrader läggs inte till med den automatiskt genererade koden, så vi måste lägga till dem manuellt.
Figur: Lägger till lite kod1
Figur: Lägger till lite kod2
Nu lägger vi till lite kod iPage_Load händelsehanterare för fyllningdatauppsättning11 objekt med data från databasen (medoleDbDataAdapter1 ) och bindandeGridWeb styra meddatauppsättning11 genom att ringa dessDataBind metod.
Exempel:
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
Du kan också kontrollera koden som lagts tillPage_Load händelsehanterare som visas nedan i figuren:
Figur: Kod tillagd tillPage_Load händelsehanterare
Vi har överlägset byggt en mycket användbar databasapplikation. Men den här applikationen låter dig bara se tabellens data. Även om du kan redigera data iGridWeb kontroll men när du stänger ditt webbläsarfönster och öppnar din databas. Du skulle upptäcka att ingenting har förändrats. Det betyder att ändringarna du gjorde inte sparas i databasen. Så det är något du måste göra.
Nu kommer vi att lägga till lite kod till vår applikation så attGridWeb kan spara sina ändringar i den faktiska databasen. Låt oss öppnaEgenskaper ruta och väljSaveCommand händelse avGridWeb kontroll från listan över dess händelser. Om du dubbelklickar påSaveCommand händelse kommer VS.NET 2005 IDE att skapaGridWeb1_SaveCommand händelsehanterare för dig. Lägg till lite kod till den här händelsehanteraren för att uppdatera databasen med modifierade data iDataset (bunden med kalkylbladet) med hjälp avoleDbDataAdapter1.
Exempel:
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
Du kan också kontrollera koden som lagts tillGridWeb1_SaveCommand händelsehanterare som visas nedan i figuren:
Figur: Kod tillagd tillGridWeb1_SaveCommand händelsehanterare
Nu, om du kommer att spara dina ändringar i databasen med hjälp avSpara knappen påGridWeb , de skulle definitivt räddas.
Steg 8: Kör din applikation
Slutligen kan vi kompilera och köra vår applikation genom att antingen trycka påCtrl+F5 eller klickaStart knapp. I felsökningsdialogrutan kan du ange lämpligt felsökningsalternativ och klickaOK knappen som visas nedan i bilden.
Figur: Kör applikation
Efter sammanställning,Default.aspx sidan i vår webbapplikation kommer att öppnas i ett nytt webbläsarfönster där vi kan se all data som laddas från databasen enligt nedan:
Figur: Data laddas in iGridWeb kontroll från databasen
När data laddas in iGridWeb kontroll då skulle du känna att Aspose.Cells.GridWeb ger en implicit kontroll av data till sina användare. Låt oss kontrollera vilken typ av datamanipuleringsfunktioner som erbjuds avGridWeb till sina användare.
Datavalidering
Aspose.Cells.GridWeb skapar automatiskt lämpliga valideringsregler för alla bundna kolumner enligt deras datatyper definierade i databasen. Du kan se valideringstypen för en cell genom att föra muspekaren över den som visas nedan i figuren:
**Figur:**Kontrollerar valideringstyp för en cell
I figuren ovan kan vi se att den valda cellen innehåller**<INT>** typ av validering, vilket innebär att användare endast kan ange ett heltalsvärde för den, annars uppstår ett valideringsfel. Dessutom,**<KRÄVS>** visar att värdet av**Serienummer** måste skickas in av användaren.
Ta bort rader
För att ta bort en rad bör du först markera en rad (eller valfri cell i raden) och väljaTa bort rad alternativ från högerklicksmenyn som visas nedan:
Figur: VäljerTa bort rad alternativ från menyn
Efter att ha valtTa bort rad från menyn raderas raden frånGridWeb . Klicka nuspara knappen påGridWeb för att ta bort posten i den ursprungliga databastabellen.
Figur: Rutnätsdata (efter att en rad har tagits bort)
Redigera rader
Du kan också redigera data i celler eller rader och sedan klickaSpara för att spara dina ändringar.
Figur: Rutnätsdata (Redigeringspost1)
Figur: Rutnätsdata (Redigeringspost2)
Lägga till rader
För att lägga till en rad, väljLägg till rad alternativ från högerklicksmenyn som visas nedan:
Figur: VäljerLägg till rad alternativ från menyn
En ny rad läggs till i arket i slutet av raderna efter valLägg till rad alternativ från menyn. Till vänster om den nyligen tillagda raden skulle du märka enasterisk markera, vilket indikerar att raden är en nytillagd.
Figur: Ny rad har lagts till i Grid
När du har skrivit in värdena i den nya raden klickar duSpara för att bekräfta ändringarna i den ursprungliga databastabellen som visas nedan
Figur: Spara ändringar i databastabell genom att klickaSpara knapp