Andrew Rea | Blog | C# & ASP.NET Development

ASP.NET Dynamic Data – Using Column Generators based on Meta Data

REA_ANDREW — Wed, 25 Mar 2009 21:10:36 GMT

I was looking at the generated site which ASP.NET Dynamic Data had provided and thought, I wonder how I can choose which columns I want to display based on the model itself. This is then dynamic, in the way that for one model I show one column, but for the others I may show five, or six etc…

I have been following the posts from Matt Berseth, where he exploits the attributes from the System.ComponentModel namespace. He shows how you can create a nice nested menu based on Category and Display Name attributes.

So, this got me thinking, along the lines of, it is very convenient to use attributes in order to determine outcomes when working with meta data, and in this case, which columns I want to display inside the List.aspx template which you get provided out of the box as a standard template. Alteration more than anything but before that, I need to set a few things up.

The MetaDataModels

These are the classes which dictate what meta information are available for your entities at runtime. You assign the relevant meta data model to the entity using an attribute like the following:

[MetadataType(typeof(ProductMetadata))]
 public partial class Product
 {
     public Product(){

     }
 }

I then create another class which is the actual ProductMetaData.

[Category("Products")]
public class ProductMetadata
{
    [ScaffoldColumn(false)]
    public int ProductID{get;set;}

    [ListVisible]
    public string ProductCode{get;set;}
}

Now in the second example above you will notice the ListVisible attribute, this is custom and is defined simply like this:

[AttributeUsage(AttributeTargets.Property)]
public class ListVisibleAttribute : Attribute
{

}

The Column Generators

Once this is done you can then apply it to properties inside your class. I only want to use this for Properties so I limit its scope using the AttributeUsage attribute. So the idea now is this, once we have the meta table we are going to bind with, we want to then extract all the columns which have the attribute ListVisible. I don’t want to create a new template though, not sure how yet lol, so I just want to edit the current. The GridView auto generates its columns and something which I rooted out today was the ColumnGenerator type, or rather the IAutoFieldGenerator interface. When you provide a GridView with this, it then knows which columns should be auto generated, so inline with this example I want to make a column generator which gets all the columns with the ListVisible attribute.

public class GridViewMetaColumnGenerator :IAutoFieldGenerator
{
    protected MetaTable table;

    public GridViewMetaColumnGenerator(MetaTable table)
    {
        this.table = table;
    }

    #region IAutoFieldGenerator Members

    public System.Collections.ICollection GenerateFields(Control control)
    {
        DataControlFieldCollection columns = new DataControlFieldCollection();

        foreach (MetaColumn col in table.Columns)
        {
            if (col.GetListVisible())
            {
                BoundField column = new BoundField();
                column.DataField = col.Name;
                column.SortExpression = col.Name;
                column.HeaderText = col.Name;
                columns.Add(column);
            }
        }

        return columns;
    }

    #endregion
}

So, i create the class which takes one argument in the constructor which is the MetaTable. The GenerateFields method will be called by the GridView, so inside here I loop through the columns inside the MetaTable and if the column is decorated with the ListVisible attribute, I add it to the DataControlFieldCollection. You will notice some familiar properties of the BoundField above. The method GetListVisible is an extension method which I made, and simply checks for the presence of the attribute on the MetaColumn:

public static bool GetListVisible(this MetaColumn column)
{
    return column.Attributes[typeof(ListVisibleAttribute)] != null;
}

All that is left to do now is to alter the List.aspx template to include the column generator. Below is the updated Page_Load event:

protected void Page_Load(object sender, EventArgs e)
{
    table = GridDataSource.GetTable();
    Title = table.DisplayName;
    InsertHyperLink.NavigateUrl = table.GetActionPath(PageAction.Insert);
    // Disable various options if the table is readonly

    GridViewMetaColumnGenerator metaColumnsGenerator = new GridViewMetaColumnGenerator(table);

    GridView1.ColumnsGenerator = metaColumnsGenerator;

    if (table.IsReadOnly)
    {
        GridView1.Columns[0].Visible = false;
        InsertHyperLink.Visible = false;
    }

}

And it works a treat, and if this is not the best way, I still think it is kind of clean. Well I hope this helps some people as I appreciate this is new territory and I my self am constantly on the look out for helpful tutorials trying to open up the topic.

Cheers for now:

Andrew

UPDATE 27th March 2008

Although the above does work to an extent it does not work completely. For one thing I have totally destroyed the functionality of the Dynamic Controls which are rendered based on the UIHint. So, from reading about the internet I have found a few things including the fact that IAutoFieldGenerator has been used by the community in the ASP.NET Dynamic Data area for some time now. The change required is the type which I am returning inside the GenerateFields method. I currently instantiate BoundFields, where as I should be instantiating Dynamic Fields.

I also integrated a new field template which handles Many To Many relationships and that I got from this kind fellow at Micrsoft, David Ebbo. Lots of Dynamic Data topics on here.

Another update I should also make the code above, is to provided further funationality on the custom attribute. I am basically limiting its functionality to simply Lists. Instead of that it would be better if you could state Flags for the type of Page Template the certain columns should be visible in. Again this has already been done after searching round the internet. So basically it provides a more robust approach than mine above. Here is the example: http://stuartmanning.com/blogs/aspnet/archive/2009/01/26/dynamic-data-hiding-columns-in-selected-pagetemplates.aspx

So having not yet integrated that into my project I have still got the following as my GenerateFields method:

view plain copy to clipboard print

public System.Collections.ICollection GenerateFields(Control control)
{
// Auto-generate fields from metadata.
var fields = new List<DynamicField>();
foreach (MetaColumn column in table.Columns)
{
// Skip column that shouldn't be scaffolded
if (!column.Scaffold) continue;
// Don't display long string in controls that show multiple items
// REVIEW: we should avoid hard coding a list of control, but IDataBoundControl does not give us this info
if ((column.IsLongString && control is GridView) || !column.GetListVisible())
continue;
// If it's a Many To Many column, use our special field template
string uiHint = null;
if (column.Provider.Association != null && column.Provider.Association.Direction == AssociationDirection.ManyToMany)
{
uiHint = "ManyToMany";
}
fields.Add(new DynamicField() { DataField = column.Name, UIHint = uiHint });
}
return fields;
}

public System.Collections.ICollection GenerateFields(Control control)
{
    // Auto-generate fields from metadata.
    var fields = new List<DynamicField>();
    foreach (MetaColumn column in table.Columns)
    {
        // Skip column that shouldn't be scaffolded
        if (!column.Scaffold) continue;

        // Don't display long string in controls that show multiple items
        // REVIEW: we should avoid hard coding a list of control, but IDataBoundControl does not give us this info
        if ((column.IsLongString && control is GridView) || !column.GetListVisible())
            continue;


        // If it's a Many To Many column, use our special field template
        string uiHint = null;
        if (column.Provider.Association != null && column.Provider.Association.Direction == AssociationDirection.ManyToMany)
        {
            uiHint = "ManyToMany";
        }

        fields.Add(new DynamicField() { DataField = column.Name, UIHint = uiHint });
    }

    return fields;
}

Programmatic WebControls – Variations of design

REA_ANDREW — Tue, 17 Mar 2009 17:50:25 GMT

I thought I would compose a short how to on programmatic web controls. Often I have looked at the core set of controls within ASP.NET and wonder what design is required in order to get the design time mark up similar to that of the various controls. The types of markup I am referring to includes:

Containers
Lists
Templates
Nested Controls of a certain type
Data bound controls
- Only one example here, as I have wanted to do for ages and could not quite put my finger on how it was achieved. Turns out, really simple lol

The following imports are used in these examples:

using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;

Simple Container Control

The first custom control structure I want to make is a custom panel. Not inherited from a panel, although the same would be achieved but rather the simplest custom container.

Desired Mark up

        <aebs:CustomPanel ID="Panel1" runat="server">
            Hell World
        </aebs:CustomPanel>

This is as simple as it gets. This is a web control which persists any children controls or elements which you put in side.

    [ParseChildren(false)]
    [PersistChildren(true)]
    public class CustomPanel : WebControl
    {
        public CustomPanel()
        {
            //
            // TODO: Add constructor logic here
            //
        }
    }

A Control with an object list

This control is a web control but it has a list of an object, so you can add numerous types of the object to its collection. The collection could be of a web control and if so it would be wise to inherit from a composite control as opposed to a web control.

Desired mark-up

        <aebs:ListControl1 ID="ListControl1" runat="server">
            <CustomObjects>
                <aebs:CustomObject CustomProperty="Hello World" />
                <aebs:CustomObject CustomProperty="Hello World 2" />
            </CustomObjects>
        </aebs:ListControl1>

So in design time you will see the intellisense prompt you for a tag called CustomObjects followed by nested prompts of a tag called Custom Object.

    [ParseChildren(true)]
    [PersistChildren(false)]
    public class ListControl1 : WebControl
    {
        [PersistenceMode(PersistenceMode.InnerProperty)]
        public List<CustomObject> CustomObjects { get; set; }

        public ListControl1()
        {
            //
            // TODO: Add constructor logic here
            //
        }
    }

The Custom object is nothing more than a class with a property. see here

    public class CustomObject
    {
        public string CustomProperty { get; set; }

        public CustomObject()
        {
            //
            // TODO: Add constructor logic here
            //
        }
    }

A Template Control

The mark up achieved with this type of control is like the type you see with for example the form view control which allows for:

Item Template
Insert Item Template
Edit Item Template

All I am doing is showing the mark-up required for the design time mark-up, so when using you will need to use the ITemplate InstantiateIn method providing a web control or html control as the container.

Desired mark-up

        <aebs:TemplateControl ID="TemplateControl1" runat="server">
            <HeaderTemplate>
                Hello Header World
            </HeaderTemplate>
            <ContentTemplate>
                Hello Content World
            </ContentTemplate>
            <FooterTemplate>
                Hello Footer World
            </FooterTemplate>
        </aebs:TemplateControl>

The code to achieve this is as follows.

    [ParseChildren(true)]
    [PersistChildren(false)]
    public class TemplateControl : WebControl
    {
        [PersistenceMode(PersistenceMode.InnerProperty)]
        public ITemplate HeaderTemplate { get; set; }

        [PersistenceMode(PersistenceMode.InnerProperty)]
        public ITemplate ContentTemplate { get; set; }

        [PersistenceMode(PersistenceMode.InnerProperty)]
        public ITemplate FooterTemplate { get; set; }

        public TemplateControl()
        {
            //
            // TODO: Add constructor logic here
            //
        }
    }

You are going to want to control how each template is rendered but for the purposes of this example I am only showing the bare bones of how to achieve the mark-up.

A container control with specific object types as options

A good example of this type of control is when you use the object or sql data source control. It allows you to specify parameters for the select, insert, update etc… The options though which are provided to you are restricted so you can only choose parameter objects. The key here is to specify a list property of the control with the type being a class other inherit from, not necessarily abstract.

Desired mark-up

        <aebs:ConstrainedCollection ID="Constrained1" runat="server">
            <AbstractProperties>
                <aebs:ConcreteOne />
                <aebs:ConcreteTwo />
            </AbstractProperties>
        </aebs:ConstrainedCollection>

The code to achieve this mark-up is as follows:

    [ParseChildren(true)]
    [PersistChildren(false)]
    public class ConstrainedCollection : WebControl
    {
        [PersistenceMode(PersistenceMode.InnerProperty)]
        public List<AbstractClass1> AbstractProperties { get; set; }

        public ConstrainedCollection()
        {
            //
            // TODO: Add constructor logic here
            //
        }
    }

So you can see that the only difference between this and the list control example above is that I use a type for the list which is inherited by two other types being ConcreteOne and also ConcreteTwo.

A DataPanel

I have wanted to do this for a while but could not quite put my finger on how it was achieved. Like I said up top, this turns out to be really simple. The same could be achieved with an ObjectDataSource and a FormView but i want a light weight container which I could throw an object at and use Eval inside it. I have many many uses for such a light weight singular object display. Plus I also wondered how the use of Eval was achieved in Custom Controls, turns out that it is through the use the System.Web.UI.IDataItemContainer Interface.

Desired Mark-up

        <aebs:DataPanel ID="datapanel1" runat="server">
            <%# Eval("ProjectName") %>
        </aebs:DataPanel>

So I am not doing anything more than requesting a property of the object which I throw at the control. Throwing the object at the control I do inside the Page_Load event just for demo.

    public void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataPanel.Project p = new DataPanel.Project();
            p.ProjectName = "Project 101";

            datapanel1.BoundObject = p;
            datapanel1.DataBind();
        }
    }

So the code to achieve this is just the simple container control above but this time I implement the interface. For the purposes of demonstration I have also banged the class inside this type as nested too.

    [ParseChildren(false)]
    [PersistChildren(true)]
    public class DataPanel : WebControl, IDataItemContainer
    {
        public class Project
        {
            public string ProjectName { get; set; }
        }

        private object boundObject;

        public DataPanel()
        {
            //
            // TODO: Add constructor logic here
            //
        }

        public object BoundObject
        {
            set
            {
                boundObject = value;
            }
        }

        #region IDataItemContainer Members

        public object DataItem
        {
            get { return boundObject; }
        }

        public int DataItemIndex
        {
            get { return 0; }
        }

        public int DisplayIndex
        {
            get { return 0; }
        }

        #endregion
    }

Well I hope this is of some use to others, I will try and update this post soon with examples of custom DataSource controls and also custom DataBound Controls. When you start get into List Controls from a data source it gets real fun.

Cheers

Andrew

Idea for a Helper Utility Class Generator for a WCF Rest Service

REA_ANDREW — Tue, 17 Mar 2009 16:49:31 GMT

This morning I followed an Adobe Flex tutorial, well 3, about consuming Twitters restful API inside Flex. After this it got me thinking about WCF and their Rest Starter Kit. I looked and they are now up to Preview 2, so I downloaded it and in my spare time focused on this recently release white paper:

A Guide to Designing and Building RESTful Web Services with WCF 3.5

Installing the starter kit, which also installs some project templates, gives you a good starting point. It also introduced me to some new concepts. The starter kit actually generates a help page for your service which is an xml feed and XSLT Style Sheet e.g.

So It provides all the relevant information required i.e. the method, the uri template, the request and response schema. I tested out a quick code up for the simplest form for consumption by C# and it worked out pretty well. I focused on the fact that the info can be returned currently in two formats being XML and also JSON. I wanted an abstract class to hold the URI’s for each method and also abstract methods which each derived object needs to override.

The idea is ultimately to have strongly typed helper methods for consuming restful apis. So the tool, similar to the WSDL or SVCUTIL could be supplied with the following information:

namespace
language
url of help feed
asynchronous

What I would want to build on is the language part, as the interoperability of a rest api is huge. If you make an implementation of the help generator in C# for example and use a Strategy pattern for the generation then this gives rise to the following:

C# Generation Strategy
VB.NET Generation Strategy
ActionScript Generation Strategy
C++ Generation Strategy
Pure JavaScript Generation Strategy
Jquery Generation Strategy (Yes I differentiated from the JavaScript option)
PHP Generation Strategy
Java Strategy
Python Strategy
Ruby on rails strategy

So you get the idea, it could be built then extended over time. Am I getting ahead of myself here? Is there one in production? WHO KNOWS? but it is fun never the less to jump in and have a go.

So the quick Code Up I did is as follows:

Duplicate the type used in the REST Service and decorate with the namespace for XML Serialization needs

    [XmlRoot(Namespace="http://schemas.datacontract.org/2004/07/Swissmod.Service.Model")]
    public class Project
    {
        public string ID { get; set; }
        public string UserID { get; set; }
        public string ClientID { get; set; }
        public string ProjectTitle { get; set; }
        public string ProjectDescription { get; set; }
        public DateTime Created { get; set; }
        public DateTime LastModified { get; set; }
        public string Version { get; set; }

        public override string ToString()
        {
            StringBuilder sb1 = new StringBuilder();

            foreach (PropertyInfo pi in this.GetType().GetProperties())
            {
                sb1.AppendLine(pi.Name + " : " + pi.GetValue(this, null));
            }

            return sb1.ToString();
        }
    }

Define the abstract class for the Project Service

    public abstract class ProjectRestClient
    {
        protected string baseUrl = "http://test.@yoursite.com/ProjectService.svc/";

        public abstract Project GetProject(string id);
    }

Implement an XML Version of the Project Rest Client

    public class ProjectXmlRestClient : ProjectRestClient
    {
        public override Project GetProject(string id)
        {
            WebRequest wr = WebRequest.Create(baseUrl + id);
            wr.Method = "GET";
            wr.ContentType = "text/xml";
            WebResponse wresp = wr.GetResponse();
            XmlSerializer serializer = new XmlSerializer(typeof(Project));
            XmlReaderSettings settings = new XmlReaderSettings();
            settings.ValidationFlags = XmlSchemaValidationFlags.None;
            settings.ValidationType = ValidationType.None;
            settings.ConformanceLevel = ConformanceLevel.Auto;
            settings.IgnoreProcessingInstructions = true;
            settings.NameTable = new NameTable();
            settings.NameTable.Add("http://schemas.datacontract.org/2004/07/Swissmod.Service.Model");
            XmlReader reader = XmlReader.Create(wresp.GetResponseStream(),settings);
            Project p = (Project)serializer.Deserialize(reader);
            return p;
        }
    }

Implement a JSON Version of the Project Rest Client

    public class ProjectJsonRestClient : ProjectRestClient
    {
        public override Project GetProject(string id)
        {
            WebRequest wr = WebRequest.Create(baseUrl + id + "?format=json");
            wr.Method = "GET";
            WebResponse wresp = wr.GetResponse();
            DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(Project));
            Project p = (Project)serializer.ReadObject(wresp.GetResponseStream());
            return p;
        }
    }

Give it a whirl

At this point I know what is going to happen, but I am just protyping to give myself ideas for when I come to make a generation tool for the actual complete feed. IF I CAN OFCOURSE! lol :-)

    public static class Program
    {
        const string XML = "XML";
        const string JSON = "JSON";

        [STAThread]
        public static void Main(string[] args)
        {
            IUnityContainer container = new UnityContainer();
            container.RegisterType<ProjectRestClient, ProjectXmlRestClient>(XML, new ContainerControlledLifetimeManager());
            container.RegisterType<ProjectRestClient, ProjectJsonRestClient>(JSON, new ContainerControlledLifetimeManager());

            ProjectRestClient xmlCient = container.Resolve<ProjectRestClient>(XML);
            ProjectRestClient jsonCient = container.Resolve<ProjectRestClient>(JSON);

            Console.WriteLine(xmlCient.GetProject("1"));
            Console.WriteLine(jsonCient.GetProject("1"));

            Console.WriteLine("Press any key to exit");
            Console.ReadKey();
        }
    }

P.S. I have used unity here for a few reasons but mainly because I love the idea of Inversion of Control and Dependency Injections. The above simply allows me to obtain a singleton instance of either class whenever I want to execute a service method.

So to summarise, the only reason I am doing this is so that the consumption of the Rest service is strongly typed, I am not doing this because I think it is a necessity, simply because I think it would be extremely helpful for me. The ability to strongly type things gives me much more happiness when working across language barriers.

Anyways,

Cheers for now,

Andrew

My Jquery Plugins : Fader

REA_ANDREW — Sun, 15 Mar 2009 09:59:11 GMT

This plug-in I made is quite handy and has a few applications. I think JQuery is a fantastic library for javascript, as it does what it says on the tin:

WRITE LESS, DO MORE

Ok so the fader, I have written this plugin with a few options, which are:

slideClass
- This is a JQuery selector syntax
slideDuration
- This duration that the currently item stays visible for
fadeOutDuration
- The duration it takes for an item to fade out
fadeInDuration
- The duration it takes for an item to fade in

The structure which the plugin expects is simply a container element e.g. a div and subsequent nested containers which it will apply its effect to:

    <div class="slides">
        <div class="slide">
            <h1>Slide 1</h1>
        </div>
        <div class="slide">
            <h1>Slide 2</h1>
        </div>
        <div class="slide">
            <h1>Slide 3</h1>
        </div>
        <div class="slide">
            <h1>Slide 4</h1>
        </div>
    </div>

To trigger this function as soon as possible I place the following just before the end of the body tag:

...  
	<script type="text/javascript">
        (function() {
            var options = {
                slideClass: ".slide",
                slideDuration: 6000,
                fadeOutDuration: 2000,
                fadeInDuration: 500
            };

            $(".slides").fader(options);
        })();
    </script>
</body>

So if we look at the above HTML structure inline with the js, you can see the selector of “.slide” which tells the plugin which items to fade in/out. You can apply this to many different containers with different options, the below shows an example of this with different speeds. The html markup is as follows:

    <div class="slides">
        <div class="slide">
            <h1>Slide 1</h1>
        </div>
        <div class="slide">
            <h1>Slide 2</h1>
        </div>
        <div class="slide">
            <h1>Slide 3</h1>
        </div>
        <div class="slide">
            <h1>Slide 4</h1>
        </div>
    </div>
    
   <div class="slides2">
        <div class="slide">
            <h1>Slide 1</h1>
        </div>
        <div class="slide">
            <h1>Slide 2</h1>
        </div>
        <div class="slide">
            <h1>Slide 3</h1>
        </div>
        <div class="slide">
            <h1>Slide 4</h1>
        </div>
    </div>

This time I create a second container of class “slides2” but keep the containing elements with class of “slide.” To start the plugin on both containers I add another instance of options and select the second container.

...
	<script type="text/javascript">
        (function() {
            var options = {
                slideClass: ".slide",
                slideDuration: 6000,
                fadeOutDuration: 2000,
                fadeInDuration: 500
            };

            var options2 = {
                slideClass: ".slide",
                slideDuration: 2000,
                fadeOutDuration: 500,
                fadeInDuration: 500
            };

            $(".slides").fader(options);
            $(".slides2").fader(options2);
        })();
    </script>
</body>

The Plug-in Code

jQuery.fn.fader = function(options) {
    if (!options.slideClass || options.slideClass == "") {
        var error = new Error();
        error.message = "No slide class has been supplied";
    }

    if (!options.slideDuration || !parseInt(options.slideDuration)) {
        options.slideDuration = 4000;
    }

    if (!options.fadeOutDuration || !parseInt(options.fadeOutDuration)) {
        options.fadeOutDuration = 4000;
    }


    if (!options.fadeInDuration || !parseInt(options.fadeInDuration)) {
        options.fadeInDuration = 4000;
    }

    return this.each(function() {
        $(options.slideClass, this).hide();
        $(options.slideClass + ":eq(0)", this).show();
        var currentIndex = 0;
        var obj = this;
        var t = setInterval(function() {
        $(options.slideClass + ":eq(" + currentIndex + ")", obj).fadeOut(options.fadeOutDuration, function() {
                currentIndex++;
                if (currentIndex > $(options.slideClass, obj).size() - 1)
                    currentIndex = 0;
                $(options.slideClass + ":eq(" + currentIndex + ")", obj).fadeIn(options.fadeInDuration);
            });
        }, options.slideDuration);
    });
};

Useful DateTime functions in JavaScript based on .NET DateTime

REA_ANDREW — Fri, 06 Mar 2009 08:52:14 GMT

A question recently on StackOverflow.com triggered me to think that it would be nice if in JavaScript I could do this:

var d = new Date();
d.AddDays(1);

So exactly like what I can do in .NET. I know a lot of people try and achieve date solutions by concatenating strings and parsing as a date, but this is not an option for me as JavaScript’s native DateTime is very powerful and due to this, there is absolutely no need to be hashing together strings. So I will now paste the functionailty in C# that I based my methods on, dead simple, it is:

    DateTime d = new DateTime();

    public void Page_Load(object sender, EventArgs e)
    {
        DateTime days = d.AddDays(1);
        DateTime hours = d.AddHours(1);
        DateTime milliseconds = d.AddMilliseconds(1);
        DateTime minutes = d.AddMinutes(1);
        DateTime months = d.AddMonths(1);
        DateTime seconds = d.AddSeconds(1);
    }

So to exploit another JavaScript feature I will use prototype to extend the methods of the Date type inside javascript. C# now has extension methods which are quite similar in what they allow you to use them like. So the prototypes I want to create are as follows:

AddDays
AddHours
AddMilliseconds
AddMinutes
AddMonths
AddSeconds

    <script type="text/javascript">

        Date.prototype.AddDays = function(days) {
            this.setDate(this.getDate() + days);
            return this;
        }

        Date.prototype.AddHours = function(hours) {
            this.setHours(this.getHours() + hours);
            return this;
        }

        Date.prototype.AddMilliseconds = function(milliseconds) {
            this.setMilliseconds(this.getMilliseconds() + milliseconds);
            return this;
        }

        Date.prototype.AddMinutes = function(minutes) {
            this.setMinutes(this.getMinutes() + minutes, this.getSeconds(), this.getMilliseconds());
            return this;
        }

        Date.prototype.AddMonths = function(months) {
            this.setMonth(this.getMonth() + months, this.getDate());
            return this;
        }

        Date.prototype.AddSeconds = function(seconds) {
            this.setSeconds(this.getSeconds() + seconds, this.getMilliseconds());
            return this;
        }

        Date.prototype.AddYears = function(years) {
            this.setFullYear(this.getFullYear() + years);
            return this;
        }
    
    </script>

Excellent, nice clean, precise code. So with this I can now do the following:

        <script type="text/javascript">
            var d = new Date();
            
            var output = d.AddDays(1).toString() + "<br/>" +
            d.AddHours(1).toString() + "<br/>" +
            d.AddMilliseconds(1).toString() + "<br/>" +
            d.AddMinutes(1).toString() + "<br/>" +
            d.AddMinutes(1).toString() + "<br/>" +
            d.AddMonths(1).toString() + "<br/>" +
            d.AddSeconds(1).toString() + "<br/>" +
            d.AddYears(1).toString() + "<br/>";

            document.write(output);
        
        </script>

With the output of

Sat Mar 07 2009 08:41:09 GMT+0000 (GMT Standard Time)
Sat Mar 07 2009 09:41:09 GMT+0000 (GMT Standard Time)
Sat Mar 07 2009 09:41:09 GMT+0000 (GMT Standard Time)
Sat Mar 07 2009 09:42:09 GMT+0000 (GMT Standard Time)
Sat Mar 07 2009 09:43:09 GMT+0000 (GMT Standard Time)
Tue Apr 07 2009 09:43:09 GMT+0100 (GMT Daylight Time)
Tue Apr 07 2009 09:43:10 GMT+0100 (GMT Daylight Time)
Wed Apr 07 2010 09:43:10 GMT+0100 (GMT Daylight Time)

Obviously if you want to subtract values from a date you would provide negative values into the methods, i.e. DateTime.AddDays(-10);

Cheers for now,

Andy

Nice quick JQuery plugin

REA_ANDREW — Thu, 05 Mar 2009 20:10:37 GMT

I think I am thinking too much about how to write a good blog post. I think I need to master letting my brain flow while intercepting the output and tweaking things. Well I have not yet mastered it, but I shall continue to try. I was asked today to create a simple JQuery plug in which showed an html element containing a links title and this should be able to be styled and also follow the mouse whilst in hover state. It is kinda like a pimped up tooltip. The only thing out of the ordinary I did was hijack the rel attribute of the link as, if I continued to use the title attribute I got the default browser tooltip which overlaid my DHTML div. I was thinking about creating my own attribute to add to the tag, but then again this would probably fail XHTML Validation. This makes me wonder because from what I have read the new and upcoming version of the ASP.NET Ajax library introduce different attributes to the HTML. Not sure if this is due to be released with the next iteration of the HTML standard.

Write to my plug in. Here is the actual code I wrote for the plug in itself:

        jQuery.fn.popupLinkHelper = function(options) {
            var element = document.createElement("div");
            $(element).addClass(options.popupCssClass).hide();
            document.body.appendChild(element);

            return this.each(function() {
                $(this).hover(function() {
                    $(element).show();
                    $(element).html($(this).attr("rel"));
                    $(this).mousemove(function(e) {
                        $(element).css({
                            "position": "absolute",
                            "top": e.pageY + options.offsetY,
                            "left": e.pageX + options.offsetX
                        });
                    });
                }, function() {
                    $(element)
                });
            });
        };

To give an example using CSS I used the following CSS class to spruce up the popup:

        .popup
        {
            width: 150px;
            padding: 10px;
            background-color: #3366CC;
            border: black 2px solid;
            color: White;
        }

To trigger this code I use a notation publicised on the JQuery plug in authoring page. As well I threw in some configuration options to as to be able to have more flexibility with it in the future:

    <script type="text/javascript">
        $(function() {
            var options = {
                offsetX: 50,
                offsetY: 0,
                popupCssClass: "popup"
            };
            $("a.pol").popupLinkHelper(options);
        });
    </script>

</body>

To test the following out I simply created a ul li block using the class pol (Pop out link – :-P) to identify those which I would target with the plug in.

    <ul>
        <li><a href="#" rel="This is example 1" class="pol">Example Link 1</a></li>
    </ul>

And the result:

Cheers for now:

Andrew,

P.S. Cross Browser Transparent Rounded Corners which is compatible with IE 6 – This is like Rocking Horse Muck, so hard to find lol.

IIS and Virtual Directories and their usefulness

REA_ANDREW — Fri, 27 Feb 2009 09:14:39 GMT

I had a requirement of late where by I wanted to share a Master Page over many physical sub sites, i.e.

Main Website (www.mainsite.com)
- Sub Site 1 (www.subsite1.com)
- Sub Site 2 (www.subsite2.com)
etc…

It was at this point when I thought of virtual directories and really just, again, stood back and admired the work which must have gone into such a methodology and the output which is so simple to use and yet so powerful. If you have not used Virtual Directories before or you have heard of them but not quite GOT what they are about or their purpose then you may find this post useful.

Ignoring the master pages for now, say that you want to share a common CSS style sheet across many different websites, with the style sheet residing inside a main website. So here is an example folder structure of the main website or a snippet:

wwwroot
- www.mainsite.com
  - assets
    - css
      - sharedStyle.css

Ok, now I zip over to my other physical web site in IIS called www.subsite1.com and before I do anything, I right click and add a virtual directory. I give it an alias of assets and point it at the physical path of the above assets folder inside the www.mainsite.com website folder. Now once you have done this, you will see a folder with a shortcut icon, i.e. Virtual.

What does this mean? Well if you then create a simple html page, and you want to include the css, your css line would be the same as the one used for the www.mainsite.com .

www.mainsite.com –> /assets/css/sharedStyle.css

www.subsite1.com –> /assets/css/sharedStyle.css

If you were to go inside the folder for www.subsite1.com inside windows explorer, all you would see is this simple html page you made, and not the actual folder you are referencing, so it is virtual in every sense, albeit 1, of the word.

So if you need to change any common styles, for the many websites which used the above style sheet in my example you have consolidated the changes to one single location.

Comparing Byte Arrays in C# and more specifically using the .NET 3.5 Framework

REA_ANDREW — Fri, 20 Feb 2009 11:17:38 GMT

I was looking for a simple way of comparing two byte arrays and it is not as 123 as you may think as methods which you may assume would return true, DO NOT. I found a solution that does exactly what I need and is part of the framework, and I found it on the link below. It also contains examples at the beginning which may surprise you:

http://blog.tatham.oddie.com.au/2008/07/01/comparing-byte-arrays-in-c-or-at-least-trying-to/

To summarize the method I am speaking of is the following:

