6.3.2. მართვის ელემენტი GridView

მართვის ელემენტი GridView ASP.NET 2.0-ში გამოჩნდა. იგი DataGrid-ის ანალოგიური, მაგრამ მეტი ფუნქციონალური შესაძლებლობებით. აქ, ფაქტობრივად, ვიზუალური დაპროგრამების რეჟიმში წყდება ყველა ის ამოცანა, რომლის რეალიზაციისთვის DataGrid-ში საჭიროა სპეციალური, ზოგ შემთხვევაში საკმაოდ რთული პროგრამული კოდის დაწერა. კერძოდ, არ არის საჭირო პროგრამის დაწერა ისეთი ოპერაციების შესასრულებლად, როგორიცაა:

·        დახარისხება;

·        რედაქტირება, ჩანაწერის დამატება, ჩანაწერის ამოშლა;

·        რამდენიმე ცხრილიდან შეკითხვის ფორმირება;

·        მონაცემების გამოტანა მართვის ელემენტში GridView.

დასაწყისში მარტივ, ერთი ცხრილის მაგალითზე ვაჩვენოთ მართვის ელემენტის გამოყენებით ინტერაქტიული Web-გვერდის შექმნა. ამ მაგალითში ცხრილის ელემენტებისთვის განხორციელებული ფორმატიზაციის წესები რამდენიმე ურთიერთდაკავშირებული ცხრილიდან გამოტანილი მონაცემების რედაქტირების წესების იდენტურია.

Visual Studio 2005-ის გამოძახების და Web-საითის შექმნის შემდეგ (ბრძანება File>>New Web Site) ინსტრუმენტულ პანელზე დააწკაპუნეთ ღილაკზე Toolbox/sur.6.42/. გამოვა ინსტრუმენტული პანელი მართვის ელემენტებით. ორჯერ დააწკაპუნეთ მართვის ელემენტის დასახელებაზე GridWiev.  გვერდზე მოთავსდება მართვის ელემენტი.

გვერდზე მართვის ელემენტის GridWiev-ის მოთავსების შემდეგ დახურეთ ახლად შექმნილი Web-საითი და შემდეგ გადაიტანეთ  ამ Web-საითის საქაღალდეში:

·            Access-ში ორგანიზებული მონაცემების ბაზა, რომელთანაც უნდა განხორციელდეს დაკავშირება;

·       FrontPage-ში ან სხვა რედაქტორში შექმნილი Web-გვერდები და ყველა ის გრაფიკული გამოსახულება (სურათი და სხვა), რომელიც Web-გვერდებშია გამოყენებული;

·            ამ სამუშაოების შესრულების შემდეგ გააღეთ თქვენ მიერ შექმნილი Web-საითი.

ამ მომენტიდან შეიძლება დაიწყოს ინტერაქტიული Web-საითის დაპროექტება. მონიშნეთ მართვის ელემენტი GridWiev და თაგვის მარჯვენა ღილაკზე დაწკაპუნების შემდეგ გამოსულ კონტექსურ მენიუში სტრიქონზე Show Smart Tag დაწკაპუნებით მიღებულ მენიუს გამოყენებით განახორციელეთ შემდეგი სამუშაოები:

1.           მონაცემების წყაროსთან დაკავშირება

·            მიეცით ბრძანება Choose Data Source>>New data source. გამოვა დიალოგური ფანჯარა Data Source Configuration Wizard/სურ. 6.43/;

·            ფანჯარაში მონიშნეთ მონაცემების ბაზის ტიპი –  ჩვენ შემთხვევაში მონაცემების ბაზა Access Database და დააწკაპუნეთ ღილაკზე OK;

·            გამოვა ფანჯარა, სადაც ღილაკზე Browse დაწკაპუნების შემდეგ გამოვა ფანჯარა მონაცემების წყაროს მისათითებლად/სურ.6.44/.

მიაქციეთ ყურადღება ფანჯრის მარჯვენა მხარეს, სადაც ნაჩვენებია ჩვენ მიერ Web-საითის საქაღალდეში გადატანილი მონაცემების ბაზა, რომლის მონიშვნა შეიძლება. თუ ბაზა გადატანილი არ იქნებოდა Web-საითის საქაღალდეში, მაშინ იგი არ გამოჩნდებოდა ამ ფანჯარაში და შესაბამისად მასთან დაკავშირებაც შეუძლებელი იქნებოდა. ველში Files of type მითითებულია *.mdb გაფართოების ფაილები. ყველა ტიპის ფაილის მითითების შემდეგ ამ ფანჯარაში წვდომადი იქნება Web-საითის საქაღალდეში ჩვენ მიერ გადატანილი სხვა ფაილებიც/სურ. 6.45/.

სურ. 6.45. Web-საითის საქაღალდეში ჩვენ მიერ გადატანილი ფაილები

სურ. 6.44-ზე გამოსულ ფანჯარაში მონაცემების ბაზის მონიშვნის, ამავე ფანჯარაში OK ღილაკზე დაწკაპუნების შემდეგ გამოვა ფანჯარა, რომელშიც დააწკაპუნეთ ღილაკზე Next. გამოვა ფანჯარა, რომელშიც ჩამოწერილია ბაზაში არსებული ცხრილები და შეკითხვები. აირჩიეთ ერთ-ერთი ცხრილი და მონიშნეთ ის ველები, რომელთა გამოტანაც გსურთ GridWiev-ზე/სურ. 6.46/.

ჩვენ გვსურს, რომ Internet-ში მუშაობისას ჩვენი სურვილის მიხედვით ამოვარჩიოთ ინფორმაცია იმ სტუდენტების შესახებ, რომლებსაც აქვთ გაცდენილი კონკრეტული საგანი გარკვეული დროის განმავლობაში. ამ მიზნით გვერდზე GridWiev-ის დატანის გარდა დავიტანეთ მართვის ელემენტები: TextBox – შეკითხვის მისაცემად, Label – წარწერის გასაკეთებლად და Button – პროგრამის გამოსაძახებლად.

მონაცემების ბაზიდან საგნის დასახელებით მონაცემების ამორჩევის მიზნით, სურ. 6.46-ზე ნაჩვენებ ფანჯარაში დააწკაპუნეთ ღილაკზე WHERE. გამოვიდა ფანჯარა, რომელშიც ველში Column მიუთითეთ ველის სახელი sagani (იმიტომ, რომ გვსურს ამორჩევა საგნის დასახელებით), ველში Operator მიუთითეთ LIKE (ეს საშუალებას გვაძლევს სრულად არ აკვრიფოთ საგნის დასახელება), ველში Source მიუთითეთ Control, rac ნიშნავს, რომ შეკითხვა მართვის ელემენტის – TextBox საშუალებით ხორციელდება და ბოლოს ველში Control ID მიუთითეთ ჩვენ მიერ დატანილი TextBox-ის სახელი – TextBox1/სურ. 6.47/.

სურ. 6.47. შეკითხვის ინსტრუქციაში ამორჩევის პარამეტრების მითითება

ამ პარამეტრების მიცემის შემდეგ SQL ენაზე დაწერილი ინსტრუქცია შემდეგ სახეს მიიღებს/სურ. 6.48/.

2. GridWiev-ის ცხრილისთვის პარამეტრების მიცემა

მონაცემების წყაროსთან დაკავშირების შემდეგ ცხრილში ნაჩვენები თვისებების და ამ თვისებების მნიშვნელობების გამოყენებით გვერდზე დატანილ მართვის ელემენტს GridWiev-ს მივუთითოთ  GridWiev-ის ცხრილის ყველა სვეტისთვის და სტიქონისთვის საჭირო პარამეტრები/ცხრ. 6.8/

                                                                                                                                                                                                                      ცხრილი 6.8.        

3. GridWiev-ის ცხრილის სვეტებისთვის  პარამეტრების მიცემა

·            ამორჩეული მონაცემების სვეტების

მიხედვით   დახარისხების მიზნით მოინიშნოსY ალამი: Enable Sorting/სურ. 6.49/.

სურ. 6.49. ყველა სვეტით მონაცემების დახარისხების მითითება

·            ცალკეული სვეტებისთვის პარამეტრების დასაყენებლად დააწკაპუნეთ სტრიქონზე Edit Columns... გამოვა ფანჯარა Fields/სურ. 6.50/;

·            ველში HeaderText მიეთითება სვეტის დასახელება. ველში SortExsperssion სისტემა უთითებს ველის სახელს, რომლითაც დახარისხება ხორციელდება, სისტემის მიერ იმიტომ არის ჩაწერილი ველის სახელი, რომ ჩვენ მოვნიშნეთ ალამი Enable Sorting /სურ.6.50/. თუ არ არის მითითებული ველის სახელი, მაშინ დახარისხება არ განხორციელდება;

·            ველში DataFormatingString მიეთითოს ფორმატიზაციის ატრიბუტები.

აქ ჩამოთვლილი ოპერაციების შესრულების შემდეგ Web-გვერდს დაპროექტების რეჟიმში შემდეგი სახე ექნება/სურ. 6.51/.

4.      მონაცემების ბაზიდან შეკითხვით ამორჩევა

·        თაგუნას მარცხენა კლავიშით ორჯერ დააწკაპუნეთ ჩვენ მიერ დაპროექტებულ ღილაკზე "ამორჩევა”. გამოჩნდება გვერდი პროგრამული კოდის ჩასაწერად;

·        ჩაწერეთ ერთადერთი ბრძანება Me.DataBind. ეს ბრძანება უზრუნველყოფს SQL instruqciiT  amorCeuli Canawerebis gamotanas GridWiev-ში.

პროგრამა შემდეგია:

artial Class _Default

    Inherits System.Web.UI.Page

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

        Me.DataBind()

    End Sub

End Class

5.    Web-გვერდიდან სხვა Web-გვერდებთან ჰიპერკავშირების დამყარება  

დავუშვათ, სიტყვაზე წინ/სურ. 6.51/ დაწკაპუნების შემდეგ Internet Explorer-ში საჭიროა გამოვიდეს სხვა გვერდი.

·        მონიშნეთ სიტყვა წინ და ინსტრუმენტულ პანელზე დააწკაპუნეთ ღილაკზე Convert to Hyperlink. გამოვა ფანჯარა/სურ. 6.52/. ფანჯარაში დააწკაპუნეთ ღილაკზე Dროწსე. გამოვა ფანჯარა/სურ.6.45/, რომელშიც მონიშნეთ Html გაფართოების მქონე ის ფაილი, რომელიც გამოტანილ უნდა იქნეს Internet Explorer-ში. დააჭირეთ ღილაკს OK.

სურ. 6.52. ფანჯარა Hyperlink

6.    GridView-ის ცხრილში მონაცემების რედაქტირება  

პროგრამული კოდის დაწერის გარეშე ცხრილში რედაქტირების განსახორციელებლად მართვის ელემენტი GridView დაპროექტდეს განსხვავებული წესით.

·        მიეცით ბრძანება View/Server Explorer. გამოვა ფანჯარა/სურ. 6.53/;

·      ფანჯარაში დააწკაპუნეთ ღილაკზე Connect to Database;

·      გამოვა დიალოგური ფანჯარა, ველში Data source გაჩუმებით მითითებულია Microsoft Access Database File (OLE DB). მონაცემების სხვა ბაზასთან დასაკავშირებლად დააწკაპუნეთ ღილაკზე Change და გამოსულ ფანჯარაში მონიშნეთ შესაბამისი ტიპის ბაზა. კონკრეტული მონაცემების ბაზის მისათითებლად და მასთან კავშირის დასამყარებლად დააწკაპუნეთ  ღილაკზე Browse და მიუთითეთ იგი/სურ.6.54/. ბაზის მითითების შემდეგ დიალოგურ ფანჯარაში Server Explorer ჩაიწერება მონაცემების ბაზის დასახელება და მისამართი. ჩამოიწერება ამ ბაზაში არსებული ცხრილები, შეკითხვები, შენახული პროცედურები, ფუნქციები    /სურ. 6.55/.

 სურ. 6.54. დიალოგური ფანჯარა მონაცემების წყარის შესარჩევად და კავშირის დასამყარებლად

·      თაგუნას  მაჩვენებელით გადმოიტანეთ ცხრილის დასახელება გვერდზე. სისტემა ავტომატურად დააკავშირებს ცხრილის ყველა ველს მართვის ელემენტთან GრიდVიეწ და ამ მონაცემებს მონაცემების ბაზასთან. გენერირებული იქნება HTML კოდი, რომელშიც მითითებულია მონაცემების წყარო, ველების განახლების კოდი და სხვა. სურ.6.55-ზე ნაჩვენებია ცხრილი სახელით tbstudenti დაკავშირებული მართვის ელემენტთან. მართვის ელემენტში ცხრილის ყველა ველია გამოტანილი. მოახდინეთ ცხრილის რედაქტირება: შრიფტი, ცხრილის სათაურის ტექსტი (თუ სათაური განსხვავებულია ველის დასახელებისგან) და სხვა.

6.      რედაქტირების ღილაკებისთვის დასახელებების დაწერა

