Thanks to everyone who attended my DevLink talks. I had a blast presenting to you all and I really hope you got a lot out of the presentations. Here are the slides to the 3 presentations I gave. They are available for download. I also have source available for those of you that wanted to look at my examples.
I will be traveling to Nashville this week to speak at DevLink, August 5-7. This will be my first conference giving more than 2 talks (3 this time around), and it’ll be my second conference where people have actually paid to be there. Be sure to come chat with me at any of my sessions, in the hallways, or at Open Spaces.
Here are the 3 talks I’ll be giving:
See you all there!
Note: This example was built using jQuery UI 1.7.2 (which packages jQuery 1.3.2). If you use jQuery 1.4.1, this example will break. jQuery UI 1.8 will fix. Thanks to mvcuser. http://dev.jqueryui.com/ticket/5065
In my current project, I’ve had the need to use a Tab control but the data inside of the tabs was way too hefty to load initially when page loaded for the first time. Luckily, the jQuery Tab control provides this functionality for me already. However, I needed to find a way to easily organize the tab content on the server. ASP.NET MVC provides a great structure for this called Partial Views.
In this quick tutorial, I’ll give you a run down on how to set up a jQuery tab control and how to configure ASP.NET MVC Partial Views to work with the tab controls.
Configuring Your View
Since we’re working in ASP.NET MVC, we’re going to talk about our pages in the form of Views. I’m working with the default “blue screen” ASP.NET MVC application. After you’ve downloaded and linked the jQuery and jQuery UI scripts to your View (either in the view itself or in the master page), you’re going to add the following code:
<script type="text/javascript"><!--mce:0--></script> <div id="tabContainer"> <ul> <li><a href="/Home/GetHomeTab">Home</a></li> <li><a href="/Home/GetProductTab">Products</a></li> <li><a href="/Home/GetContactUsTab">Contact Us</a></li> </ul> </div>
This code replaces the existing content section in the Index view for the Home controller. The most interesting part of this is the tabContainer div. Inside of it, we’ve declared a unordered list, and several list items. jQuery UI uses this determine how to format the tab control.
You’ll notice that inside of our list items (<li> tags) that we’re using links to various action links (and yes, I know I could use HTML helpers to build these links for me). Now, we need to build the views that will be rendered inside the tabs.
Here is an example of building the GetHomeTab view. Nothing special, but make sure that you select Create a partial view. Partial views won’t have any of the HEAD, HTML, or BODY fluff inside of them. These are perfect for our tabs.
Repeat for GetProductTab and GetContactUsTab. Add a few lines of text to the views in so you know they’re working. Here’s an example of what my GetHomeTab looks like:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> <h1>Home</h1> You're inside the Home tab, which was rendered via a partial view!
Before we can test, we need to update our Controller to return the views as requested. Here’s the additions you’ll make to your Home controller:
public ActionResult GetHomeTab() { return PartialView(); } public ActionResult GetProductTab() { return PartialView(); } public ActionResult GetContactUsTab() { return PartialView(); }
You can attach models to these views and they’ll work fine. Build and run the application.
And to prove that everything is working as AJAX call backs, we can look at FireBug:
Firebug will show that when I clicked on the Contact Us tab, it automatically made an AJAX call to our Home controller and retrieved the partial view.
That’s awesome Kevin, now Why?
Tabs can be bloaty. They contain a ton of markup for rendering inside the tab, and all this needs to be maintained within a single file. By loading our pages dynamically, we’re eliminating the strain on the server. Imagine we have 10 tabs. If the user only needs to access two of them, we’re wasting bandwidth by downloading all the additional markup. Then the browser needs to render it and store it, waiting for the user to come along and do something. In an AJAX environment, we only download tabs as needed. Much less strain on the server.
Second, maintaining 11 small files is much easier than maintaining 1 large file. If you need to make a change to the Contact Us tab, you don’t need to go searching through the main page to find it. Instead, you locate the GetContactUsTab view and make your changes!
I hope you’ve learned something from this, and maybe implement it into your future projects. I can tell you that it definitely makes a difference in my app where there are 10 tabs containing a lot of data. Separating out all the pieces makes it much easier to maintain and update.
I’m hard at work right now preparing some presentations for the 2010 code camp/user group season. In order to make these presentations the best they possibly could be, I’m putting them out for the public to see and review.
Asynchronize with jQuery
jQuery is a fantastic tool for web developers interested in giving their web applications a little glitz and glamor. In addition to its powerful DOM transversal engine, jQuery also comes equipped for handling AJAX requests. In this presentation, Kevin Griffin will guide you through getting started with jQuery’s AJAX functionality. A basic understand of jQuery is recommended, however not required for this presentation.
Awesomize Your Windows Apps
With the release of Windows 7, many developers might be looking to take advantage of the features Windows 7 offers. This presentation offers attendees a broad overview of the Windows API Code Pack, which is a managed library for .NET developers to use for accessing some of the underlying functionality of Windows that was typically reserved for Interop fans. Topics and demos include Windows 7 taskbar functionality, Task dialogs, Libraries support, and more.
ASP.NET MVC From The Ground Up
ASP.NET MVC has taken the web development world by storm. It’s a technology that many people are curious about, but might have had trouble adopting. In this presentation, we’ll take a look at ASP.NET MVC from the ground up. We’ll peel back the layers, and look at each component of MVC individually without the Test Driven Development or Dependency Injection mantra. The goal is for you to walk out of this talk with enough knowledge of MVC to dive in! This talk assumes no experience with MVC or Web Forms (although some web forms knowledge would be helpful).
jQuery From The Ground Up
Web 2.0 has taken over; there is no doubt about it. However, many developers are being left in the dust. Amazing technologies such as jQuery allow developers to easily add flair to their web applications. In this presentation, Kevin Griffin will guide you through the world of jQuery. Starting from the bottom, we will discuss what is possible with jQuery, how do you obtain and setup jQuery in your projects, and then actually putting jQuery to work. This presentation is designed for developers with no experience with jQuery (or Javascript in general). An understanding of HTML and CSS is recommended.
It seems that most of my development experiences evolve around the internet, and developing for it. My first professional development was in WinForms in .NET 1.1, but I soon made the transition to WebForms. My first full application (from design to deployment), was written using ASP.NET 2.0. Now it seems that I’m making my way into another web application, and I’ve decided to take the MVC route.
I love learning new technologies, but I generally hate the getting up and running aspect to learning. The internet is a big help, as well as my friends of Twitter and at community events. However, MVC was one of those technologies where the people who really understood it weren’t really good at explaining what it is. I’ve watched one introduction to MVC where the presenter started discussing dependency injection when talking about controllers. Adding additional complexity to a topic with other topics is a recipe for disaster.
Adventures in MVC is going to be a series, but I’m not defining a part 1, 2, 3, etc. Instead, I’m going to walk through my learning experience with ASP.NET MVC. My big hope is that I’m going to be able to dumb down MVC enough that most people will be able to understand it out of the gate. So let’s get started.
Disclaimer: Everything I’m going to discuss is my interpretation of what I’ve picked up and learned. If I’m completely wrong, please feel free to leave a comment and set me straight. It is not my intention to have incorrect information on this blog. Thanks.
Let’s Talk About MVC
It seems that every MVC discussion I’ve read or listened to has started with a history. While history is a good thing to understand, and the more you know, the more you’ll understand about design decisions made. All you need to know is that it started with SmallTalk (which is an old programming language. That’s the extent of my knowledge), and that it took hold and became popular among several languages.
You probably already know that MVC stands for Model View Controller. Model is data, View is what the user sees, and controller is the middleman that binds a model to a view. So what does that mean?
Breaking It Down
Let’s start with a page lifecycle. A user requests a page. The request goes to a controller. The controller can look at the request and do several things. The most common thing it does is return a view.
A view is a webpage. At its most basic forum, it could be a static page. The server doesn’t have to do anything to prepare a view for display. However, static pages are boring, and if that’s all you have a need for, then maybe ASP.NET MVC is not for you. When you need to make the data more dynamic, you can build your views around a model.
Models are easy to understand if you think about practical applications. Take a shopping site, like Amazon (I’m not saying that Amazon uses MVC, but the result pages are good examples of what you would return with views). Do a search for ASP.NET books. The return list is a view. If you’re a web forms developer, you’re probably thinking that a good solution is to use a Repeater or ListView. MVC takes a different approach. Instead of user controls, we would bind a model to our view. In this example, the model would contain book results, along with information we would want to provide to the user. When the view is built, it takes the information from the model and formats it in the way we want. The controller is the glue that binds the two together.
Where Do We Go From Here
I don’t expect anyone to have a full overview of MVC from the last section. My goal is to simply make MVC less difficult to learn. In the next entry, I’m going to discuss getting started with the ASP.NET project.
Oh, and before I get questions about this later, I will only be covering ASP.NET MVC 1.0 (not 2.0). The reason being that my primary project right now is a MVC 1.0 application, so all my attention will be on that version.
Please post any questions in the comments and I’ll do my best to answer them!
-Kevin
I’ve been working on the web site for the Hampton Roads .NET Users Group, and I really wanted to do some work with ASP.NET MVC. So I created a new MVC application, and decided to test it against my host. I published, and went to the site. Configuration errors. That’s never a good sign. Turns out my host does not have the MVC extensions installed.
However! My host supports ASP.NET 3.5, so it is possible to run MVC applications. I just needed to make a few quick configuration changes.
In Visual Studio, go to your solution explorer, and expand you References.
There are 3 references you want to look at.
Set the Copy Local property to TRUE. This way you can make sure your applicaton packages the missing extensions for you. With these changes, I was able to upload and run the MVC application from my host with no problem.
Hope this helps anyone one that wanted to use MVC, but didn’t think their host supported it.
© 2010 Kevin Griffin · Proudly powered by WordPress & Green Park 2 by Cordobo.
Valid XHTML 1.0 Transitional | Valid CSS 3
