User Controls en Webparts

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.

Maar 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 basisfunctionaliteit. 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 de Sharepoint installatie van webparts die niet geschreven zijn in C# lastig is. De webparts zijn op deze wijze in een handomdraai geschikt te maken voor Sharepoint.

Ook in maatwerk ASP.Net applicaties zijn webparts “fun”

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 willen we 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, die hergebruik en stabielere code oplevert. In de eerste afbeelding is te zien hoe deze webpart eruit ziet voor de gebruiker.

De control bestaat uit een zoek- en een keuze-dialoog. Na zoeken wordt de keuzelijst gevuld, wordt hier een waarde gekozen en 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 gekozen voor de opzet van de controlfactory 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 het webpart beschikbaar, dan kunnen de treeview en de detailview gevuld worden nadat er op de knop kiezen geklikt is. In onderstaande code wordt de functionaliteit getoond.

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 select-statement 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.

User controls

In ASP.Net kunnen user controls 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 waar een aantal extra eigenschappen aan is toegevoegd; met name de koppeling met de webpart-manager en de zones zijn webpart specifiek.

Eigenlijk is een webpart niets anders dan een user control

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 koppelen. Dit proces bestaat uit een aantal stappen waarbij als laatste stap projecten en medewerkers aan elkaar gekoppeld worden. In onderstaande afbeelding wordt het werkproces weergegeven.

We hebben het onszelf iets moeilijker gemaakt doordat we, 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.

<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, maar toch 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 (PS: Kan iemand verzinnen waarom je niet bij de eerste pagina wilt beginnen??)

Binnen de wizard worden vervolgens de pagina’s gedefinieerd in de vorm van wizard-steps. Binnen deze wizard-steps kunnen eenvoudig de gewenste controls geplaatst worden. In het codevoorbeeld hieronder is één wizard-pagina 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">
        <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 wizard-step te plaatsen maar ook allerlei opmaakelementen. In dit voorbeeld is een tabel opgenomen die ervoor zorgt 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 het 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
          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. In het eerste geval 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;
      };
    }
  }
}

Door gebruik te maken van de helper-klasse 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 user controls 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. Zie de SDN-website of de website www.dla-os.nl (onder artikelen) voor deze source-code.