Finally, some 8 months after the Blog4Umbraco Extensions library became available, I decided to post it to the package repository on our.umbraco.org and create some actual documentation for it - this is the result...

This document may also be downloaded as a PDF from here.

Introduction

The Refactored Blog4Umbraco Extensions came about because the current version of Blog4Umbraco (currently 2.0.26) had some issues when it came to creating multiple blogs within a single website, and in addition under some circumstances creating a new blog entry would cause a "Yellow Screen of Death" (YSod).

In order to address these shortcomings this package was created, and later extended with other functionality.  The current functionality offered by this package includes:

• Allowing Comments to be Disabled at the Blog Level
• Enable setting a Blog-wide Category and having Tags bound to that Category

An additional Datatype called Blog Tags and derived from the built in Tags Datatype is also provided which is the basis upon which the Blog-wide Category is built.

For a more detailed and technical description of the package, the reader is directed to the blog entries found at /blog:

• Blog Categories in Blog4Umbraco - Take Two
• Adding a Blog Category to Blog4Umbraco (the method described here is not recommended, but provides additional background information).

The Future

Work is currently underway to release a version 3 of Blog4Umbraco (B4U) which will address the issues discussed here and add other much needed functionality including Trackbacks and Comment Notifications.

Post-Installation Steps

After installing the package, additional steps are required in order to activate the features.  These involve modifying the Blog-related document types as follows:

Globally Disabling Comments

In order to be able to globally disable comments, edit the Blog Document Type by adding a new property based on the True/False data type as follows:

 

If the Disable Comments checkbox is checked on a Blog page then the Close comments field will be also become checked when it is saved.

Blog Categories

Updating the Blog Document Type

In order to facilitate Blog Categories, an additional property needs to be added to the Blog Document Type as follows:

 

Coupled with the change to the Blog Post Document type below, this will cause tags added to blog posts to use the category set in this property of the corresponding Blog.

Updating the Blog Post Document Type

Change the Tags property in the Blog Post Document so that it uses the "Blog Tags" type instead of the built-in "Tags" data type:

 

Enabling Time fields in the Blog Entry Post Date

In the original Blog4Umbraco package, there is no way to enable the Post Date to use time as well as date, which results in all posts being set as being posted at midnight. 

The updated Umlaut.Umb.Blog.dll file included in this package addresses this issue, but you still need to modify the Blog Post document type in order to take advantage of the change.  In order to do so, change the Post Date property type from "Date Picker" to "Date Picker with time":

 

Other Issues:

Blog for Umbraco generates the following error when attempting to create a new Blog:

Issue # 5612 - http://blog4umbraco.codeplex.com/workitem/5612

Operand type clash: int is incompatible with ntext

 Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.



 Exception Details: System.Data.SqlClient.SqlException: Operand type clash: int is incompatible with ntext

Workaround:

If you encounter this type of error, double-check the Author Picker and make sure that the datatype is set tointinstead ofntext.

While working with MVC3 and Razor views recently, we came across the need to disable the Ajax behaviour in a form when the user pressed a certain submit button.  To give you some background, we were working on a Shopping Cart whereby the user had the following possible actions:

• Edit an item,
• Delete an item
• Update the quantity of an item,
• Submit the cart to Checkout
• Clear the cart
• Refresh the cart.

Now, for most cases, we wanted the cart to be refreshed without the user having to see a post back, so Ajax was the best way to handle this, of course.  Although the application is based on the Umbraco CMS, we developed the e-Commerce side of things in MVC3 from scratch and integrated it with Umbraco using the excellent MVCBridge add-on.  This allowed us to take advantage of all MVC has to offer.  However, the solution that follows is not dependant on Umbraco or MVCBridge at all.

Because this is a new project and has no legacy MVC code in it, we are able to take full advantage of the new Unobtrusive Ajax style for binding Ajax to the form.  This means that under the hood we are using jquery's ajax engine only, and not the legacy Microsoft one.  Here's the basic form:

@using (Ajax.BeginForm(new AjaxOptions
{
    OnSuccess = "updateCart"
}))
{

    @Html.RenderFormToken();
<section id="shoppingCart">
    <h1>Items in your Shopping Cart</h1>
    <table cellpadding="0" cellspacing="0">
    @foreach (var item in Model.Items.Values)
    {
        // Render the items, including the Edit, Delete and Update submit buttons...
    }
    <tr>
        <td colspan="3" class="totalValue">Total Value:</td>
        <td class="totalValue">@Html.DisplayFor(model => model.TotalIncTax)
        @Html.HiddenFor(model => model.TotalItemCount)
        @Html.HiddenFor(model => model.TotalIncTax)</td>
        <td class="totalValue"></td>
    </tr>
    </table>
    <span class="submit"><input type="submit" value="Refresh Cart" name="refresh" id="refresh" />
    <input type="submit" value="Clear" name="reset" id="reset" />
    <input type="submit" value="Checkout" name="checkout" id="checkout" /></span>
</section>
}

Now, when a user presses any of the submit buttons, the form will be posted back to the server, and the new page content will be returned to the updateCart function so that we can update the user's view without having to refresh the page.

But we want the item Edit and the Checkout buttons to re-direct to a new page instead of submitting back to the shopping cart.  For that to happen, we need to do two things (let's focus on the Checkout button, which we want to re-direct to the Checkout page):

1. In the ShoppingCartController we need to check which submit button was pressed by inspecting the form elements, and do a Resonse.Redirect() to the appropriate page if the user pressed the Checkout button, for example; and
2. Disable the Ajax behaviour when the user presses the Checkout button.

The code to handle the second step is as follows:

   // These variables are defined here as they may be referenced in other code blocks.
   // The $().ready function is used to populate them.
    var cartSection = null;
    var eShopCartForm = null;

    $(document).ready(function () {
        cartSection = $("#shoppingCart");
        eShopCartForm = cartSection.closest("form");

        // Disable the ajax behaviour if the checkout button is pressed.  We want the form
        // to submit normally so that the page can be redirected. 
        var checkoutSubmit = cartSection.find("#checkout");

        // We supply our own handler for this button to remove the form's ajax submit handler.
        checkoutSubmit.live("click", function (evt) {
            // Setting this attribute to false means the ajax form submit handler won't be triggered...
            eShopCartForm.attr("data-ajax", "false");
        });
    });

If you care to dig deeper, then I recommend taking a look through the jquery.unobtrusive-ajax.js file that is bundled with the MVC3 projects.  Basically though we are changing the data-ajax attribute that is generated on the form element when the user clicks the checkout button so that the ajax submit handler doesn't trigger.

There you have it.  Any questions, suggestions, remarks, please leave a comment...