Emulating Digg Spy using AJAX.NET

In my latest project, I need to build a lead system for our sales people. It will work very similarly to the digg.com/spy application, so I took advantage of their model in order to learn AJAX.NET.

I decided to go with AJAX.NET, rather than the new Anthem, just to get my feet wet. I will make it work in Anthem next.

This is what my example will look like:

Beforesubmit
and after you click the button:

Aftersubmit
Using AJAX, it went and grabbed a new item, and inserted it to the top row, and removed the bottom row. Digg’s Spy is obviously nicer, but it does essentially the same thing.

Yes, there are TONS of ways I can optimize this and make it slimmer and nicer, but his was a proof of concept. I know I didn’t have to use a DataSet, but since I wanted to see it work, I used it. I also didn’t care about formatting a date in javascript.

Here is my code behind code:

public class test : System.Web.UI.Page
{
   private void Page_Load(object sender, EventArgs e) {
     Ajax.Utility.RegisterTypeForAjax(typeof(test));
   }

   [Ajax.AjaxMethod()]
   public DataSet GetLeads() {
        DataSet ds = new DataSet();
        DataTable dt = new DataTable("MyTable");
        ds.Tables.Add(dt);
        dt.Columns.Add("ID", typeof(int));
        dt.Columns.Add("Firstname", typeof(string));
        dt.Columns.Add("Date", typeof(DateTime));

        dt.Rows.Add(new object[] { 1, "steve", DateTime.Now });
        return ds;
   }

And here is my sample for the .aspx file:

<html>
<head>
<style>

.lead {
clear: both;
border-top: 1px solid #ccc;
}

#mostrecent { font-weight:bold; }

.column1, .column2, .column3 {
float: left;
display: block;
text-decoration: none;
}

.header span {
font-weight: bold;
background:#eee;
}

.column1 {
width: 6em;
text-align: center;
/*border: 1px solid green;*/
}

.column2 {
display: block;
width: 10em;
/*border: 1px solid blue;*/
}

.column3 {
display: block;
width: 20em;
/*border: 1px solid yellow;*/
}
.button {
clear: left;
}
</style>
</head>
<body> 

<form id="Form1" method="post" runat="server">
<div id="leads">
   <div class="header">
      <span class="column1">ID</span><span class="column2">Name</span><span class="column3">Date</span>
   </div>

   <div class="lead" id="mostrecent"><span class="column1">54</span><span class="column2">scott</span><span class="column3">1/1/2006</span></div>
   <div class="lead"><span class="column1">22</span><span class="column2">peter</span><span class="column3">1/2/2006</span></div>
   <div class="lead"><span class="column1">12</span><span class="column2">sam</span><span class="column3">1/3/2006</span></div>
   <div class="lead"><span class="column1">44</span><span class="column2">sally</span><span class="column3">1/4/2006</span></div>
   <div class="lead"><span class="column1">51</span><span class="column2">paul</span><span class="column3">1/5/2006</span></div>
</div>
<div class="button">
   <input type="button" onclick="buttonClick()" value="blah"/>
</div>

<script language="javascript">

function buttonClick() {
   test.GetLeads(GetLeads_CallBack);
}

function GetLeads_CallBack(response){

//SBE 02/08/2006:  create the div element
var newLead = document.createElement('div');

//SBE 02/08/2006:  set its class to lead
newLead.setAttribute('class', 'lead');

var leadTable = document.getElementById('leads');
var rows = leadTable.getElementsByTagName('div');
var numrows = rows.length;
var html = "";

//SBE 02/08/2006:  make sure we got a dataset to loop through
var ds = response.value;
if(ds != null && typeof(ds) == "object" && ds.Tables != null){
   var s = new Array();

   s[s.length] = "<span class='column1'>" + ds.Tables[0].Rows[0].ID + "</span>";
   s[s.length] = "<span class='column2'>" + ds.Tables[0].Rows[0].Firstname + "</span>";
   s[s.length] = "<span class='column3'>" + ds.Tables[0].Rows[0].Date + "</span>";

   html = s.join("");
}
else{
   alert("Error. [3001] " + response.request.responseText);
}

//SBE 02/08/2006:  assign the html to the new lead
newLead.innerHTML = html;

oldItem = document.getElementById('mostrecent');
leadTable.insertBefore(newLead, oldItem);
newLead.setAttribute('id', 'mostrecent');
oldItem.setAttribute('id', '');

// remove last row
leadTable.removeChild(rows[rows.length-1]);

}
</script>
</form> 

</body>
</html>