public static bool SequenceEqual<TSource>(this System.Collections.Generic.IEnumerable<TSource> first, System.Collections.Generic.IEnumerable<TSource> second)
    Member of System.Linq.Enumerable

Summary:
Determines whether two sequences are equal by comparing the elements by using the default equality comparer for their type.

And it was from a comment may by a guy calling himself RichB in the blog post above. Great find!

Cheers,

Andrew

IDE Features I find useful – Visual Studio

REA_ANDREW — Thu, 19 Feb 2009 16:04:01 GMT

This is a short but one of many of a series of blog posts I would like to make which mention some of the useful features of different IDEs which I make use of. This one is for Visual Studio:

Full Screen

View –> Full Screen (Shift + Alt + Enter)

I love this feature, so say you have a certain layout set up for a particular type of project you are i.e. testing or deving etc… and you feel you would prefer some more space to code or design with, just hit Full Screen mode and you have it, then when you exit Full Screen mode, you layout persists. Extremely useful

//TODO : bla bla bla (TASK LIST)

This is a feature which Visual Studio automatically recognizes and places in your Task List. May be you are reviewing someones work and instead of rtackling each point as your come across it, you are able to go through all of it making the relevant //TODO: DELETE UNUSED CODE!! then once finished Visual Studio has compiled a nice ordered task list for you to tackle. Great organisational feature I reckon.

Bookmarks

View –> Other Windows –> Bookmark Window

I find this feature extremely handy in a couple of immediate situations:

I am tracking down a procedure in code and it spans several classes, so I want to be able to jump quickly to the relevant parts so I can analyze.
I am dealing with a single but extremely long code file and to preserve my sanity I set book marks while I scan down the code. This way I am able to jump back and fourth to parts when i need.

You can also organize your book marks into folders. I mean you could follow a procedural approach and really go deep with these and use every time you code. I would say overkill but if you get used to something and it works, why stop?

Encapsulate Variables

For example, right click on a private variable and encapsulate. I think this is an extremely handy feature BUT, I do prefer the one inside Net Beans which I have detailed here: Net Beans Encapsulation Feature. I know you can get this functionality with Refactor program etc… but I would like to focus on out of the box things, oh and ignoring the extensibility lol if I am allowed to say that :-)

Conditional Breakpoints

I like the way I can set conditional break points based on the context of the currently running code, so that I can dig into exactly what I require. For example, If I place a breakpoint inside a for iteration, I can state that i only want the break point to be hit when the counter, lets say x, is 3 .

Split Screen Design/Markup and Split Horizontal Screen View

I think the first is new in Visual Studio 2008, and I do no actually have much use for it, as I very rarely look at the design for a web application in the GUI, but for the likes of WPF and windows development it is a really good feature and one which i am sure many people would not like to loose.

The second is when for example you drag an editor tab to the right or left and Visual Studio gives you the option to create another window horizontally next the the original. This is good when you need to write code with immediate reference to another context.

prop tab tab

If you type prop and then hit the tab key twice you are very conveniently given a property stub like the following:

public int MyProperty { get; set; }

The type and the property name will be like a snippet where by you can tab into and out of each whilst editing, and when complete hit return and repeat the process. It is not very useful how ever if you want to design components and you need to raise property changed events and such things. I have no doubt this could be achieved through reflection but me personally I would simply use the complete property syntax if required.

Export Template

File –> Export Template

This is a nice tool, where you can export either a project template or export an item template. For example lets say I create a new MVC application and add references to the Microsoft Patterns and Practices Enterprise Library. I would then like to export this, so i have the option of creating a new MVC site which already contains all the references I need for the EntLib.

The second option for the Item Template, for example, lets say you create a custom web control and it will require control state and also notification of post backs. You could override the two methods for the saving and loading of control state and implement the methods for the IPostBackDataHandler. Export this ItemTemplate and in future you can now create web control with the above already present saving you time. Check out my post which details what i am talking about here : Custom ASP.NET Components

Funny yet I suppose still valid point: One place i used to work they actually exported a template for an ENUM!! Is this necessary and productive or just sheer lazy. Can I create a file and type an enum shell just as fast? hmmm I suppose I am adding one extra step doing it my way so in those terms it is more productive.

CascadingDropDownExtender setting SelectedValue

REA_ANDREW — Tue, 27 Jan 2009 11:09:07 GMT

I had a situation recently where:

I needed a cascading drop down interface
I needed it to execute on the client
I needed to reload the parent and child items' selection.

The Cascading DropDownList Extender is an excellent control as are its siblings inside the AjaxControlToolkit. At first I was scouring the outputted JavaScript that it uses inline with the ServiceMethod to find a method by which I could programmatically set the selected index, which in turn should trigger the data retrieval.

"All other things being equal, the simplest solution is the best."

Occam's razor

It was at this point I saw that the Cascading DropDownList extender actually has a SelectedValue property. I could have kicked myself when i saw it, as really I should have researched the control more and its capabilities and limitations. Ever heard of the 7 P's - British SAS lol ?

So I integrated it with a control I built. The control was a Region, County, TownCity and Area selection in respective order, so as to bring more structure to clients addresses for a project I am currently on. Similar to a previous post where I create a composite control I declare the control extenders inside this custom composite control and control which I render dependant on other properties which are set.

        private void CreateRegion()
        {
            DropDownListRegion = new DropDownList();
            DropDownListRegion.ID = this.ID + "_DropDownListRegion";
            CascadingDropDownRegion = new CascadingDropDown();
            CascadingDropDownRegion.ID = this.ID + "_CascadingDropDownRegion";
            CascadingDropDownRegion.Category = REGION_CATEGORY;
            CascadingDropDownRegion.EmptyText = REGION_EMPTYTEXT;
            CascadingDropDownRegion.EmptyValue = "0";
            CascadingDropDownRegion.LoadingText = REGION_LOADINGTEXT;
            CascadingDropDownRegion.PromptText = REGION_PROMPTTEXT;
            CascadingDropDownRegion.PromptValue = "0";
            CascadingDropDownRegion.ServiceMethod = REGION_SERVICE_METHOD;
            CascadingDropDownRegion.ServicePath = SERVICE_PATH;
            CascadingDropDownRegion.TargetControlID = DropDownListRegion.ID;
            if (RegionID != 0)
                CascadingDropDownRegion.SelectedValue = RegionID.ToString();
            Controls.Add(DropDownListRegion);
            Controls.Add(CascadingDropDownRegion);


            if (UseAddressLevel == AddressLevel.Region)
            {
                RequiredFieldValidatorRegion = new RequiredFieldValidator();
                RequiredFieldValidatorRegion.ID = this.ID + "_RequiredFieldValidatorRegion";
                RequiredFieldValidatorRegion.ControlToValidate = DropDownListRegion.ID;
                RequiredFieldValidatorRegion.InitialValue = "0";

                ValidatorCalloutExtenderRegion = new ValidatorCalloutExtender();
                ValidatorCalloutExtenderRegion.ID = this.ID + "_ValidatorCalloutExtenderRegion";
                ValidatorCalloutExtenderRegion.TargetControlID = RequiredFieldValidatorRegion.ID;

                Controls.Add(RequiredFieldValidatorRegion);
                Controls.Add(ValidatorCalloutExtenderRegion);
            }
        }

So the whole thing above is a control, but the amount of collapsible extenders displayed is control by an enum called AddressLevel. How it works is simply like this, if you only require the Town and City, it is this level with which you set it, what happens then is that the area will not be displayed and also the TownAndCity will gain validation.

Line 16 of the code above will set selected index based on whether the RegionID has been set. I find it so handy and useful that I can strongly type my .NET controls to work with the control extenders as it just adds a greater level to the UI experience. Strongly Typing Javascript is also a good IDEA and something which I want to touch on in later posts aswell.

Cheers,

Andrew

P.S. setting the selected index for multiple cascading dropdownlists will work so its parent gets populated and set's the selected value using client side code, the child cascading dropdownlist will wait for this event, then populate and THEN check for the presence of the selected value in its items and again use client side to set the selected index. After that it CASCADES!! lol

NetBeans IDE Feature I would like to see inside Visual Studio

REA_ANDREW — Sat, 17 Jan 2009 13:15:08 GMT

I am currently inside the NetBeans IDE which is my IDE of choice at the moment for my Java development. I thought I would mention a refactoring feature I would like to see inside Visual Studio "Out of the Box." It is with regards to the encapsulation of fields.

Yes you can create a class diagram and encapsulate a field
Yes you can right click in code view and encapsulate a field
Yes you can download, purchase or create a plug in to do the following

BUT, I would like to see two things:

The following functionality out of the box ready
The ability to encapsulate a selection of fields or to be able to select the fields you would like to encapsulate inside a nice GUI Dialogue.

Some may say lazy, others may say more productive. In NetBeans I can go to the refactor menu and click encapsulate fields and I am presented with a nice dialogue where I can select the fields I would like to encapsulate and also a few more properties to describe the encapsulation I desire for each field. Just saves time in my view.

I am greedy lol, what I would also like to see form the NetBeans dialogue above is also to open it up after refactoring and being able to edit. That would be really useful. I am going to download Visual Studio 2010 and see what is new and going on lol. It can be found here:

http://www.microsoft.com/downloads/details.aspx?FamilyId=922B4655-93D0-4476-BDA4-94CF5F8D4814&displaylang=en

Cheers,

Andrew

Developing ASP.NET Custom Controls, Method Single Responsibility and an easier way to manage large data forms

REA_ANDREW — Sat, 17 Jan 2009 12:03:19 GMT

You can download the files here.

Until a few weeks ago I did not know about a feature called Control State. I knew of course about ViewState but not Control State. I would love to know everything about everything in this game i.e. computing, but as you will agree that is extremely difficult to do. Another ting I have found myself doing in the past is for example using a client side script helper, e.g. calendar date picker, to populate a textbox. This looks a lot nicer, helps the user and reduces validation errors. Now getting this value was a case of accessing the Request data for that specific control. i.e.

Request.Form[MyTextBox.UniqueID]

Because we used a client side script to populate the control the server side TextChanged event would not get fired so we could not unfortunately do this:

MyTextBox.Text

So, on this occasion a situation arose where by I had to create a few controls, being a custom HierarchialDataSource, a custom HierarchialDataSourceControl and also a nice custom TreeView with valid CSS. I opted to create my own as opposed to CSS Control Adapters simply because I require some really bespoke features, plus I love learning how to make these things lol.

Now I am not going into these controls on this post but rather features of them, meaning the Control State and IPostBackDataHandler interface. The control I want to make today involves 4 fields of which one will be a date field which will use the Ajax Control Toolkit Calendar Extender. The fields will be Title, Firstname, Lastname and Date of Birth.

In title I have also stated "Method Single Responsibility" and my reason for this is because only the other day I was listening to one of Scott Hanselman's pod casts on which he was speaking to Robert C. Martin or "Uncle Bob" as he is known in the programming world. He stated that Single Responsibility should also be applied to methods as well or reason for change. It was stated that lots of methods with smaller amounts of code wrapped around a single responsibility was easier to read, debug and maintain that fewer methods with bloated amounts of code which would undoubtedly contain lots of indentations. So I am applying this, and wonder why I have never done this before, but this is all a learning curve.

Ok the first thing we will do on this control is create the fields and properties we require. We will also create another class inside the control with the exact fields and properties as we have for the control, so copy and paste job; this will be used to control the state of the control in a much more strongly typed fashion, in fact truly strongly typed. So here is the start of the control:

   public class PageInformationControl
    {
        #region Fields and Properties
        private string title;
        /// <summary>
        /// The person's title
        /// </summary>
        public string Title
        {
            get { return title; }
            set { title = value; }
        }

        private string firstname;
        /// <summary>
        /// The person's firstname
        /// </summary>
        public string Firstname
        {
            get { return firstname; }
            set { firstname = value; }
        }

        private string lastname;
        /// <summary>
        /// The person's lastname
        /// </summary>
        public string Lastname
        {
            get { return lastname; }
            set { lastname = value; }
        }

        private DateTime dateOfBirth;
        /// <summary>
        /// The person's date of birth
        /// </summary>
        public DateTime DateOfBirth
        {
            get { return dateOfBirth; }
            set { dateOfBirth = value; }
        }

        #endregion

        #region StateObject

        /// <summary>
        /// An object to store the state of the object between postbacks
        /// </summary>
        [Serializable]
        protected class PageInformationControlControlState
        {
            private string title;

            public string Title
            {
                get { return title; }
                set { title = value; }
            }

            private string firstname;

            public string Firstname
            {
                get { return firstname; }
                set { firstname = value; }
            }

            private string lastname;

            public string Lastname
            {
                get { return lastname; }
                set { lastname = value; }
            }

            private DateTime dateOfBirth;

            public DateTime DateOfBirth
            {
                get { return dateOfBirth; }
                set { dateOfBirth = value; }
            }
        }

        #endregion
    }

Next we need to add the Base Class and also the Interface we are going to be using.

    public class PageInformationControl : CompositeControl,IPostBackDataHandler

Next we want to do the following:

Override the base OnInit method and register a couple of instructions with the page
Implement the IPostBackDataHandler, this relies on the point above, i.e. otherwise the interface methods will not be called.
Override two methods of the base class being
1. SaveControlState
2. LoadControlSate

Inside the OnInit method we will tell the ASP.NET Page that this control requires two things:

Control State
It also needs to be informed of PostBacks so it can alter and update its state

Here is the override OnInt event:

        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            //To instruct the page to call the methods require to manage Control State
            Page.RegisterRequiresControlState(this);
            //Required so that the IPostBackDataHandler are invoked.
            Page.RegisterRequiresPostBack(this);
        }

Followed by the overridden methods and implemented ones:

        protected override object SaveControlState()
        {
            return base.SaveControlState();
        }

        protected override void LoadControlState(object savedState)
        {
            base.LoadControlState(savedState);
        }

        #region IPostBackDataHandler Members

        public bool LoadPostData(string postDataKey, System.Collections.Specialized.NameValueCollection postCollection)
        {
            throw new NotImplementedException();
        }

        public void RaisePostDataChangedEvent()
        {
            throw new NotImplementedException();
        }

        #endregion

OK, that is kind of the shell of our control, next we need the interface components which will be the following:

A DropDownList for the Title of a person
A TextBox for the Person's Firstname
A TextBox for the Person's Lastname
A TextBox for the Person's DateOfBirth
- It is this last one which we will use the AjaxControlToolkit and add a calendar extender. This will populate the textbox from the client side yet you will see how you can strongly type your way to the value.
An AjaxControlToolkit TextBoxWatermarkExtender for the Firstname field so the client knows what to enter
An AjaxControlToolkit TextBoxWatermarkExtender for the LastName field so the client knows what to enter
An AjaxControlToolkit TextBoxWatermarkExtender for the DateOfBirth field so the client knows what to enter
An AjaxControlToolkit Calendar extender for the DateOfBirthField so we can get good data.

NOTE: If you have not done so already, you need to add the AjaxControlToolkit assembly to your project as a reference. You can find it here: Ajax Control Toolkit at asp.net/ajax

So we will declare them as protected members.

        #region User interface

        protected DropDownList DropDownListTitle;
        protected TextBox TextBoxFirstName;
        protected TextBox TextBoxLastName;
        protected TextBox TextBoxDob;
        protected AjaxControlToolkit.TextBoxWatermarkExtender WatermarkFirstname;
        protected AjaxControlToolkit.TextBoxWatermarkExtender WatermarkLastName;
        protected AjaxControlToolkit.TextBoxWatermarkExtender WatermarkTextBoxDob;
        protected AjaxControlToolkit.CalendarExtender CalendarDob;

        #endregion

Next is quite a long run. We want to do the following:

Override the CreateChildControls method
Create a virtual method which starts the control generation
Create virtual methods for handling each part of the user interface, but using the method in the above point to call them in the correct order.
I have also put in a method which generates a CSS friendly wrapper for each control so as to avoid a table layout.

In each method I will specify the ID of each of the controls to get a real feel for the control. I will also do this so that we can easily follow how i apply the control extenders to the controls.

        protected override void CreateChildControls()
        {
            Controls.Clear();
            CreateControlHierarchy();
            ClearChildViewState();
        }

        protected virtual void CreateControlHierarchy()
        {
            CreateTitle();
            CreateFirstName();
            CreateLastName();
            CreateDateOfBirth();
        }

        #region Single Responsibility UI Creation Methods

        protected virtual void CreateTitle()
        {
            Control wrapper = GetCssFriendlyControlWrapper();

            DropDownListTitle = new DropDownList();

            string[] titles = new string[] { "Mr", "Mrs", "Ms", "Miss", "Dr", "Prof" };

            foreach (string s in titles)
            {
                ListItem titleItem = new ListItem(s);
                DropDownListTitle.Items.Add(titleItem);
            }

            ListItem baseItem = new ListItem("Please select title");
            DropDownListTitle.Items.Insert(0, baseItem);

            wrapper.Controls.Add(DropDownListTitle);

            Controls.Add(wrapper);
        }

        protected virtual void CreateFirstName()
        {
            Control wrapper = GetCssFriendlyControlWrapper();

            TextBoxFirstName = new TextBox();
            TextBoxFirstName.ID = this.ID + "_TextBoxFirstName";

            WatermarkFirstname = new AjaxControlToolkit.TextBoxWatermarkExtender();
            WatermarkFirstname.ID = this.ID + "_WatermarkFirstname";
            WatermarkFirstname.WatermarkText = "Firstname";
            WatermarkFirstname.TargetControlID = TextBoxFirstName.ID;

            wrapper.Controls.Add(TextBoxFirstName);
            wrapper.Controls.Add(WatermarkFirstname);

            Controls.Add(wrapper);
        }

        protected virtual void CreateLastName()
        {
            Control wrapper = GetCssFriendlyControlWrapper();

            TextBoxLastName = new TextBox();
            TextBoxLastName.ID = this.ID + "_TextBoxLastName";

            WatermarkLastName = new AjaxControlToolkit.TextBoxWatermarkExtender();
            WatermarkLastName.ID = this.ID + "_WatermarkLastName";
            WatermarkLastName.WatermarkText = "Lastname";
            WatermarkLastName.TargetControlID = TextBoxLastName.ID;

            wrapper.Controls.Add(TextBoxLastName);
            wrapper.Controls.Add(WatermarkLastName);

            Controls.Add(wrapper);
        }

        protected virtual void CreateDateOfBirth()
        {
            Control wrapper = GetCssFriendlyControlWrapper();

            TextBoxDob = new TextBox();
            TextBoxDob.ID = this.ID + "_TextBoxDob";

            WatermarkTextBoxDob = new AjaxControlToolkit.TextBoxWatermarkExtender();
            WatermarkTextBoxDob.ID = this.ID + "_WatermarkTextBoxDob";
            WatermarkTextBoxDob.WatermarkText = "Date of Birth (yyyy-mm-dd)";
            WatermarkTextBoxDob.TargetControlID = TextBoxDob.ID;

            CalendarDob = new AjaxControlToolkit.CalendarExtender();
            CalendarDob.ID = this.ID + "_CalendarDob.ID";
            CalendarDob.Format = "yyyy-MM-dd";
            CalendarDob.TargetControlID = TextBoxDob.ID;

            wrapper.Controls.Add(TextBoxDob);
            wrapper.Controls.Add(WatermarkTextBoxDob);
            wrapper.Controls.Add(CalendarDob);

            Controls.Add(wrapper);
        }

        protected virtual Control GetCssFriendlyControlWrapper()
        {
            return new HtmlGenericControl("div");
        }

        #endregion

Ok we are nearly ready to test this. What we need to ensure next, is that we handle postbacks correctly, and we maintain state. We are going to make use of the state object which we made above. One alternative is to use a HashTable for example but I like to have a strongly typed version.

So final few things:

SaveControlState
LoadControlState
LoadPostData
RaisePostDataChangedEvent
- Although I am not demoing this event in this post, this can be used for example in conjunction with custom EventArgs and maybe create a Changed Event, where subscribers can access your data when the subscribed event is fired

      protected override object SaveControlState()
        {
            //Create an instance of the state object and fill it with the 
            //contents of the properties in the controls
            PageInformationControlControlState state = new PageInformationControlControlState
            {
                DateOfBirth = this.DateOfBirth,
                Firstname = this.Firstname,
                Lastname = this.Lastname,
                Title = this.Title
            };
            return state;
        }

        protected override void LoadControlState(object savedState)
        {
            //If the saved state is null, just return
            if (savedState == null)
                return;

            //Cast the savedState as your state object
            PageInformationControlControlState state = (PageInformationControlControlState)savedState;

            //Repopulate your properties after postback
            Title = state.Title;
            Firstname = state.Firstname;
            Lastname = state.Lastname;
            DateOfBirth = state.DateOfBirth;
        }

        #region IPostBackDataHandler Members

        public bool LoadPostData(string postDataKey, System.Collections.Specialized.NameValueCollection postCollection)
        {
            //Make sure you controls have been created
            EnsureChildControls();
            //Fill the properties using the post data.
            Title = postCollection[DropDownListTitle.UniqueID];
            Firstname = postCollection[TextBoxFirstName.UniqueID];
            Lastname = postCollection[TextBoxLastName.UniqueID];
            DateTime outDateTime;
            if (DateTime.TryParse(postCollection[TextBoxDob.UniqueID], out outDateTime))
                DateOfBirth = outDateTime;

            return true;
        }

        public void RaisePostDataChangedEvent()
        {
            //throw an updated event
        }

        #endregion

OK so we are now ready to create a test, were by I will add this new control to the screen and also a button to raise a postback and a textarea which will display an aggregation of the data formatted in a tidy way. On thing I have done at this point is add the reference to the control inside the web.config. I have started off with an ASP.NET WebApplication, if you are using a normal ASP.NET Website and hence using the App_Code folder just omit the assembly attribute but makesure you give your control a namespace inside the App_Code folder and that it relates to what you are about to put into the web.config. The following is inline with my program properties, and it is the first control reference:

		<pages>
			<controls>
				<add tagPrefix="eapps" namespace="WebApplication1.Controls" assembly="WebApplication1"/>
				<add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
				<add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
			</controls>
		</pages>

I will now create the web display:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!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></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <eapps:PageInformationControl ID="information1" runat="server" />
    </div>
    <asp:Button ID="Button1" runat="server" Text="Test PostBack" 
        onclick="Button1_Click" /><br />
    <asp:TextBox ID="TextBoxTest" runat="server" TextMode="MultiLine" Rows="6" 
        Columns="10" Width="239px"></asp:TextBox>
    </form>
</body>
</html>

Which gives a nice desgin time layout. I will make a post about DesignTimeDesigning which is a cool topic and leads you into Windows Forms if you want to go that far, you don't have to like, BUT, it shows you the power of integration that is at your finger tips and can lead to commercial control development and may be an income dependant on the popularity and effectiveness of your controls. As you will see form the graphic below you need to add a Script Manager to your page prior to running the code otherwise it will tell you the same thing lol.

Next we will populate the TextBox you see above with the data from our control in a formatted fashion when the Test postback button is clicked.

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

namespace WebApplication1
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            StringBuilder sb1 = new StringBuilder();

            sb1.AppendFormat("Title : {0}", information1.Title);
            sb1.AppendLine();
            sb1.AppendFormat("Firstname : {0}", information1.Lastname);
            sb1.AppendLine();
            sb1.AppendFormat("Lastname : {0}", information1.Firstname);
            sb1.AppendLine();
            //Notice the next part.  It is nice and strongly typed even though the
            //textBox is populated using clientside code.
            //I am formatting the date as I do not want the Time part
            sb1.AppendFormat("Date of Birth : {0}", information1.DateOfBirth.ToString("yyyy-MM-dd"));
            sb1.AppendLine();

            TextBoxTest.Text = sb1.ToString();

            sb1 = null;
        }
    }
}

