Ajax and umbraco

August 03rd, 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

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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 

JavaScript
1
2
3
4
5
6
<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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 :-)

[Update August 07, 2006]
This one is for Otto (Comment #3)
My HtmlHelper class

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
public class HtmlHelper
{
	public HtmlHelper() { }

	public static string GetHeadingAsImage(string headingText)
	{
		return "<h1><img width=\"484\" height=\"30\" src=\"/ImageGen.aspx?Text=" +
			headingText + "&amp;Width=484&amp;Height=30&amp;FontSize=18&amp;" +
			"FontColor=ffba00&amp;BgColor=333333&amp;Font=Trebuchet%20MS\" alt=\"" +
			headingText + "\" /></h1><div class=\"stripe\"></div>";
	}

	// output dates, where the day gets a st, nd or rd
	// Examples: June 07th, 2006 || January 22nd, 2006 || January 21st, 2006
	public static string GetOutPutDate(DateTime date)
	{
		string year		= date.ToString("yyyy");
		string month	= date.ToString("MMMM");
		string day		= date.ToString("dd");

		if (day.EndsWith("1"))
		{
			day += "st";
		}
		else if (day.EndsWith("2"))
		{
			day += "nd";
		}
		else if (day.EndsWith("3"))
		{
			day += "rd";
		}
		else if (day.EndsWith("4"))
		{
			// Houston, we have a problem! :-)
		}

		return month + " " + day + ", " + year;
	}

	public static string GetCommentsAsHtml(int nodeId)
	{
		return GetCommentsAsHtml(nodeId, -1);
	}

	public static string GetCommentsAsHtml(int nodeId, int markId)
	{

		umbraco.presentation.nodeFactory.Node node = new umbraco.presentation.nodeFactory.Node(nodeId);
		umbraco.presentation.nodeFactory.Nodes nodes = node.Children;

		StringBuilder sb = new StringBuilder();

		int i = 0;
		foreach (umbraco.presentation.nodeFactory.Node child in nodes)
		{
			if (child.NodeTypeAlias != "BlogPostComment")
			{
				continue; // if is not a comment, go to next child (it could be a codeexample)
			}
			i++;
			sb.Append("	<div class=\"commententry\"");
			if (child.Id == markId)
			{
				sb.Append(" id=\"lastInserted\"");
			}
			sb.Append(">");
			sb.Append("		<p class=\"author\"><a href=\"#" + i + "\" name=\"" + i + "\">#" + i + "</a> - ");
			if (child.GetProperty("website").Value != string.Empty)
			{
				sb.Append("<a href=\"" + child.GetProperty("website").Value + "\" target=\"_blank\">");
			}
			
			sb.Append(child.GetProperty("name").Value);
			
			if (child.GetProperty("website").Value != string.Empty)
			{
				sb.Append("</a>");
			}
			sb.Append(" on " + GetOutPutDate(child.CreateDate) + " " + child.CreateDate.ToString("HH:mm") + "</p>");
			string bodyText = child.GetProperty("bodyText").Value;
			bodyText = System.Web.HttpUtility.HtmlEncode(bodyText);
			bodyText = bodyText.Replace("\n", "<br>");
			sb.Append("		<div class=\"commentbody\"><p>" + bodyText + "</p></div>");
			sb.Append("	</div>");
		}
		return sb.ToString();
	}
}

 

Tags: Ajax, Umbraco

Comments

#1 - vbcbvcb on August 03rd, 2006 12:48

cvbcvb

#2 - Bernd on August 03rd, 2006 13:28

realy nice work christian!!

#3 - Otto on August 07, 2006 22:26

Nice work Christian,
I try to compile the project but the the reference to the HtmlHelper is not found, where can I find that class?

Thx for sharing your experience!

#4 - Christian Palm on August 07, 2006 22:44

Hi Otto
I have updated the post with the HtmlHelper class, please see above :-)

#5 - Otto on August 08, 2006 09:37

You'r a star Christian, million thx!!!

#6 - Jonas on August 11st, 2006 17:50

test... den her kan du godt slette :-)

#7 - Jonas on August 11st, 2006 17:51

woa! great!

#8 - Bernd Rössl on August 13rd, 2006 14:36

hey christian,

i just noticed that the web.config also has to be modified. In the section system.web should be an entry like
&lt;httpHandlers&gt;
&lt;add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/&gt;
&lt;/httpHandlers&gt;

cheers, bernd

#9 - Kenneth on August 29, 2006 08:05

Nice work Christian!

#10 - Biagio on August 31st, 2006 08:59

How insert code into umbraco?

#11 - Cornelia on September 14, 2006 03:54

I like it!

#12 - Marc on October 11st, 2006 12:39

Just a test... :-)

#13 - bob on October 11st, 2006 20:48

just testing your comments.

#14 - Mateusz Kierepka on October 13rd, 2006 23:07

Maybe you should also check www.comfortasp.de - nice .NET control which changes all standard controls to AJAX compatibile.

#15 - Test on November 14, 2006 18:23

Testing

#16 - Test on November 15, 2006 18:02

Test

#17 - Christian on November 30, 2006 10:34

Dette er en test

Test

