Challenge:
Before couple of weeks back, was trying to implement Facebook like live updates in ASP.NET and JSON and while doing that, faced couple of challenges. Which I thought you may find interesting!
Would like to share challenges/tasks with you. So, you can also get benefited by it when you face them!
Solution:
- Convert Generic List to JSON : Had a generic list, which comes from DB, and needs to pass it on to UI layer, in a JSON format, used System.Web.Script.Serialization.JavaScriptSerializer class for this [using System.Web.Script.Serialization]:
[sourcecode language=”csharp”]
// ……….
List<UserUpdate> userUpdates = new List();
while (sqlDataReader.Read())
{
UserUpdate userUpdate = new UserUpdate();
userUpdate.UserID = Convert.ToInt32(sqlDataReader["ID"]);
userUpdate.UpdateMessage = Convert.ToString(sqlDataReader["UpdateMessage"]);
userUpdates.Add(userUpdate);
}
JavaScriptSerializer javascriptSerializer = new JavaScriptSerializer();
string JSONString = javascriptSerializer.Serialize(userUpdates);
return JSONString;
[/sourcecode]
Just a note : If you are doing Response.Write then please do change your page’s content-type to JSON — Response.ContentType = “application/json; charset=utf-8”;
- After every 2 second update right side data using AJAX and JSON : There will be a sidebar sitting in right side of a page and after every X seconds, it should get updated with latest updates from application:
To do this, added one UL tag on page, which will hold all data:
<ul id=”user-updates”>
</ul>
Added JavaScript on page, which checks for update every 2 second and prep ends to UL tag:
[sourcecode language=”javascript”]
<script type="text/javascript">
var url = "UserUpdates.aspx"; //This page returns JSON
var userID;
$(document).ready(function() {
// Initially all data
$.getJSON(url, function(result) {
$.each(result, function(i, field) {
userID = field.UserID;
$("
<ul>
<li><i class=’icon-text-width’>" + field.UpdateMessage + "</li>
</ul>
")
.hide().prependTo(‘#user-updates’).slideDown("slow");
});
});
setInterval(function() {
$.getJSON(url, { UID: userID }, function(result) {
$.each(result, function(i, field) {
userID = field.UserID;
$("<li><i class=’icon-text-width’></i><span>" + field.UpdateMessage + "</span> </li>")
.hide().prependTo(‘#user-updates’).slideDown("slow");
});
});
}, 2000);
});
[/sourcecode]
- JQUERY Prepending an LI to an UL with Animation — When any new LI gets added to UL, it should come as an Animation – and invested, lot of time to achieve this requirement and finally, following link worked! [Thanks!]
http://stackoverflow.com/questions/2883154/jquery-prepending-an-li-to-an-ul-with-animation
- Rather than showing DateTime wanted to say “Two days ago/2 seconds ago” etc. message : – Following threads helped to do so! [Thanks!]
C# solution : http://stackoverflow.com/questions/11/how-do-i-calculate-relative-time
JavaScript based solution : http://www.aspdotnet-suresh.com/2012/02/jquery-display-time-in-facebook-twitter.html
Simple, yet powerful? Learnt a lot!
I would suggest all of you, to take a simple project for fun and try to implement it, Trust me, It will be full of fun! And you will learn a lot, and most IMP. these learnings will not go away from you for a long time. Because you learnt it with fun! Have you forgotten how to play Cricket? How to Ride a bicycle etc.? Because you learnt it funny way not in a pressurized way! 🙂
Also, If possible do blog your learnings!
Happy Coding! 🙂