.NET and Open Source: better together


  • Join Us on Facebook!
  • Follow Us on Twitter!
  • LinkedIn
  • Subcribe to Our RSS Feed

Building Widgets for BlogEngine.NET 3.3

Version 3.3 dropped user controls from BlogEngine and new widgets use Razor views instead. To start developing new widget, open source code in Visual Studio, navigate to BlogEngine.NET/Custom/Widgets in the solution explorer and add "Example" folder. If you run application and go to admin/custom/widgets, you'll see "Example" widget added to available widgets. You can even drag it to widget zone and save changes. More...

Optimizing ASP.NET Page Load Time

Let's start by creating new empty ASP.NET website and adding Default.aspx with minimal “hello world” markup. When you access your site and check it with profiler, you’ll see single get request for default page. More...

Tutorial - Building NivoSlider Extension (Part 4)

Creating NuGet Package

nuget-logoBlogEngine uses NuGet format for sharing extensions. NuGet package in a nutshell is a ZIP containing files you want to share with some metadata NuGet uses internally. The easiest way to create a package is to use Package Explorer. Download and install this small application on your local machine, then click to run as any regular Windows application. At the time of writing, I’m using Package Explorer version 2.0. More...

Tutorial - Building NivoSlider Extension (Part 3)

Data Persistence

db_1What we need next is to save metadata for each picture used by every slider, and also we need to be able to add and delete all these records. Extension settings are standard way of doing it in BlogEngine - you declare what kind of data you want to maintain, set initial values and first time extension runs it will instantiate settings object and save it on the back-end. To maintain these data, blogger goes to admin/extensions and clicks extension link in the right sidebar. This will load auto-generated form where settings can be edited. The code below would be sufficient: More...

Tutorial - Building NivoSlider Extension (Part 2)

Creating Repository

HTML code we added to site.master can be moved to user control (1), so we’ll need just drop control on the page and be done. But some new themes use Razor instead of WebForms – for those to work we can provide HTML helper (2) do the same thing control does for WebForms. And also we want slider be available in the posts and pages, for that functionality we’ll have to use extension (3). Having planned 3 distinct UIs, it makes sense to abstract common functionality and make UI as light as possible. So lets start by moving that hard-coded list of images into its own class. Open  ~/app_code/extensions folder and create new folder inside it called “NivoSlider”. Then add new class “Repository.cs” – here what it looks like: More...

Tutorial - Building NivoSlider Extension (Part 1)

Getting Started - Pure HTML Code

When I built theme for this site I used excellent Boldy theme as a template, and original theme has nice jQuery slider for a front page. I did not need it at the time, but later used it for another project and liked how simple and light-weight this slider is. In this tutorial we’ll transform NivoSlider into full-featured extension for BlogEngine.NET 2.5 and learn few tips and tricks along the way that will help you add useful functionality to your blog with no sweat. More...

How to convert theme to BlogEngine.NET part 4

menu- 1

In this part we'll get menu working. BlogEngine supports “pages” – pages are different in that they don’t belong to post list, don’t support comments and can have parent/child relationship. In short, this is a way to turn your blog into CMS (content management system) or combine blog and CMS on the same site. BlogEngine has page list widget that shows list of all pages on the site. It is a simple flat list and does not support nesting, that is why a while back I wrote this control to extend standard list to hierarchical unsorted HTML list that can be styled with CSS to look as horizontal or vertical menu usually used in CMS-style websites. More...

How to convert theme to BlogEngine.NET part 3


This is part 3 of converting theme to BlogEngine tutorial. In the first part we created a new theme and added HTML/CSS/JavaScript from chosen design template. Second part mostly dealt with customizing search. Today is going to be a widgets day.

Widgets are parts of the site that can be dynamically configured and updated by admin, usually you can see them in the side bar, like list of categories, tags etc. It is one of the main extensibility points in BlogEngine and can be very powerful, although you should not overuse it as having too many widgets can slow site down. More...

How to convert theme to BlogEngine.NET part 2

Search Magnifier This is a second in the series of tutorials on theme building with BlogEngine (go to part one). This time I’ll get search functionality up and running. BlogEngine has search widget and server-side control to add search really easy to the blog, but for some themes it does not fit well with design and you want to go manual. Fortunately, it is not hard. More...

How to convert theme to BlogEngine.NET

boldy With summer behind us, you might want to change things a little bit to celebrate a new season. Like buy a new shoes or, may be, change a theme on the blog. I decided to do the later. My schedule is quiet busy, so I’ll do it in several steps and will share tips, tricks and findings with anybody interested.
I’m running relatively recent build of BlogEngine from source, but new theme should work fine with 1.6.x.x. Let me know if it doesn’t for you and I’ll do adjustments as needed. To start, I went looking for catchy free theme, no kind in particular - any design can be adopted to BlogEngine pretty easily. This WP theme looked pretty good to me. Below I’ll try to document adoption process step by step. More...