#18 - Olle on December 12nd, 2006 23:09

Hello, this is a test!

#19 - Deepak on December 19, 2006 11:11

This is nice... Test

#20 - Hello, this is a test! on January 08, 2007 23:03

Hello, this is a test!

#21 - Raman on January 16, 2007 11:06

Really!! this is miraculous!!!!

#22 - Roger on January 19, 2007 12:23

Really nice! Maybe you should also have a look at www.jquery.com for a (IMHO) much better JavaScipt library...

#23 - cacooma on January 27, 2007 21:17

very nice job

#24 - fatih on March 14, 2007 11:38

very good work.

#25 - Mads Kristensen on April 14, 2007 11:06

En lille test

#26 - bleh on April 16, 2007 00:12

lknnol

#27 - Test on April 19, 2007 14:26

Test

#28 - test on April 30, 2007 21:36

test

#29 - vxcv on May 16, 2007 09:31

xcv

#30 - Nice on June 19, 2007 14:47

Nicely done.

#31 - vext on July 24, 2007 07:03

nicely don cool

#32 - www123456 on July 24, 2007 07:28

cool code you are great

#33 - test on August 06, 2007 15:11

test

#34 - Tim Mather on August 08, 2007 13:44

Sorry just testing your comments postback.

#35 - Tester on August 08, 2007 16:51

hello

#36 - test on August 16, 2007 14:42

test

#37 - test on September 04, 2007 08:58

test

#38 - test on September 28, 2007 05:04

very nice job

#39 - test on October 13rd, 2007 06:02

et

#40 - Reem on October 25, 2007 17:29

WOW, that's exciting!

#41 - aaaaaaa on October 29, 2007 10:59

aaaaa

#42 - asdf on October 29, 2007 11:02

asdf

#43 - www on October 29, 2007 12:06

www

#44 - Joan Harrison on November 24, 2007 12:20

Good work

#45 - Tester on December 04, 2007 15:35

Test

#46 - new tester on December 26, 2007 21:40

blah blah blah

#47 - greate job on January 24, 2008 10:53

great job

#48 - greate on January 24, 2008 10:53

greate

#49 - dfdfd on January 24, 2008 10:54

dfdfd

#50 - اختبار on January 25, 2008 02:27

عمل ممتاز

#51 - Chris Houston on February 04, 2008 10:00

Hi there, on your comment form you have a typo.. it should be " not shown"

Best regards,

Chris

#52 - df on March 06, 2008 14:27

dfsdfqsf

#53 - test on March 13rd, 2008 16:31

testing comment

#54 - test on March 26, 2008 12:53

test

#55 - Christian on April 22nd, 2008 20:44

Test

#56 - Saulens on April 27, 2008 16:43

Just to inform - your ImageGen seems not working, all generated labels on this site are empty.

#57 - Adam Barry on June 18, 2008 05:32

test

#58 - Darren on June 18, 2008 15:37

Test

#59 - x on September 30, 2008 22:01

xzc

#60 - Mikael on October 06, 2008 09:27

Fedt at se at du deler ud af din viden!!!

#61 - Mikael on October 06, 2008 09:35

You should consider using:
s = String.Format("{0} {1} {2}", param1, param2, param3);
Instead of :
s = param1.ToString() + " " + param2.ToString() +" " + param3.ToString();

makes the code more readable.

#62 - test on October 30, 2008 16:03

rtestst

#63 - csdfas on October 30, 2008 16:09

sdfdsf

#64 - asdasd on November 16, 2008 21:42

<Button>Can you click me? :)</Button>, i think you would want to remove all html tags in comments ;)

#65 - Ian on January 19, 2009 11:32

wow okay sound

#66 - rafa on January 27, 2009 16:52

it's nice... im also testing :)

#67 - faffy fuck on March 24, 2009 13:28

it smells! stuff it up your pooper!

#68 - dsf on May 04, 2009 10:57

dsfsdf

#69 - test on June 30, 2009 15:45

en test

#70 - Web Design Cornwall on July 16, 2009 22:05

Me too, me too!

#71 - fgbgfb on August 26, 2009 22:17

gbgb

#72 - prescription on September 06, 2009 22:00

At edrugsearch.com you can compare prices and buy prescription drugs online from verified online pharmacies.

#73 - Jakob on September 10, 2009 22:14

Really neat. Very useful too.

#74 - lala on September 30, 2009 03:39

dfdf

#75 - tet on September 30, 2009 11:05

test

#76 - Umbraco CMS Udvikler on September 30, 2009 11:08

Nice ajax module

#77 - web development on October 27, 2009 16:24

Quite inspiring,

This is a great article to help with ajax and umbraco,

Keep up the good work,

Thanks

#78 - buy pills on December 06, 2009 23:19

good=)

#79 - Pill checker on December 25, 2009 20:58

Nice blog Christian

#80 - Buy viagra Sydney on January 08, 2010 14:55

Buy viagra Sydney

#81 - кожаная мебель on January 16, 2010 08:59

This is a great article to help with ajax and umbraco

#82 - Car Rental in Ukraine on February 11st, 2010 17:19

Nice blog

 

Create a new comment

Recent Post

Tags