C# Bits

Adding Multi Column Sort to Dynamic Data List Page

2013-01-16T18:15:00.001Z

Well this is the first post of 2013 and has been brewing for a while, what we want is to be able to set the initial sort of the GridView on the List page or ListDetails page. Listing 1 shows what we want to achieve.

Figure 1 – OrderDate sorted Descending and ShipName sorted Ascending

The Multi Column Sort Attribute

Figure 2 shows the first version of the attribute, I was using magic strings. But in Figure 3 we have an enum from System.Web.UI.WebControls to help us out (I’m a bad speller and I tend to type too quickly) so I think that is better.

Figure 2 – Early Version Of Metadata

Figure 3 – Example Metadata

Listing 1 shows the MultiColumnSortAttribute I am using the params construct to get a list of values from the attribute and I am using the BuildColumnParametersDictionary method to convert the object array to a dictionary with a string key the column name and a value of the SortDirection.

[AttributeUsage(AttributeTargets.Class, AllowMultiple = false)]
public class MultiColumnSortAttribute : Attribute
{
    private IDictionary<String, SortDirection> _columns;

    public IDictionary<String, SortDirection> Columns
    {
        get { return this._columns; }
    }

    public MultiColumnSortAttribute(params object[] columnParameters)
    {
        _columns = BuildColumnParametersDictionary(columnParameters);
    }

    private IDictionary<String, SortDirection> BuildColumnParametersDictionary(object[] objArray)
    {
        var dictionary = new Dictionary<String, SortDirection>();
        if ((objArray != null) && (objArray.Length != 0))
        {
            if ((objArray.Length % 2) != 0)
                throw new InvalidOperationException(
                    String.Format("Need even number of control parameters.", 
                    new object[0]));

            for (int i = 0; i < objArray.Length; i += 2)
            {
                if (objArray[i] is String && objArray[i + 1] is SortDirection)
                {
                    if (objArray[i] == null)
                        throw new InvalidOperationException(
                            String.Format("Column name [{0}] is null.", i));

                    // get column name from array
                    String columnName = objArray[i] as String;
                    if (columnName == null)
                        throw new InvalidOperationException(
                            String.Format("Column name '{0}' is not a String.", 
                            objArray[i].ToString()));

                    // check for duplicate column names
                    if (dictionary.ContainsKey(columnName))
                        throw new InvalidOperationException(
                            String.Format("Column name '{0}' occurs more than once.", 
                            columnName));

                    // get sort direction from array
                    if (objArray[i + 1] == null)
                        throw new InvalidOperationException(
                            String.Format("Sort direction '{0}' is not a of type SortDirection.", 
                            objArray[i].ToString()));

                    SortDirection sortDirection = (SortDirection)objArray[i + 1];
                    dictionary[columnName] = sortDirection;
                }
            }
        }
        return dictionary;
    }
}

Listing 1 - MultiColumnSortAttribute

An Extension Method to Add Multi Column Sort to the Page

This extension method in Listing 2 is a little more complicated than it would need to be to handle just the Multi Column Sort, it also handles the DisplayColumn attribute to, this way we cover all bases.

Note: The GetAttribute<T>() extension method is covered here Writing Attributes and Extension Methods for Dynamic Data

/// <summary>
/// Sets the initial sort order.
/// </summary>
/// <param name="queryExtender">The query extender.</param>
/// <param name="table">The table.</param>
public static void SetInitialSortOrder(this QueryExtender queryExtender, MetaTable table)
{
    var multiColumnSort = table.GetAttribute<MultiColumnSortAttribute>();
    if (multiColumnSort != null)
    {
        var firstEntry = multiColumnSort.Columns.Keys.First();
        var order = new OrderByExpression()
        {
            DataField = firstEntry,
            Direction = multiColumnSort.Columns[firstEntry],
        };

        foreach (var item in multiColumnSort.Columns)
        {
            if (item.Key != firstEntry)
            {
                order.ThenByExpressions.Add(new ThenBy()
                {
                    DataField = item.Key,
                    Direction = item.Value
                });
            }
        }
        queryExtender.Expressions.Add(order);
    }
    else if (table.SortColumn != null)
    {
        var order = new OrderByExpression()
        {
            DataField = table.SortColumn.Name,
            Direction = table.SortDescending ? SortDirection.Descending : SortDirection.Ascending,
        };
        queryExtender.Expressions.Add(order);
    }
}

Listing 2 – SetInitialSortOrder Extension Method

Using in the List Page Template

All we need to do in the List and ListDetails page templates is to add one line to the Page_Init method.

protected void Page_Init(object sender, EventArgs e)
{
    table = DynamicDataRouteHandler.GetRequestMetaTable(Context);
    GridView1.SetMetaTable(table, table.GetColumnValuesFromRoute(Context));
    GridDataSource.EntityTypeFilter = table.EntityType.Name;

    // set initial sort order
    GridQueryExtender.SetInitialSortOrder(table);
}

Listing 3 – adding the extension method to the Page Template

Download

You may need to look through the list of files on my sky drive to find the one you want, it’s called MultiColumnSort.zip

Turning you ASP.Net Hyperlinks into images buttons using CSS and jQuery

2012-12-20T15:42:00.001Z

First of all I’m no big jQuery or CSS geek I know a little and I search the net

I was building a site for a client who wanted Image buttons not text links and you should know me if you have read past posts I believe Dynamic Data is about changing as little as possible in the pages I like to do it all if possible using the Metadata, so I thought is there a way of doing this using pure CSS, there is sort of but you are still left with the text of the hyperlink, that is where jQuery came in, and then I thought I need to add a CSS class to each button and again jQuery came to my aid. so here we go.

Note: I am using the latest Web Essentials by Mads Kristensen and using LESS for my style sheets, you are really missing out if you have VS2012 and are not using this experimental add-in for VS2012.

Note: If you don't have VS2012 the you can use Mindscape’s Web Workbench which offers SASS, LESS and CoffeeScript

So the first job is to somehow automatically add the CSS class to each of the buttons that we want to swap to image button.

function NAC_ReplaceHyperLinkWithImageButton() {
    // array of button commands/names to affect
    var toMatch = ["Details", "Edit", "Delete", "Update", "Cancel", "Insert", "Select", "New"];
    // commands/names to replace
    var toReplace = { "New": "Insert" };
    $(document).ready(function () {
        $("TABLE.DDDetailsTable a, TABLE.DDGridView a")
            .each(function () {
                // get the inner text
                var innerText = $(this).text();
                if ($.inArray(innerText, toMatch) > -1) {

                    // do replacement of commands to Replace
                    var found = toReplace[innerText];
                    // check there is a match in the lookup table
                    if (typeof found !== "undefined")
                        innerText = found;

                    // get the embedded text
                    $(this).addClass(innerText);

                    // add a tooltip
                    $(this).attr('Title', innerText);

                    // remove the hyperlinks text
                    $(this).text('');
                }
            });
    });
}
// run script
NAC_ReplaceHyperLinkWithImageButton();
// bind script to AJAX bits
Sys.Application.add_load(NAC_ReplaceHyperLinkWithImageButton);

Listing 1 – jQuery for the swap out

So first of all we have an array this contains ALL the button names (the display text) that we want to affect, next we hook into the jQuery Read event then we are selecting command buttons List, Details, Edit and ListDetails pages using these two selectors:

"TABLE.DDDetailsTable a, TABLE.DDGridView a"

after that I am using the jQuery inArray function to check if the buttons text is one we want to affect. Then having gotten the innerText form the hyperlink we add the CSS class, then finally we remove the text so only the icon will show.

jQuery is so cool mixed with CSS.

Figure 1- hyperlinks replace with buttons

Now people say LESS is more and in this case it is.

table.DDGridView a.Cancel,
table.DDDetailsTable a.Cancel
{
    width: 20px;
    height: 20px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('../images/Cancel.png');
}

    table.DDGridView a.Cancel:hover,
    table.DDDetailsTable a.Cancel:hover
    {
        background-image: url('../images/Cancel-h.png');
    }

        table.DDGridView a.Cancel:hover:active,
        table.DDDetailsTable a.Cancel:hover:active
        {
            background-image: url('../images/Cancel-a.png');
        }

    table.DDGridView a.Cancel.aspNetDisabled,
    table.DDDetailsTable a.Cancel.aspNetDisabled,
    table.DDGridView a.Cancel.aspNetDisabled:hover,
    table.DDDetailsTable a.Cancel.aspNetDisabled:hover,
    table.DDGridView a.Cancel.aspNetDisabled:active,
    table.DDDetailsTable a.Cancel.aspNetDisabled:active
    {
        background-image: url('../images/Cancel-d.png');
    }

Listing 2 – the CSS

above in Listing 2 is the CSS for the Edit button as you can see we cover hyperlinks with a CSS class of “Edit” and we have three states normal hover and active that is when we click. Now for the LESS

/* ==== button mixin ==== */
.Button (@Name)
{
    a.@{Name}
    {
        width: 20px;
        height: 20px;
        display: inline-block;
        background-repeat: no-repeat;
        background-position: center center;

        background-image: url('../images/@{Name}.png');

        &:hover
        {
            background-image: url('../images/@{Name}-h.png');

            &:active
            {
                background-image: url('../images/@{Name}-a.png');
            }
        }
        // link fix 
        &.aspNetDisabled,
        &.aspNetDisabled:hover,
        &.aspNetDisabled:active
        {
            background-image: url('../images/@{Name}-d.png');
        }
        // link fix 
    }
}

table.DDGridView,
table.DDDetailsTable
{
    .Button(Cancel);
    .Button(Delete);
    .Button(Details);
    .Button(Edit);
    .Button(Update);
    .Button(New);
    .Button(Select);
    .Button(Insert);
}

Listing 3 – LESS

In Listing 3 we have a MIXIN called Button and we pass in the name of the button we want, no repeating the same code and if you need to add an extra button it’s easy.

The only thing left is for me to add this to NuGet as a simple to apply package and you are away.

Updated: Package now available from NuGet here Replace ASP.Net Hyperlink With Image Button You will need to add a reference in you master page to the CSS and the JavaScript files which will be added to the Style and Scripts folder respectively.

Adding the NuGet package to an existing Dynamic Data site

Right Click the “References” node of the Web Application Project

Figure 1 – Adding NuGet Package to Project

Figure 2 – Find the “Replace Hyperlink With Image Button” NuGet Package

Figure 3 – Add the Style sheet and jQuery references to the head of the Master page

Note: the highlighted sections, you will need to add a ~/ and ../ to the start od the CSS and Script links.

Figure 4 – Add a script tag just before the end of the BODY tag

Note: you can add your scripts and Style sheets your own way with bundling and minifying this is just an example.

Happy coding.

V1.0.4 now on NuGet you disabled icons if a link’s Enabled property is set to “false”;

Hopefully no more changes now.

Warning another change: v1.0.8 now has better icons and supports disabled buttons including removing the onclick event of the Delete button.

