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.

But because we don't have any code to support this widget, in the website you'll see an error instead of actual widget. It explains what file BlogEngine is looking for - "widget.cshtml" in that newly created folder.

So go back to Visual Studio and add widget.cshtml file. Here is a code for it:

Few things to understand in this code. It is very simple standard Razor view and BlogEngine passes Model object into the view as one would expect. This is very simple object indeed, it has only 2 properties: Title and Id. If you save your code and reload website, you should see your widget in the sidebar in all glory.

The title is the name of your folder, in this case "Example". The Id created when you drag-and-dropped widget into widget zone. With XML provider, it added line to the widget zone file under app_data/datastore/widgets. With database provider, it would update a record in the table. So there is no mystery here.

Even with this little knowledge, you already can do some useful things. For example, most social sites provide some kind of code widgets you can copy/paste in your blog as HTML - you could add this code to widget.cshtml and be done. Also, BlogEngine exposes many useful objects and events and they all available to you in the server-side code block. The code below shows how you can easily output number of posts and blog title pulling data from server-side code.

This lets you create many simple widgets, but often you would want to provide customization. For this, your widget needs settings. Currently, if you click on pencil icon in the widget admin, it will only let you change title. To add settings page, we need to add "edit.cshtml" to the Example folder. The name follows convention and is what BlogEngine expects to find. So in Visual Studio, add "edit.cshtml" with code as below:

There few things to explain in this code. First of, we included custom/widgets namespace and introduced local variable "exampleSetting". This variable represents value we want to be able type in the textbox and save. We need to know widget ID to be able to save and retrieve settings for this widget, and ID always passed into edit page by BlogEngine as query string (line #4), so we use it to get settings object (line #5). This object provided by BlogEngine, and we don't care where and how it saves our value as long as we can save and get it back.

Before we save settings, widget will be using declared in the line #3 as default. But if I click "save" button, the code in the "if (IsPost)" block will be executed (lines 8-10). This will take value fro texbox, save it and display confirmation message.

And I can use code similar to above to use this setting in my Example widget: