ASP.NET Podcast Show #140 - ASP.NET 4.0 Ajax Databinding

Original Url: http://aspnetpodcast.com/CS11/blogs/asp.net_podcast/archive/2009/04/28/asp-net-podcast-show-140-asp-net-4-0-ajax-databinding.aspx

Subscribe to Everything.

Subscribe to WMV.

Subscribe to M4V.

Subscribe to MP3.

Download WMV.

Download M4V.

Download MP3.

Show Notes:

• First in a series of videos on an app I am creating that runs on Windows Azure.
• Would you like to be involved in the app? If so, contact me through Email at wbm [at] wallym dot com or Twitter @wbm.
• This is a preview, things will change. link: http://aspnet.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=24645
• ASP.NET 4.0 AJAX Setup.
• Running Application.
• Some javascript regex from Simon Whatley. http://www.simonwhatley.co.uk/
• Pseudo Columns.
• $index.
• $dataItem.
• Databinding and Caching. Its probably better to chain the requests instead of running them in parallel, which is what my code allows to happen.
• Upcoming Events:
• INETA Live Webcasts with Rachel Appel and Steven Andrews.
• geekSpeak with Jennifer Marsman and Glen Gordon.
• TechEd - I won't be there, but it will be great.
• State of Indiana Tour in June with INETA.
• Ft. Wayne.
• South Bend.
• Evansville.
• CodeStock in June.
• devLink in August.

PS. I started getting sick about 5-10 minutes into the show, so if I sound somewhat confusing after that, I apologize.

Source Code:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="Content.aspx.cs" Inherits="TwitterApp.Content" %>

</asp:Content>

<asp:ScriptManager ID="sm" runat="server">

<Scripts>

<asp:ScriptReference ScriptMode="Inherit" Name="MicrosoftAjax.js" Path="~/js/MicrosoftAjax.js" />

<asp:ScriptReference ScriptMode="Inherit" Path="~/js/MicrosoftAjaxAdoNet.js" />

<asp:ScriptReference ScriptMode="Inherit" Path="~/js/MicrosoftAjaxTemplates.js" />

</Scripts>

<Services>

<asp:ServiceReference Path="~/TwitterService.svc" />

</asp:ScriptManager>

<asp:TextBox ID="Status" runat="server"

<input type="button" ID="btnSubmit"

<hr width="98%" />

<script language="javascript" type="text/javascript">

var userName = "More_Wally";

function SubmitStatus() {

var Status = $get('<%=Status.ClientID %>');

var userStatus = Status.value;

Status.value = "";

TwitterService.SubmitUserStatus(userName, userStatus,

TwitterPostCallBack);

}

function TwitterPostCallBack(result) {

TwitterService.GetUserTimeLine(userName,

TwitterServiceCallBack, TwitterServiceFailure);

}

var dv;

function pageLoad() {

var tblS = $get("tblStatus");

var uiElement = $get("twitterFriendsTimeLineListView");

dv = new Sys.UI.DataView(uiElement);

dv.add_itemCreated(fillExtra);

dv.initialize();

TwitterService.GetFriends(userName, StoreFriendsCallBack);

TwitterService.GetUserTimeLine(userName, TwitterServiceCallBack, TwitterServiceFailure);

}

var dd;

function StoreFriendsCallBack(result) {

dd = result;

}

function TwitterServiceCallBack(result) {

dv.set_data(result);

//dv.updated();

//tblStatus.style.visibility = "visible";

}

function FriendsCallBack(result, userCtx) {

dd = result;

DisplaySelect(dd, userCtx);

}

function DisplaySelect(data, userCtx) {

var i;

var opt;

var sel = $get("to" + userCtx.index);

sel.options.add(new Option("", ""));

for (i = 0; i < data.length; i++) {

opt = new Option(data[i].name, data[i].screen_name);

sel.options.add(opt);

}

}

var i = 0;

function fillExtra(sender, Args) {

var ctx = Args.get_templateContext();

var dt = Args.get_dataItem();

var strOut = "";

var strReturn = "<br />";

var Out = $get("Output");

var userCtx =

{

index: ctx.index

}

if (i == 0) {

strOut = "ctx<br />";

for (m in ctx) {

strOut += m + strReturn;

}

strOut += "<br/>ctx.nodes[0]<br />";

for (m in ctx.nodes[0]) {

strOut += m + strReturn;

}

strOut += "<br/>Data Item:<br />";

for (m in dt) {

strOut += m + strReturn;

}

Out.innerHTML = strOut;

}

i++;

if (dd == null) {

TwitterService.GetFriends("More_Wally", FriendsCallBack, null, userCtx);

}

else {

DisplaySelect(dd, userCtx);

}

}

