Sam Beauvois » ASP.NET

Custom paging with Subsonic 3 and ObjectDataSource in ASP.NET

Sam Beauvois — Thu, 22 Apr 2010 07:34:08 +0000

Here is how I created a paged items list in ASP.NET 3.5 using Subsonic for data access, and ASP.NET Controls for the display.

I use Subsonic 3.0.0.4 with ActiveRecord and ASP.NET 3.5 SP1 webforms.

For this example, we are creating a blog post list and that the DAL is created (the data class we use is “DAL.BlogPost”).

The DAL.BlogPost object has three properties we need : CreatedOn, Subject and Body.

First step : prepare your data manager class


namespace MyBlog.BLL
{
   public class PostManager
   {
     // ...
   }
}

(keep in mind the namespace and the class for the nexts steps)

In this class, two methods are required,

The first returns the total number of items


public int GetPostCount()
{
  return DAL.BlogPost.All().Count(x => x.IsDeleted != true);
}

The second one returns the items contained in a defined range (start index and then nomber of elements), so this method needs to know where to start and how many items to get.


public PagedList GetLastestPosts(int startRowIndex, int maximumRows)
{
   if (startRowIndex != 0)
   {
     startRowIndex =(startRowIndex/maximumRows);
   }

    IOrderedQueryable yourQuery = DAL.BlogPost.All().OrderByDescending(x => x.CreatedOn);
    return new PagedList(yourQuery, startRowIndex, maximumRows);
}

One important part to remember when using Subsonic is


if (startRowIndex != 0)
{
   startRowIndex = startRowIndex / maximumRows;
}

This conversion is necessary because subsonic and the ObjectDataSource doesn’t share the same opinion about the paging method.
Subsonic says

“I want the third page containing five elements”

ObjectDataSource says

“I want the five elements following the third element”

So the conversion is mandatory if you want a correct paging.

Second step : create the aspx page.

Declare an ObjectDataSource:

Note the TypeName attribute : the value is the namespace + the class name of our datamanager class.
We set the EnablePaging attribute to true and we specify the SelectCountMethod and the SelectMethod.

We don’t need any parameters for the paging, by default the MaximumRowsParameterName and StartRowIndexParameterName are set to “maximumRows” and “startRowIndex”.
If we want other parameters names in our datamanager class, we can define them in the ObjectDataSource with these two parameters.

Add an asp ListView element


 
    
 
 
    <%# Eval("CreatedOn","{0:d}")%> :
     <%# Eval("Subject") %>
    

    
     <%# Eval("Body") %>

Set the DataSourceID attribute to the ObjectDataSource ID parameter.

Define a LayoutTemplate and an ItemTemplate with the elements we want to display.

Then add an asp datapager control in the LayoutTemplate

Here is the result :

Remark about the data access method

It’s possible to avoid the start index value conversion !

Check the PagedList first constructor code (code is available on the subsonic git repository)


public PagedList(IQueryable source, int index, int pageSize)
{
   int total = source.Count();
   TotalCount = total;
   TotalPages = total / pageSize;

   if(total % pageSize > 0)
     TotalPages++;

   PageSize = pageSize;
   PageIndex = index;
   AddRange(source.Skip(index * pageSize).Take(pageSize).ToList());
}

As you can see, Subsonic use the Skip and the Take methods from Linq

So, you can modify the GetLastestPosts method to return a strongly typed List in place of the PagedList:


public List GetLastestPosts(int startRowIndex, int maximumRows)
{
   return DAL.BlogPost.All().
          Skip(startRowIndex).
          Take(maximumRows).
          OrderByDescending(x => x.CreatedOn).
          ToList();
}

With this method, no more conversion needed

Use ASP.NET Validators with the SharePoint:DateTimeControl

Sam Beauvois — Mon, 15 Mar 2010 09:54:21 +0000

If you want to use asp.net validation system with the SharePoint’s DateTimeControl, the first thing you need to know is that this control is “just” a wrapper around simple ASP.NET controls (textbox, dropdownlist).

If you want to set the ControlToValidate property of an ASP.NET validator to the DateTimeControl’s ID, it will throw an error!
As you can guess, you have to target the controls inside the DateTimeControl.

Since the DateTimeControl set the name of the controls programmatically, you can retrieve the id of the control:

Textbox date: DateTimeControl.ID +”Date”
Dropdownlist hours: DateTimeControl.ID +”DateHours”
Dropdownlist minutes: DateTimeControl.ID +”DateMinutes”

Example:

If you use the SharePoint:DateTimeControl with the TimeOnly property set to “true”

You’ll have two dropdownlists, one for the hours and one for the minutes
The DateTimeControl set the name:

Dropdownlist hours: DateTimeControl.ID +”DateHours”

Html will be:

Dropdownlist minutes: DateTimeControl.ID +”DateMinutes”
Html will be:

So you can retrieve the ASP.NET controls by using :

For the date: TheTime$TheTimeDate
For the hours: TheTime$TheTimeDateHours
For the minutes: TheTime$TheTimeDateMinutes

Real case example:

I have two DateTimeControl, one named TheStartTime and one other named TheEndTime,

I want to validate that the end time is not before the start time.

So I’ll use the ASP.NET comparevalidator validator to compare the hours:

Now, if you want to validate both hours and minutes, one option is to add an “asp:CustomValidator” and check conditions server side :
Markup:

Before the action, validate:

if (!IsEndTimeLaterThanStartTime())
{
 EndTimeMustBeLaterThanStartTimeCustomValidator.IsValid = false;
 return;
}

Validation method:


private bool IsEndTimeLaterThanStartTime()
{
 // retrieve the DropDownList
 DropDownList startHours = TheStartTime.FindControl("TheStartTimeDateHours") as DropDownList;
 DropDownList endHours = TheEndTime.FindControl("TheEndTimeDateHours") as DropDownList;

 // prevent from errors
 if (startHours == null ||
 endHours == null ||
 string.IsNullOrEmpty(startHours.SelectedValue) ||
 string.IsNullOrEmpty(endHours.SelectedValue))
 {
 return; // dont' do anything
 }

// the hour value is "00:"
 int startHour = Convert.ToInt32(startHours.SelectedValue.Replace(":",""));
 int endHour = Convert.ToInt32(endHours.SelectedValue.Replace(":", ""));
 if (endHour < startHour)
 {
 args.IsValid = false;
 }
 else
 {

 if (endHour == startHour)
 {
 // check the minutes
 DropDownList startMinutes = TheStartTime.FindControl("TheStartTimeDateMinutes") as DropDownList;
 DropDownList endMinutes = TheEndTime.FindControl("TheEndTimeDateMinutes") as DropDownList;
 // prevent from errors
 if (startMinutes == null ||
 endMinutes == null ||
 string.IsNullOrEmpty(startMinutes.SelectedValue) ||
 string.IsNullOrEmpty(endMinutes.SelectedValue))
 {
 return; // dont' do anything
 }

 int startMinute = Convert.ToInt32(startMinutes.SelectedValue);
 int endMinute = Convert.ToInt32(endMinutes.SelectedValue);

 if (endHour <= startMinute)
 args.IsValid = false;

 }
 }

 args.IsValid = true;

 }

You can also validate the Date himself if you choose to display it,
you can make a client side validation if you know javascript,
you can do everything like in “classic” ASP.NET.

CSS Mixer

admin — Thu, 25 Feb 2010 22:41:35 +0000

Css mixer is a tool I’ve developped in C# winforms, .NET framework 3.5

You can use it to improve you ASP.NET Themes or your CSS files for all your web projects.

If you have many css files linked to a page, you can group them in a single file with CSS Mixer.

You can also minify CSS files to save the bandwith.

To use it, open a folder containing CSS files,

choose an action (simple combine, or combine and minify) then click Save as …

Download the last version of CSS Mixer on codeplex.

I hope you’ll find it usefull. please give me feedback on it

How to build a “visible on hover” action menu with jQuery ?

Sam Beauvois — Fri, 05 Feb 2010 16:43:35 +0000

Here is a quick way to use jQuery library to create a “visible on hover” action menu.

I’ll explain step by step how to do that.

1.) Create an html page with actions in a container


 
 Sam Beauvois | jQuery usage demo 1
 
 
 Visible on hover with jQuery demo.

 
Please put you mouse hover the following texts
 
 Demo 1
 
 action 1 | action 2 | action 3

Result is

simple page

