Archives

Archives / 2009 / April
  • 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:

    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:

  • ASP.NET Podcast Show #139 - David Penton and Pat Helland on Cloud Computing - audio

    Subscribe to everything.

    Subscribe to MP3 audio.

    Download.

    Original Url: http://aspnetpodcast.com/CS11/blogs/asp.net_podcast/archive/2009/04/01/asp-net-podcast-show-139-david-penton-and-pat-helland-audio.aspx

    Show Notes: