Scott Allen at OdeToCode has a very nice, concise article on What ASP.NET Developers Should Know About JavaScript – I highly recommend reading it for anyone doing javascript development.

Regardless of what server side development language you use, javascript in the web development world is a extremely powerful and flexible language to take advantage of.  I’ve spoiled myself by using jQuery, but understanding these principles will apply to any javascript framework or application.

Dave Ward at Encosia has made a great post on common ‘gotchas’ with jQuery and ajax/json:

http://encosia.com/2008/06/05/3-mistakes-to-avoid-when-using-jquery-with-aspnet-ajax/#comment-31182

(This includes calling webservices/pagemethods)

See also his post on jQuery + ajax on building a client side repeater:

http://encosia.com/2008/06/26/use-jquery-and-aspnet-ajax-to-build-a-client-side-repeater/

I really like the use of jTemplate – as a fan of templates such as NVelocity, this is a powerful way to build UI without the heaviness of .net controls!

As always, Encosia has some great content available – thanks Dave!

It’s fairly easy to pass querystring’s to silverlight.

IDictionary<string, string> queryStrings  = System.Windows.Browser.HtmlPage.Document.QueryString;
            

So, for my example, if a querystring is passed in I grab the values and do the search, else get all and bind to my silverlight datagrid

IDictionary<string, string> queryStrings  = System.Windows.Browser.HtmlPage.Document.QueryString;
            proxy = new One.PilotStatService.PilotStatsServiceClient();
            proxy.GetPilotStatsCompleted += new EventHandler<One.PilotStatService.GetPilotStatsCompletedEventArgs>(proxy_GetPilotStatsCompleted);
            proxy.GetPilotStatsByNameCompleted += new EventHandler<One.PilotStatService.GetPilotStatsByNameCompletedEventArgs>(proxy_GetPilotStatsByNameCompleted);
            proxy.SavePilotCompleted += new EventHandler<System.ComponentModel.AsyncCompletedEventArgs>(proxy_SavePilotCompleted);

            if (queryStrings.Count > 0 && !string.IsNullOrEmpty(queryStrings["Name"]))
                proxy.GetPilotStatsByNameAsync(queryStrings["Name"]);
            else
                proxy.GetPilotStatsAsync();

An alternative is to pass parameters in from the page controls ‘inputparameters’ collection.  From the aspx silverlight control:

asp:Silverlight ID=”Xaml1″ InitParameters=”Name=JG53″ runat=”server” Source=”~/ClientBin/One.xap” MinimumVersion=”2.0.30523″ Width=”100%” Height=”100%”

In this case, I’ve hardcoded a default value: InitParameters=”Name=JG53″

If you are using the straight html method vs. the aspx control:

<object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="100%" height="100%">
            <param name="source" value="ClientBin/One.xap"/>
            <param name="onerror" value="onSilverlightError" />
            <param name="background" value="white" />

            <param name="initParams" value="Name=JG53" /> 

            <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
                 <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
            </a>
        </object>

You capture these values in the silverlight ‘app’ (App.xaml.cs):

private void Application_Startup(object sender, StartupEventArgs e)
        {
            string inputParm = e.InitParams["Name"];
            this.RootVisual = new Page(inputParm);
        }

I modified the Page constructor to accept the parameter:

public Page(string inputParam)

So, let’s say I don’t want this hardcoded, ie. I receive the value from a control, etc… with the Silverlight aspx control I can access the inputParameter property.  For example, with a asp:Silverlight control id of ‘Xaml1′:

<script runat="server">
   protected void Page_Load(object sender, EventArgs e)
   {
       Xaml1.InitParameters = "Name=JG53";
   }
</script>

A tad off topic, but another interesting feature of Silverlight is the ability to manipulate the html dom within managed code! 

A simple example, building off the above:  Let’s add a simple input html control to the page :

<form id="form1" runat="server" style="height:100%;">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <input id="MyTestBox" type="text" />
        <div  style="height:100%;">
            <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/One.xap" MinimumVersion="2.0.30523" Width="100%" Height="100%" />
        </div>
    </form>

The input ‘MyTextBox’ – now, when the control loads  we are setting the InitParameters to ‘Name=JG53′.  Within the Silverlight Page constructor I can access the input box:

HtmlDocument doc = HtmlPage.Document;
            IDictionary<string, string> queryStrings  = doc.QueryString;
            doc.GetElementById("MyTestBox").SetProperty("value", inputParam);

This obviously offers up a ton of added capability, being able to manipulate the html dom from within managed code!

Finally, to cap this all off, if I want to build a search page, but keep the input box for search parameters within the html vs. inside the silverlight UI (or both), I can access the html from within Silverlight and retrieve values:

HtmlDocument doc = HtmlPage.Document;
            string test = doc.GetElementById("MyTestBox").GetProperty("value").ToString();

So, I hope this has covered the many options of interfacing with Silverlight!

Just FYI: Silverlight has an update to resolve a problem with FF3.  I was noticing FF3 crashing on several MS blogs I visited today and then found this out.

I’m on a ‘pro-jQuery’ kick, as I’m using it on my project and it’s fantastic. 

There is a good article on comsuming ASP.NET Json Web Services with jQuery:

Using jQuery to Consume ASP.NET JSON Web Services

I actually ran into one of the problems discussed with jQuery and sending empty data to a service

ie.

$.ajax({
  type: "POST",
  contentType: "application/json; charset=utf-8",
  url: "WebService.asmx/WebMethodName",
  data: "{}",
  dataType: "json"
});

Above you can see the ‘data: “{}” – with the following explanation:

“The “{}” data parameter represents an empty JSON object, which you can think of as the JSON equivalent of null.

Supplying this parameter will convince jQuery to correctly send the content-type that we’ve supplied,

while it will be safely ignored by the web service.”

As a side note, there are times I want to send json data to a MVC action.

Here is an example of this (using Prototype – but same applies to jQuery).  What is critical here is understanding how to read the JSON data being sent to the action – as described below you can retrieve this within the requests ‘InputStream’ property:

“Within this method the code takes a peek at the current Request, specifically the incoming JSON string contained within the request’s InputStream property. This is where I’ll use my JsonHelper class, which makes it a snap to parse an HTTP Request into a JSON object”

Kudos to Nick Berardi for his nicely done Captcha control for ASP.NET MVC .

(Keep in mind his version is for Preview 2, but it wouldn’t take too much to upgrade the code to Preview 3)

I really like the way that Nick coded this up, it makes for a good example of creating a http handler to work with asp.net mvc.  Obviously asp.net mvc shares the same asp.net underlying architecture, so all of this is part of the framework!

Thanks again to Nick!

Has been released!  Faster than IE, better tools (ie. Firebug is great), etc… 

Currently it takes a manual update to Firefug, which was painless

Get it here