Windows Programming Web controls

•Τα web forms είναι container αντικείμενα σχεδιασμένα για να κάνουνε host άλλα controls, όπως α) Web server controls, β) HTML controls, γ) Validation Controls και δ) User Controls •Τα user controls είναι custom controls που δημιουργούνται από τον προγραμματιστή

HTML και Web controls •Τα HTML controls είναι κλάσεις που κληρονομούν κλάσεις από το namespace System.Web.UI.HtmlControls. Αυτά τα controls δημιουργούνται από το.ΝΕΤ όταν προστεθεί στο HTML tag τους η ιδιότητα runat=“server” • •Τα Web Controls είναι αντικείμενα που δημιουργούνται από κλάσεις που υπάρχουνε στο namespace System.Web.UI.WebControls. Αυτά τα controls δημιουργούνται με την προσθήκη του προθέματος asp: και την ιδιότητα runat=“server” •

Τύποι Web Controls •Το κεφάλαιο χωρίζει τα Web Controls στις παρακάτω κατηγορίες 1.Απλά controls 2.Controls κουμπιά (button) 3.Controls λίστες (list) 4.Data-bound controls (μπορούν να ‘συνδεθούν’ με δεδομένα) 5.Controls ημερολόγια (calendar) 6.Controls ελέγχου (validation)

Προγραμματισμός των Web Controls •Ο προγραμματισμός των Web Controls συνίσταται στα παρακάτω βήματα 1.Δημιουργία του control σε ένα container αντικείμενο (π.χ. μια Web φόρμα) 2.Προσδιορισμός των ιδιοτήτων του control 3.Προσδιορισμός των events του control 4.Δημιουργία των μεθόδων που θα αποκρίνονται σε events του control 5.Προσδιορισμός αν το control θα έχει την ιδιότητα DoPostBack true ή false

Απλά Web Controls: TextBox •Αυτό το control δημιουργείται με την εντολή • •Το TextBox είναι ένα control που έχει διάφορες ιδιότητες, όπως Text,TextMode,Rows,Columns,AutoPostBack •Ανάμεσα στα events που μπορεί να κάνει fire αυτό το control έχουμε το TextChanged, το οποίο ενεργοποιείται μόνο αν η ιδιότητα AutoPostBack είναι αληθής. Αυτό είναι σημαντικό καθώς η ενεργοποίηση ή μη αυτής της ιδιότητας μπορεί να έχει αντίκτυπο στην απόδοση της σελίδας.

Απλά Web Controls: Label •Αυτό το control δημιουργείται με την εντολή • •Είναι από τα πιο απλά controls •Προσοχή: 1.Ενεργοποίηση ή μη του event TextChanged, το οποίο μπορεί να γίνει handle από κάποια κατάλληλη συνάρτηση 2.Η χρησιμοποίηση του αντίστοιχου HTML αντικειμένου κάνει τη σελίδα μας να είναι πιο γρήγορη.

Απλά Web Controls: HyperLink •Αυτό το control έχει δύο υποστάσεις. Είτε ως κείμενο είτε ως εικόνα <asp:HyperLink Text="Click here" Target="_new" NavigateUrl=“ RunAt="server" /> •Η χρήση του αντίστοιχου HTML κάνει τη σελίδα πιο γρήγορη.

Απλά Web Controls: CheckBox και RadioButtons •Το CheckBox είναι ένα control που έχει ιδιότητες όπως Checked,Text κ.λ.π. που επηρεάζουνε την εμφάνιση του control. •Τα RadioButtons κληρονομούν το CheckBox. Επιτρέπουνε το grouping πολλών αμοιβαία αποκλειόμενων κουμπιών. •

Απλά Web Controls: Image •Το control αυτό μπορεί να χρησιμοποιηθεί είτε με τη μορφή κειμένου είτε με τη μορφή εικόνας. •Η HTML έκδοση αυτού του control έχει καλύτερη απόδοση.

Απλά Web Controls: Table •Αυτό το control αποτελείται από συλλογές από άλλα controls που χρησιμοποιούνται για δημιουργήσουνε πίνακες. Τα controls που το αποτελούνε είναι τύπου asp:Table, asp:TableRow, asp:TableCell. Με αυτά τα controls μπορούνε δυναμικά να δημιουργηθούνε πίνακες. Π.χ. • void Page_Load (Object sender, EventArgs e) { for (int i=0; i<2; i++) { TableRow row = new TableRow (); for (int j=0; j<2; j++) { TableCell cell = new TableCell (); cell.Text = String.Format ("Row {0}, Column {1}", i + 1, j + 1); row.Cells.Add (cell); } MyTable.Rows.Add (row); }

Controls κουμπιά •Υπάρχουν τρία είδη από control κουμπιά. Button, LinkButton και ImageButton, που έχουν ακριβώς την ίδια λειτουργία και παρουσιάζονται σαν ένα κανονικό κουμπί, έναν υπερσύνδεσμο ή μία εικόνα αντίστοιχα. •Αυτά τα controls μπορούνε να κάνουνε fire δύο τύπους άπό events: Click και Command. •Το Click event μπορεί να χρησιμοποιηθεί για αναγνώριση των x και y συντεταγμένων αν γίνει σε μία εικόνα, ενώ το Command μπορεί να έχει παραμέτρους που να αλλάξουν δυναμικά την εκτέλεση του script.

Controls λίστες •Υπάρχουν 4 controls που κληρονομούν το System.Web.UI.WebControls.ListControl: •ListBox, DropDownList, CheckBoxList και RadioButtonList •Ασχέτως του τύπου του container control, τα αντικείμενα μέσα σε αυτά τα controls γράφονται ως asp:ListItem αντικείμενα. •Η.List.SelectedIndex ιδιότητα επιστρέφει ένα αντικείμενο ListItem.

Data Binding με τα Controls Λίστες •Αν υποθέσουμε ότι έχουμε ένα ListBox ονόματι Currencies και θέλουμε να το γεμίσουμε με αντικείμενα, τότε μπορούμε να χρησιμοποιήσουμε έναν κώδικα σαν τον παρακάτω: DataSet ds = new DataSet(); ds.ReadXml = (Server.MapPAth(“Rates.XML”)); foreach (DataRow in ds.Tables[0].Rows) Currencies.items.Add ( row[“Currency”].ToString()); •Αντί για αυτό όμως, μπορούμε να χρησιμοποιήσουμε την πολύ πιο γρήγορη τεχνική του data binding. DataSet ds = new DataSet(); ds.ReadXml = (Server.MapPAth(“Rates.XML”)); Currencies.DataSource = ds; Currencies.DataTextField = “Currency”; Currencies.DataBind(); •Τα ListBox αντικείμενα κληρονομούν ιδιότητες από το IListControl. Μερικές από αυτές είναι το DataSource, το οποίο χρησιμοποιείται, όπως είδαμε παραπάνω, για data binding, και μπορεί να πάρει σαν source αντικείμενα που κάνουνε implement το Interface IEnumerable.

Data Bound Controls •Η κύρια ιδέα είναι ότι αυτά τα controls μπορούνε να γίνουνε bind σε DataSource αντικείμενα και μας παρέχουνε τα μέσα για να απεικονίσουμε τα περιεχόμενά τους μέσω της μεθόδου myControl.DataBind();, χρησιμοποιώντας και κάποιες άλλες οδηγίες όπως • •Υπάρχουνε 3 τύποι από data bound controls 1.Repeater Controls 2.DataList Controls 3.DataGrid Controls

Repeater Control •Το control αυτό δείχνει πανομοιότυπα αντικείμενα, το ένα μετά το άλλο. void Page_Load (Object sender, EventArgs e) { if (!IsPostBack) { string[] beatles = { "John", "Paul", "George", "Ringo" }; MyRepeater.DataSource = beatles; MyRepeater.DataBind (); }

Εναλλασόμενα αντικείμενα σε Repeater Control •Προβολή εναλλασόμενων αντικειμένων σε διαφορετικά χρώματα

Header και Footer templates •Προβολή εναλλασόμενων γραμμών σε διαφορετικά χρώματα, με υπογραμμισμένο Header και Footer

Repeater Control <%# DataBinder.Eval (Container.DataItem, "title") + " (" + DataBinder.Eval (Container.DataItem, "price", "{0:c}") + ")" %>

Repeater Control •Αυτός είναι ο κώδικας για να γεμίσει με αντικείμενα από τη βάση το Repeater της προηγούμενης σελίδας void Page_Load (Object sender, EventArgs e) { if (!IsPostBack) { SqlConnection connection = new SqlConnection ("server=localhost;database=pubs;uid=sa;pwd="); try { connection.Open (); SqlCommand command = new SqlCommand ("select * from titles where price != 0",connection); SqlDataReader reader = command.ExecuteReader(); MyRepeater.DataSource = reader; MyRepeater.DataBind (); } finally { connection.Close (); }

<asp:Repeater ID="MyRepeater" OnItemCommand="OnItemCommand" RunAt="server"> Title Price Action <%# DataBinder.Eval (Container.DataItem, "price", "{0:c}") %> <asp:Button Text="Add to Cart" RunAt="server" CommandArgument='<%# DataBinder.Eval (Container.DataItem, "title") %>' /> void Page_Load (Object sender, EventArgs e) { if (!IsPostBack) { SqlConnection connection = new SqlConnection ("server=localhost;database=pubs;uid=sa;pwd="); try { connection.Open (); SqlCommand command; command = new SqlCommand ("select * from titles where price != 0", connection); SqlDataReader reader = command.ExecuteReader (); MyRepeater.DataSource = reader; MyRepeater.DataBind (); } finally { connection.Close (); } void OnItemCommand (Object sender, RepeaterCommandEventArgs e) { Output.Text = e.CommandArgument.ToString (); }

Repeater Control •Το παρακάτω τμήμα κώδικα μας δείχνει πως μπορούμε να βάλουμε εικόνα σαν υπερσύνδεσμο σε ένα repeater control <a href='Images/Large/<%# DataBinder.Eval (Container.DataItem, "LargeCover") %>'> <img src='Images/Small/<%# DataBinder.Eval (Container.DataItem, "SmallCover") %>'

DataList Control •Αυτό το control μας παρέχει τη δυνατότητα για 1.Multi-Column Format (από τις ιδιότητες RepeatColumns και RepeatDirection) 2.ItemSelection (επιλογή αντικειμένου - από την ιδιότητα SelectedIndex) 3.Item Editing (επεξεργασία αντικειμένου – από τις ιδιότητες EditItemStyle και EditItemTemplate)

•Τα DataList controls, όταν πατηθεί ένα LinkButton, κάνουνε fire ένα event ItemCommand και η συνάρτηση που το κάνει handle επιλέγει το αντικείμενο στο οποίο έγινε κλικ. Το DataList κάνει multicolumn διαμόρφωση με το να διαμοιράζει τα αντικείμενα του σε δύο στήλες: <asp:DataList ID="MyDataList" RunAt="server" RepeatColumns="2" RepeatDirection="Horizontal" OnItemCommand="OnItemCommand"> " RunAt="server" /> void Page_Load (Object sender, EventArgs e) { if (!IsPostBack) { string[] beatles = { "John", "Paul", "George", "Ringo" }; MyDataList.DataSource = beatles; MyDataList.DataBind (); } void OnItemCommand (Object sender, DataListCommandEventArgs e) { MyDataList.SelectedIndex = e.Item.ItemIndex; }

DataList Control

<asp:DataList ID="MyDataList" RepeatColumns="3" RepeatDirection="Horizontal" CellPadding="4" OnItemCommand="OnItemCommand" RunAt="server"> <a href='Images/Large/<%# DataBinder.Eval (Container.DataItem, "LargeCover") %>'> <img src='Images/Small/<%# DataBinder.Eval (Container.DataItem, "SmallCover") %>'> <asp:LinkButton CommandName="Select" RunAt="server" CommandArgument='<%# DataBinder.Eval (Container.DataItem, "Comment") %>' Text='<%# DataBinder.Eval (Container.DataItem, "Title") + " " + DataBinder.Eval (Container.DataItem, "Number") %>' /> <%# DataBinder.Eval (Container.DataItem, "Rating", "{0:f1}") %>

Datagrid Control •Το datagrid είναι το πιο συχνά χρησιμοποιούμενο control. •Χρησιμοποιείται για να παρουσιάσει δεδομένα σε μορφή σειρών και στηλών (όπως και το Excel) •Έχει πάρα πολλές ιδιότητες και events, αλλά μπορεί να προγραμματιστεί αρκετά εύκολα. •Η κύρια διαδικασία όταν προγραμματίζουμε ένα datagrid είναι να του προσδιορίσουμε χρώματα κ.λ.π. καθώς και να του προσθέσουμε στοιχεία που θα το κάνουνε πιο εύχρηστο.

Datagrid control void Page_Load (Object sender, EventArgs e) { if (!IsPostBack) { SqlConnection connection = new SqlConnection("server=localhost;database=pubs;uid=sa;pwd="); try { connection.Open (); SqlCommand command = new SqlCommand("select * from titles where price != 0",connection); SqlDataReader reader = command.ExecuteReader (); MyDataGrid.DataSource = reader; MyDataGrid.DataBind (); } finally { connection.Close (); }

Datagrid control •Τύποι στηλών στο Datagrid Τύπος στήληςΠεριγραφή BoundColumnΔημιουργεί μία στήλη το περιεχόμενο της οποίας προέρχεται από ένα πεδίο στο αντικείμενο που θα οριστεί σαν datasource ButtonColumnΔημιουργεί μια στήλη που περιέχει κουμπιά EditColumntΔημιουργεί μια στήλη με κουμπιά, το πάτημα των οποίων επιτρέπει να γίνει επεξεργασία των αντικειμένων του datagrid HyperLinkColumnΔημιουργεί μια στήλη με υπερσυνδέσμους. Το κείμενό τους μπορεί να είναι στατικό ή να είναι κάποιο πεδίο του datasource TemplateColumnΔημιουργεί μία στήλη με αντικείμενα η εμφάνιση των οποίων καθορίζεται από ένα UI template, προγραμματιζόμενο από το χρήστη Το datagrid υποστηρίζει και προχωρημένες λειτουργίες, όπως ταξινόμηση των δεδομένων του

<asp:DataGrid ID="MyDataGrid" AutoGenerateColumns="false" CellPadding="2" BorderWidth="1" BorderColor="lightgray" Font-Name="Verdana" Font-Size="8pt" GridLines="vertical" Width="90%" OnItemCommand="OnItemCommand" RunAt="server"> <asp:BoundColumn HeaderText="Item ID" DataField="title_id" /> <asp:BoundColumn HeaderText="Title" DataField="title" /> <asp:BoundColumn HeaderText="Price" DataField="price" DataFormatString="{0:c}" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="right" /> <asp:ButtonColumn HeaderText="Action" Text="Add to Cart" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center" CommandName="AddToCart" /> <HeaderStyle BackColor="teal" ForeColor="white" Font-Bold="true" /> <AlternatingItemStyle BackColor="beige" ForeColor="darkblue" />

Ταξινόμηση στο datagrid •Το datagrid μπορεί να δείξει ταξινομημένα δεδομένα άμα γίνει bind σε ένα DataView void Page_Load (Object sender, EventArgs e) { SqlDataAdapter adapter = new SqlDataAdapter ("select * from titles where price != 0", "server=localhost;database=pubs;uid=sa;pwd="); DataSet ds = new DataSet (); adapter.Fill (ds); DataView view = new DataView (ds.Tables[0]); view.Sort = "Title ASC"; MyDataGrid.DataSource = view; MyDataGrid.DataBind (); }

Ταξινόμηση στο datagrid, 2 <asp:DataGrid ID="MyDataGrid" AutoGenerateColumns="false" CellPadding="2" BorderWidth="1" BorderColor="lightgray" Font-Name="Verdana" Font-Size="8pt" GridLines="vertical" Width="90%" OnItemCommand="OnItemCommand" RunAt="server" AllowSorting="true" OnSortCommand="OnSort"> <asp:BoundColumn HeaderText="Item ID" DataField="title_id" /> <asp:BoundColumn HeaderText="Title" DataField="title" SortExpression="title ASC" /> <asp:BoundColumn HeaderText="Price" DataField="price" DataFormatString="{0:c}" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="right" SortExpression="price DESC" />...

Pageable grids •Το datagrid control μπορεί να γίνει bound σε βάσεις δεδομένων οι πίνακες των οποίων περιέχουν περισσότερα αντικείμενα από όσα μπορεί να δείξει μια ιστοσελίδα (ή να χρειάζονται πολλά scrolls της σελίδας). Συνεπώς, η σελιδοποίηση των αντικειμένων είναι αναγκαία, και πολύ εύκολη. <asp:DataGrid ID="MyDataGrid“ AutoGenerateColumns="false" CellPadding="2" BorderWidth="1" BorderColor="lightgray" Font-Name="Verdana" Font-Size="8pt" GridLines="vertical" Width="90%" RunAt="server" AllowPaging="true" PageSize="10" OnPageIndexChanged="OnNewPage"> <asp:BoundColumn HeaderText="Product ID" DataField="ProductID" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center" /> <asp:BoundColumn HeaderText="Product Name" DataField="ProductName" HeaderStyle-HorizontalAlign="center" /> <asp:BoundColumn HeaderText="Unit Price" DataField="UnitPrice" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="right" DataFormatString="{0:c}" /> <asp:BoundColumn HeaderText="Unit" DataField="QuantityPerUnit" HeaderStyle-HorizontalAlign="center" /> <HeaderStyle BackColor="teal" ForeColor="white" Font-Bold="true" /> <AlternatingItemStyle BackColor="beige" ForeColor="darkblue" />

Controls ημερολόγια •Είναι πολύ εύκολη η χρήση του Calendar Control στην ASP.NET. Το μόνο που χρειάζεται είναι γνώση των ιδιοτήτων, των events του calendar control, και πώς να γραφτούν συναρτήσεις που να χειρίζονται τα συγκεκριμένα events. <asp:Calendar DayNameFormat="FirstLetter" ShowGridLines="true" BackColor="beige" ForeColor="darkblue" SelectedDayStyle-BackColor="red" SelectedDayStyle-ForeColor="white" SelectedDayStyle-Font-Bold="true" TitleStyle-BackColor="darkblue" TitleStyle-ForeColor="white" TitleStyle-Font-Bold="true" NextPrevStyle-BackColor="darkblue" NextPrevStyle-ForeColor="white" DayHeaderStyle-BackColor="red" DayHeaderStyle-ForeColor="white" DayHeaderStyle-Font-Bold="true" OtherMonthDayStyle-BackColor="white" OtherMonthDayStyle-ForeColor="lightblue" Width="256px" RunAt="Server">

Controls ημερολόγια <asp:Calendar ID="MyCalendar" SelectionMode="DayWeekMonth" OnSelectionChanged="OnDateSelected" RunAt="server" /> void OnDateSelected (Object sender, EventArgs e) { StringBuilder builder = new StringBuilder (); foreach (DateTime date in MyCalendar.SelectedDates) { builder.Append (date.ToLongDateString ()); builder.Append (" "); } Output.Text = builder.ToString (); } Η εκτέλεση του παραπάνω κώδικα θα εμφανίσει τις μέρες της επιλεγμένης εβδομάδας.

Controls ημερολόγια •Ένα από τα πιο χρήσιμα events είναι το DayRender. Αυτό το event μπορεί να αλλάξει τον τρόπο που εμφανίζεται κάθε κελί στο ημερολόγιο. •Στο παρακάτω τμήμα κώδικα, η μέθοδος OnDayRender μας εξασφαλίζει ότι μόνο οι Παρασκευές και τα Σάββατα είναι επιλέξιμα, και εμφανίζει αυτά τα κελιά αντίστοιχα. void OnOrder (Object sender, ImageClickEventArgs e) { if (ShowDate.SelectedDate.Year > 1900) Output.Text = "You selected " + ShowName.SelectedItem.Text + " on " + ShowDate.SelectedDate.ToLongDateString (); else Output.Text = "Please select a date"; } void OnDateSelected (Object sender, EventArgs e) { Output.Text = ""; } void OnDayRender (Object sender, DayRenderEventArgs e) { e.Day.IsSelectable = (e.Day.Date.DayOfWeek == DayOfWeek.Friday ¦¦ e.Day.Date.DayOfWeek == DayOfWeek.Saturday) && e.Day.Date >= DateTime.Today && !e.Day.IsOtherMonth; if (e.Day.IsSelectable && e.Day.Date != ShowDate.SelectedDate) e.Cell.BackColor = System.Drawing.Color.Beige; }

Controls ελέγχου •Τα controls ελέγχου είναι από τα πιο χρήσιμα. Όπως υποδηλώνει το όνομά τους, χρησιμοποιούνται για να ελέγξουν την οποιαδήποτε είσοδο δίνεται από το χρήστη. •Ο έλεγχος γίνεται με τον έλεγχο αν το control έχει περιεχόμενο, ή αν το περιεχόμενο συμβαδίζει με κάποιους περιορισμούς, όπως με πεδία τιμών, τύπους τιμών, κανονικές εκφράσεις κ.λ.π. •Αυτοί οι περιορισμοί προσδιορίζονται κατά τη δημιουργία των control ελέγχου, ή μπορεί να αλλάξουν δυναμικά. •Ο έλεγχος πρέπει να γίνεται και client side αλλά και server side. •Στο client side, μπορεί να χρησιμοποιηθεί για να αποφεύγονται μη αναγκαία postbacks (αποστολή της σελίδας στο server για επεξεργασία).

Controls ελέγχου •Υπάρχουν 6 τύποι control ελέγχου. Κληρονομούν το BaseValidator, και το όνομα τους προδίδει τη χρηστικότητά τους. 1. RequiredFieldValidator 2. RangeValidator 3. RegularExpressionValidator 4. CompareValidator 5. CustomValidator 6. ValidationSummary •Τα πρώτα 5 κληρονομούν από το BaseValidator ιδιότητες όπως controlToValidate, ErrorMessage, ForeColor, Display, EnableClientScript. •Κάποια έχουν και τις δικές τους ιδιότητες, όπως την EnableServerScript.

Controls ελέγχου <asp:TextBox ID="Password" TextMode="Password" RunAt="server" /> <asp:RequiredFieldValidator ControlToValidate="Password" ErrorMessage="Required field" Display="static" ForeColor="blue" RunAt="server" /> <asp:TextBox ID="Password" TextMode="Password" RunAt="server" /> <asp:RequiredFieldValidator ControlToValidate="Password" ErrorMessage="Required field" Display="dynamic" ForeColor="blue" RunAt="server" /> <asp:RegularExpressionValidator ControlToValidate="Password" ValidationExpression=".{8,}" ErrorMessage=“Enter at least 8 chars" Display="dynamic" ForeColor="blue" RunAt="server" /> <asp:TextBox ID="Percent" RunAt="server" /> <asp:RangeValidator ControlToValidate="Percent" MinimumValue="0" MaximumValue="100" Type="Integer" ErrorMessage=“Out of range" Display="static" RunAt="server" /> Τα control ελέγχου μπορούν να κάνουν validate ένα μόνο ένα control.

Control ελέγχου •Μπορείτε επίσης να δείτε τα 1.CompareValidator 2.RegularExpressionValidator 3.CustomValidator •Το control ValidationSummary μπορεί να προγραμματιστεί να δέχεται μηνύματα από επιλεγμένα validation controls στην ίδια σελίδα και να τα παρουσιάζει ενιαία.