EPiServer 7.5 handling extra Routedata using Partial Routing

Querystrings are evil and does not make pretty links. We can agree to this yes? So what you normally do is put up routes that can handle all those quirky bastards and put em where they belong.

As an example I’m going to use a newslistpage with pagination. (I’m lazy so i’ll only write relative urls) /newslist. If i want to target a specific page in the pagination, i would normally set up a route to handle it so i could write /newslist/2 instead of the ugly /newslist/?page=2.

But if you are working with a Cms like EPiServer, the paths are not really known all the time and routing changes. This can be a tricky thing and I’ve seen a lot of people just ignoring it and carry on with querystrings since it’s the easy thing to do.

There is a very easy way to deal with this in EPiServer 7+ and it’s called Partial Routing. I was reading some posts about it on http://joelabrahamsson.com/ and thought, hey i can use that for simpler things aswell. So here is the implementation to use it for your own “extra” route data.

So what it does it add this extra routing to all pages of type NewsListPage. When resolving it, the routing checks if there are any parts of the routing left unhandled. In my case I’m expecting a possible paginationreference, so i try parse it to an int to see if its data i should bother with.

If it fits, I then add that extra data to the RouteData collection. This will make it easily accessible in the Controller.

So to recap, if there are parts left in the routing after hitting the NewsListPage, we handle it in the Partial Router, add it to the routedata collection and then we can fetch it like it was a querystring/normal route in the controller.

To initialize and attach this Partial Routing to EPiServer, we need to load it. I like to keep it pretty clean so I have a class handling it.

And that should be it. No excuse to use querystrings for simple tasks like this ^^

EPiServer 7.5 Mvc Parsing ContentAreas

So this other day I had to get all values from a Page in EPiServer (7.5+) to send to another service. I’ve done it before in earlier versions and thought there would be no problem. However the new ContentArea breaks the pattern a bit and left me confused. Looping through the pageproperties, you could do a switch on the PropertyDataType enum to see what we were dealing with, but not in case of ContentArea it seems.

The funny thing is that there is no ContentArea in that enum and the ContentArea itself says, by Type, that it’s a LongString? So I try do a check on OriginalType and compare to PropertyContentArea, successfully I can identify the ContentArea property. It’s never fun having to compare types though..

What i need to do now is parse everything that is in that contentarea and get the properties for those items aswell. Don’t know how often you do stuff like this but it’s a rather special case and something that is also pretty tight cached, so should be no worries.

The GetExternalUrl() that i use are extensions to get pretty links, which i want from everything that is a PageReference or a ContentReference. This of course varies what you are using em for. But should give you the basic idea.

Export DataTable to Excel

So this is part two for me where I’m doing a custom Export from XForms in EPiServer. Check prev post if you don’t know how to get from XForm to DataTable.

So ye this is pretty simple and you can find the information about it on a lot of places, problem is I had some special problems with the export and line breaks You see the XForms i need to export are from start send emails. So i need to preserve the line breaks from the emails. If you export the data as it is, you will most likely get a new row in Excel for every line break in your html. And that kinda sucks when you export lots of emails.

So what i do is i save the Plain Text part from my Emails and I replace the Line breaks with ‘|’ before saving them to XForm. Saving to XForm automatically removes all normal line breaks (“rn”) as you use in Plain Text formatted email. Therefor i replace it with the single ‘|’ char before saving (This is a char i don’t normally use in the mails).

So to start we set the header:

As you can see i do a Replace() on “|” into a
before entering the value. This is cause i saved my line breaks as that char to preserve it in the XForms.

You are free to add whatever Css you feel like to this table when rendering it and Excel will do its best to show it. The magic however lies in the style attribute I set at the top:

br { mso-data-placement: same-cell; }

This prevents the line breaks i add (
) to render as new rows in Excel and do a normal line break within the same cell instead, making our body easy to read. remove it and you will see the difference 🙂

Load XForm as DataTable

Sometimes I run into small peculiar problems that clients want solved, for instance this other day i had a request that demanded me to collect XForm data and handle it elsewhere. It’s not that complicated but if you are not used to parsing XML it might be a bit tricky. Anyways, I’ve split the functions a bit in my repository so first I load the right XForm on init.

After the init I can then run my function for converting the selected XForm into a DataTable. It’s done so i should be able to iterate through all XForms if i feel like it and create a DataSet with all the Xforms as Tables.

So what I do is get all the elements from the XForm. Since I navigate the nodes i need to convert them from XNode to XElement for easier access to properties. Then i check if the column exists in the DataTable, if it does not then i create it and add the values to my valueList. I do this since I need to insert all column values at the same row, hence the cast to array after.

So ye thats about how simple i now have my XForm as a DataTable instead to do fun stuff with.

fine-uploader, c# & the lovely orientation of photos

So when iOS 6 hit we got support for using file-uploading from iPhone, which made it more interesting to support, in our case, uploading of profile images from the device. Also we had some requests to drop the old .net input control and give the css-people more freedom. So i started looking at http://fineuploader.com/ and really liked what i was seeing, great support and great options.

Fun thing thou is that we are stuck in webforms with a lot of projects and we also code stuff in c#. So no samples to get from the site. So started searching for codes around the internet and put together something that worked pretty well. This is not my area of expertise thou, so feel free to improve on it =D

I could re-use most of the codeexample for Mvc VB, just changed a few things in the Javascript:

So what i did was linking the script to an .ashx file instead and limit the types you could use to images. The .ashx file is pretty straight forward and standard, just having a function handle the request

To catch the image uploaded there is also a fallback for Internet Explorer. Example

As some of you have noticed there is an issue with the orientation of photos taken from mobile devices, specially the iPhone. To fix this we need to crawl the metadata to see what way it should be positioned. I do this before i save the file, example:

Then we can do a switch on the rotation before saving the image. (EXIF info: http://nicholasarmstrong.com/2010/02/exif-quick-reference/)

So now i have a c# version of valums file-uploader working with included fix of orientation of photos! Since as stated, this is not my area of expertise, it seems good enough for profileimages 200×200, but im sure there is a more effective way on bigger images. but yea a hint how you can go about it.