Contents tagged with AJAX

  • 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 4.0 AJAX - Dynamic update to the DOM

     

    As I was doing my talk on Saturday at the Atlanta Code Camp on data binding at the Atlanta Code Camp, there was a question about the  DOM being updated.  The question arose wondering if the DOM itself was really being updated.  Thanks to Paul Lockwood, he said that Firebug in Mozilla could tell us if it was being updated or not.  I pulled out FF 3 with Firebug, opened the page, started to drill through the code, and bang, there was the grid.  I did not know that Firebug had that feature.  Thanks to Firebug for showing that and thanks to the ASP.NET AJAX team for dynamically updating the DOM.

     

    dynamic dom

    PS. My buddy Dave Ward told me that it's possible for Firebug to display DOM changes only.

    Original Url: http://morewally.com/cs/blogs/wallym/archive/2009/03/19/asp-net-4-0-ajax-dynamic-update-to-the-dom.aspx

  • ASP.NET 4.0 Preview 4 works fine in other browsers

    When I first worked with the original ASP.NET 2.0 AJAX, some folks told me that it only worked with IE, which was wrong then.  I decided to take a look at ASP.NET 4.0 Preview 4 in Chrome and Firefox.  I looked at my an example dataview i'm working with in my azure application.  Low and behold, it looked the same in IE8, Firefox 3, and Chrome 2 beta.  Here's a display of all of them.

  • Twitter API - Get a list of your friends in C#

    I needed to call the Twitter API and get a list of friends.  I thought I could do something similar to getting a list of posts, but alas, I had some stupid error in my linq to xml code.  I futzed around with it for days to no avail.  Finally, I decided it was just easier to iterate through the XML using an XmlNode and fill my objects that way.  Hey, it just worked.  Like my previous example, this code uses C# and is in a WCF Service.  Note: As displayed, the code doesn't work, you will have to supply a password.