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 NerdDinner.com to make the Popular Dinners section of the site available as a web slice.


Popular Dinners




which looks like this when it’s rendered on the page:

 post2

and looks like this in the Favorites bar:

post3

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:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage>" ContentType="text/html" %>










<%: ViewData["Title"] %>




    <% foreach (var dinner in Model) { %>

  • <%: Html.ActionLink(dinner.Title, "Details", new { id=dinner.DinnerID }) %>
    on
    <%: dinner.EventDate.ToString("yyyy-MMM-dd")%>
    <%: dinner.EventDate.ToString("HH:mm tt")%>
    at
    <%: dinner.Address + " " + dinner.Country %>

  • <% } %>






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