Coding Conundrums

So I have been using bookmarklets for a while and decided I would like to make one of my own. So first I decided what action I do a lot that I could make a bookmarklet for. I came up with creating one to search Amazon products.

Bookmarklet Here – Drag bookmarklet into your bookmark bar to add.

. The idea is to see a product name on a page.

Highlight the name.

Then click the bookmarklet to open a window to search amazon.

Today I will be speaking at the Baton Rouge .Net User Group (or BRDNUG). I will be talking about consuming ASP.Net web services with jQuery andalso calling  page methods. I plan to have a blog post up soon with notes from my presentation. I just found out I was going to do this yesterday evening, so needless to say it was a long night.

Where: Lamar Advertising

When: 5:45 PM – 8:00 PM

Close

Demo

This will be a collection of Javascript functions I find handy. Feel free to reccomend any you may come across. Thanks.

1. Getting querystring params: – This is native javascript and uses no Reg-Ex!

1
2
3
4
5
6
7
8
9
10

function querySt(key) {
            fullQueryString = window.location.search.substring(1);
            queryStringArray = fullQueryString.split("&");
            for (i = 0; i < queryStringArray.length; i++) {
                keyValuePair = queryStringArray[i].split("=");
                if (keyValuePair[0] == key) {
                    return keyValuePair[1];
                }
            }
        }

Everyone knows that web2.0 is quickly becoming the new web standard. With CSS3, HTML5, and JavaScript becoming standards rather than just options, web developers are now beginning to build web apps that many never thought they would see in the browser.

Today I want to talk a little bit about AJAX in ASP.Net. First let me say that I am an ASP.Net web developer. I learned to make web apps in ASP.Net before I even knew what most of the controls corresponding HTML tags were. So once I began trying to use AJAX in my sites/apps, the first way I began to get data was through some response.write and code-behind hacks. I would do all  my processing in the code behind, format my HTML string I wanted to return, and use a jQuery $.get call to fetch the HTML the response.write would output.

I know it was ugly, but I was learning.

As my data needs began to get bigger and bigger, I had to find a more efficient way to do this. I had looked at JSON a little, and had seen how a lot of the jQuery Plugins I used would implement JavaScript objects to affectively manipulate data. As I began looking more into this, I quickly determined this was the way I needed to send my data across the wire.

Now how?

Because I had now had much experience with ASP.Net web services, I quickly turned to the old hack it up method again. This meant making my JSON objects and arrays of objects in a code-behind of a page, and sending them across as a string. This turned out to be a very frustrating way to handle this, and again I knew there had to be a better way. Digging a little more into I learned that if you use a web service, ASP.Net will greatly simplify the process. I will explain in a little more detail.

First lets start with the web service..

Begin by creating a new ASP.Net web service (ASMX) file. Open the code behind and add the following ScriptService attribute to allow ASP.Net to know how to handle the code.

1
2

Public Class QuickLookup
Inherits System.Web.Services.WebService End Class

Then i create a simple structure to send the data back. The real beauty is here because ASP.Net will automatically create JSON objects and return them.

1
2
3
4
5
6
7

Public Structure FormData
        Public property1 As String
        Public property2 As String
        Public property3 As Double
        Public property4 As Integer
        Public earned As Double
    End Structure

Because I am using a master page and don’t want to register this script with all pages that inherit from it, I will add a reference to the script in the code-behind of this single .aspx page. By doing this, ASP.Net will automatically create a proxy class for the object that can be accessed through the pages javascript.

1
2
3
4

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim sman As Web.UI.ScriptManager = ScriptManager.GetCurrent(Me)
        sman.Services.Add(New System.Web.UI.ServiceReference("PATH TO ASMX FILE"))
    End Sub

Next, add the function to the code behind of your web service file

1
2
3
4
5
6
7
8
9
10

    Public Function SearchCustomForms(ByVal FormName As String) As List(Of FormData)
        Dim searchResults As New List(Of FormData)
            Dim thisForm As New FormData
            thisForm.property1 = "Something"
            thisForm.property2  = "Something"
            thisForm.property3  = 5
            thisForm.property4  = "Something"
            searchResults.Add(thisForm)
        Return searchResults
    End Function

Then with a little jQuery magic, you can access the objects like so:

1
2
3
4
5
6
7
8
9
10
11

$(function() {
        $('#btnGetForms').click(function() {
            QuickLookup.SearchCustomForms($("#txtSearch").val(),Pass, Fail, null);
        });
    });
    function Pass(result, context) {
        alert(result[0].property1);
     };
    function Fail(result, context) {
        alert('Fail - ' + result);
    };

The Pass Fail function calls are REALLY important here. ASP.Net automatically creates this, so you must implement it. The Pass is the function that will be called on a successful AJAX call, the fail.. well you get the idea. The last null value is the context.. I am still learning this, so check back later for updates. As of now i am not using this parameter but need to include it to work. Any other parameters you need to send, like the value of the textbox I am sending, add to the beginning of the function call.
Well blog world. I have some work to get back to. As always, all comments or questions are welcome.