I am currently working in Visual Studio 2010 Beta 2
with .NET Framework version 4.0 Beta 2.
Here’s the scenario: you want a web page to return to the end user and render out as fast as possible, but you have some long-running parts to your page. You’d like to get the page loading instantly, displaying a “please wait” message while you load the components. If you program on ASP.NET, you’re in luck.
It seriously takes about 4 minutes to get yourself some fancy, fast, Ajax-enabled web pages, complete with lazy-loading sections that would typically slow down the page load for the end user. With jQuery integration and support in Visual Studio 2010, master pages and the MVC Framework you are, in fact, already there without (maybe) knowing it.
Here’s everything you need to get to asynchronous web client bliss.
First Things First
Create a new project in Visual Studio 2010 (not a new web site). Go the the ‘Web’ category of projects and select the 2.0 version of MVC for ASP.NET.
Add Script Support
Navigate to the Site.Master code file in the project. It will be located under the Views\Shared folder. Double-click to open it.
Next, expand the Scripts folder in Solution Explorer. Drag the jquery-1.3.2.js file to the <head> section of Site.Master.
Blamo! jQuery support!
Rig up the Controller
In MVC, controllers contain the code that decides which view, or part of a view, is returned. Open up the HomeController.cs file and add two new methods. Both will be return type PartialViewResult, one named Peek and one named Poke. Set both of them to sleep the thread for 3 seconds, then return a PartailView of the same name. It should look like this:
The sleeping is just so that we can emulate some long-running function. Imagine you’re dynamically building an image, or placing a reservation on a remote system. In fact, do whatever you like, it’s your three seconds! ;o)
Sweet. Controller’s all set.
“Make Mine an Easy View”
Sure, no worries. Right-click on the methods in the controller that you just created and click on “Add View…”. This will start a wizard to do some auto-generation for you.
Now, there’s a bunch of cool stuff in here, like strongly-typed views and whatnot, but we’re just going to make sure we have the partial view creation checked off and click on Add. This creates the view for us that we need in the Views\Home folder.
Sweet.
All that’s left are some goofy comments in our ascx’s to try to make the readers laugh. But first…
A Side Note…
…that’s entirely inline with the rest of this post.
Why did I choose PartialViews and ascx? We don’t need to render a whole page here, just part of a page and that’s exactly what PartialViews do, and what ascx’s are. If we try to return a full page it would also return all the HTML associated with that page and if the page uses Master Pages, it would also invoke the related classes for the master page and render the whole shebang.
We could also just put html pages on the server and request those, which you might argue would be simpler. But, by going this route and creating methods on the controller – along with the related views – we’re able to leverage our models, existing web references, our repositories…everything that’s available to us through MVC (and the .NET Framework).
Back to the Story
In this sample, I’m actually going one step farther: the async bit we’re loading will make a call to another async bit as soon as it loads.
Page loads –> Peek is called –> Poke is called
We need to go to our View\Home\Index.aspx markup and add the part of the page that will be populated by the jQuery call. All you need is a <div> with an ID. Add the helper method jQuery load call, which makes a request to the web server and puts the result in the component you specify. The $("#name") syntax is short-hand for returning the page element.
The only other thing to note here is that I am telling jQuery to load “home/peek” and “home/poke”, which doesn’t look like web pages. They aren’t. These calls will be routed by MVC to the controller, and Peek and Poke will be found with reflection in the controller class. That will invoke our methods and return the ascx components we created.
Put together, it all looks like the following:
Index.aspx (in the content tag): 
Peek.ascx: 
Poke.ascx: 
hehehe…get it? Polkalicious?! Man, I’m funny.
A Simple Summary
Here’s all we have to do to get the thing running in a more abbreviated form:
- In a new ASP.NET MVC project, add the jQuery script to the head section of your Site.Master
- Add methods to your controller to handle the calls. These will be of type PartialViewResult and return a PartialView
- Add the ascx files to the project by right-clicking on the controller methods and selecting to create partial views
- Add a <div> to the Views\Home\Index.aspx page and a piece of script after it to make the jQuery call. Invoke the method on the controller through the routing features of MVC
And that’s everything you need to get partial lazy-loads going with jQuery and MVC.
May the force be with you.
wicked!
ReplyDelete