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.
-
-
ASP.NET 4.0 AJAX Setup.
-
Running Application.
-
-
Pseudo Columns.
-
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:
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 ID="Content1" ContentPlaceHolderID="head" runat="server">
</
asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<
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" />
</Services>
</
asp:ScriptManager>
<
asp:TextBox ID="Status" runat="server" TextMode="MultiLine" Rows="2" Columns="70" /><br />
<
input type="button" ID="btnSubmit" onclick="SubmitStatus()" value="Submit Status" />
<
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);
};
</script>
<
input type="button" id="btnIterate" value="Iterate" onclick="IterateDV()" />
<
table>
<tr valign="top" align="left">
<td>
<
table id="tblStatus" ><thead>
<
tr>
<th>
User Name
</th>
<th>
Status
</th>
<th>
Number
</th>
</
tr></thead>
<
tbody id="twitterFriendsTimeLineListView" class="sys-template" >
<
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>
</td>
</
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 + ')' }}" />
</td>
</
tr>
<
tr>
<td colspan="2">
2 way data binding<br />
{ binding Status }<br />
<input type="text" value="{ binding Status }" />
</td>
</
tr>
<
tr>
<td colspan="2">
<div code:before="if (i != 19) {" code:after="}">break</div>
<hr width="98%" code:if="$index != 19" />
</td>
</
tr></tbody>
</
table>
</td>
<td>
<div id="Output">
</div>
</td>
</tr>
</
table>
</
asp:Content>
Images:
