More Wally - Wallace B. McClure : AJAX

jQuery Templates and jQuery Mobile

wallym — Wed, 15 Dec 2010 01:22:00 GMT

I've been playing with the beta jQuery Templating engine. I started to play with jQuery Mobile over the weekend. Basically, I wanted to display information from a web service, put it into a ul/li list and have it display information. I could call the web service and get data back. Everything was working just fine in that I could get the data back. Unfortunately, when I bound the data, it just looked like a ul/li list. I knew I need to do something, but danged if I could figure out what I was doing wrong. Thankfully, my buddy Dave Ward pointed out what the problem was. I needed to refresh my listview. Thanks to Dave, here's the code that I came up with: The one piece that I was missing was the listview's refresh method.

    <ul id="OptionContainer" data-role="listview" data-theme="a">

    </ul>

    <script id="userTemplate" type="text/x-jQuery-tmpl">
        <li class="ul-li-icon">
            <a href="">
            <img src="@Href("~")images/users.png" height="30px" />
            ${UserName} ${FirstName} ${MiddleName} ${LastName}
            </a>
        </li>
    </script>

    <script language="javascript" type="text/javascript">
        jQuery(function ($) {
            $.ajax({
                type: "POST",
                url: "@Href("~")Services/Users.cshtml",
                dataType: "json",
                contentType: "application/json",
                success: function (outPut) {
                    Users(outPut);
                },
                error: function (xml, err) {
                    alert(xml.responseText);
                    //for(m in xml)
                    //    alert(m);
                    //alert("err:" + err);
                }
            });

        });
        function Users(result){
            $("#userTemplate").tmpl(result).appendTo("#OptionContainer");
            $("#OptionContainer").listview("refresh");
        }

Speaking at DevConnections Las Vegas Fall 2010

wallym — Tue, 19 Oct 2010 21:30:00 GMT

I'm not sure if I mentioned this before, but I wanted to say that I am honored to be speaking at DevConnections Las Vegas, Fall 2010. I will be speaking on:

I'm very excited about this.

Speaking in Huntsville on Ajax, UpdatePanel, Webforms, and Ajax Controltoolkit

wallym — Tue, 14 Sep 2010 09:30:00 GMT

I'm excited. I'll be speaking at the Huntsvlle, AL VS.NET UserGroup Tuesday evening. The subject is Ajax, Updatepbal, Webforms, and the Ajax Control Toolkit. I'm excited about this.

VSLive!Redmond Presentation - ASP.NET 4 AJAX - UpdatePanel, WebForms, and AJAX Control Toolkit

wallym — Sun, 15 Aug 2010 06:45:00 GMT

I've just posted the presentation for my talk at VSLive!Redmond 2010 on "ASP.NET 4 AJAX - UpdatePanel, WebForms, and AJAX Control Toolkit." - Enjoy

Source Code

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

wallym — Wed, 29 Apr 2009 10:00:00 GMT

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.

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 ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

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

<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>

<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" />

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>

<td>

<thead>

<tr>

<th>

User Name

</th>

<th>

Status

</th>

<th>

Number

</th>

</tr>

</thead>

<tbody id="twitterFriendsTimeLineListView"

class="sys-template" >

<tr>

{{UserName}}<br />

</span>

</td>

</td>

<td>

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

</td>

</tr>

<tr>

<td>

</td>

<td>

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

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

</td>

</tr>

<tr>

2 way data binding<br />

{ binding Status }<br />

</td>

</tr>

<tr>

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

</td>

</tr>

</tbody>

</table>

</td>

<td>

</div>

</td>

</tr>

</table>

</asp:Content>

Images:

Binding Links with ASP.NET 4.0 AJAX

wallym — Thu, 02 Apr 2009 02:15:00 GMT

I'm working on binding data from twitter into a grid with ASP.NET 4.0 AJAX in my Windows Azure application. One thing I need to do is to create bound links. Off the top of my head, I'd just use an <a href='url/{{ link }}'>........</a> Well, that wasn't the right thing. I looked at my example and started thinking about what was happening. The piece that I started thinking about more was the sys:attribute="......" type syntax. I started thinking that this was how to bind data to an attribute in a tag. I tried <a sys:href="{{ 'url' + link }}">.......</a>. Low and behold, the sytax I tried worked. I was getting links that worked.

ASP.NET 4.0 AJAX - Caching Data on the client

wallym — Mon, 23 Mar 2009 10:00:00 GMT

One of the interesting new objects in ASP.NET 4.0 AJAX is the DataView. its a client side object which is associated with a display tag of some type. In my examples, I've been using a table. I assume it could be anything. One of the features of the DataView is the ability to call an event each time a record is bound to the DataView. This is similar in concept to the server side asp.net grids which have the OnRowDataBound events (or similarly named). One of the common scenarios that I see is to have a drop down list box inside of a record. This could represent typically anything. As I was working through the DataView, I thought about some type of efficient way to cache the data. In my scenario, the data is constant across the rows, so caching it is fairly easy. Anyway, here goes:

I call the method to get my data first before doing anything else in my page load client side event:
TwitterService.GetFriends(userName, StoreFriendsCallBack);
TwitterService.GetUserTimeLine(userName, TwitterServiceCallBack, TwitterServiceFailure);
In side of my StoreFriendsCallBack method, all I do is store my data to a global js variable I call dd.
    function StoreFriendsCallBack(result) {
        dd = result;
    }
Finally, I test to see if my dd (dropdown) object has any data or not. If it has data, I use it, if not, then I go ahead and call back to the server to get my data.
        if (dd == null) {
            TwitterService.GetFriends("More_Wally", FriendsCallBack, null, userCtx);
        }
        else {
            DisplaySelect(dd, userCtx);
        }

