A worthy read on javascript

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.

Advertisements

More jQuery with Ajax/Json

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!

Passing Parameters to Silverlight from the page

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!

Stepping into Silverlight…

Well, I’ve decided it’s time to learn to use Silverlight.  I’m installing the Silverlight 2.0 and latest Blend software (along with Zoom) to run it.

This will be my first step into XAML/WPF.  If anyone has some good reading recommendations or tutorials worth going through, email me or post me some links here.

 

UPDATE: wow.  ok, I started in on some tutorials.  Silverlight/Blend/VS 2008 actually make a good combination.  I still don’t like that I can’t use Blend ‘inside’ VS 2008 – or that VS doesn’t just include this functionality (it’s silly to be popping back and forth between the two).  (Blend isn’t really needed, but it just makes it easier at times).

So, Silverlight isn’t really that difficult at all  🙂  I’m having fun with it.  I did create a DeepZoom test, I have a map from a flight combat sim game and I wanted to try out the Deep Zoom composer – it basically takes an image and adds zooming scrolling capability to it.  Here is an example:

Kuban Zoom Test

Secondly, I create a sample after listening to this 15 minute video of a Silverlight/WCF/LINQ to SQL control that queries one of my database tables.  Not too shabby – it helps that they have included the Datagrid in Silverlight 2.0. 

The download of Silverlight is extremely small – I’m impressed they can stuff that much ‘.net framework’ into such a small download….  🙂

 

UPDATE 2: Some very important tips to using LINQ to SQL with Silverlight (ie mostly for updates – since it’s disconnected with the WCF/WebServices)

1. unless you roll your own, you will have to add a timestamp column to your database tables… (yikes)

2. make sure you set that timestamp field to “Update Check” = “Always”

3. Use the following to ‘attach/refresh’

public void Update(Customer customer) { NorthwindDataContext context = new NorthwindDataContext(); context.Attach(customer); context.Refresh(RefreshMode.KeepCurrentValues, customer); context.SubmitChanges(); }

4. Lastly – and very important – click on the LINQ to SQL designer and set the ‘Serialization Mode’ to Unidirectional

Thought I’d share these pain points – all to get the disconnected, WCF, with Linq to Sql working with Silverlight  🙂