Ajax and umbraco

August 03, 2006

Since my last post " Please make a comment" some people have asked how did you do that, and on the forum/mailinglist people are asking about ajax and umbraco in general.

I will try give a quick overview how I use ajax to create comments on my blog posts

First off I created a class library in Visual Studio 2003, and created a class called AjaxService.
In this class I will place all my static methods that I will call from javascript (ajax)

Here is the class without the namespace

public class AjaxService
{
    public AjaxService() {}

    // Just a test method
    [AjaxPro.AjaxMethod]
    public DateTime GetServerTime()
    {
        return DateTime.Now;
    }

    [AjaxPro.AjaxMethod]
    public static string InsertNewCommentAndGetAllCommentsAsHtml(int nodeId, string name, string email, string website, string comment)
    {
        // Get the node wich we want to add a child (comment) to
        umbraco.presentation.nodeFactory.Node node = new umbraco.presentation.nodeFactory.Node(nodeId);

        // A little security check, just to make sure people can't make comment's every where
        if (node.NodeTypeAlias != "BlogPost")
        {
            throw new Exception("You can not add new nodes under this Document Type: " + node.NodeTypeAlias);
        }

        // Getting the documenttype for a comment
        DocumentType documentType = DocumentType.GetByAlias("BlogPostComment");

        // Use the admin (user with id 0) user from umbraco to create the node
        umbraco.BusinessLogic.User user = new umbraco.BusinessLogic.User(0);

        // the new comment node should have a name
        // we use the timestamp (ISO 8601) as name so it's unique
        string commentName = DateTime.Now.ToString("s");

        // Here we are creating the new comment node/document
        Document post = Document.MakeNew(commentName, documentType, user, nodeId);

        // Setting the properties
        post.getProperty("name").Value = name;
        post.getProperty("email").Value = email;
        post.getProperty("website").Value = website;
        post.getProperty("bodyText").Value = comment;
        post.getProperty("umbracoNaviHide").Value = "1";

        // Flag the node/document for publishing
        // Hereby creating a new version, using the user
        post.Publish(user);

        umbraco.library.PublishSingleNode(post.Id);
        
        return HtmlHelper.GetCommentsAsHtml(nodeId, post.Id);
    }

    [AjaxPro.AjaxMethod]
    public static string GetCommentsAsHtml(int nodeId)
    {
        return HtmlHelper.GetCommentsAsHtml(nodeId, -1);
    }
}

I use the Ajax.NET Professional library to do all the magic, there is nothing ajax stuff inside the methods, this is just code using the umbraco API.
To enable the methods to use for javascript calls I have mark my methods with an AjaxMethod attribute.

Next I need to include some javascripts in my HTML for the page

<script type="text/javascript" src="/ajaxpro/prototype.ashx"></script>
<script type="text/javascript" src="/ajaxpro/core.ashx"></script>
<script type="text/javascript" src="/ajaxpro/converter.ashx"></script>
<script type="text/javascript" src="/ajaxpro/CPalm.Website.AjaxService,CPalm.Website.ashx"></script>
<!-- all script above is generated by the  Ajax.NET Professional library -->
<script src="/media/comment.js" type="text/javascript"></script>

Now I can call the C# method like this

function postComment() {
    CPalm.Website.AjaxService.InsertNewCommentAndGetAllCommentsAsHtml(1023, "Name", "Email", "http://www.cpalm.dk", "This is my comment", InsertNewCommentAndGetAllCommentsAsHtml_callback);
}

function InsertNewCommentAndGetAllCommentsAsHtml_callback(res) {
    if (res.error != null)
        alert(res.error.Message);
    else
        alert("The C# method returned: " + res.value);
}

That's it :-)

For all the UI bling bling fade I used script.aculo.us and I also used the prototype javascript library for speeding up the javascript development.

If you wan't the whole story about my javascript (insert, preview, bling bling) look at /media/comment.js

NB this is my first post using my CPalm.WebControl.SyntaxHighlighter, soon to be featured on forum.umbraco.org :-)

Ajax and umbraco

Recent post