Tag - Experiments in Code

It's been ages since I wrote my last blog but finally I have got round to it, the last month has been busy with project deadlines and remaking this blog. This is the first release of my new blog written using the MVC framework, this first iteration is very simple but I am keen to get it out there to replace BlogEngine and so I don't spend for ever adding to it and not getting anything it to the real world

So what is in the first release? Here are some of the features of my first release:

Ajax image and file uploader which allows me to easily add images and files as I write my blog.
Ajax blog post date picker. You can only select dates that actually have blog posts.
Gravatar's for post comments.
MarkIt Up text editor - I wanted something very clean a simple that could be easily added to the website.
For the design I have used Grunge Superstar by Viktor Persson, which was originally a WordPress theme but I have managed to crowbar into this blog.

Ok some pretty simple stuff to start with but it gets the core of the blog completed. Over the next few months I am going to try and add lots of different little bits of pieces:

Tag cloud - everyone has to have one of these
Ability to add "pages" - these will be for projects I am working on, for example the Petrol Calculator I had on my original blog (it will be coming back).
More javascript fancy stuff - really I am not sure what this will cover but as I have ideas I will add them in
Book list - this will be a list of books, some techy some not, just things I like to read.
Image and file browsers to allow browsing of files already on the server when you want to add an image of file to a blog / page post.

Once I am happy I might put the source code on the site so others can have a look and make improvements. If you have suggestions on how I can improve the site please post a comment or drop me a message when I have written the contact form (better get started on that).

I was working on a project that required a modal popup up box. After looking at a few different jQuery pluyins I decided to use Simple Modal by Eric Martin. I wanted to use this one because it was the simplest to implement.

The popup itself had to contain an ASP.NET text box and a button, the user would fill out the text box and then click the button and the value would be saved. As with most standard ASP .NET sites I had to have a form that wraps the majority of the page, I am not a fan of this but sometimes there is no way around this, it also wrapped the my textbox and button but was outside of the modal container.

Once the page was setup I tried the tool but whenever I clicked the button nothing was saved to the DB. It turns out that the Simple Modal plugin appends the modal container to the end of the body tag, this cause the textbox to be moved outside of the form. Any data entered is therefore not submitted back to the server.

To solve this I downloaded the non-compressed version of the code from http://code.google.com/p/simplemodal/downloads/list. Then located the lines that create the modal container. You are looking for the create function:

		
create: function () {			  
			// get the window properties
			
			w = this.getDimensions();

			// add an iframe to prevent select options from bleeding through
			if (ie6) {
			    
				this.dialog.iframe = $('<iframe src="javascript:false;"></iframe>')
					.css($.extend(this.opts.iframeCss, {
						display: 'none',
						opacity: 0, 
						position: 'fixed',
						height: w[0],
						width: w[1],
						zIndex: this.opts.zIndex,
						top: 0,
						left: 0
					}))
					.appendTo('body');
			}

			// create the overlay
			this.dialog.overlay = $('<div>&nbsp;</div>')
				.attr('id', this.opts.overlayId)
				.addClass('simplemodal-overlay')
				.css($.extend(this.opts.overlayCss, {
					display: 'none',
					opacity: this.opts.opacity / 100,
					height: w[0],
					width: w[1],
					position: 'fixed',
					left: 0,
					top: 0,
					zIndex: this.opts.zIndex + 1
				}))
				.appendTo('body');

			// create the container
			this.dialog.container = $('<div>&nbsp;</div>')
				.attr('id', this.opts.containerId)
				.addClass('simplemodal-container')
				.css($.extend(this.opts.containerCss, {
					display: 'none',
					position: 'fixed', 
					zIndex: this.opts.zIndex + 2
				}))
				.append(this.opts.close 
					? $(this.opts.closeHTML).addClass(this.opts.closeClass)
					: '')
				.appendTo('body');

			this.setPosition();

			// fix issues with IE
			if (ie6 || ieQuirks) {
				this.fixIE();
			}

			// hide the data and add it to the container
			this.dialog.container.append(this.dialog.data.hide());
		},

To solve this problem the modal container needs to be append to the parent of the target container. To do this add the following line at the start of the create function:

var parent  = $(this.dialog.parentNode);

Now replace all the:

.appendTo('body');

with:

.appendTo(parent);

This ensures that the modal container is created beneath the form element in the page.

When using data bound controls it can sometimes be a pain to ship data across to web control you want to bind the data to. For example lets take a repeater control. Our application is quite simple, we have a person object containing name and date of birth, our application then takes this information and calculates which year they turned 18. The code for the Person class looks like this:

public class Person{
    public string Name{get;set;}
    public DateTime DoB{get;set;}
}

And the bit doing the calculation like so:

        List people = GetPeople();
        people.ForEach(x =>
        {
            int year = GetYearTurned18(x);            
        });

At the moment very simple but I am not doing anything with the calculated value except assign it to a variable. What I want to do is pass all this to a repeater control so that I can then render it nicely on screen. The result should look like this:

Mike	23/03/1976	1994
Fred	21/07/1980	1998

So I want to bind it to a repeater a control by passing it to the DataSource property and then calling DataBind. I can't just pass both the person object and the calculated year into the DataSource because it only takes a single object, so I need to work out some other method.

The first thing might be to turn the calculation into a method on the person class like so, this will allow be to pass a list of Person objects to the DataSource.

public class Person{
    public string Name{get;set;}
    public DateTime DoB{get;set;}
    private int YearTurned18
    {
        get
        {
            return this.DoB.Year + 18;
        }
    }
}

However what if we wanted to calculate the year they turned 16 or 24 or 65? We would have to write additional properties. It is not a good solution because of all the additional methods.

The second solution is to create a class to contain the person and year, something like:

    public class PersonContainer
    {
        public Person Person { get; set; }
        public int Year { get; set; }
    }

This again is still not great, what if at some time in the future I want to pass the person object over with another value that isn't an int. I would have to either add another property to this class or create another class. Adding properties leaves me with a class where only a few peoperties are used or I have lots of container classes in my code.

A better solution is to use anonymous types. These types allow you to create classes with read only properties which you assign when the object is created. The code for our solution then becomes:

            List<Person> people = GetPeople();
            List<object> peopleData = new List<object>();
            
            people.ForEach(x =>
            {
                int year = GetYearTurned18(x);
                peopleData.Add(new { Person = x, Year = year });
            });

            _peopleRepeater.DataSource = peopleData;
            _peopleRepeater.DataBind();

This is quite nice. I can create this anonymous type and then in my repeater control get access to the data using the following:

                        <%# DataBinder.Eval(Container.DataItem, "Person.Name") %>
                        <%# DataBinder.Eval(Container.DataItem, "Person.DoB", "dd/MM/yyyy") %>
                        <%# DataBinder.Eval(Container.DataItem, "Year")%>

I can also add as many other properties as I like to my anonymous type, allowing for easy expansion later on. However the only real problem is that the list is not strongly typed. I could add anything to the list because it accepts an object. So I want to make this more strongly typed. However there is a way around this, read the post at the end of Microsoft's Anonymous Types page for a way to do this.

Just blogging this because I am sure that I will have the problem later and want to know how to solve it.

After changing some code on my website and recompiling it I got the following error:

Loading this assembly would produce a different grant set from other instances

After a few muttered four letter words I asked around the team and Stephen gave me the answer. The solution:

Stop IIS
Delete files in C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET Files

All blogs tagged with 'asp .net'

Experiments in code

New ASP.NET MVC Blog

jQuery Modal Plugin by Eric Martin

Using anonymous types for databound web controls

Error: Loading this assembly would produce a different grant set from other instances

Projects

Have you read?

Blogs by date