Fun met webparts in ASP.Net

Fun met webparts in ASP.Net Deel 2:User controls en Webparts door Bert Dingemans, e-mail : info@dla-os.nl www : http:// 1

Inhoudsopgave FUN MET WEBPARTS IN ASP.NET... 1 DEEL 2:USER CONTROLS EN WEBPARTS... 1 INHOUDSOPGAVE... 2 INLEIDING... 2 EXTRA CONTROLS... 3 USER CONTROLS... 5 SAMENVATTING... 9 OVER DE AUTEUR... 9 Inleiding Webparts zijn een nieuw soort besturingselementen in webapplicaties geïntroduceerd door Microsoft in ASP.Net sinds versie 2.0. Webparts zijn vooral bekend vanwege de toepassing binnen Sharepoint en MOSS. In deze twee platformen zijn webparts één van de mogelijkheden om eenvoudig toegang te krijgen tot legacy systemen. Echter ook in maatwerk ASP.Net applicaties zijn webparts fun. In een moderne webtoepassing is het meer en meer gebruikelijk dat gebruikers een eigen indeling kunnen maken van hun eigen pagina. Kijk naar sites als hyves.nl en de verschillende elementen lijken verdacht veel op webparts. Dit artikel is een tweede deel in een serie artikelen over webparts. In het eerste deel zijn we ingegaan op de basis functionaliteit, In dit artikel zullen we ingaan op het werken met user controls binnen webparts, de wizard control en het gebruik van helper classes bij specifieke webparts. De webparts zijn ontwikkeld in C#. Dat is voor mij niet mijn dagelijkse programmeertaal (Vulcan.Net en VB.Net) Reden om hiervoor te kiezen is het feit dat Sharepoint installatie van webparts niet geschreven in C# lastig is. De webparts zijn op deze wijze in een handomdraai geschikt te maken voor Sharepoint. 2

Extra controls In het vorige artikel zijn we ingegaan op de basis webparts voor het muteren van gegevens in tabellen in onze database. Vaak willen we echter een aantal controls die een andere opmaak hebben en een aantal bijzonder controls tonen. In ons voorbeeld maken we een webpart waarmee we gegevens van een organisatie tonen in een detailview control en daarnaast een treeview vullen met gekoppelde gegevens van deze organisatie. Hierbij maken we zoveel mogelijk gebruik van onze helper klassen. Deze klassen zorgen voor een standaard afhandeling van gezamenlijke functionaliteiten, wat hergebruik en stabielere code oplevert. In de eerste afbeelding is te zien hoe deze webpart eruit ziet voor de gebruiker. Afbeelding 1 De control bestaat uit een zoek en een keuze dialoog. Na zoeken wordt de keuzelijst gevuld, wordt hier een waarde gekozen dan worden de detailview en de treeview gevuld. Onderstaande code toont hoe in het createcontrols event een aantal specifieke controls aangemaakt worden. Er is hierbij wel gekozen voor de opzet van de controlfactory dit om het creëren van controls op een centrale plaats te houden. ControlFactoryHelper.CreateTextBox(this.Controls, "zoeknaam", "", 500); this.organisatie_id = ControlFactoryHelper.CreateDropDownList( this.controls, "organisatie_id", "", 400); this.relaties = ControlFactoryHelper.CreateTreeview( this.controls, "relaties", "Associaties"); this.detail = ControlFactoryHelper.CreateDetailsview( this.controls, "detail", "Detail"); Zijn de controls binnen de webpart beschikbaar dan kan de treeview en de detailview gevuld worden nadat er op de knop kiezen geklikt is. In onderstaande code wordt de functionaliteit getoond. 3

protected void verwerk_kiezen(object sender, EventArgs e) NameValueCollection para = new NameValueCollection(); String sql = ""; DRGHelper objhelper = new DRGHelper(); para = ControlFactoryHelper.Controls2Collection(this.Controls); this.relaties.nodes.clear(); sql = "SELECT CONTACTPERSOON.contactpersoon_id, CONTACTPERSOON.voornaam & ' '& CONTACTPERSOON.achternaam FROM CONTACTPERSOON WHERE organisatie_id = #organisatie_id#"; objhelper.statement2treeview(sql, this.relaties, "Contactpersonen", para); sql = "SELECT project_id, project_naam FROM PROJECT, CONTACTPERSOON WHERE PROJECT.contactpersoon_id = CONTACTPERSOON.contactpersoon_id AND CONTACTPERSOON.organisatie_id = #organisatie_id#"; objhelper.statement2treeview(sql, this.relaties, "Projecten", para); sql = "SELECT * FROM ORGANISATIE WHERE organisatie_id = #organisatie_id# "; objhelper.statement2detailsview(sql, this.detail, "Overzicht", para); Duidelijk te zien is hoe de helper klasse ons behulpzaam is bij het inkapselen van functies die voor hergebruik in aanmerking komen. Als voorbeeld in onderstaande code wordt een treeview gevuld op basis van een sql statement. public void Statement2TreeView(string sql, TreeView tree, string naam, NameValueCollection colpara) DataSet ds; TreeNode kind; sql = this.verwerkparameters(sql, colpara); ds = Statement2DataSet(sql); if (ds.tables.count > 0) kind = new TreeNode(naam); foreach (DataRow row in ds.tables[0].rows) kind.childnodes.add( new TreeNode(row[1].ToString(), row[0].tostring())); tree.nodes.add(kind); Allereerst wordt een dataset aangemaakt op basis van het sql statement en vervolgens wordt iedere datarow toegevoegd aan de treeview. Hierbij is een aanname gedaan dat het selectstatement slechts twee kolommen in de resultset heeft. Bij uitbreidingen van de library zal hier waarschijnlijk met parameters gewerkt gaan worden die een en ander afhandelen op een meer generieke wijze. 4

User controls In ASP.Net kunnen user control ontwikkeld worden. Deze user controls gaan dan fungeren als een container object voor meerdere besturingselementen. Eigenlijk is een webpart niets anders dan een user control, echter er zijn een aantal extra eigenschappen aan toegevoegd, met name de koppeling met de webpartmanager en de zones zijn webpart specifiek. In ons voorbeeld zullen we een besturingselement implementeren dat net als de webparts een aantal aardige extra s biedt, namelijk de wizard control. Deze control maakt het mogelijk om de gebruiker middels een aantal stappen door een complex werkproces te begeleiden. In ons voorbeeld zullen we medewerkers aan een project koppelingen realiseren. Dit bestaat uit een aantal stappen waarbij als laatste stap projecten en medewerkers aan elkaar gekoppeld worden. In onderstaande afbeelding wordt het werkproces weergegeven. Afbeelding 2 werkproces We hebben het onszelf iets moeilijker gemaakt door als we direct op project willen zoeken een stap moeten overslaan, in het andere geval willen we dat alleen de projecten van een organisatie getoond worden. Zodra een webpart in een ascx file wordt geplaatst wordt het mogelijk om een groot aantal eigenschappen in te stellen via Visual Studio. In onderstaand codevoorbeeld zijn de belangrijkste eigenschappen opgenomen voor de wizard. Door de hoeveelheid aan eigenschappen is het mogelijk om de wizard echt helemaal naar eigen inzicht te configureren. 5

<asp:wizard ID="Wizard1" runat="server" StepNextButtonText="Volgende" StartNextButtonText="Volgende" StepPreviousButtonText="Vorige" CancelButtonText="Annuleren" DisplaySideBar="True" FinishCompleteButtonText="Voltooien" FinishPreviousButtonText="Vorige" OnNextButtonClick="Wizard1_NextButtonClick" ActiveStepIndex="0" Style="margin-left: 0px" OnFinishButtonClick="Wizard1_FinishButtonClick"> <WizardSteps> De elementen zijn waarschijnlijk duidelijk. Een korte toelichting: De Click events zijn ingesteld om een functie aan te roepen die voor de verdere afhandeling zorgt. DisplaySideBar is een aardige eigenschap die het mogelijk maakt om de gebruiker te tonen waar hij of zij zich in het wizard proces bevindt. In onderstaande afbeelding een voorbeeld. ActiveStepIndex geeft aan bij welke pagina men dient te beginnen (kan iemand verzinnen waarom je niet bij de eerste pagina wilt beginnen??) Afbeelding 3 Binnen de wizard worden vervolgens de pagina s gedefinieerd in de vorm van wizardsteps. Binnen deze wizardsteps kunnen eenvoudig de gewenste controls geplaatst worden. In het codevoorbeeld hieronder is één wizardpagina getoond in asp.net code <asp:wizardstep ID="Zoeken_Organisatie_Project" runat="server" Title="Zoeken op Organisatie of Project"> <table> <tr><td align="left">zoeken naar*</td></tr> <tr><td align="left"> <asp:xmldatasource ID="DlaDataSourceOrganisatie_Project" runat="server"> 6

<Data> <keuzelijst> <lijst optie="organisatie" /> <lijst optie="project" /> </keuzelijst> </Data> </asp:xmldatasource> <asp:radiobuttonlist ID="Organisatie_Project" DataTextField="optie" DataValueField="optie" DataSourceID="DlaDataSourceOrganisatie_Project" runat="server" RepeatDirection="Horizontal"> </asp:radiobuttonlist> <asp:requiredfieldvalidator ID="Valideer_Organisatie_Project" runat="server" ErrorMessage="Organisatie Project keuze" ControlToValidate="Organisatie_Project" Display="None"></asp:RequiredFieldValidator> </td></tr> <tr><td align="left">zoek naar</td></tr> <tr><td align="left"> <asp:textbox ID="ZoekNaar" runat="server" Style="height: 20px; width: 180px; text-align: left;" TextMode="SingleLine"></asp:TextBox> <asp:requiredfieldvalidator ID="RequiredZoekNaar" runat="server" ControlToValidate="ZoekNaar" Display="None" ErrorMessage="Zoek naar is verplicht"></asp:requiredfieldvalidator> </td></tr> <tr><td align="center"> <asp:validationsummary ID="ValidationSummary4" runat="server" ShowMessageBox="TRUE" ShowSummary="FALSE" /> </td></tr> </table> </asp:wizardstep> Zoals te zien is zijn niet alleen controls binnen een wizardstep te plaatsen maar ook allerlei opmaakelementen. In dit voorbeeld is een tabel opgenomen die zorgen dat de elementen binnen een pagina mooi uitlijnen. Daarnaast kunnen extra controls toegevoegd worden, zoals de validatie controls van ASP.Net. In de workflow hebben we ons ten doel gesteld dat als er voor een project gekozen wordt de vraag omtrent de organisatie wordt overgeslagen. Dit dient in de programma code van de control afgehandeld te worden. Onderstaande code toont hoe dit geïmplementeerd wordt in de event voor de volgende button in de wizard. protected void Wizard1_NextButtonClick(object sender, WizardNavigationEventArgs e) NameValueCollection para = new NameValueCollection(); DRGHelper objhelper; objhelper = new DRGHelper(); switch( e.currentstepindex ) case 0: if(this.organisatie_project.text == "Organisatie") Wizard1.ActiveStepIndex = 1; para.add("organisatie_naam", this.zoeknaar.text); objhelper.sql2listcontrol("select organisatie_id as valuecolumn, organisatie_naam as displaycolumn FROM ORGANISATIE 7

WHERE organisatie_naam LIKE '%#organisatie_naam#%' ORDER BY 2", organisatie_id, "valuecolumn", "displaycolumn", para); else Wizard1.ActiveStepIndex = 2; para.add("project_naam", this.zoeknaar.text); objhelper.sql2listcontrol("select project_id as valuecolumn, project_naam as displaycolumn FROM [PROJECT] WHERE project_naam LIKE '%#project_naam#%' ORDER BY 2", project_id, "valuecolumn", "displaycolumn", para); break; In het event is op te vragen in welke stap van de wizard we zitten, is dit de eerste stap dan kunnen we opvragen of de gebruiker heeft gekozen voor organisatie of project. Is het eerste het geval dan wordt de keuzelijst voor organisaties gevuld en getoond, in het andere geval wordt de project keuzelijst gevuld. Opvallend is hierbij dat door het instellen van de activestepindex bepaald kan worden of een pagina moet worden overgeslagen. In het geval van de projectkeuze is namelijk de stap met de organisatie gegevens niet meer relevant. Op de laatste pagina van de wizard verschijnt de Voltooien knop, deze knop zal een aantal bewerkingen uit moeten voeren op onze database. Hierbij zijn onze helper klasses weer relevant. In de onderstaande code een voorbeeld van deze verwerking, in de voorbeeldtoepassing is de gehele code voor deze wizard control te vinden. protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e) DRGHelper objhelper = new DRGHelper(); NameValueCollection para = new NameValueCollection(); String sql = "INSERT INTO [Medewerker_Project] (medewerker_id, project_id, uur_tarief, begin_datum, eind_datum) VALUES (#medewerker_id#, #project_id#, '#uur_tarief#', ##begin_datum##, ##eind_datum##)"; for (int i = 0; i < medewerker_id.items.count; i++) if (medewerker_id.items[i].selected) para.clear(); para.add("project_id", project_id.text); para.add("uur_tarief", uur_tarief.text); para.add("begin_datum", begin_datum.text); para.add("eind_datum", eind_datum.text); para.add("medewerker_id", medewerker_id.items[i].value); if (objhelper.statement2database( objhelper.processstatement(sql, para)) == false) error.text += objhelper.errormelding; ; 8

Door gebruik te maken van de helper class wordt het eenvoudig mogelijk om een collectie met naam waarde combinaties te vullen en vervolgens een sql statement naar de database te sturen op een standaard manier op basis van de helper klasse. Samenvatting In dit artikel is ingegaan op een aantal extra mogelijkheden van webparts. Webparts zijn niet alleen te gebruiken voor standaard controls, ook eigen combinaties binnen een webpart zijn eenvoudig mogelijk. Door de opzet van onze helper klassen kunnen we eenvoudig eigen opmaak gebruiken en toch gebruik blijven maken van standaard functies in onze helper klassen. Daarnaast is het binnen webparts goed mogelijk om usercontrols te definiëren. Dit biedt extra mogelijkheden om de opmaak en volgorde van controls binnen de webpart helemaal naar eigen inzicht in te richten. In dit artikel hebben we als voorbeeld een wizard ontwikkeld bestaande uit een aantal stappen. Bij dit artikel hoort een voorbeeldtoepassing met een uitwerking van bovengenoemde controls. Indien niet aanwezig bij dit artikel zie de website (onder artikelen). Over de auteur Bert is als software architect werkzaam bij de Realisatiegroep, een consultancy bureau gericht op ICT en (jeugd)zorg. Bert heeft een voorliefde voor Model Driven Development en het genereren van software. Zo heeft hij CASE tools ontwikkeld in Visual Objects als DLArchitect en DLA Work in Process. Er zijn freeware versies van deze tools beschikbaar op de dla-os website. Bert heeft een weblog op. 9