Using Web Slices with Nerd Dinner

The web slices feature was introduced in IE8 and allows users to subscribe to content directly within a webpage. Web slices allow web site developers to deliver content to the user’s browser no matter what the user is doing. When the content inside the web slice is modified, the user is notified through their Favorites bar and they can respond however they deem appropriate.

To define it, the element that encloses the region of the web slice needs to have the class ‘hslice’ and an unique id. Inside the web slice, items with the class ’entry-title’ will represent the title in the web slice window. Also, items with the class ‘entry-content’ represent the actual content of the web slice.

For those that are interested, the checkin of this code is on the NerdDinner CodePlex site. Here is the markup we created for to make the Popular Dinners section of the site available as a web slice.

<div id="2" class="hslice">
<h2 class="entry-title">Popular Dinners</h2>
<a rel='feedurl' href='/Dinners/WebSlicePopular' style='display:none;'></a> </div>

which looks like this when it’s rendered on the page: and looks like this in the Favorites bar: The code added to the controller class to handle this behavior looks like this:

public ActionResult WebSlicePopular()
    ViewData[""Title""] = ""Popular Nerd Dinners"";
    var model = from dinner in dinnerRepository.FindUpcomingDinners()
                                orderby dinner.RSVPs.Count descending
                                select dinner;
    return View(""WebSlice"",model.Take(5));

And the View is:

&lt;%@ Page Language=&quot;&quot;C#&quot;&quot; Inherits=&quot;&quot;System.Web.Mvc.ViewPage"" ContentType=""text/html"" %&gt;


                        on <strong>
                            </strong> at

The MSDN site has some great Web Slice resources, including tutorials to help you get started.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s