Hi all, here’s an example of how to use jQuery UI Autocomplete in ASP MVC3.

The sample app I will show actually connects to a work related webservice, but you could use any repository you so wish.

Steps

Create a MVC3 application

Add jQuery UI (use nuget)

Create your UX

I just added the following to my Home/Index.cshtml view

Add a new script to your scripts folder

here you can see that on the page load, I wrap my input “#uris” and call the jQuery UI auto complete on it.

I set the source to /Home/GetModels  i.e. the GetModels function on the HomeController.cs

Add the GetModels function (click to enlarge)

Here you can see that I’m just using a webservice to search for entities called modelUris (just strings) and I return the first 10 matches.

For testing you could just use.

return Json(new string[] {“one”, “two”}, JsonRequestBehavior.AllowGet);

Here’s what it looks like

As part of this WinRT comparison I’m doing, I next need to recreate my apps in html+js.

This is my first WinRT app I’ve written in html+js and right off the mark I hit a problem with the WinRT sandbox. These days I won’t write a web app without jQuery it’s just awesome. so I wanted it in my app.

My first instinct was to use Nuget to bring down jQuery for me, but alas no Nuget extension that I could find for vs11, so next easiest step was to use the CDN. doesn’t work.

So I go to jQuery.com, download it, and then use add the local script, now it all works.

hopefully this post might save someone a few minutes of head scratching.

I’m still working on the LiveResume website, just something I’m playing with in my free time, no I’m not looking for a job just have an idea that I’ve not seen anywhere else (no I’m not telling you what it is until the site is live )

This little post is to demonstrate how effective the jQuery library is.

Firstly lets have a look at the html to see what we are trying to achieve.

Now, I’m not using jQuery.ui tabs (yet…); so I want to handle the styling of the active tab.

I’ve got a style called highlight that does this.

The code below shows how effective jQuery is at removing the style from all anchor elements and adding the style to the clicked anchor.

Let’s break it down.

The first two commented lines are to enable intellisense in visual studio.

After this we create a variable menuHandler, I’m using the revealing module pattern for this.

the return function exposed the init function publically. I’ll be adding more functions to this menuHandler as I go along.

what I’m saying here is select all anchor elements that are children of the element with id=”topmenu” and add an event handler to the click event.

this line removes the highlight class from all the anchors in the same topmenu element.

this line adds the style to the clicked element.

this is somewhat equivalent to an onload event handler for the page (except it doesn’t wait for images… see jQuery docs); what I’m doing in the load handler is creating an instance of the menuHandler function and calling the init method on it.

I can recommend the book: jQuery in action if you wish to get started or improve your jQuery.

I’ve discovered a nice set of jQuery filter selectors.

Take this example of selecting the checked radio button in a group

Markup

Script

There are many many others, e.g. @contains, :disabled, :not(selector), :parent, :password, etc etc, more info in jQuery docs.

Part1 – Setting up your database

I did some work with an interesting piece of tech lately, Microsoft Syncronization services 4.0 CTP. This post aims to give an overview of where to start, but firstly, let me describe the how all this plugs together and what it buys me.

Overview

The OData + Sync protocol uses the OData format for the data payload that can be consumed by clients that are running on any platform. Clients and the service use the protocol to perform synchronization, where a full synchronization is performed the first time and incremental synchronization is performed subsequent times. The protocol is designed with the goal to make it easy to implement the client-side of the protocol, and most (if not all) of the synchronization logic will be running on the service side. OData + Sync is intended to be used to enable synchronization for a variety of sources including, but not limited to, relational databases and file systems.

Server

The CTP release includes server components that make it easy for you to build a sync Web service that exposes data to be synchronized via the OData + Sync protocol. For example, you can easily expose data in a SQL Server database or a SQL Azure database via a WCF sync endpoint using these server components. In our case our server in sitting in the Azure Cloud providing an OData endpoint, the data is also hosted in the Cloud in Sq1 Azure.

Clients

We have 3 clients, (well 4 actually but our Silverlight version has lagged behind and in not yet publically available).

1. WP7 – Local data stored in Isolated Storage, DataVisualizationToolkit for charting, SL3
2. iPhone – Connecting directly to the server via OData/Json
3. ASP.MVC Ajax – A powerful web interface written using MVC3 and jQuery
4. Silverlight – Initially used RIA Services to access the server but synchronization model is nearly identical to the WP7 SL3 approach with isolated storage now.
   

How to create the server.

1. Create you database schema in SSMS (SqlServer managment studio)
2. Now that your database has been created you’ll need to provision it, think of this much in the same way that you would provision an existing sql server database for asp membership tables and stored procedures. The syncronization framework will provide you with a tool called SyncSvcUtilHelper.exe this basically is a GUI for the command line version.

before provisioning you’ll need to create a Sync configuration, so choose option on, select a filename in step 1 and select your database in step2

Select the list of tables that you are interested in syncing

That’s pretty much it. Now you’ll need to choose option2 to provision the database.
Select the configuration file you created as part of step 1 and choose the provisioning option.

That’s all that’s involved, your Database is now ready to be synchronized, of course there are come considerations, unique id’s etc, but you’ll find all this in the documentation.

My next post will cover creating the WCF service for exposing the database, after that I’ll run through creating the clients.