·        დააწკაპუნეთ სტრიქონზე Edit Columns/sur. 6.49/. გამოვა ფანჯარა/სურ. 6.56/, რომელშიც ველში “Selected fields” მონიშნეთ დამატებული სვეტის სახელი „ცვლილებები”. ფანჯრის მარჯვენა მხარეს სტრიქონებში: EdirText, InsertText, DeleteText, CancelText, Selecttext, UpdateText ჩაწერეთ შესატყვისი დასახელებები ქართულად. ცხრილში არსებული ველებიდან მართვის ელემენტზე დატოვეთ ველები: ნომერი, ფაკულტეტი, გვარი, სახელი, მამის სახელი, სპეციალობა. რედაქტირების ღილაკებს დააწერეთ ქართულად შესატყვისი  დასახელებები: ცვლილება, გაუქმება, დამახსოვრება.

Web-გვერდს რედაქტირების შემდეგ ამგვარი სახე ექნება/სურ. 6.57/.

სურ. 6.56. ცვლილებების ტიპების მიხედვით სათაურების დაწერა

სურ.6.57 მართვის ელემენტზე GრიდVიეწ დატანილი ცხრილი დაპროექტების შემდეგ

 სურ. 6.58-ზე ნაჩვენებია გვერდი Internet Explorer-ში.

სურ. 6.58 გვერდი Internet Explorer-ში

ღილაკზე „ცვლილება“ დაწკაპუნების შემდეგ გამოვა შემდეგი სურათი/სურ. 6.59/:

სურ. 6.59. ღილაკზე „ცვლილება“ დაწკაპუნების შემდეგ მიღებული ცხრილი

შეცვალეთ გვარი  „ლალაძე“, გვარით „ჩემია“ და დააწკაპუნეთ ღილაკზე „დამახსოვრება“. ცვლილება დაფიქსირდება მონაცემების ბაზაში.

რედაქტირებული მართვის ელემენტის GridView-ის html კოდი შემდეგია:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="nomeri"

            DataSourceID="AccessDataSource1" EmptyDataText="There are no data records to display." AllowSorting="True" Font-Names="AcadNusx" Font-Size="Small">

          <Columns>

                <asp:BoundField DataField="nomeri" HeaderText="nomeri" ReadOnly="True" SortExpression="nomeri" />

                <asp:BoundField DataField="fakulteti" HeaderText="fakulteti" SortExpression="fakulteti" />

                <asp:BoundField DataField="gvari" HeaderText="gvari" SortExpression="gvari" />

                <asp:BoundField DataField="saxeli" HeaderText="saxeli" SortExpression="saxeli" />

                <asp:BoundField DataField="mamsaxeli" HeaderText="mamis saxeli" SortExpression="mamsaxeli" />

                <asp:BoundField DataField="spec" HeaderText="spec" SortExpression="spec" />

                <asp:CommandField ShowEditButton="True" CancelText="gauqmeba" DeleteText="amoSla" EditText="cvlileba" InsertText="Casma" UpdateText="damaxsovreba" />

            </Columns>

        </asp:GridView>

        <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="C:\Documents and Settings\Ruso\Desktop1\ekonfakulteti.mdb"

DeleteCommand="DELETE FROM `tbstudentiz` WHERE `nomeri` = ?" InsertCommand="INSERT INTO `tbstudentiz` (`nomeri`, `fakulteti`, `gvari`, `saxeli`, `mamsaxeli`, `dabTariRi`, `dabadgili`, `erovneba`, `moqlaqeoba`, `ganaTleba`, `muSaoba`, `ojaxi`, `Svilebi`, `mSoblebi`, `misamarTi`, `telefoni`, `spec`) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)"

SelectCommand="SELECT `nomeri`, `fakulteti`, `gvari`, `saxeli`, `mamsaxeli`, `dabTariRi`, `dabadgili`, `erovneba`, `moqlaqeoba`, `ganaTleba`, `muSaoba`, `ojaxi`, `Svilebi`, `mSoblebi`, `misamarTi`, `telefoni`, `spec` FROM `tbstudentiz`"

UpdateCommand="UPDATE `tbstudentiz` SET `fakulteti` = ?, `gvari` = ?, `saxeli` = ?, `mamsaxeli` = ?, `dabTariRi` = ?, `dabadgili` = ?, `erovneba` = ?, `moqlaqeoba` = ?, `ganaTleba` = ?, `muSaoba` = ?, `ojaxi` = ?, `Svilebi` = ?, `mSoblebi` = ?, `misamarTi` = ?, `telefoni` = ?, `spec` = ? WHERE `nomeri` = ?">