ASP.NET 4.0 Preview 4 works fine in other browsers

wallym — Sun, 22 Mar 2009 19:45:00 GMT

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.

IE8:

Firefox 3:

Chrome 2 beta:

There may be something that doesn't work right outside of IE, but I haven't seen it so far.

ASP.NET 4.0 AJAX - Dynamic update to the DOM

wallym — Thu, 19 Mar 2009 22:00:00 GMT

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.

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

Twitter API - Sending a Direct Message in C#

wallym — Thu, 19 Mar 2009 11:00:00 GMT

I tried writing some code to send a direct message using the Twitter API. It was a FAIL. I did some searching in google, and found this method below listed in a google group. I didn't write it, but it works, so enjoy. I plugged the method into my WCF Service and it just worked.

         [OperationContract]
        public void DMSend(string username, string recipient, string tweet)
        {
            HttpWebRequest req = (HttpWebRequest)WebRequest.Create("http://twitter.com/direct_messages/new.xml?user=" + recipient + "&text=" + tweet);
            req.Method = "POST";
            req.Credentials = new NetworkCredential(username, password);
            req.ContentLength = 0;
            req.ContentType = "application/x-www-form-urlencoded";
            WebResponse response = req.GetResponse();
        }

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

wallym — Wed, 18 Mar 2009 11:00:00 GMT

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.

        [OperationContract]
        public Friends[] GetFriends(string username)
        {
            string url = "http://twitter.com/statuses/friends.xml";
            string user = Convert.ToBase64String(System.Text.Encoding.UTF8.GetBytes(username + ":" + password));
            HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(url);
            Friends frd;
            List<Friends> lf = new List<Friends>();

            request.Method = "POST";
            request.Credentials = new NetworkCredential(username, password);
            WebResponse response = request.GetResponse();
            StreamReader reader = new StreamReader(response.GetResponseStream());
            string responseString = reader.ReadToEnd();
            reader.Close();
            XmlDocument xmld = new XmlDocument();
            xmld.LoadXml(responseString);
            XDocument document = XDocument.Parse(responseString);

            foreach(XmlNode xmln in xmld.SelectNodes("users/user"))
            {
                frd = new Friends();
                frd.id = Convert.ToInt32(xmln["id"].InnerText);
                frd.name = xmln["name"].InnerText;
                frd.screen_name = xmln["screen_name"].InnerText;
                lf.Add(frd);
            }
            return (lf.ToArray());
        }

My custom object which I am streaming back looks like this:

    [DataContract]
    public class Friends
    {
        [DataMember]
        public string name { get; set; }
        [DataMember]
        public string screen_name { get; set; }
        [DataMember]
        public int id { get; set; }
    }

ASP.NET 4.0 AJAX - Pseudo Columns

wallym — Mon, 16 Mar 2009 22:00:00 GMT

With the ASP.NET 4.0 AJAX previews, there is the concept of a pseudo column. This is similar in concept to Oracle's rownum and rowid columns that are returned in a query. The two columns that ASP.NET 4.0 AJAX when doing databinding are $index and $dataItem.

$index is an integer which represents the current record in the data binding operation.

$dataItem are the columns that are available in the data binding operation.

ASP.NET 4.0 AJAX Preview Release 4 Setup

wallym — Mon, 16 Mar 2009 21:30:00 GMT

I downloaded and setup the javascript files for ASP.NET 4.0 AJAX Preview Release 4. This release was put up last Thursday night / Friday morning. Since I had a talk on Saturday at the Atlanta Code Camp on this subject, I decided to take the plunge and get my code moved over and running on it to show the latest and greatest running. While the intelligence of that decision can be debated for a long time, I got it done. I wanted to share some stuff about the setup of the product. There are three sets of javascript files that are in the download, previously, there were two sets of files. The new file is MicrosoftAjax.js. This file is a little bit surprising because there is a file in the base Microsoft ASP.NET AJAX called this. I read the instructions. The instructions were a little bit blurry on this setup subject. They sort of implied that the MicrosoftAjax.js files was only needed if you were NOT using the ASP.NET 3.5 Script Manager. Any way, I found this to not be true. To get things setup correctly, this is the setup I found that worked.

<asp:ScriptManager ID="sm" runat="server">
    <Scripts>
        <asp:ScriptReference Name="MicrosoftAjax.js" Path="~/js/MicrosoftAjax.js" />
        <asp:ScriptReference Path="~/js/MicrosoftAjaxAdoNet.debug.js" />
        <asp:ScriptReference Path="~/js/MicrosoftAjaxTemplates.debug.js" />
    </Scripts>
    <Services>
        <asp:ServiceReference Path="~/TwitterService.svc" /> <-- this is my file, so you probably don't need it.
    </Services>
</asp:ScriptManager>

Bertrand LeRoy suggested this setup below. Given that he works on the ASP.NET team, I'll take his suggestion. :-)

<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>

I hope that this helps you out in the area of getting the preview setup.

ASP.NET 3.5 Service Pack 1 Wrox Blox

wallym — Fri, 26 Dec 2008 15:00:00 GMT

My eBook ASP.NET 3.5 Service Pack 1 Wrox Blox is now for sale. Please buy 3 or 4 copies for the ones you love.

Seriously, there is a lot of good solid material on the new features, especially AJAX History, Routing, and other new features. Please check it out.

Findlay, OH User Group

wallym — Mon, 20 Oct 2008 14:52:00 GMT

I'll be speaking at the Findaly, OH user group on Tuesday (10/21) on the ASP.NET AJAX UpdatePanel. If you are in the area, please come by.