Mellékelt példa megnyitása előtt szükséges egy ImageInTemplate nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez nyissa meg a mellékelt mappa Tulajdonság ablakát és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
Az alkalmazás indítása előtt telepítenünk kell a feltöltött adatbázist. A feltöltött adatbázis installálásához olvassa el az Adatbázis előkészítése című bekezdést.
Adatbázis előkészítése
A mellékelt alkalmazás /resources mappájában található ImageDb_Data.MDF és ImageDb_Log.LDF állományok az ImageDb adatbázis feltöltött változatát tartalmazzák, melyet a következő módszerekkel lehet telepíteni:
Másoljuk be a mellékelt állományokat a MS SQL Server alkalmazás megfelelő mappájába: %winroot%:/Program Files/Microsoft SQL Server/Mssql/Data.
Indítsuk el a MS SQL Server Enterprise Manager nevű segédprogramját a szükséges konfigurációs beállítások elvégzéséhez. A program alapértelmezésben a Start menü MS SQL Server programcsoportjában helyezkedik el.
A számítógépen futó szervercsoportból válasszuk ki az ImageDb adatbázis helyeként megjelölendő MS SQL szervert, majd a szerveren telepített adatbázisokat reprezentáló mappán (Databases) kattintsunk az egér jobb gombjával; a felbukkanó menüből válasszuk a Minden feladat nevű almenüpontot, majd az Attach Database segédfunkciót.
A ’MDF file of database attach’ szerkesztőmező mellett elhelyezett tallózó gombbal keressük meg a mellékelt ImageDb_Data.MDF állományt, majd kattintsunk az OK gombra az ImageDb adatbázis installálásához. Az adatbázis feltelepült, és használatra kész.
A mellékelt alkalmazás szerkezete
Az ASP.NET alkalmazás alapvetően két részből áll: a WebForm1.aspx oldalon található egy DataGrid kontrol, melynek oszlopaiban jelenítjük meg az adatbázisban aktuálisan tárolt képeket; a WebForm2.aspx oldalon lehetőségünk van képek beolvasására és tárolására az adatbázis Table1 táblájában.
Az adatbázisban a képeket három tulajdonságukkal tároljuk. A Table1 tábla 3 oszlopa a következő: ImageDb oszlopban egy egyedi azonosítót tárolunk a képekhez, az ImageData oszlop tartalmazza a kép bináris információit, míg a Title oszlopban találjuk meg a képek címét. Az adatbázis induláskor három képet tartalmaz.
Az alkalmazáshoz tartozik egy Image.aspx oldal, mely a betöltődéskor megkapott paraméter alapján megjeleníti az adott képet egy adatbázis-művelettel.
Hibák esetén egy Error.aspx nevű oldal töltődik be kezelésképpen.
Képek beolvasása – WebForm2.aspx
A képek merevlemezen történő megkereséséhez a HTML forrásba ágyazott HtmlInputFile kontrolt használunk:
<INPUT type="file" runat="server" id="txtFile" NAME="txtFile" style="Z-INDEX: 102; LEFT: 151px; POSITION: absolute; TOP: 145px">
A kontrol Browse feliratú gombjára kattintva egy OpenDialog ablakban megkereshető a beolvasandó képállomány, majd a Beszúrás gombra kattintva a választott kép betehető az adatbázisba egy InsertImage nevű tárolt eljárást használva. Létrehoztunk egy tömböt a kép tárolására, HtmlInputFile objektum property-jeinek segítségével beolvassuk a képállományt:
Byte[] imageData = new Byte[txtFile.PostedFile.ContentLength];
txtFile.PostedFile.InputStream.Read(imageData, 0, txtFile.PostedFile.ContentLength);
Generálunk egy azonosítót:
Guid imageID = Guid.NewGuid();
Értéket adunk az SqlCommand komponens paramétereinek:
insCommand.Parameters["@ImageID"].Value = imageID;
insCommand.Parameters["@ImageData"].Value = imageData;
insCommand.Parameters["@Title"].Value = txtTitle.Text.Trim();
Végül beszúrjuk a képet, és az Image.aspx oldalon megjelenítjük a beszúrt állományt egy kiolvasó utasítással, mely egy GetImageById nevű tárolt eljárást hajt végre a kapott paramétert használva a kép kereséséhez:
try
{
connection.Open();
insCommand.ExecuteNonQuery();
connection.Close();
Response.Redirect("Image.aspx?id={" + imageID.ToString().ToUpper() + "}");
}
catch
{
...
}
Képek megjelenítése Template-ben – WebForm1.aspx
A DataGrid kontrol különböző oszlopaiban változatos típusú adatokat tárolhatunk. A DataGrid kontrol AutoGenerateColumns property-jének false értéket adva elérhetjük, hogy mi soroljuk fel a HTML forrásban azt, hogy milyen oszlopai legyenek a kontrolnak. Ezt a kontrol deklarációja után elhelyezett <Columns></Columns> tag-ek közt tehetjük meg.
A kontrolban két oszlop található meg minden sorban: az egyik oszlop EditCommandColumn típusú, ahol megtalálhatók lesznek a kép szerkesztéséhez szükséges LinkButton kontrolok, a másik oszlop TemplateColumn típusú, mely két Template objektumot tartalmaz a <ItemTemplate></ItemTemplate> és <EditItemTemplate></EditItemTemplate> albejegyzései között. Az első változat tartalmazza az alapértelmezett megjelenítését, míg a második a szerkesztéskor megjelenített kontrolcsoportot. A megfelelő szerkesztőgombokat használva és szerkesztőmezőket kitöltve az adott sorban megjelenített kép forrása az adatbázisban kicserélhető a megadott képállománnyal.
Ehhez egy UPDATE adatbázis-műveletre van szükség, melyet az UpdateImage tárolt eljárás hajt végre az Érvényesít LinkButton kontrollra kattintás után.
A változtatás elvethető az Elvet gombra kattintással.
Ahhoz, hogy a TemplateColumn oszlopokban betöltődő kontrolokban megadott információk eljussanak a szerverhez, és az tudja elvégezni az adatbázis-műveleteket, fel kell vennünk a Form objektumban két <INPUT TYPE=”hidden” mezőt. Az egyik neve __FILENAME, a másiké __FILETITLE, melyek hordozzák az újonnan beszúrandó képállomány nevét és elérési útját, valamint címét. Ezekkel az információkkal a szerver képes frissíteni a meglévő képet az új képpel.
<INPUT type="hidden" name="__FILENAME">
<INPUT type="hidden" name="__FILETITLE">
Meg kell írnunk egy JavaScript függvényt annak érdekében, hogy a Template-ben megjelenő HtmlInputFile kontrolban megadott fájl neve és címe bekerüljön a hidden mezőkbe. A függvény a HtmlInputFile kontrol tartalmának megváltozásakor fut le.
<script language="jscript">
function GetFile()
{
document.WebForm1.__FILENAME.value = document.WebForm1.txtFile.value;
document.WebForm1.__FILETITLE.value = document.WebForm1.Title.value;
}
</script>
A DataGrid kontrolt a következőképpen kell deklarálnunk ahhoz, hogy a megfelelő Template kontrolok jelenjenek meg. Először megadjuk, hogy mi jelenjen meg az első oszlopban:
<asp:datagrid id="grid" runat="server" AutoGenerateColumns="false" style="LEFT: 10px; POSITION: absolute; TOP: 40px">
<Columns>
<asp:EditCommandColumn ButtonType="LinkButton" UpdateText="Érvényesít" CancelText="Elvet" EditText="Szerkesztés">
<ItemStyle Width="100px"></ItemStyle>
</asp:EditCommandColumn>
Majd megadjuk a második oszlop tartalmát. Az alapértelmezett megjelenítés:
<asp:TemplateColumn HeaderText="Az adatbázis képei, melyeket felcserélhetők más képekre új képek bevitelével">
<HeaderStyle Font-Bold="True"></HeaderStyle>
<ItemStyle Width="400px"></ItemStyle>
<ItemTemplate>
<b><%# DataBinder.Eval (Container.DataItem, "Title") %></b><br>
<img src='Image.aspx?id=<%# DataBinder.Eval (Container.DataItem, "ImageID") %>' />
</ItemTemplate>
A Szerkesztés LinkButton gombra kattintva pedig a következő Template jelenik meg:
<EditItemTemplate>
<b>Kép címe:</b>
<br>
<input id="Title" type="text" value='<%# DataBinder.Eval (Container.DataItem, "Title") %>'>
<br>
<b>Új kép:</b><br>
<input type="file" ID="txtFile" NAME="txtFile" onchange="GetFile()" />
<br>
<b>Aktuális kép:</b>
<br>
<img src='Image.aspx?id=<%# DataBinder.Eval (Container.DataItem, "ImageID") %>' />
</EditItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid>
A szerkesztéskor megjelenő Érvényesít feliratú gombra kattintva egy művelettel frissíthető a meglévő kép azzal, amelyet megadtunk. Ehhez a gombhoz deklarált eseménykezelőben el kell végeznünk a következőket: a megadott névvel létrehozunk egy olvasó adatfolyamot, mely a képet beolvassa egy tömbbe.
...
FileStream imgStream = new FileStream(Request["__FILENAME"],FileMode.Open,FileAccess.Read);
Byte[] imageData = new Byte[imgStream.Length];
imgStream.Read(imageData, 0, (int)imgStream.Length);
A megadott értékeket paraméterként adjuk a tárolt eljárásnak, majd végrehajtjuk azt:
updCommand.Parameters["@ImageData"].Value = imageData;
updCommand.Parameters["@Title"].Value = Request["__FILETITLE"].ToString();
imgStream.Close();
...
connection.Open();
updCommand.ExecuteNonQuery();
connection.Close();
A cím és azonosító megjelenítéséhez a DataBinding osztály Eval metódusát használjuk fel, mely képes futási időben behelyettesíteni megfelelő adatokat egy kis ASP kódban.
Képmegjelenítés – Image.aspx
Az Image.aspx oldalon a képek megjelenítése egy adatbázis-művelet eredménye: egy GetImageById nevű tárolt eljárással kiolvassuk a megfelelő azonosítóval rendelkező képet. Az azonosítót az Image.aspx oldal paraméterként kapja az előző oldaltól:
Guid imageID = new Guid(Request.QueryString["id"]);
gibiCommand.Parameters["@ImageID"].Value = imageID;
Byte[] imageData;
connection.Open();
SqlDataReader reader = gibiCommand.ExecuteReader();
reader.Read();
imageData = (Byte[]) reader.GetValue(0);
connection.Close();
Megjelenítéshez a Response objektumot használjuk:
Response.Clear();
Response.OutputStream.Write(imageData,0,imageData.Length);
Response.Flush();