Veel van het web-based ontwikkel werk bestaat uit het maken van formulieren, bijvoorbeeld voor het aanmelden bij een service. Nu zitten er in het .NET Framework allerlei WebControls om dit redelijk snel voor elkaar te krijgen, alleen kan dit behoorlijk herhaaldelijk worden wanneer het om uitgebreide formulieren gaat waarbij er voor de meeste TextBox controls een of meerdere Validators moeten worden toegevoegd, zoals de RequiredFieldValidator en/of de RegularExpressionValidator.

Als ontwikkelaar heb je niet altijd de beschikking over third-party controls zoals bijvoorbeeld de Telerik RadControls. Om het werk toch wat aangenamer te maken heb ik er toen voor gekozen om o.a. een custom control te maken op basis van de reeds bestaande TextBox control en de benodigde Validator controls om bepaalde standaard validaties met minder werk te kunnen doen.

Nu vraag je je waarschijnlijk af wat dit allemaal te maken heeft met Embedded Resources. Vaak is het zo dat er bij een formulier moet worden aangegeven welke velden niet juist zijn ingevoerd. Het liefst een uitgebreide melding bovenaan de pagina en bijvoorbeeld een kruisje naast het invoerveld om duidelijk aan te geven om welke het gaat.

Je kan de Text property van de Validator natuurlijk steeds zelf vullen met <img> tag waarbij je in de src verwijst naar een afbeelding ergens op de server. Stel dat je nu je custom controls in meerdere projecten op verschillende Webservers wilt gebruiken dan moet je toch zoeken naar een oplossing waarbij het eenvoudig is om de afbeelding locatie makkelijk aan te passen en belangrijker nog niet vergeten wordt. Ik ben toen gaan zoeken naar een mogelijke oplossing hiervoor en kwam hierbij uit op het gebruik van Embedded Resources. Aan de hand van het bovenstaande scenario wil ik laten zien hoe je deze Embedded Resources kan toepassen.

Het voorbeeld
solution-explorer-4dotnet-controls

Maak in Visual Studio (2008) een nieuwe Web Site aan met een naam naar keuze. Voeg nu aan de Solution een New Project toe en kies vervolgens de template Class Library. In dit voorbeeld heb ik deze 4DotNet.Controls genoemd.

Voeg aan de Class Library een nieuwe Class toe of rename de default aangemaakte Class1 naar RequiredTextBox. Om vanuit een Class Library WebControls te kunnen gebruiken moet er een Reference worden toegevoegd naar System.Web.

Maak in de root van de Class Library een New Folder aan met de naam Resources en daarbinnen nog een folder met de naam Images. Voeg in de laatste folder een New Item toe en selecteer een willekeurige afbeelding die we gaan gebruiken als Validator aanduiding.

Om deze afbeelding als Embedded Resource te gebruiken zijn er twee dingen belangrijk:

  1. In de Properties van de afbeelding moet de Build Action gezet worden op Embedded Resource
  2. In de AssemblyInfo.cs van de Class Library moet een WebResource vermelding worden toegevoegd naar de afbeelding

De bovenstaande WebResource moet als volgt worden toegevoegd in de AssemblyInfo.cs:

[assembly: System.Web.UI.WebResource("_4DotNet.Controls.Resources.Images.bullet_red.png", "img/png")]

Waarbij _4DotNet.Controls.Resources.Images.bullet_red.png een verwijzing is naar de afbeelding, opgebouwd uit de namespace van de Class Library en het pad waar de afbeelding is ondergebracht. Daarnaast moet de MIME type opgegeven worden van de resource, in dit geval img/png.

Om te demonstreren hoe de Embedded Resource ook daadwerkelijk gebruikt kan worden gaan we terug naar de eerder aangemaakte RequiredTextBox Class.
Deze Class moet gebruik maken van de reeds bestaande TextBox control. Daarnaast moet er een RequiredFieldValidator toegevoegd worden waarbinnen gebruik gemaakt wordt van de WebResource als validator Text.

De code ziet er dan als volgt uit:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace _4DotNet.Controls
{
public class RequiredTextBox : TextBox
{
private RequiredFieldValidator rfv;

protected override void OnInit(EventArgs e)
{
string valimg = Page.ClientScript.GetWebResourceUrl(this.GetType(), “_4DotNet.Controls.Resources.Images.bullet_red.png”);
rfv = new RequiredFieldValidator();
rfv.ControlToValidate = this.ID;
rfv.ErrorMessage = “ValidationSummary Text”;
rfv.Text = @”<img class=’myCssClass’ src=’” + valimg + “‘ border=’0′>”;
rfv.Display = ValidatorDisplay.Static;
Controls.Add(rfv);
}

protected override void Render(HtmlTextWriter writer)
{
base.Render(writer);
rfv.RenderControl(writer);
}

}
}

De afbeelding kunnen we nu uit de Assembly lezen door de GetWebResourceUrl() method aan te roepen. Zoals je kunt zien bij het toekennen van een value aan de valimg string. Ook hier moet de namespace en het pad naar de afbeelding worden opgegeven.

De RequiredTextBox control bestaat nu uit een TextBox en RequiredFieldValidator control waarbij de Text property van de laatste een Embedded Resource afbeelding is.

Om de RequiredTextBox control in actie te zien voegen we deze toe aan de Default.aspx in de eerder aangemaakte Web Site. De 4DotNet.Controls Class Library moet nog als Reference worden toegevoegd in de Web Site en geregistreerd in de pagina zelf.

De code van de Default.aspx kan er als volgt uitzien:

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>

<%@ Register Assembly=”4DotNet.Controls” Namespace=”_4DotNet.Controls” TagPrefix=”ctrl” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>4DotNet</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:ValidationSummary ID=”ValidationSummary1″ runat=”server” DisplayMode=”BulletList” />
<table cellpadding=”5″ cellspacing=”0″ border=”0″>
<tr>
<td>
Enter data:
</td>
<td>
<ctrl:RequiredTextBox ID=”RequiredTextBox1″ runat=”server”></ctrl:RequiredTextBox>
</td>
</tr>
<tr>
<td colspan=”2″>
<asp:Button ID=”Button1″ runat=”server” Text=”Validate” />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

In de Browser ziet er het dan als volgt uit:

default-aspx-form

We zien dat er naast de RequiredTextBox een afbeelding (in dit geval een rode bullet) te zien is die vanuit de Assembly wordt opgehaald.

Er zijn natuurlijk een hoop andere toepassingen te bedenken, zo kun je op dezelfde manier JavaScript in je Assembly toevoegen en runtime benaderen.

Stem of voeg toe aanUitleg over het gebruik van deze icons :Voeg dit artikel toe aan Del.icio.us Voeg toe aan je Google bladwijzers Plaats dit bericht op Twitter Geef dit als tip aan je Hyves-vrienden Voeg toe aan je Facebook-profiel Deel met je LinkedIn-contacten Abonneer je op de RSS-feed van deze site Verstuur deze pagina per e-mail via Feedburner Print deze pagina of genereer een PDF-bestand