<InsertParameters>

      <asp:Parameter Name="nomeri" Type="Int32" />

      <asp:Parameter Name="fakulteti" Type="Byte" />

      <asp:Parameter Name="gvari" Type="String" />

      <asp:Parameter Name="saxeli" Type="String" />

      <asp:Parameter Name="mamsaxeli" Type="String" />

      <asp:Parameter Name="dabTariRi" Type="DateTime" />

      <asp:Parameter Name="dabadgili" Type="String" />

      <asp:Parameter Name="erovneba" Type="String" />

      <asp:Parameter Name="moqlaqeoba" Type="String" />

      <asp:Parameter Name="ganaTleba" Type="String" />

      <asp:Parameter Name="muSaoba" Type="String" />

      <asp:Parameter Name="ojaxi" Type="String" />

      <asp:Parameter Name="Svilebi" Type="String" />

      <asp:Parameter Name="mSoblebi" Type="String" />

      <asp:Parameter Name="misamarTi" Type="String" />

      <asp:Parameter Name="telefoni" Type="String" />

      <asp:Parameter Name="spec" Type="Int16" />

            </InsertParameters>         

<DeleteParameters>

       <asp:Parameter Name="nomeri" Type="Int32" />

            </DeleteParameters>

            <UpdateParameters>

     <asp:Parameter Name="fakulteti" Type="Byte" />

     <asp:Parameter Name="gvari" Type="String" />

     <asp:Parameter Name="saxeli" Type="String" />

     <asp:Parameter Name="mamsaxeli" Type="String" />

     <asp:Parameter Name="dabTariRi" Type="DateTime" />

     <asp:Parameter Name="dabadgili" Type="String" />

     <asp:Parameter Name="erovneba" Type="String" />

     <asp:Parameter Name="moqlaqeoba" Type="String" />

     <asp:Parameter Name="ganaTleba" Type="String" />

     <asp:Parameter Name="muSaoba" Type="String" />

     <asp:Parameter Name="ojaxi" Type="String" />

     <asp:Parameter Name="Svilebi" Type="String" />

     <asp:Parameter Name="mSoblebi" Type="String" />

     <asp:Parameter Name="misamarTi" Type="String" />

     <asp:Parameter Name="telefoni" Type="String" />

     <asp:Parameter Name="spec" Type="Int16" />

     <asp:Parameter Name="nomeri" Type="Int32" />

            </UpdateParameters>

        </asp:AccessDataSource>

განვიხილოთ რამდენიმე ურთიერთდაკავშირებული ცხრილიდან შეკითხვის ფორმირება და შედეგის გამოტანა  GridView-ზე.

სურათზე 6.59 ჩანს, რომ ველში „სპეციალობა“ ნაჩვენებია სპეციალობის კოდი. ცხადია, ეს ცხრილში წარმოდგენილ მონაცემებთან სამუშაოდ მოუხერხებელია. სასურველია, კოდის ნაცვლად სპეციალობის დასახელების მითითება. მონაცემების ბაზაში ცხრილები tbstudenti და tbspecialoba დაკავშირებულია ერთმანეთთან. საჭიროა ამ დაკავშირების ასახვა და შემდეგ სპეციალობის დასახელების გამოტანა მართვის ელემენტში. დასმული მიზნის მისაღწევად:

·      თაგუნას  მაჩვენებელი დააყენეთ AccessDataSource-ze da daawkapuneT. konteqstur meniuSi moniSneT striqoni Properties. გამოვა ფანჯარა, რომელშიც მონიშნეთ სტრიქონი SelectQueery/სურ. 6.60/. ღილაკზე … დაწკაპუნების შემდეგ გამოვა ფანჯარა, რომელშიც დააჭირეთ ღილაკზე Query Builder;…

სურ. 6.60. დიალოგური ფანჯარა Properties

·      ღილაკზე Query Builder დაწკაპუნების შემდეგ გამოვა დიალოგური ფანჯარა, ცხრილს tbstudent-ს დაამატეთ ცხრილი tbspecsia და ამ ცხრილიდან მონიშნეთ ველი specdas. დააჭირეთ ღილაკს OK/სურ. 6.61/;

სურ. 6.61. ბაზაში არსებული დაკავშირებული ცხრილების გამოტანა

·   ამოიღეთ ველი სპეციალობის კოდის მითითებით და მის ნაცვლად დაამატეთ ველი specdas, რომელიც უზრუნველყოფს სპეციალობის დასახელების გამოტანას. გვერდის გაშვების შემდეგ Internet Explorer-ში გამოჩნდება შემდეგი/სურ. 6.62/.