ASP.NET and Web Tools 2012.2 (Release Candidate)

2012-12-14T12:01:00.001Z

Scott Hanselman announced ASP.NET and Web Tools 2012.2 (Release Candidate) today and it’s great for the first time it’s easy to deploy a DD Web Application Project (WAP) site precompiled and un-editable it’s just a check box now.

So install the new tools (get them from here Download Page and Release notes)

Note: If you already have publish settings then VS2012 will import them but they need to be in the root of your site.

Figure 1 - New Publish Wizard

Navigate to the Settings Tab and check the “Precompile during publishing” checkbox and then click “Configure”

Figure 2 - Disabled Editable markup.

un-check the “Allow precompiled site to be updatable” checkbox and your pages will no look like this Figure 3 if someone tries to edit them

Figure 3 - Precompiled aspx page no un-editable

And finally in VS2012 you can set the build configuration in each Publish profile, this works without having to change the build configuration in you project.

Warning: This sadly does not work for Dynamic Data yet it testes OK you already deployed to a site as it uses the place holders, I’m looking into it hopefully there will be a simple fix.

O2 has major fail

2012-08-30T12:04:00.001+01:00

O2 have just blocked external access to smtp.o2.co.uk this means you cannot send e-mail from your mobile if you are no connected to an O2 network and if you are abroad you will only be able to send email via your data account.

For me this is a major fail I havrelayeded on this from O2 for as long as I have been with them. I will be moving from O2 and finding a solution to sending e-mail that no ISP or Mobile provider will be able to block.

RIP O2

Steve

Well news is O2 don't seem to know what the issue is I just got told by first level support that it was not accessable from outside O2's network? but it is again I suspect I was being given a line...

Steve

Creating a Tabbed Entity Template using Wijmo Open for Juice UI

2012-05-26T12:43:00.001+01:00

Wijmo Open for Juice UI is quite cool and offers an alternative to using Ajax Control Toolkit which is still cool but Wijmo Open for Juice UI supports IE6+, Firefox 3+, Safari 3+, and Chrome browsers which should mean everything works.

I started customising Entity Templates here Custom Entity Templates – Dynamic Data 4 I decided to take this a little further and create a Tabbed UI for editing really long forms, I have done this with the Ajax Control Toolkit but thought I like to have a jQuery UI version which brings theming to the table.

Creating the Entity Template

Figure 1 – Wijmo tabs in action

<asp:Panel ID="Panel1" runat="server">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>
            Proin elit arcu, rutrum commodo, vehicula tempus...
        </p>
     </div>
    <div id="tabs-2">
        <p>
            Morbi tincidunt, dui sit amet facilisis feugiat...
        </p>
    </div>
    <div id="tabs-3">
        <p>
            Mauris eleifend est et turpis. Duis id erat...
        </p>
    </div>
</asp:Panel>
<wijmo:WijTabs ID="Tabs1" runat="server" TargetControlID="Panel1">
</wijmo:WijTabs>

Listing 1 – mark-up to create the Wijmo tabs

As you can see there are two blocks the UL and the DIVs the UO is used to create the tabs and each DIV matched an LI element and is shown when the tab is selected.

This is not quite as easy to render in an Entity Template as was the AJAX tabs because we need to render two sets of elements two the page, first the UL then the DIVs and we also need the IDs of the DIVs for link in the LIs. so we have to first create the DIVs so we can get each ones client ID then create the UL and add the hyperlinks.

protected override void OnLoad(EventArgs e)
{
    var groupAttribute = Table.GetAttribute<GroupNamesAttribute>();
    if (groupAttribute == null)
        throw new InvalidOperationException("A GroupsAttribute is required for AJAX tab group to work.");

    var row = new HtmlTableRow();
    var td = new HtmlTableCell();
    row.Controls.Add(td);
    this.Controls.Add(row);
    // create tab container to hold each children column
    var panel = new Panel();
    panel.ID = "tabContainer_" + Table.Name;

    // add a tab panel for each children table
    var unorderedList = new HtmlGenericControl("ul");

    // SortedList of tabs
    var tabs = new SortedList<String, HtmlGenericControl>();

    // add DIV for each group
    foreach (var gi in groupAttribute.Groups)
    {
        var groupName = gi.Value;

        var tabDiv = new HtmlGenericControl("div");
        tabDiv.ClientIDMode = ClientIDMode.Static;
        tabDiv.ID = String.Format("{0}-{1}", Table.Name, groupName).Replace(" ", "-");

        // get columns for this group
        var columns = from c in Table.GetScaffoldColumns(Mode, ContainerType)
                      where c.GetAttributeOrDefault<GroupAttribute>().Index == gi.Key
                      orderby c.GetAttributeOrDefault<DisplayAttribute>().GetOrder()
                      select c;

        // add table for this tabs fields
        var htmlTable = new HtmlTable();
        htmlTable.Attributes.Add("class", "DDDetailsTable");
        htmlTable.CellPadding = 6;
        htmlTable.Attributes.Add("Name", groupName);

        // add fields
        foreach (MetaColumn column in columns)
        {
            // new row
            var htmlRow = new HtmlTableRow();
            htmlTable.Controls.Add(htmlRow);

            // add header cell
            var tdHeader = new HtmlTableCell();
            tdHeader.Attributes.Add("class", "DDLightHeader");
            tdHeader.InnerText = column.DisplayName;
            // add cell to row
            htmlRow.Controls.Add(tdHeader);

            // add data cell
            var tdData = new HtmlTableCell();
            // get field template
            var dynamicControl = new DynamicControl() 
                { 
                    Mode = Mode,
                    DataField = column.Name, 
                    ValidationGroup = this.ValidationGroup 
                };
            // add field template to cell
            tdData.Controls.Add(dynamicControl);
            // add cell to row
            htmlRow.Controls.Add(tdData);
        }

        // add the DynamicControl to the tab panel
        tabDiv.Controls.Add(htmlTable);

        // add the tab to list
        tabs.Add(groupName, tabDiv);
    }

    foreach (var gi in groupAttribute.Groups)
    {
        var groupName = gi.Value;

        // new 'LI'
        var tabLi = new HtmlGenericControl("li");

        // new hyperlink
        var hyperlink = new Literal();
        hyperlink.Text = String.Format("<a href=\"#{0}\" >{1}</a>", tabs[groupName].ClientID, groupName);

        // add hyperlink to 'LI'
        tabLi.Controls.Add(hyperlink);

        // add LIs items to UL
        unorderedList.Controls.Add(tabLi);
    }

    // add UL to panel
    panel.Controls.Add(unorderedList);

    // add DIVs to panel
    foreach (var gi in groupAttribute.Groups)
    {
        var groupName = gi.Value;
        panel.Controls.Add(tabs[groupName]);
    }

    // add the panel to the page
    td.Controls.Add(panel);

    // associate the panel with the Wijmo tabs
    var wijmoTabs1 = new WijTabs()
        {
            ID = "wijmoTabs1",
            TargetControlID = panel.ID
        };

    // add Wijmo tabs to the page
    td.Controls.Add(wijmoTabs1);
}

Listing 2 – the main code for the Entity Template

Figure 2 – the finished Wijmo Tabs EntityTemplate

To setup you will need to have the Attributes and the Advanced Field Template Factory these are in the sample project. I will be putting on NuGet along with my other bits and pieces hopefully soon.

public static void RegisterRoutes(RouteCollection routes)
{
    // add new entity template factory that works with single files also
    DefaultModel.EntityTemplateFactory 
        = new AdvancedEntityTemplateFactory();

    DefaultModel.RegisterContext(typeof(Models.NorthwindEntities), 
        new ContextConfiguration() { ScaffoldAllTables = true });

    routes.Add(new DynamicDataRoute("{table}/{action}.aspx")
    {
        Constraints = new RouteValueDictionary(new 
        { 
            action = "List|Details|Edit|Insert" 
        }),
        Model = DefaultModel
    });
}

Listing 3 – setting up the project Global.asax.cs

[MetadataTypeAttribute(typeof(Employee.EmployeeMetadata))]
[EntityUIHint("WijmoTabs")]
[GroupNames("Personal","Company","Address")]
public partial class Employee
{
    internal sealed class EmployeeMetadata
    {
        public int EmployeeID { get; set; }

        [Group(0)]
        [Display(Order = 0)]
        public string Title { get; set; }
        [Group(0)]
        [Display(Order = 1)]
        public string TitleOfCourtesy { get; set; }
        [Group(0)]
        [Display(Order = 2)]
        public string FirstName { get; set; }
        [Group(0)]
        [Display(Order = 3)]
        public string LastName { get; set; }
        [Group(0)]
        [Display(Order = 4)]
        public Nullable<DateTime> BirthDate { get; set; }
        [Group(0)]
        [Display(Order = 5)]
        public string Extension { get; set; }
        [Group(0)]
        [Display(Order = 6)]
        public byte[] Photo { get; set; }
        [Group(0)]
        [Display(Order = 7)]
        public string HomePhone { get; set; }

        [Group(1)]
        [Display(Order = 8)]
        public Nullable<DateTime> HireDate { get; set; }
        [Group(1)]
        [Display(Order = 9)]
        public Employee Manager { get; set; }
        [Group(1)]
        [Display(Order = 10)]
        public Nullable<int> ReportsTo { get; set; }
        [Group(1)]
        [Display(Order = 10)]
        public EntityCollection<Employee> Staff { get; set; }
        [Group(1)]
        [Display(Order = 11)]
        public EntityCollection<Order> Orders { get; set; }
        [Group(1)]
        [Display(Order = 12)]
        public EntityCollection<Territory> Territories { get; set; }
        [Group(1)]
        [Display(Order = 13)]
        public string Notes { get; set; }

        [Group(2)]
        [Display(Order = 14)]
        public string Address { get; set; }
        [Group(2)]
        [Display(Order = 15)]
        public string City { get; set; }
        [Group(2)]
        [Display(Order = 16)]
        public string PostalCode { get; set; }
        [Group(2)]
        [Display(Order = 17)]
        public string Region { get; set; }
        [Group(2)]
        [Display(Order = 18)]
        public string Country { get; set; }

        [Display(AutoGenerateField = false)]
        public string PhotoPath { get; set; }
    }
}

Listing 4 – Sample Metadata

You will also need NuGet and add the Wijmo Open for Juice UI to your project.

Later I will add all the features that you get with jQuery UI such as tab sorting and alignment see the online Juice Explorer for all the features.

Just for good measure I have added the Wijmo Accordion to the project

Figure 3 – Wijmo Accordion Entity Template

You can of course get even more by getting Studio for Studio for ASP.NET Wijmo from ComponentOne this is the best thing for ASP.Net I have seem come out for a while as everyone else seems to be concentrating on either pure client or MVC

Download from my sky drive WijmoTabs.zip

Using SQL Server View in Visual Studio LightSwitch 2011

2012-02-22T15:34:00.001Z

There are two issue resulting from SQL Server Views in VS LightSwitch 2011 inferred keys;

Columns appearing as key that you do not want to be inferred as keys.
Forcing columns to be keys that are not inferred as keys.

You will see the results of these issues with SQL Server Views in different ways for me there were two forms:

Strange Paging on child grids, you may see less row than are set on the pager i.e. page size was set to 10 but on pages you see 5, 6, 7 rows or more.
Single item per page.
Single item returned when there should be many.

Removing Inferred Columns

Figure 1 – View from Northwind

As you can see in Figure 1 view from the Northwind database as imported in to LightSwitch you can see there are two columns that may cause you problems.

To take these out of the inferred key on this view we can apply a CAST see below:

CAST(dbo.Products.Discontinued AS BIT)
CAST(dbo.Categories.CategoryName AS NVARCHAR(15))

Figure 2 – Adding CAST to Column

So when we “Update Datasource” we get what we see in Figure 3

Figure 3 – View after “Update Datasource”

Now we have remove the two offending columns from the inferred keys.

Forcing Columns to be Inferred

Here we need to do the opposite and the function we use for that is ISNULL (Transact-SQL) for this sample we will add the Supplier and Customer ID’s to the inferred keys, here the replacement value I am using is 0 because the two columns are INT but if a column was NVARCHAR(50) then the cast would be ISNULL(TextColumn, N‘’)

ISNULL(dbo.Products.SupplierID, 0)
ISNULL(dbo.Products.CategoryID, 0)

In Figure 4 we can see the result;

Figure 4 – After Including the Supplier and Customer IDs in the Inferred Keys

Conclusion

This way you can for the keys you want to used in your view, there will be a small hit in the queries for using either of these techniques in your queries but hopefully not too much of a hit.

Note: These view may or may not have issues, but I have had various problems in LightSwitch relating both issues and used one the two techniques to override the default behaviour.

Note: Also I did not come up with these methods they are scattered around the LightSwitch Forums but for my own use and easy reference I have added them here.

Love Telerik Open Access ORM

2012-02-20T18:06:00.001Z

Just watched the Q1 2012 “What’s New in Data Tools – OpenAccess ORM” and they now have a a Dynamic Data Wizard see screen show of the slide.

Find it here Telrik OpenAccess ORM, Note this works with Most Databases and all Free databases

This is cool!

Basic Auditing for Dynamic Data with Entity Framework 4.x

2012-02-13T12:46:00.001Z

This is my first article of 2012 and I thought I had published an article on this previously but apparently not so I will now rectify that oversight.

The first this we need out audit fields, these are added to every entity we need to audit, next we need an Interface to allow us to fine entities with Audit fields.

Figure 1 – Audit Fields

public interface IAuditable
{
    String CreatedByUserID { get; set; }
    String CreatedDateTime { get; set; }
    String UpdatedByUserID { get; set; }
    String UpdatedDateTime { get; set; }
}

Listing 1 – IAuditable interface

We then need to add this to each entity that will be audited, this is just applied to you metadata classes on the Partial Class NOT the buddy class.

[MetadataType(typeof(AppAlterMetadata))]
public partial class AppAlter : IAuditable
{
    internal class AppAlterMetadata
    {
        public Object ID { get; set; }

        // other field deleted for brevety

        // auditing fields
        public Object CreatedByUserID { get; set; }
        public Object CreatedDateTime { get; set; }
        public Object UpdatedByUserID { get; set; }
        public Object UpdatedDateTime { get; set; }
    }
}

Listing 2 – the interface applied to each entity that requires auditing

Now for the code that does the auditing automatically,

public partial class MyEntities
{
    /// <summary>
    /// Called when [context created].
    /// </summary>
    partial void OnContextCreated()
    {
        // Register the handler for the SavingChanges event. 
        this.SavingChanges += new EventHandler(context_SavingChanges);
    }



    /// <summary>
    /// Handles the SavingChanges event of the context control.
    /// </summary>
    /// <param name="sender">The source of the event.</param>
    /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
    private static void context_SavingChanges(object sender, EventArgs e)
    {
        var objects = ((ObjectContext)sender).ObjectStateManager;

        // handle auditing
        AuditingHelperUtility.ProcessAuditFields(objects.GetObjectStateEntries(EntityState.Added));
        AuditingHelperUtility.ProcessAuditFields(objects.GetObjectStateEntries(EntityState.Modified), InsertMode: false);
    }



    /// <summary>
    /// Auditing helper utility class
    /// </summary>
    internal static class AuditingHelperUtility
    {
        internal static void ProcessAuditFields(IEnumerable<Object> list, bool InsertMode = true)
        {
            foreach (ObjectStateEntry item in list)
            {
                var appUserID = GetUserId();
                // deal with insert and update entities
                var auditEntity = item.Entity as IAuditable;
                if (auditEntity != null)
                {

                    if (InsertMode)
                    {
                        auditEntity.CreatedByUserID = appUserID;
                        auditEntity.CreatedDateTime = DateTime.Now;
                    }

                    auditEntity.UpdatedByUserID = appUserID;
                    auditEntity.UpdatedDateTime = DateTime.Now;
                }

            }
        }
    }



    public static String GetUserId()
    {
        return System.Web.HttpContext.Current.User.Identity.Name;
    }
}

Listing 3 – the Audit code

Lets break this down into three sections

Section 1

Here we wire-up the SavingChanges handler in the OnContextCreated() partial method to do this we first need to create a partial class from out entities for you look in the EDMX code behind file you will see something like this;

Figure 2 – Entities classes

so we add a new class to the the project, make sure it has the same namespace as the EDMX code behind file (this is pretty much the same as for out metadata classes) and then we add the partial class same as the MyEntities (this will be the name you gave it when creating but it is there in the code behind you can’t miss it) class, see Listing 3.

The method is wired up with this line of code:

this.SavingChanges += new EventHandler(context_SavingChanges);

Section 2

Now in the context_SavingChanges method we simply get the ObjectStateManager which has all the objects that are being added, updated and deleted, here we are only interested in the Added and Modified items. All we do is call our helper with each collection of objects.

Section 3

Looking at Listing 3 you will see the AuditingHelperUtility and it’s ProcessAuditFields method, here we first of all cast the each entity to the IAuditable interface and check for null if it isn't then set the appropriate properties and exit.

Finally

This can be expanded to cover many different requirements, I have maintained a separate audit table using this method with the addition of a little reflection.

Axialis Software Ribbon & Toolbar Stock Icons - Basic Set Offer

2011-10-21T12:23:00.001+01:00

are offering 30%-off discount to my readers for their new Windows Ribbon & Toolbars Stock Icons Basic Set, they are provided in sizes 48x48, 32x32, 24x42, 16x16, different states (normal, hot, disabled) and RGBA / RGB color depths. Called "Basic", the first set contains 1108 unique icons. Including all sizes and derivatives, more that 29,000 images are provided.

Get the offer here

This offer will last 30 days up to Nov 20:

These look great and will be ideal for Visual Studio LightSwitch 2011 toolbars

Share this post :

Visual Studio LightSwitch 2011 Arrives (Yes, I know it arrived a while ago!)

2011-08-08T14:47:00.001+01:00

Well I have finally had the time to indulge in Visual Studio LightSwitch 2011 RTM (henceforth LS), and it brings to Silverlight development what Dynamic Data (henceforth DD) brought to Web Forms with bells on.

It’s faster to develop an app with LS than it is with DD and that’s a fact. I decided to develop an app that I had need to run my little company but had been putting off for the last two years for lack of time. You know how a builder always has work to do on his own home never completed, well no more with LS I built it in just over one day see Figure 1.

Figure 1 – My App in one day

All I have to add is the Invoice report which I am going to use DevExpress – XtraReports for Light Switch

And the good news is that most of the Silverlight control venders are jumping in there with everything from How to add our controls to custom installs for LS;

DevExpress - Learn more about the DevExpress extensions

See the XraReports for LightSwitch in action with this video Getting Started with XtraReports for LightSwitch from Seth Juarez
Video: DevExpress Visual Studio LightSwitch Extensions

ComponentOne - Learn more about the ComponentOne extension

Live sample

Infragistics - Learn more about the Infragistics extension

Video: Infragistics Visual Studio LightSwitch Extensions

RSSBus - Learn more about the RSSBus extensions

Video: RSSBus Visual Studio LightSwitch Extensions

Telerik - Extend Visual Studio LightSwitch with Telerik Dev Tools

And there are tones of starter kits on Visual Studio Gallery.

The forums are very active;

Blogs I’ve found so far;

Visual Studio LightSwitch Team Blog
Sharing the goodness that is VB - Beth Massi
From The Depths - Matt Thalman
DevExpress Reporting Blog - Seth Juarez
Tim Leung's Blog

I don’t expect this is an exhaustive list but it’s very encouraging and I will be joining the band waggon and build some of my own extensions and of course blog about it here.

P.S. I have not left DD this is just some new fun that will certainly compliment DD

P.P.S. I still have loads of stuff to put on NuGet so keep an eye on me here.

Dynamic Data Image Field Template Updated

2011-07-13T23:38:00.001+01:00

I’ve update the Database Embedded Image sample on NuGet

	Dynamic Data Database Embedded Image Field Template
	Dynamic Data Image Handler

instead of depending on a NotAClue.Web.Helpers it now depends on:

NotAClue Dynamic Data Extensions

All future samples will build on this main library.

Custom Field Templates On NuGet

2011-07-04T00:26:00.001+01:00

In this article I am going to build some custom field templates;

File Upload field template
Image Upload field template
Image Select field template
Date picker field template

Figure 1 – Our proposed field templates

So first of all we need specify what we want each to do.

File Upload Field Template Requirements

Be able to upload and file type (PDF, ZIP, DOC, XLS etc.).
Restrict types to be uploaded.
access uploaded file via hyperlink (enable or disable this).
Store in folder in site.
Replace old file if new file replaces it during edit (you would need to maintain deleting items using some business logic as the field template is not called during the deletion process).

Image Upload Field Template Requirements

Be able to upload and image type (jpeg, gif, png, etc.).
Restrict which image types can be uploaded (i.e. restricts to jpeg or png etc.).
Store in folder in site.
Replace old file if new file replaces it during edit (you would need to maintain deleting items using some business logic as the field template is not called during the deletion process).

Image Select Field Template Requirements

Choose from a set of images .
Use images a folder in site.

Ajax Date picker

Select a date using a popup date picker from the Ajax Control toolkit.

At another time we will do one based on the jQuery UI date picker.

Building the Field Templates

We could just pass the information we want using the UIHint attribute and it’s control parameters collection but there is no design time intellisense, so we will build an attribute that all three field template can use. We will call it the Upload attribute it will need to store the following information;

Folder to store images
Folder to store file icons
Size to display Icon or Image (Height and Width)
Whether to display an hyperlink or not.
Acceptable file type for image and file upload.
Image extension for icons.

The Upload Attribute

/// <summary>
/// Upload attribute defines values for the upload
/// field templates
/// </summary>
/// <remarks></remarks>
[AttributeUsage(AttributeTargets.Property | AttributeTargets.Field, AllowMultiple = false)]
public class UploadAttribute : Attribute
{
    #region Properties
    /// <summary>
    /// Gets or sets the height to display the image, 
    /// if only one of the two dimensions are specified
    /// then the aspect ration will be retained.
    /// </summary>
    /// <value>The height.</value>
    /// <remarks></remarks>
    public int Height { get; set; }

    /// <summary>
    /// Gets or sets the width to display the image, 
    /// if only one of the two dimensions are specified
    /// then the aspect ration will be retained.
    /// </summary>
    /// <value>The width.</value>
    /// <remarks></remarks>
    public int Width { get; set; }

    /// <summary>
    /// Gets or sets the uploads folder.
    /// </summary>
    /// <value>The uploads folder.</value>
    /// <remarks></remarks>
    public String UploadFolder { get; set; }

    /// <summary>
    /// Gets or sets the icons folder.
    /// </summary>
    /// <value>The icons folder.</value>
    /// <remarks></remarks>
    public String ImagesFolder { get; set; }

    /// <summary>
    /// Gets or sets a value indicating whether [show hyperlink].
    /// </summary>
    /// <value><c>true</c> if [show hyperlink]; otherwise, <c>false</c>.</value>
    /// <remarks></remarks>
    public Boolean ShowHyperlink { get; set; }

    /// <summary>
    /// Gets or sets the file types.
    /// </summary>
    /// <value>The file types.</value>
    /// <remarks></remarks>
    public String[] FileTypes { get; set; }

    /// <summary>
    /// Gets or sets the image extension.
    /// </summary>
    /// <value>The image extension.</value>
    /// <remarks></remarks>
    public String ImageExtension { get; set; }
    #endregion

    /// <summary>
    /// Initializes a new instance of the <see cref="T:System.Attribute"/> class
    /// setting the Height to 50 and the folder to "~/images".
    /// </summary>
    /// <remarks></remarks>
    public UploadAttribute()
    {
        // set a default value of 50 and constrain aspect ratio.
        Height = 50;
        // set default images folder
        UploadFolder = "~/images";
    }
}

Listing 1 – Upload Attribute

The attribute in Listing 1 handles all the properties we want so we can build each of the field templates.

Upload File Field Template

To start off expand the DynamicData folder to see the FieldTemplate folder and right click and choose Add->New Item… you can now choose “Dynamic Data Field” (this will create a new field template pretty much the same as the Text field template) enter the name “UploadFile” and you will see your new blank field template.

Figure 2 – Dynamic Data Field

I have decided that I want nothing to show apart form the File Upload control until there is a file uploaded


Figure 3 – Insert mode	Figure 4 – Edit mode

In Figures 2 & 3 we can see both modes we only see an image and link/text when data is already present. So I have put the mark-up for this in a place holder.

<asp:PlaceHolder 
    ID="PlaceHolder1" 
    runat="server" 
    Visible="false">
    <asp:Image ID="Image1" runat="server" />&nbsp;
    <asp:Label ID="Label1" runat="server" Text="<%# FieldValueString %>" />
    <asp:HyperLink ID="HyperLink1" runat="server"><%# FieldValueString %></asp:HyperLink>
</asp:PlaceHolder><br />
<asp:FileUpload 
    ID="FileUpload1" 
    runat="server" 
    CssClass="DDTextBox" 
    Width="150px"/>

Listing 2 – Upload File field template mark-up

Next we remove the current validators and replace with a custom validator.

<asp:CustomValidator 
    ID="CustomValidator1" 
    runat="server" 
    ControlToValidate="FileUpload1" 
    onservervalidate="CustomValidator1_ServerValidate">
</asp:CustomValidator>

Listing 4 – Custom validator

In the code behind we need to setup the validator and the fileupload

protected void Page_Load(object sender, EventArgs e)
{
    CustomValidator1.Text = "*";
    SetUpValidator(CustomValidator1);

    // get attributes
    uploadAttribute = MetadataAttributes.GetAttribute<UploadAttribute>();
    if (uploadAttribute == null)
    {
        // no attribute thrw an error
        throw new InvalidOperationException("FileUpload must have valid uploadAttribute applied");
    }
    else
    {
        // add tooltip describing what file types can be uploaded.
        FileUpload1.ToolTip = String.Format("Upload {0} files", uploadAttribute.FileTypes.ToCsvString());
    }
}

Listing 5 – Page_Load

Here we setup the custom validator and get the Upload attribute, if the attribute is missing we throw an InvalidOperationException and if the attribute is there we set the FileUpload’s tooltip to a helpful message.

protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)
{
    if (FileUpload1.HasFile)
    {
        // get files name
        var fileName = FileUpload1.FileName;

        // get files extension without the dot
        String fileExtension = FileUpload1.GetFileExtension();

        // check file has an allowed file extension
        if (!uploadAttribute.FileTypes.Contains(fileExtension))
        {
            args.IsValid = false;
            CustomValidator1.ErrorMessage = String.Format("{0} is not a valid upload file type (only {1} are supported).",
                FileUpload1.FileName, 
                uploadAttribute.FileTypes.ToCsvString());
        }
    }
    else if (Column.IsRequired && String.IsNullOrEmpty(Label1.Text))
    {
        args.IsValid = false;
        CustomValidator1.ErrorMessage = Column.RequiredErrorMessage;
    }
}

Listing 6 – CustomValidator1_ServerValidate method

Listing 6 is the Custom validator method here all we are concerned with is making sure we have a valid file to upload, so we check the file type via its file extension and if it matched one from out Upload attribute the file can be uploaded but if not we invalidate the page and add a custom error to our Custom validator. Also if the field is a required field then we check to see if there is a file present either from an edit or from the FileUpload control.

protected override void OnDataBinding(EventArgs e)
{
    base.OnDataBinding(e);

    //check if field has a value
    if (FieldValue == null)
        return;

    // when there is already a value in the FieldValue
    // then show the icon and label/hyperlink
    PlaceHolder1.Visible = true;

    // get the file extension
    String extension = FieldValueString.GetFileExtension();

    if (uploadAttribute.ShowHyperlink)
    {
        Label1.Visible = false;
        // open in new window
        HyperLink1.Target = "_blank";
        HyperLink1.Text = FieldValueString.GetFileNameTitle();
        HyperLink1.NavigateUrl = VirtualPathUtility.AppendTrailingSlash(uploadAttribute.UploadFolder) + FieldValueString;
    }
    else
    {
        HyperLink1.Visible = false;
        Label1.Text = FieldValueString;
    }

    // show the icon
    if (!String.IsNullOrEmpty(extension))
    {
        // set the file type image
        if (!String.IsNullOrEmpty(uploadAttribute.ImagesFolder))
        {
            // get file type image from folder specified in
            Image1.ImageUrl = String.Format("{0}{1}.{2}",
                VirtualPathUtility.AppendTrailingSlash(uploadAttribute.ImagesFolder),
                extension,
                uploadAttribute.ImageExtension);
        }

        Image1.AlternateText = extension + " file";

        // set width
        if (uploadAttribute.Width > 0)
            Image1.Width = uploadAttribute.Width;

        // set height
        if (uploadAttribute.Height > 0)
            Image1.Height = uploadAttribute.Height;
    }
    else
    {
        // if file has no extension then hide image
        Image1.Visible = false;
    }
}

Listing 7 – OnDataBinding event

In the OnDataBinding event Listing 7 we first of all check to see if the FieldValue is null if it is we just return. If it’s not null then we show the place holder. New we have to determine if we are showing an Hyperlink or a Label for the name of the file. And lastly we check to see if we can show a icon to represent the uploaded file type.

Note: The OnDataBinding event is the only place where we have access to the FieldValue in the field template code behind.

protected override void ExtractValues(IOrderedDictionary dictionary)
{
    // make sure file is valid
    if (FileUpload1.HasFile && Page.IsValid)
    {
        // make sure we have the folder to upload the file to
        var uploadFolder = Server.MapPath(VirtualPathUtility.AppendTrailingSlash(uploadAttribute.UploadFolder));
        if(!Directory.Exists(uploadFolder))
            Directory.CreateDirectory(uploadFolder);

        // upload the file
        FileUpload1.SaveAs(uploadFolder + FileUpload1.FileName);

        // update the field with the filename
        dictionary[Column.Name] = ConvertEditedValue(FileUpload1.FileName);
    }
}

Listing 8 – ExtractValues method

We make sure we have a file to upload and the there was no error from the custom validator, check that the upload folder exists and create it if not. We then save the file to the upload folder and update the data field.

Upload Image Field Template

// show the uploaded image
Image1.ImageUrl = String.Format("{0}{1}", 
    VirtualPathUtility.AppendTrailingSlash(uploadAttribute.UploadFolder), 
    FieldValueString);

// add alternate text
Image1.AlternateText = FieldValueString.GetFileNameTitle();

Listing 9 – OnDataBinding event

There only a few minor differences between UploadImage and UploadFile and they are in the section that displays the icon, in the UploadImage instead of displaying an Icon representing the file type we display the actual image.

Select Image Field Template

Here we are using a RadioButtonList and most of the work is done in the Page_Load Listing 10

protected void Page_Load(object sender, EventArgs e)
{
    // get attributes
    var uploadAttribute = MetadataAttributes.GetAttribute<UploadAttribute>();
    if (uploadAttribute == null)
        throw new InvalidOperationException("FileUpload must have valid uploadAttribute applied");

    SetUpValidator(RequiredFieldValidator1);
    SetUpValidator(DynamicValidator1);

    // if no images folder return
    var dirInfo = new DirectoryInfo(Server.MapPath(uploadAttribute.ImagesFolder));
    if (!dirInfo.Exists)
    {
        RadioButtonList1.Visible = false;
        return;
    }

    if (RadioButtonList1.Items.Count == 0)
    {
        // get a list of images in the ImageUrlAttribute folder
        var imagesFolder = ResolveUrl(uploadAttribute.ImagesFolder);
        var files = dirInfo.GetFiles(String.Format("*.{0}", uploadAttribute.ImageExtension));

        foreach (FileInfo file in files)
        {
            // size image to uploadAttribute
            var imgString = new StringBuilder();

            imgString.Append(
                String.Format("<img src='{0}' alt='{1}' ",
                    imagesFolder + file.Name,
                    file.Name.GetFileNameTitle()
               ));

            if (uploadAttribute.Width > 0)
                imgString.Append(String.Format("width='{0}' ", uploadAttribute.Width));

            if (uploadAttribute.Height > 0)
                imgString.Append(String.Format("height='{0}' ", uploadAttribute.Height));

            imgString.Append(" />");

            // embed image in the radio button
            var listItem = new ListItem(imgString.ToString(), file.Name);
            listItem.Attributes.Add("title", file.Name.GetFileNameTitle());

            this.RadioButtonList1.Items.Add(listItem);
        }
    }
}

Listing 10 – Page_Load

Here we get a list of file filtered by the file extension supplied by the Upload attribute the we populate the RadioButtonList with this list. it get a little clever as we add some html mark-up into the Text value of each ListItem added to the RadioButtonList showing the Image to choice.

Note: Setting the images folder up you will need to place your selection of images for the user to choose from into the folder and name them appropriately as the file name will be used for the tool tip and be stored in the DB as the value for the selection.

Date Picker Field Template

All I have done here is add an Ajax Control Toolkit CalendarExtender to the page and set it up.

<asp:TextBox 
    ID="TextBox1" 
    runat="server" 
    CssClass="DDTextBox" 
    Text="<%# FieldValueEditString %>" 
    Columns="20">
</asp:TextBox>
<ajaxToolkit:CalendarExtender 
    ID="TextBox1_CalendarExtender" 
    runat="server" 
    Enabled="True"
    TargetControlID="TextBox1">
</ajaxToolkit:CalendarExtender>

Listing 11 – Date with Calendar Extender

private readonly static String DATE_FORMAT = CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern

protected void Page_Load(object sender, EventArgs e)
{
    TextBox1_CalendarExtender.Format = DATE_FORMAT;
    TextBox1.ToolTip = Column.Description;

    SetUpValidator(RequiredFieldValidator1);
    SetUpValidator(RegularExpressionValidator1);
    SetUpValidator(DynamicValidator1);
    SetUpCustomValidator(DateValidator);
}

Listign 12 – Page_Load

All I’ve had to do is make sure the CalendarExtender matches the localised date time format, we now get a nice data picker.

Sample Metadata

[MetadataTypeAttribute(typeof(File.FileMetadata))]
public partial class File
{
    internal sealed class FileMetadata
    {
        public int ID { get; set; }
        public string Description { get; set; }

        [Upload(
            FileTypes = new String[] { "doc", "xls" },
            UploadFolder = "~/FileUploads/",
            ImagesFolder = "~/images/",
            ShowHyperlink = true,
            ImageExtension = "png",
            Height = 30)]
        [UIHint("UploadFile")]
        public string FileName { get; set; }

        [Upload(
            FileTypes = new String[] { "png", "jpg", "jpeg" },
            UploadFolder = "~/ImageUploads/",
            ShowHyperlink = true,
            ImageExtension = "png",
            Height = 30)]
        [UIHint("UploadImage")]
        public string ImageName { get; set; }

        [Upload(
            ImagesFolder = "~/ImageSelection/",
            ImageExtension = "png",
            Height = 30)]
        [UIHint("SelectImage")]
        public string Selection { get; set; }

        [DataType(DataType.Date)]
        public DateTime DateCreated { get; set; }

    }
}

Listing 13 – sample metadata

Download NuGet Package

Dynamic Data Custom Field Templates - 1.0

Autocomplete ForeignKey Field Template Now on NuGet

2011-06-28T16:21:00.001+01:00

I have just added the ForeignKey field template based on the old Futures Autocomplete filter to NuGet at NotAClue.DynamicData.AutocompleteForeignKey

Autocomplete in action

All you need is to add a UIHint attribute to the to set the field template,

Note: only works on Foreign Key columns

you can als0 set the number of characters you need to type before autocomplete kicks in.

[UIHint("Autocomplete", null, "MinimumPrefixLength",2)]
public Supplier Supplier { get; set; }

By setting the MinimumPrefixLength in the UIHint’s ControlParameters.

My Classic Cascading Filters and Field Templates on NuGet

2011-06-27T02:13:00.001+01:00

I’ve just released my classic Cascading Filters and Field Templates on NuGet for ease of install supports both Entity Framework and Linq to SQL.

Dynamic Data Filters and Field Templates

Sample Metadata

[MetadataTypeAttribute(typeof(Vehicle.VehicleMetadata))]
public partial class Vehicle
{
    internal sealed class VehicleMetadata
    {
        public int Id { get; set; }
        public int ManufacturerId { get; set; }
        public int VehicleTypeId { get; set; }
        public int ModelId { get; set; }
        public int StyleId { get; set; }

        [Display(Order = 0)]
        public String Name { get; set; }

        /// <summary>
        /// Note for cascade to work correctly
        /// fields must be in cascade order Parent->Child
        /// </summary>
        [FilterUIHint("CascadingForeignKey")]
        [UIHint("CascadingForeignKey")]
        [Filter(Order = 0)]
        [Display(Order = 1)]
        public Manufacturer Manufacturer { get; set; }

        [FilterUIHint("CascadingForeignKey")]
        [UIHint("CascadingForeignKey")]
        [Cascade("Manufacturer")]
        [Filter(Order = 1)]
        [Display(Order = 2)]
        public VehicleType VehicleType { get; set; }

        [FilterUIHint("CascadingForeignKey")]
        [UIHint("CascadingForeignKey")]
        [Cascade("VehicleType")]
        [Filter(Order = 2)]
        [Display(Order = 3)]
        public Model Model { get; set; }

        [FilterUIHint("CascadingForeignKey")]
        [UIHint("CascadingForeignKey")]
        [Cascade("Model")]
        [Filter(Order = 3)]
        [Display(Order = 4)]
        public Style Style { get; set; }

    }
}

Note: For cascading to work each child must follow in order Parent->Child note the Ordering of both filters and fields to facilitate the cascade.

Next up are hierarchical cascade field templates

Links to Sample Down :(

2011-06-23T01:05:00.001+01:00

It would appear that Live.com have done some reorganisation of my SkyDrive for me and now ALL the links to my samples are broken, you can see my public folder here Public

Sorry for this but it is out of my control.

Anyway on a positive note I plan to have all my old samples update to .Net 4 and on NuGet as we go forward, I will post a pole with a list of proposed samples to get a vote what people want most.

Filter NuGet Package updated

2011-06-22T13:20:00.001+01:00

Thirteen Dynamic Data Custom Filters has been updated to Dynamic Data 15 Custom Filters and the PackageId is now “DynamicData.CustomFilters”, makes more sense than “DynamicData.ThirteenFilters” especially it now had 15 filters instead of 13.

I have added

GreaterThanOrEqual
LessThanOrEqual

Sample Metadata

[MetadataTypeAttribute(typeof(Product.ProductMetadata))]
public partial class Product
{
    internal sealed class ProductMetadata
    {
        [FilterUIHint("MultiForeignKey")]
        public Category Category { get; set; }

        public Nullable<int> CategoryID { get; set; }

        public bool Discontinued { get; set; }

        public EntityCollection<Order_Detail> Order_Details { get; set; }

        public int ProductID { get; set; }

        public string ProductName { get; set; }

        public string QuantityPerUnit { get; set; }

        public Nullable<short> ReorderLevel { get; set; }

        public Supplier Supplier { get; set; }

        public Nullable<int> SupplierID { get; set; }

        [FilterUIHint("GreaterThanOrEqual")]
        public Nullable<decimal> UnitPrice { get; set; }

        [FilterUIHint("LessThanOrEqual")]
        public Nullable<short> UnitsInStock { get; set; }

        public Nullable<short> UnitsOnOrder { get; set; }
    }
}

Much fun I expect there will be more soon.

More NuGet

2011-06-21T22:31:00.001+01:00

I have just put up the the first instalment of my Dynamic Data Extensions this version (V1.0) we have

HideColumnIn attribute see A New Way To Do Column Generation in Dynamic Data 4
ShowColumnOnlyIn attribute does what it says on the tin shows column in particular page templates
Filter attribute (I have only implemented the Order property as yet) this allows you to set the filter order.

Dynamic Data Extensions

Search for DynamicData.Extensions on NuGet

Example Metadata

[MetadataTypeAttribute(typeof(Order.OrderMetadata))]
public partial class Order
{
    internal sealed class OrderMetadata
    {
        public string CustomerID { get; set; }
        public Nullable<int> EmployeeID { get; set; }
        public Nullable<int> ShipVia { get; set; }

        [ShowColumnOnlyIn(PageTemplate.List)]
        [ScaffoldColumn(true)]
        public int OrderID { get; set; }

        public Nullable<DateTime> OrderDate { get; set; }

        [HideColumnIn(PageTemplate.List | PageTemplate.Insert)]
        public Nullable<DateTime> RequiredDate { get; set; }

        [HideColumnIn(PageTemplate.List | PageTemplate.Insert)]
        public Nullable<DateTime> ShippedDate { get; set; }
        public Nullable<decimal> Freight { get; set; }
        public string ShipName { get; set; }
        public string ShipAddress { get; set; }
        public string ShipCity { get; set; }
        public string ShipCountry { get; set; }
        public string ShipRegion { get; set; }
        public string ShipPostalCode { get; set; }

        [Filter(Order=2)]
        public Customer Customer { get; set; }
        [Filter(Order = 1)]
        public Employee Employee { get; set; }
        [Filter(Order = 3)]
        public Shipper Shipper { get; set; }

        public EntityCollection<Order_Detail> Order_Details { get; set; }
    }
}

Here you can see all three custom attributes in action.

The HideColumnInAttribute hides columns in page templates (note the use of the ‘|’ OR operator to allows multiple pages to be selected.
The ShowColumnOnlyInAttribute does the opposite and only shows columns in selected pages.
The FilterAttribute here sets the order to display the filters on the list page (Note there are other properties on Filter that are not yet implemented).

Next up on NuGet are both of my original cascade and my hierarchical cascading field templates.

Web Application Project vs. Website

2011-06-19T08:54:00.001+01:00

I have a poll here all I’m asking is what do you prefer?

A Second NuGet Package for Dynamic Data

2011-06-10T17:18:00.001+01:00

Dynamic Data 15 Custom Filters is now on NuGet this package add thirteen filters to your Web Application Project see Five Cool Filters for Dynamic Data 4 I have added some more filters to that list;

AutoComplete – is ForeignKey filter but pre-filters results by what users has typed in.
Contains – equivalent to T-SQL LIKE ‘%text%’
DateFrom – All Dates greater than or equal to the selected date.
DateRange – A range of dates
DateTo – Less than or equal to the selected date.
EndsWith – Ends with entered text.
GreaterThan – Greater than entered value
LessThan – Less than entered value
MultiForeignKey – allows multiple ForeignKey values to be selected.
Range – a range of values
StartWith – Starts with entered text.
Where – is equal to entered text
WhereDropdownList – a dropdown list of values from column to filter by.

This has a few more exciting bits that NuGet offers Dependencies and Framework Assembly References

Dependencies, here this package there is dependency upon Ajax Control Toolkit

<dependencies>
    <dependency id="AjaxControlToolkit" version="4.1.50508" />
</dependencies>

Framework Assembly References – is requirement for an assembly reference from the GAC

<frameworkAssemblies>
    <frameworkAssembly assemblyName="System.Data.Entity" targetFramework="net40" />
</frameworkAssemblies>

This give great flexibility without resorting to PowerShell.

NuGet truly is awesome!

NuGet for Dynamic Data – First Package

2011-06-10T14:52:00.001+01:00

I have just added my first NuGet package, and you may no know what NuGet is? so what is NuGet it’s a Package management add on for Visual Studio 2010 and above (maybe more as it is integrated with Windows PowerShell).

Figure 1 – Install NuGet

See Installing NuGet and then you will need NuGet.exe Command Line and or NuGet Package Explorer v1.1 this is the GUI version (and unlike Scott Hanselman I like the GUI and try to avoid the DOS as much as possible I’m with Phil Haack on that see NuGet In Depth: Empowering Open Source on the .NET Platform on Channel9) and can do a lot of what the command line tool does.

You can get loads on information on NuGet Docs.

OK so I’m going to assume your all setup and ready to go.

Creating the Package

NuGet has some Package Conventions and we should follow them (I’ll not explain them just go and have a read as documentation can be updated from time to time) for out package lets first of all look at what we want to package.

For this Package I want to package up Scott Hunter’s old Sample for Displaying Images from the Database using Dynamic Data (DBImage) and it’s update Sample for Displaying Images Updated + Screencast note the latest version of this is in the old Dynamic Data Futures VS2008 SP1 RTM for DD 3.51 SP1.

Figure 2 – Embedded image field template

This consists of several parts;

Read-Only field template
Edit field template
Image Format attribute
Linq extension methods
Image http handler.
Web.Config settings

I have decided to keep things simple for out first NuGet Package and all the above will go into one package some of the above could be shared and as such we could spilt it between several packages and have dependencies but we will keep it simple for now.

so to build our package there are some things we need to know like where do we put our files;

Figure 3 – Simple Package folder structure

As you can see I have broken the folder structure into three parts, the first part is quite simple, it’s the readme file which will give basic information about the package.

Content (files to be copied on install)

Here you can have three types of file;

Copied as is with no changes.
Transform files (see Configuration File and Source Code Transformations for more info)
- .transform or Configuration File Transformations
- .pp or Source Code Transformations

The “.transform” files transform web.config or app.config files by adding/merging their content with the project’s configuration file.

While the “.pp” files are files that are transformed as they are copied to the project in the same folder structure they have in the package. These files are a little more complex than the configuration files, as they have Visual Studio project properties in the code and these are used to transform the code files during install ((see Configuration File and Source Code Transformations and the Specifying Source Code Transformations section for more info).

Lib Folder

This folder contains any DLLs that are required, not that the “net40” subfolder this indicates that the DLL supports .Net 4 you could have several version that support different versions of the .Net framework here we will just support .Net 4.

Note this is just the basic of where you need to put files for your package to work.

now we have out files ready in a folder structure we need to create our “nuspec” file, this is an XML file containing details (the manifest) about the package you can manually create this or you can use NuGet Package Explorer to create this see Using A GUI (Package Explorer) to build packages once created you can manually edit the “nuspec” file manually if you like.

You then place your “nuspec” file in the root of the package folder structure or if you follow Using A GUI (Package Explorer) to build packages you can add them directly.

Once done you just publish and it works!

Next steps

The real power come with PowerShell scripts see Scaffolding – ASP.NET, NuGet, Entity Framework Code First and More with Steve Sanderson he shows what you can really do.

I am going to add more complex post here as I discover new and interesting feature of NuGet.

Custom Entity Templates – Dynamic Data 4

2011-03-31T13:04:00.000+01:00

In Dynamic Data 4 we have Entity Templates these are great for customizing layout of tables (see Walkthrough: Customizing Table Layout Using Entity Templates). At the moment you will have to create a Custom Entity template for each table, but not only that you will need to create a set of three (Template, Template_Edit and Template_Insert) and that can be useful to have different layout for each view.

But what if you want something different from the Default, (see Grouping Fields on Details, Edit and Insert with Dynamic Data 4, VS2010 and .Net 4.0 RC1 my first custom Entity Template which then had to replace the Default and also had to have all three defined) but not on all your tables just on a selected few?

I was inspired by Brian Pritchard’s post on the forum: How to reduce code duplication when using Entity Template's for only having to create a single template that would switch between Read-Only, Edit and Insert modes.

I want to go a little further:

Override the Default Entity Template with some sort of UIHint attribute.
An only have to specify one template to keep things DRY
Detect if an Edit or Insert version of a template exists and use that.

So now we know out goal, let’s layout the ingredients for this recipe:

An attribute to allow us to change the default Entity Template for any given Table.
Custom entity factory to allow us to override normal entity behaviour like Brian Pritchard’s.
A Custom dynamic Entity Template.

The Attribute

I thought I would be able to use UIHint at class level but alas we have to hand craft our own, I want some of the same feature of UIHint specifically the Control Parameters collection so that we can pass extra information into our custom Entity Templates with out creating a plethora extra attribute each specific to it’s one Entity Template. (I’ve used the Control Parameters collection before in Dynamic Data Custom Field Template – Values List, Take 2.

The Attribute is relatively straight forward, the only complication is the BuildControlParametersDictionary method which takes the Object array passed in using the params key word into a Key, Value Dictionary with some validation. Note we have also set this attribute to be only useable at Class level.

[AttributeUsage(AttributeTargets.Class, AllowMultiple = false)]
public class EntityUIHintAttribute : Attribute
{
    private IDictionary _controlParameters;

    public IDictionary ControlParameters
    {
        get { return this._controlParameters; }
    }

    /// 
    /// Gets or sets the UI hint.
    /// 
    /// The UI hint.
    public String UIHint { get; private set; }

    public EntityUIHintAttribute(string uiHint) : this(uiHint, new object[0]) { }

    public EntityUIHintAttribute(string uiHint, params object[] controlParameters)
    {
        UIHint = uiHint;
        _controlParameters = BuildControlParametersDictionary(controlParameters);
    }

    public override object TypeId
    {
        get { return this; }
    }

    private IDictionary BuildControlParametersDictionary(object[] objArray)
    {
        IDictionary dictionary = new Dictionary();
        if ((objArray != null) && (objArray.Length != 0))
        {
            if ((objArray.Length % 2) != 0)
                throw new InvalidOperationException(string.Format(CultureInfo.CurrentCulture, "Need even number of control parameters.", new object[0]));

            for (int i = 0; i < objArray.Length; i += 2)
            {
                object obj2 = objArray[i];
                object obj3 = objArray[i + 1];
                if (obj2 == null)
                    throw new InvalidOperationException(string.Format(CultureInfo.CurrentCulture, "Control parameter key is null.", new object[] { i }));

                string key = obj2 as string;
                if (key == null)
                    throw new InvalidOperationException(string.Format(CultureInfo.CurrentCulture, "Control parameter key is not a string.", new object[] { i, objArray[i].ToString() }));

                if (dictionary.ContainsKey(key))
                    throw new InvalidOperationException(string.Format(CultureInfo.CurrentCulture, "Control parameter key occurs more than once.", new object[] { i, key }));

                dictionary[key] = obj3;
            }
        }
        return dictionary;
    }
}

Listing 1 – EntityUIHintAttribute

Now we need a method to use this attribute to change the default Entity Template, this factory need to do two things:

Change the Default Entity Template based on out new EntityUIHint attribute.
Intercept the template mode so that single Entity Template can be used with out having to have three versions.

public class AdvancedEntityTemplateFactory : System.Web.DynamicData.EntityTemplateFactory
{
    public override string BuildEntityTemplateVirtualPath(string templateName, DataBoundControlMode mode)
    {
        var path = base.BuildEntityTemplateVirtualPath(templateName, mode);
        var editPath = base.BuildEntityTemplateVirtualPath(templateName, DataBoundControlMode.Edit);;
        var defaultPath = base.BuildEntityTemplateVirtualPath(templateName, DataBoundControlMode.ReadOnly); ;

        if (File.Exists(HttpContext.Current.Server.MapPath(path)))
            return path;

        if (mode == DataBoundControlMode.Insert && File.Exists(HttpContext.Current.Server.MapPath(editPath)))
            return editPath;

        if (mode != DataBoundControlMode.ReadOnly && File.Exists(HttpContext.Current.Server.MapPath(defaultPath)))
            return defaultPath;

        return path;
    }

    public override EntityTemplateUserControl CreateEntityTemplate(MetaTable table, DataBoundControlMode mode, string uiHint)
    {
        var et = table.GetAttribute();
        if (et != null && !String.IsNullOrEmpty(et.UIHint))
            return base.CreateEntityTemplate(table, mode, et.UIHint);

        return base.CreateEntityTemplate(table, mode, uiHint);
    }

    public override string GetEntityTemplateVirtualPath(MetaTable table, DataBoundControlMode mode, string uiHint)
    {
        var et = table.GetAttribute();
        if (et != null && !String.IsNullOrEmpty(et.UIHint))
            return base.GetEntityTemplateVirtualPath(table, mode, et.UIHint);

        return base.GetEntityTemplateVirtualPath(table, mode, uiHint);
    }
}

Listing 2 – AdvancedEntityTemplateFactory

Listing 1 shows us out AdvancedEntityTemplateFactory, we fulfil task 1. in the methods CreateEntityTemplate and GetEntityTemplateVirtualPath where we check for the presence of a EntityUIHintAttribute and if we find one then set the name of the template to the UIHint property.

Task 2. is dealt with in the BuildEntityTemplateVirtualPath where we check to see if the file exists, if so we just return the path as is, otherwise we strip out the _Edit or _Insert from the path and return.

The last thing we need is to wire up the AdvancedEntityTemplateFactory in Global.asax.cs

DefaultModel.EntityTemplateFactory = new AdvancedEntityTemplateFactory();

just before the RegisterContext in RegisterRoutes method.

The Custom Entity Template

Figure 1 – Multi Column Entity Template

This entity template will be a multi column temp[late designed to give you a little more screen for your money I have decided to pass the main parameters in via the EntityUIHint attribute’s Control Parameters, in Figure 2 you can see them in pairs.

Figure 2 – Control Parameters

“Columns”, 3 sets the number of column the MultiColumn entity template will show.

The next two pairs are the Title and Field CSS classes.

I’ve also decided to add the ability for some columns to span more then one cell in the table.

[AttributeUsage(AttributeTargets.Property)]
public class MultiColumnAttribute : Attribute
{
    /// 
    /// Gets or sets the column span.
    /// 
    /// The column span.
    public int ColumnSpan { get; private set; }

    public static MultiColumnAttribute Default = new MultiColumnAttribute();

    public MultiColumnAttribute() 
    { 
        ColumnSpan = 1;
    }

    public MultiColumnAttribute(int columnSpan)
    {
        ColumnSpan = columnSpan;
    }
}

Listing 3 – MultiColumnAttribute

The use of Default for when we use the DefaultIfEmpty method in Linq (see my Writing Attributes and Extension Methods for Dynamic Data more info) this allows us to get an attribute even if one is not specified so now with thi sline of code

var totalNoOfCells = metaColumns.Select(c => c.GetAttributeOrDefault<MultiColumnAttribute>().ColumnSpan).Sum();

we can get the total number of cell required with some columns having a span of more than on column see Figure 1.

Finally our Multi Column entity template is completed in Listing 4

public partial class MultiColumnEntityTemplate : System.Web.DynamicData.EntityTemplateUserControl
{
    private const string COLUMNS = "Columns";
    private const string TITLE_CSS_CLASS = "TitleCssClass";
    private const string FIELD_CSS_CLASS = "FieldCssClass";

    protected override void OnLoad(EventArgs e)
    {
        // get columns from table
        var metaColumns = Table.GetScaffoldColumns(Mode, ContainerType).ToList();

        // do not render any HTML table if there are no columns returned
        if (metaColumns.Count == 0)
            return;

        // default the HTML table columns and CSS class names
        int columns = 2;
        String titleCssClass = String.Empty;
        String fieldCssClass = String.Empty;

        // Get the CssClass for the title & Field from the attribute
        var entityUHint = Table.GetAttribute();
        if (entityUHint != null)
        {
            if (entityUHint.ControlParameters.Keys.Contains(COLUMNS))
                columns = (int)entityUHint.ControlParameters[COLUMNS];
            if (entityUHint.ControlParameters.Keys.Contains(TITLE_CSS_CLASS))
                titleCssClass = entityUHint.ControlParameters[TITLE_CSS_CLASS].ToString();
            if (entityUHint.ControlParameters.Keys.Contains(FIELD_CSS_CLASS))
                fieldCssClass = entityUHint.ControlParameters[FIELD_CSS_CLASS].ToString();
        }

        // start in the left column
        int col = 0;

        // create the header & data cells
        var headerRow = new HtmlTableRow();
        if (!String.IsNullOrEmpty(titleCssClass))
            headerRow.Attributes.Add("class", titleCssClass);
        var dataRow = new HtmlTableRow();
        if (!String.IsNullOrEmpty(fieldCssClass))
            dataRow.Attributes.Add("class", fieldCssClass);

        // step through each of the columns to be added to the table
        foreach (var metaColumn in metaColumns)
        {
            // get the MultiColumn attribute for the column
            var multiColumn = metaColumn.GetAttributeOrDefault();
            if (multiColumn.ColumnSpan > columns)
                throw new InvalidOperationException(String.Format("MultiColumn attribute specifies that this 
                    field occupies {0} columns, but the EntityUIHint attribute for the class only allocates {1} 
                    columns in the HTML table.", multiColumn.ColumnSpan, columns));

            // check if there are sufficient columns left in the current row
            if (col + multiColumn.ColumnSpan > columns)
            {
                // save this header row
                this.Controls.Add(headerRow);
                headerRow = new HtmlTableRow();
                if (!String.IsNullOrEmpty(titleCssClass))
                    headerRow.Attributes.Add("class", titleCssClass);

                // save this data row
                this.Controls.Add(dataRow);
                dataRow = new HtmlTableRow();
                if (!String.IsNullOrEmpty(fieldCssClass))
                    dataRow.Attributes.Add("class", fieldCssClass);

                // need to start a new row
                col = 0;
            }

            // add the header cell
            var th = new HtmlTableCell();
            var label = new Label();
            label.Text = metaColumn.DisplayName;
            //if (Mode != System.Web.UI.WebControls.DataBoundControlMode.ReadOnly)
            //    label.PreRender += Label_PreRender;

            th.InnerText = metaColumn.DisplayName;
            if (multiColumn.ColumnSpan > 1)
                th.ColSpan = multiColumn.ColumnSpan;
            headerRow.Cells.Add(th);

            // add the data cell
            var td = new HtmlTableCell();
            var dynamicControl = new DynamicControl(Mode);
            dynamicControl.DataField = metaColumn.Name;
            dynamicControl.ValidationGroup = this.ValidationGroup;

            td.Controls.Add(dynamicControl);
            if (multiColumn.ColumnSpan > 1)
                td.ColSpan = multiColumn.ColumnSpan;
            dataRow.Cells.Add(td);

            // record how many columns we have used
            col += multiColumn.ColumnSpan;
        }
        this.Controls.Add(headerRow);
        this.Controls.Add(dataRow);
    }
}

Listing 4 – MultiColumnEntityTemplate

Updated: MultiColumnEntityTemplate updated by Phil Wigglesworth who kindly found a bug and fixed it, the bug was shown when there were no enough columns left on a row, this caused a crash. So thanks again to Phil.

Also we will need some styles to make out new Multi Column entity template look good.

TR.SmallTitle
{
    background-color: #F7F7FF;
}
TR.SmallTitle TD
{
    font-size: 0.8em !important;
    font-weight: bold;
    background-color: #F7F7FF;
    padding: 2px !important;
}

Listing 5 – CSS styles

Hope this expand your use of Entity Templates.

P.S. I’ll do an updated version of the Grouping entity template.

Download

Setting the Initial Sort Order – Dynamic Data

2011-01-16T19:05:00.001Z

This is just a quick note on a post I made on the Dynamic Data Forum to answer a question where setting the DisplayColumnAttribute should set the default sort order of the GridView on the List page but didn’t. Here’s how I solved it with a hint or two from Marcin Dobosz.

[MetadataType(typeof(Orders_Metadata ))]
[DisplayColumn("OrderID", "OrderID", true)]
public partial class Orders
{
    public class Orders_Metadata
    {       
        // ...
    }
}

Listing 1 – Example Metadata

Assuming you have a table with the DisplayColumnAttribute set you could put this on your List page:

table = GridDataSource.GetTable();

// set default sort
if (!IsPostBack && table.SortColumn != null)
    GridView1.Sort(table.SortColumn.Name, table.SortDescending ? SortDirection.Descending : SortDirection.Ascending);

Listing 2 – Add to Page_Init (.Net 3.5)

// set default sort
if (!IsPostBack && table.SortColumn != null)
{
    var order = new OrderByExpression()
    {
        DataField = table.SortColumn.Name,
        Direction = table.SortDescending ? SortDirection.Descending : SortDirection.Ascending,
    };
    GridQueryExtender.Expressions.Add(order);
}

Listing 3 – Add to Page_Init (.Net 4)

public static T GetAttribute<T>(this MetaTable table) where T : Attribute
{
    return table.Attributes.OfType<T>().FirstOrDefault();
}

Listing 3 – you will also need this extension method see Writing Attributes and Extension Methods for Dynamic Data

Add your DisplayColumnAttribute (see Listing 1) to the table you want sorted (note: it must have the second string constant even if it’s the same name, as the second string it the one that the sort is done on, and the third value if true causes the sort to be descending). Then in Listing 2 you get the attribute using the extension method from Listing 3 and apply the relevant sort.

This is here mainly so I can find it again!

Adding a Multi-Column Search to the Default List page in Dynamic Data (UPDATED)

2011-01-13T00:03:00.001Z

This will extend the default filters that Dynamic Data provides by adding a free text search box the will search multiple text fields on the same page. I have done this in a few projects now as one off but after this post Custom filters & searches within DD in Visual Web Developer 2010 on the Dynamic Data Forum I decided to document it here.

Figure 1 – Multi Column Search

Here in Figure 1 you can see the multi column search box, in this example the search is on FistName, LastName, Address, City and Country, it will even allow search across entities e.g. on Orders Employee.LastName etc. which make it very flexible.

Things we will need to do

Attribute to tell the system which columns to search on.
Add mark-up to show the UI on the List page.
Code to wire up the UI and QueryExtender.

The Attribute

This attribute will be added to the Class/Table not it’s columns and will have only one property Columns.

[AttributeUsage(AttributeTargets.Class)]
public class MultiColumnSearchAttribute : Attribute
{
    public String[] Columns { get; private set; }

    public MultiColumnSearchAttribute(params String[] columns)
    {
        Columns = columns;
    }
}

Listing 1 – MultiColumnSearchAttribute

and we apply it as in Listing 2 The Employee table show standard multi-column search but the Order table shows how we can search across entity boundaries you can see this in Figure 2.

[MetadataTypeAttribute(typeof(Employee.EmployeeMetadata))]
[MultiColumnSearch(
    "LastName", 
    "FirstName", 
    "Address", 
    "City", 
    "Country")]
public partial class Employee
{
    internal sealed class EmployeeMetadata
    {
        //...
    }
}

[MetadataTypeAttribute(typeof(Order.OrderMetadata))]
[MultiColumnSearch(
    "Employee.LastName", 
    "Employee.FirstName", 
    "Customer.CompanyName", 
    "Customer.ContactName", 
    "Shipper.CompanyName")]
public partial class Order
{
    internal sealed class OrderMetadata
    {
        //...
    }
}

Listing 2 – sample metadata

Figure 2 – cross entity search

Adding UI Mark-Up

I have added the multi column search UI in between the validators and the QueryableFilterRepeater see Listing 3

<asp:DynamicValidator runat="server" ID="GridViewValidator" ControlToValidate="GridView1"
    Display="None" CssClass="DDValidator" />

<fieldset id="MultiSearchFieldSet" class="DD" runat="server" visible="false">
    <legend>Full Text Search</legend>
    <asp:TextBox ID="txbMultiColumnSearch" CssClass="DDTextBox" runat="server" />
    <asp:Button ID="btnMultiColumnSearchSubmit" CssClass="DDControl" runat="server" Text="Search"
        OnClick="btnMultiColumnSearch_Click" />
    <asp:Button ID="btnMultiColumnSearchClear" CssClass="DDControl" runat="server" Text="Clear"
        OnClick="btnMultiColumnSearch_Click" />
</fieldset>
<br />

<asp:QueryableFilterRepeater runat="server" ID="FilterRepeater">

Listing 3 – Multi Column Search UI

Code to wire up the UI and QueryExtender

/// <summary>
/// Setups the multi column search.
/// </summary>
private void SetupMultiColumnSearch()
{
    // get multi column search attribute
    var multiColumnSearch = table.GetAttribute<MultiColumnSearchAttribute>();

    if (multiColumnSearch != null)
    {
        var searchExpression = new SearchExpression()
            {
                DataFields = multiColumnSearch.Columns.ToCsvString(),
                SearchType = SearchType.Contains
            };
        
        // create control parameter
        var controlParameter = new ControlParameter() { ControlID = txbMultiColumnSearch.ID };
        
        // add control parameter to search expression
        searchExpression.Parameters.Add(controlParameter);

        // set context
        searchExpression.SetContext(GridQueryExtender, Context, GridDataSource);

        // add search expression to query extender
        GridQueryExtender.Expressions.Add(searchExpression);

        // make multicolumn search field set visible
        MultiSearchFieldSet.Visible = true;
    }
}

Listing 5 – SetupMultiColumnSearch method

In Listing 5 (which is called from the Page_Init method) we get the attribute and the SearchExpression the if both are not null we add the fields to the SearchExpressions DataFileds property, then we make the whole thing visible.

Note: Much thanks to David Ebbo who sorted out the issue I had had with adding the search expression in code rather than declaratively.

protected void btnMultiColumnSearch_Click(object sender, EventArgs e)
{
    var button = (Button)sender;
    if (button.ID == btnMultiColumnSearchClear.ID)
        txbMultiColumnSearch.Text = String.Empty;
}

Listing 6 – button event

And lastly we need an event to fire when the clear button is fired.

Note: I have both buttons wired-up to this handler as I also add session history here so that when you search on something and go to another page when you return you get the same search, but I also want it cleared if I click the clear button.

Download

Filter History for Dynamic Data 4

2010-12-08T13:08:00.001Z

I did a AJAX History in a Dynamic Data Website article back in February 2009 to make filter respect the back button in the browser, this however was not enough for my customers they wanted the filter to be remembered even when they came back to the page without using the back button.

So I decided to store the filter info in Session state for this sample sample (but you could also use a database I have where the client wanted the filters to be remembered across sessions and by user).

I’m adding this extension to the previous sample from Five Cool Filters for Dynamic Data 4 (which now has a couple more filters added) to give history across all the filters.

Extension Methods

So to the code there are two extension methods for this sample AddFilterValueToSession which you can guess adds a filters current value to session and GetFilterValuesFromSession which retrieves an Dictionary of values for the specified table.

/// <summary>
/// Adds the filters current value to the session.
/// </summary>
/// <param name="page">The page.</param>
/// <param name="column">The column.</param>
/// <param name="value">The value.</param>
public static void AddFilterValueToSession(this Page page, MetaColumn column, Object value)
{
    Dictionary<String, Object> filterValues;
    var objectName = column.Table.DataContextPropertyName;

    // get correct column name 
    var columnName = column.Name;
    if (column is MetaForeignKeyColumn)
        columnName = ((MetaForeignKeyColumn)column).ForeignKeyNames.ToCommaSeparatedString();

    // check to see if we already have a session object
    if (page.Session[objectName] != null)
        filterValues = (Dictionary<String, Object>)page.Session[objectName];
    else
        filterValues = new Dictionary<String, Object>();

    // add new filter value to session object
    if (filterValues.Keys.Contains(columnName))
        filterValues[columnName] = value;
    else
        filterValues.Add(columnName, value);

    // add back to session
    if (page.Session[objectName] != null)
        page.Session[objectName] = filterValues;
    else
        page.Session.Add(objectName, filterValues);
}

Listing 1 – AddFilterValueToSession

If you follow the code and comments you will see that first we try to get the session object for this table from session and if it is not there we simply create one. Then we add/update the value for this column and finally save back to session.

Note: that Listing 1 uses an extension method ToCommaSeperatedString() this just simplifies the code for us by removing reusable code.

Updated: As ValZ posted in the comments I have updated the GetFilterValuesFromSession extension method to make sure any links from other List pages are honoured, for instance if you go to the Suppliers page and click on View Products link but already have a filter value that will now be honoured. I’ve also used IDictionary so we don’t have to cast the default values that are passed in.

/// <summary>
/// Gets the filter values from session.
/// </summary>
/// <param name="page">The page.</param>
/// <param name="table">The table.</param>
/// <param name="defaultValues">The default values.</param>
/// <returns>An IDictionary of filter values from the session.</returns>
public static IDictionary<String, Object> GetFilterValuesFromSession(this Page page, 
    MetaTable table, 
    IDictionary<String, Object> defaultValues)
{
    var queryString = new StringBuilder();
    var objectName = table.DataContextPropertyName;
    if (page.Session[objectName] != null)
    {
        var sessionFilterValues = new Dictionary<String, Object>((Dictionary<String, Object>)page.Session[objectName]);
        foreach (string key in defaultValues.Keys)
        {
            if (!sessionFilterValues.Keys.Contains(key) || sessionFilterValues[key] == null)
                sessionFilterValues.Add(key, defaultValues[key]);
            else
                sessionFilterValues[key] = defaultValues[key];
        }
        var t = (Dictionary<String, Object>)page.Session[objectName];
        return sessionFilterValues;
    }
    else
        return defaultValues;
}

Listing 2 – GetFilterValuesFromSession

In Listing 2 we simply get the Dictionary object back from session and then return it.

Applying to the Filters

Listing 3 is a for the ForeignKey filter, here call the AddFilterValueToSession extension method passing in the Column and value from the DropdownList.

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    OnFilterChanged();
    Page.AddFilterValueToSession(Column, DropDownList1.SelectedValue);
}

Listing 3 – ForeignKey filter

Every filter in that sample has this applied and there are several different examples in there.

Extracting the Filter Values

Now all we need is to get the values and pass them back to the filters each time we arrive at a List page. In Listing 4 I have updated the Page_Init method, I first attempt to get the filter values from session if none are found I fall back to default List page behaviour.

protected void Page_Init(object sender, EventArgs e)
{
    table = DynamicDataRouteHandler.GetRequestMetaTable(Context);

    var defaultValues = Page.GetFilterValuesFromSession(table, table.GetColumnValuesFromRoute(Context));
    GridView1.SetMetaTable(table, defaultValues);

    GridDataSource.EntityTypeFilter = table.EntityType.Name;
}

Listing 4 – Updating the List page

Now if we switch back to the ForeignKey filter and the Page_Init method Listing 5 you will see that I have not had to change anything here, because we are adding the default values in the List page they will arrive in each filter via the DefaultValue property.

protected void Page_Init(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        if (!Column.IsRequired)
        {
            DropDownList1.Items.Add(new ListItem("[Not Set]", NullValueString));
        }
        PopulateListControl(DropDownList1);

        // Set the initial value if there is one
        string initialValue = DefaultValue;
        if (!String.IsNullOrEmpty(initialValue))
        {
            DropDownList1.SelectedValue = initialValue;
            // optional add auto filters to history
            Page.AddFilterValueToSession(Column, initialValue);
        }
    }
}

Listing 5 – updating the filter

Updated: I’ve also added a optional Page.AddFilterValueToSession(Column, initialValue); to each filter so that filter values passed in in query string can be added to history, NOTE: I’ve only added this to the ForeignKey filter so it’s easy to remove if not required.

I’ll show one complex example of setting up the values in a filter, we will look at me DateRange filter for this. First look at Listing 6 here I am concatenating both values together separated by ‘|’.

protected void btnRangeButton_Click(object sender, EventArgs e)
{
    var button = (Button)sender;
    if (button.ID == btnClear.ID)
    {
        txbDateFrom.Text = String.Empty;
        txbDateTo.Text = String.Empty;
    }
    OnFilterChanged();
    Page.AddFilterValueToSession(Column, String.Format("{0}|{1}", txbDateFrom.Text, txbDateTo.Text));
}

Listing 6 – DateRange button click event

Then if you look at the DateRange filters Page_Init method all need to do is check I have a value, reveres the concatenation and put the values in the correct textboxes.

protected void Page_Init(object sender, EventArgs e)
{
    // set correct date time format
    txbDateFrom_CalendarExtender.Format = DATE_FORMAT;
    txbDateTo_CalendarExtender.Format = DATE_FORMAT;

    if (!Column.ColumnType.Equals(typeof(DateTime)))
        throw new InvalidOperationException(String.Format("A date range filter was loaded for column '{0}' but the column has an incompatible type '{1}'.",
            Column.Name, Column.ColumnType));

    if (DefaultValue != null)
    {
        var values = DefaultValue.Split(new char[] { '|' });
        if (values.Length == 2)
        {
            txbDateFrom.Text = values[0];
            txbDateTo.Text = values[1];
        }
    }
}

Listing 7 – DateRange Page_Init method

Updated: Add clear filters button to clear all filters for a table.

Clear Filters

Last we add a button to clear the filters

<div class="DD">
    <asp:ValidationSummary ID="ValidationSummary1" runat="server" EnableClientScript="true"
        HeaderText="List of validation errors" CssClass="DDValidator" />
    <asp:DynamicValidator runat="server" ID="GridViewValidator" ControlToValidate="GridView1"
        Display="None" CssClass="DDValidator" />
    <asp:QueryableFilterRepeater runat="server" ID="FilterRepeater">
        <ItemTemplate>
            <asp:Label runat="server" Text='<%# Eval("DisplayName") %>' OnPreRender="Label_PreRender" />
            <asp:DynamicFilter runat="server" ID="DynamicFilter" OnFilterChanged="DynamicFilter_FilterChanged" />
            <br />
        </ItemTemplate>
    </asp:QueryableFilterRepeater>
    <asp:Button 
        ID="ClearFiltersButton" 
        runat="server" 
        Text="Clear Filters" 
        CssClass="DDControl"
        OnClick="ClearFiltersButton_Click" />
    <br />
</div>

Listing 8 – Clear filters button

and in the post back of the button

protected void ClearFiltersButton_Click(object sender, EventArgs e)
{
    Page.ClearTableFilters(table);
    Response.Redirect(table.ListActionPath);
}

Listing 9 – Clears filters button method

and lastly we need the method the clears the filters for us,

public static void ClearTableFilters(this Page page, MetaTable table)
{
    var objectName = table.DataContextPropertyName;

    if (page.Session[objectName] != null)
        page.Session[objectName] = null;
}

Listing 10 – Clear filters extension method

Lastly we will need to hide the button when there are no filters.

protected override void OnPreRenderComplete(EventArgs e)
{
    RouteValueDictionary routeValues = new RouteValueDictionary(GridView1.GetDefaultValues());
    InsertHyperLink.NavigateUrl = table.GetActionPath(PageAction.Insert, routeValues);
    if (FilterRepeater.Controls.Count == 0)
        ClearFiltersButton.Visible = false;
    base.OnPreRenderComplete(e);
}

Listing 11 – hiding the clear filters button

So then all done then.

Download

BLACK FRIDAY/CYBER MONDAY DEAL:

2010-11-26T21:42:00.001Z

Note I don’t normally post adds for products but this is really easy to create icons I’m always creating favicons for my sites and it make the task real easy.

All Axialis products are available at 50 percent Off. Starting Black Friday, this offer ends Nov 30. This is for 5 days, and 5 days only. Half price but full service! You get the same Axialis advantages: professionally-designed products, LIFETIME LICENCE! (never pay for future updates), access to thousands of ready-to-use image object packs, and more...

So don't miss this opportunity! ACT NOW and get 50 percent off your total order!

IconWorkshop 6.53 Released:

This minor release includes various bug fixes and enhancements:

Compatible with Visual Studio 2010: The installer detects and add the IconWorkshop add-in in Visual Studio 2010.
Ability to create icons for iPhone 4: This new version includes new image presets to create those icons.
New Object Packs: Two new object packs are provided to create iPhone icons (Applications and Tab Bar Icons).
Various other enhancements and bug fixes.

Registered users can freely upgrade to this latest version using the built-in update feature.