Last active
September 12, 2017 19:46
-
-
Save deanebarker/4778abb70b0458ed5aa8849a9f90613d to your computer and use it in GitHub Desktop.
The simplest comment implementation I could come up with using Episerver Social with the "Alloy" demo site
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<form method="post" action="/social/comments/add" id="commentForm"> | |
<input type="hidden" name="pageId" value="@Model.CurrentPage.ContentGuid"/> | |
<input type="text" name="author" placeholder="Your name..."/> | |
<textarea name="body" id="commentBody" placeholder="Your comment..."></textarea> | |
<br/> | |
<input type="submit" id="commentSubmitButton" disabled="disabled" style="opacity: 0.5;" value="Submit" /> | |
</form> | |
<div id="commentList"> | |
Loading comments... | |
</div> | |
<script> | |
$(function () { | |
var commentForm = $('#commentForm'); | |
var commentBody = $('#commentBody'); | |
var commentSubmitButton = $('#commentSubmitButton'); | |
commentBody.keyup(function () { | |
bodyEmpty = commentBody.val().length == 0; | |
commentSubmitButton.attr('style', 'opacity: ' + (bodyEmpty ? '0.5' : '1.0')); | |
commentSubmitButton.prop('disabled', bodyEmpty); | |
}); | |
commentForm.submit(function (e) { | |
e.preventDefault(); | |
$.ajax({ | |
type: commentForm.attr('method'), | |
url: commentForm.attr('action'), | |
data: commentForm.serialize(), | |
success: function (html) { | |
refreshComments(html); | |
document.getElementById("commentForm").reset(); | |
} | |
}); | |
}); | |
// This happens on page load... | |
$.ajax({ | |
type: "POST", | |
url: '/social/comments/get?id=@Model.CurrentPage.ContentGuid', | |
success: function (html) { | |
refreshComments(html); | |
} | |
}); | |
}); | |
function refreshComments(html) { | |
$('#commentList').html(html); | |
} | |
</script> |
Raw
CommentList.cshtml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
@using EPiServer.Social.Comments.Core | |
@using EPiServer.Social.Common | |
@model ResultPage<Comment> | |
@foreach (var comment in Model.Results) | |
{ | |
<div class="comment"> | |
<blockquote>@comment.Body</blockquote> | |
<div class="commentMeta"> | |
by @comment.Author | |
on @comment.Created.ToLocalTime().ToString("MMM dd, yyyy 'at' h:mm tt") | |
</div> | |
</div> | |
} | |
<style> | |
.comment { | |
margin-bottom: 2em; | |
} | |
.comment blockquote { | |
background-color: rgb(250,250,250); | |
padding: 1em; | |
margin-bottom: 2px; | |
} | |
.comment .commentMeta { | |
font-style: italic; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment