Skip to content
July 29, 2013 / kiranpatils

JQuery, JSON with ASP.NET notes

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]:
// ..........
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;

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:

<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);

});
  • 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!🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: