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 + "&Width=484&Height=30&FontSize=18&" +
"FontColor=ffba00&BgColor=333333&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