2.) Link the jquery library (here from google code, but you can download the library at jquery.com) and add a css class to the container div and one other to the action div



 Demo 1
 
 action 1 | action 2 | action 3

3.) Add a function :

Now it’s functionnal, hover the zone to check :

4.) Now, add some css to make it nicer :

.hidden_action_container
{
 padding : 15px 15px 15px 15px;
 background-color: #DDDDDD;
 border-style:solid;
 border-color:#EEEEEE;
 height:50px;
}

.hidden_action a
{
 color:#999999;
 font-size: 20px;
 font-weight:bolder;
}

And the final result looks like

You can see the online demo here.

Don’t repeat your common CSS between your different themes

Sam Beauvois — Thu, 14 Jan 2010 18:02:53 +0000

To fully understand this article, you need an Asp.Net Themes system knowledge

The case :

You have an application with a CSS layout, and a few themes.
There is just a little change between the different themes, by example you change only the color scheme.

A solution to do that is to repeat all CSS files in all your themes, and change the color part.
The problem with that solution is that if you change one common style in one of your themes, you’ll have to repeat the change in all themes. This is a bad idea, it leads to chaos !

Then how can you do to avoid the code repetition ?

My solution:

1.) Create a Common Theme.

In the Common theme, you define CCS files with a default color scheme (just in case)

.testclass
{
border:solid 1px #DDDDDD;
background-color:#DDDDAA;
font-size:xx-large;
}

2.) Create an other Theme (let say “Green”)

In the Green theme, you define CCS files with only the color information


.testclass
{
background-color:#00FF00;
}

2b.) Create an other Theme (let say “Blue”)

In the Green theme, you define CCS files with only the color information


.testclass
{
background-color:#0000FF;
}

Your Theme structure has to look like this :

3.) Create a default page (Default.aspx)

And set the class of a div to “testclass” (define above)

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





 Test with themes


 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut tellus eget turpis semper adipiscing sit amet id odio. Nunc vitae imperdiet tellus. Aenean quis orci metus, vitae placerat leo. Pellentesque luctus, lectus sit amet lacinia tincidunt, mi nibh sagittis nisl, vitae mollis eros nisi sit amet sem. Nunc dictum massa turpis. Etiam nisi mauris, consectetur et tempus id, pharetra in turpis. Nullam pretium ultricies nulla nec gravida. Sed porttitor metus nisl, ac condimentum nunc. Integer id feugiat orci. Maecenas ut lacinia purus. Mauris egestas mattis accumsan. Nunc in justo massa, quis egestas orci. Ut tincidunt, ligula sit amet tempor pharetra, magna mauris gravida mi, sed semper magna justo at velit. Donec vulputate fringilla lacus non sollicitudin. Morbi nulla nibh, pellentesque sed bibendum cursus, malesuada ut nisi.

4.) Edit the Web.Config file

Go to the “Pages” section, set the styleSheetTheme attribute to “Common” and the theme attribute to “Green”

Now launch your web application, the result has to be like this :

See in firebug :

Explanation :

This works because of the styleSheetTheme and theme attributes.

In fact, ASP.NET applies the styleSheetTheme defined theme first, then applies the page defined styles and at least applies the theme defined theme.

With this technique you can get rid of a few headaches.

How to change the style elements of a listview? (the simple way)

Sam Beauvois — Thu, 14 Jan 2010 13:14:40 +0000

With the ast.net listview control, you can set an AlternatingItemTemplate in order to change the display or what you want.

If you just want to change the backcolor or things like that, you can spare some time by using only the ItemTemplate and applying a diffenrent style depending of the index (use of the Container.DataItemIndex property).

example : let’s say that your listview generate a

and each ItemTemplate generate a row of this table, just do :

that’s all you need !

How to use a ValidationSummary to display server errors?

Sam Beauvois — Wed, 13 Jan 2010 07:15:17 +0000

Imagine you want to use your ValidationSummary to display server errors as client error, there is a simple way to do that.

First, declare your ValidationSummary, and a CustomValidator with Display property set to “None”

Next, in your application code, when an error occurs : set the CustomValidator’s ErrorMessage and IsValid properties :


ServerErrorCustomValidator.ErrorMessage = "Server error :  error description";
ServerErrorCustomValidator.IsValid = false;

blah blah