All that is left is to run the code.

Conclusion

Making controls this way, may seem long winded but at the end you will get a reusable, portable control. You can extend it, you can improve it, you can change it etc... My favourite part about it is the fact that you can access postdata from you control in a strongly typed fashion from the C# server side layer.

Extensions I can think of straight away involves validation and also integrating the Ajax Control Toolkit Validator Callout.

You can download the files here.

A nice Java Static String function I can now port into C# using Extension Methods

REA_ANDREW — Fri, 16 Jan 2009 17:48:10 GMT

I have just been playing around making a small networking application using Java when i came across a small and dead simple function which I thought, "hey that is useful," and "oh that would now fit .NET Extension Methods." So straight away lol and got my console up and had a play, and i know it may seem a bit trivial, but it is just a bit tidier than other methods you could use. In all I just like the simple function of the .... function. Working in a case sensitive language, it seems quite relevant to differentiate.

Anyway, enough blabbering, the function is called equalsIgnoreCase(String inValue) and to use in C# simply create a string extension method like so, with an implementation following:

    public static class StringExtensions
    {
        public static bool EqualsIgnoreCase(this string value, string compare)
        {
            return (compare.ToLower() == value.ToLower());
        }
    }

            Console.WriteLine("QuIt".EqualsIgnoreCase("quit"));

The output is True obviously :-)

Cheers,

Andrew

Reviewing my choice for ORM

REA_ANDREW — Fri, 16 Jan 2009 08:28:25 GMT

UPDATE 2009-01-27: Choosing a Service model over a domain model inside NetTiers for the Component Layer can also achieve this functionality, but is definitely good to know and great to work with ObjectDataSources. Reduces the code required for a lot of tasks dramatically.

Of late I have been dabbling with CodeSmith and also the templates for NetTiers, also making my own templates which is fun, but does demand a lot of time to generate re-usable templates. Well to me anyway. Now I do like NetTiers, all apart from the Web Layer which are UI controls and also Data controls. I enjoy making strong use of ObjectDataSources to highly reduce code and improve pages, and one of the things that struck me was, well where are the parameter-less constructors, which is what I need to use the object against an ObjecDataSource.

This actually is no big hurdle for a couple of reasons but mainly because NetTiers creates such a detailed Domain Model. So what I need and also how to make light work of this using Code Smith again but with my own template.

I need 5 base methods which will encapsulate the basic CRUD operations oh and the object is RestaurantType, not an enum but a type, only because the client will want to add more down the line and I do not want to rebuild the assembly for such a trivial addition.

IList<RestaurantType> GetRestaurantTypes(int index, int pageSize, string sort);
int GetRestaurantTypesCount(int index, int pageSize, string sort);
1. Although this count method accepts the same parameters, it does not use them, it is simply to comply with the rule that the ObjectDataSource's Select Count method must have the same method signature and the Select method itself.
void AddRestaurantType(RestaurantType restaurantType)
void UpdateRestaurantType(RestaurantType restaurantType)
void DeleteRestaurantType(RestaurantType restaurantType)

Another nice tip here is to decorate your class and the methods with Data Attributes which identify the class and also the methods as suitable for binding against. Only the first, third, fourth and fifth method need decorating as the count method is not applicable, so CRUD:

Create : [DataObjectMethod(DataObjectMethodType.Insert)]
Read : [DataObjectMethod(DataObjectMethodType.Select)]
Update : [DataObjectMethod(DataObjectMethodType.Update)]
Delete : [DataObjectMethod(DataObjectMethodType.Delete)]

Finally the class itself is also decorated with the following:

[DataObject]

So here is the code for the simple data object with which I can bind an ObjectDataSource to.

   [DataObject]
    public class CustomRestaurantTypeDataSource
    {
        public static TransactionManager CreateTransaction()
        {
            TransactionManager transactionManager = null;
            if (DataRepository.Provider.IsTransactionSupported)
            {
                transactionManager = DataRepository.Provider.CreateTransaction();
                transactionManager.BeginTransaction(System.Data.IsolationLevel.ReadUncommitted);
            }
            return transactionManager;
        }

        [DataObjectMethod(DataObjectMethodType.Select)]
        public IList<RestaurantType> GetRestaurantTypes(int index, int pageSize, string sort)
        {
            int count = -1;
            TList<RestaurantType> restaurantTypes = DataRepository.RestaurantTypeProvider.GetPaged(index / pageSize, pageSize, out count);
            return restaurantTypes.ToList();
        }

        public int GetRestaurantTypesCount(int index, int pageSize, string sort)
        {
            int count = -1;
            DataRepository.RestaurantTypeProvider.GetPaged(out count);
            return count;
        }

        [DataObjectMethod(DataObjectMethodType.Insert)]
        public void AddRestaurantType(RestaurantType restaurantType)
        {
            using (TransactionManager tm = CreateTransaction())
            {
                DataRepository.RestaurantTypeProvider.Insert(tm, restaurantType);
                tm.Commit();
            }
        }

        [DataObjectMethod(DataObjectMethodType.Update)]
        public void UpdateRestaurantType(RestaurantType restaurantType)
        {
            using (TransactionManager tm = CreateTransaction())
            {
                DataRepository.RestaurantTypeProvider.Update(tm, restaurantType);
                tm.Commit();
            }
        }

        [DataObjectMethod(DataObjectMethodType.Delete)]
        public void DeleteRestaurantType(RestaurantType restaurantType)
        {
            using (TransactionManager tm = CreateTransaction())
            {
                DataRepository.RestaurantTypeProvider.Delete(tm, restaurantType);
                tm.Commit();
            }
        }
    }

I have then used this on my ObjectDataSource like the following:

    <asp:ObjectDataSource ID="RestaurantTypeDataSource" runat="server" 
        DataObjectTypeName="TM.Entities.RestaurantType" 
        DeleteMethod="DeleteRestaurantType" EnablePaging="True" 
        MaximumRowsParameterName="pageSize" 
        OldValuesParameterFormatString="original_{0}" 
        SelectCountMethod="GetRestaurantTypesCount" SelectMethod="GetRestaurantTypes" 
        StartRowIndexParameterName="index" 
        TypeName="TM.WebSite.CodeFiles.CustomRestaurantTypeDataSource" 
        UpdateMethod="UpdateRestaurantType">
        <SelectParameters>
            <asp:Parameter DefaultValue="0" Name="index" Type="Int32" />
            <asp:Parameter DefaultValue="10" Name="pageSize" Type="Int32" />
            <asp:Parameter Name="sort" Type="String" />
        </SelectParameters>
    </asp:ObjectDataSource>

In one of my next posts I will show how to make a pager control. I do like the ASP.NET Pager control but I really feel it lacks one thing, and that being a PageChangedEvent. In the pager I will make, you will be able to set the TotalNumberOfPages and also subscribe to the PageChanged Event. I feel this is quite useful and we could also write in code to handle any IPageableContainers brought in with the .NET 3.5 wave.

Cheers,

Andrew

Catching the exception from the ObjectDataSource Inserted Event

REA_ANDREW — Mon, 17 Nov 2008 15:59:00 GMT

One thing I was puzzled over today was that I could see the Exception property of the ObjectDataSourceStatusEventArgs but I could not seem to cast it into the Exception I was expecting. After a little mooching around, and debugging the actual type of the Exception property I found that it is actually of the type:

System.Reflection.TargetInvocationException

Which in turns holds a property called InnerException. This is the Exception property that I needed to cast.

        protected void ArticleDataSourceInserted(object sender, ObjectDataSourceStatusEventArgs e)
        {
            if (e.Exception != null)
            {
                System.Reflection.TargetInvocationException exc= (System.Reflection.TargetInvocationException)e.Exception;

}

}

Oh and also, make sure that you indicate that the Exception has been handled, assuming that is has ofcourse. This is a boolean property of the ObjectDataSourceStatusEventArgs.

e.ExceptionHandled = true;

Cheers,

Andrew