function TwitterServiceFailure(result) {

alert("An error occurred");

}

function IterateDV() {

var count = dv.get_items().length;

var rw = "";

var controlId;

var ctx = dv.get_templateContext()

for (i = 0; i < count; i++) {

if (i == 0) {

//rw = dv.get_items()[i].elements[0].childNodes[2].childNodes[0].innerHTML;

rw = $get("Number" + i).innerHTML;

}

else {

rw += "," + $get("Number" + i).innerHTML;

}

}

alert(rw);

}

function SendMessage(i) {

var userName = "More_Wally";

var sendTo = $get("to" + i).value;

var userStatus = $get("message" + i).value;

TwitterService.DMSend(userName, sendTo, userStatus,

TwitterPostCallBack, TwitterServiceFailure);

}

String.prototype.parseURL = function() {

var URL = /[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/;

var matches = this.match(URL);

var stringToReplace = this;

while (matches != null ) {

var m = matches[0];

var url = "<a href='" + m + "'>" + m + "</a>";

stringToReplace = stringToReplace.replace(m, url);

matches = stringToReplace.substring(stringToReplace.indexOf(url) +

url.length).match(URL);

}

return (stringToReplace);

};

String.prototype.parseUsername = function() {

var userName = /[@]+[A-Za-z0-9-_]+/;

var matches = this.match(userName);

var stringToReplace = this;

while ( matches != null ) {

var m = matches[0];

var finalMatch = m.replace("@", "");

var url = "<a href='http://twitter.com/" + finalMatch + "' target='_new'>" + m + "</a>";

stringToReplace = stringToReplace.replace(m, url);

matches = stringToReplace.substring(stringToReplace.indexOf(url) + url.length).match(userName);

};

return (stringToReplace);

};

String.prototype.parseHashtag = function() {

var hashTag = /[#]+[A-Za-z0-9-_]+/;

var matches = this.match(hashTag);

var stringToReplace = this;

while (matches != null) {

var m = matches[0];

var finalMatch = m.replace("#", "%23");

var url = "<a href='http://search.twitter.com/search?q=" + finalMatch +

"' target='_new'>" + m + "</a>";

stringToReplace = stringToReplace.replace(m, url);

matches = stringToReplace.substring(stringToReplace.indexOf(url) +

url.length).match(hashTag);

};

return (stringToReplace);

};

<input type="button" id="btnIterate"

<table>

<tr valign="top" align="left">

<table id="tblStatus" >

<tr>

<th>

User Name

</th>

<th>

Status

</th>

<th>

Number

</tr>

<tbody id="twitterFriendsTimeLineListView"

<tr>

<td valign="top" align="left">

{{UserName}}<br />

<img sys:src="{{ ProfileImage }}" /><br />

<span style="font-size:smaller">

{{ StatusDate }}

</span>

</td>

<td valign="top" align="left">

<span code:after="$element.innerHTML=Status.parseURL().parseUsername().parseHashtag()" />

<!--{{Status.parseURL().parseUsername().parseHashtag()}}--></td>

<td>

<div sys:id="{{ 'Number' + $index }}">{{ $index }}</div>

<div code:if="($index % 2) == 0">even</div>

<div code:if="($index % 2) == 1">odd</div>

</tr>

<tr>

<td>

<select sys:id="{{ 'to' + $index }}" ></select>

<input type="text" sys:id="{{ 'message' + $index }}" size="50" />

</td>

<td>

<input type="button" sys:id="{{ 'btn' + $index }}"

value="Send a direct message" onclick="{{ 'SendMessage(' + $index + ')' }}" />

</tr>

<tr>

<td colspan="2">

2 way data binding<br />

{ binding Status }<br />

<input type="text" value="{ binding Status }" />

</tr>

<tr>

<td colspan="2">

<div code:before="if (i != 19) {" code:after="}">break</div>

<hr width="98%" code:if="$index != 19" />

</tr>

</table>

</td>

<td>

<div id="Output">

</div>

</td>

</table>

</asp:Content>

Images: