Bryant Likes

Ok, so in my first post on Integrating MVC with Silverlight I didn't actually get to the Silverlight part. I only laid out the navigation and set it up so that it would work with Silverlight when I did add it in. So while on the flight from Orlando to Phoenix I re-wrote my menu using Silverlight 1.0 (using some old wpf/e code I had laying around).  Below is a screenshot of my updated sample which now has Silverlight:

So I'm still using the partial rendering by switching out the master page, which still isn't the ideal solution. What I'd really like is a way to call ViewPartial and pass in the name of the content area that I want to render. I'm also still not integrated with the MVC url system and have the Urls hardcoded in my javascript. Also, even thought the menu control could have state it doesn't actually show which page is currently selected.

So this example does integrate Silverlight with MVC, however, it still needs some more work. Since my flight to Burbank just got delayed from 8:25 to 10:15 maybe I'll have some time to work out these other issues. :(

Download Updated Sample Code Here

Ok, so before I go any farther I want to spell out a couple of things. First, my sample code doesn't have any Silverlight in it yet. Since I didn't have a whole lot of time and beta 2 is only a day or so away I didn't think it was worth the effort. This post is more about figuring out where Silverlight would go rather than actually demoing what it would do. Second, I'm an MVC newbie so there is probably a better way to do what I'm trying to do. However, I've been at TechEd 2008 this week attending MVC and Silverlight sessions and talking to the MS folks and so far haven't seen a good answer.

So with that out of the way, here is what I've been thinking about. I'm trying to understand the best way to integrate Silverlight (or Flash for that matter) into an MVC application. I know that I can just stick the Silverlight html tags into my view and that will work just fine, but if I do that then my Controllers will probably not know about Silverlight and vice-versa. For instance, here is the scenario that I've been thinking about.

Let's say I have a nice looking Silverlight menu bar. Now I could easily add that control to my master page and put links in to all my MVC pages. However, I probably want to do a couple of things: (1) I would like the control to know about where I am at so I can display some kind of context information and (2) I would like the control to get the correct urls from MVC instead of them being hardcoded. Now maybe there is a nice way to do this that I haven't thought about, but instead here is what I came up with (and what is in the sample code at the end of the article).

The way that I made this work is pretty simple, but it still feels a little dirty. I created a second master page that I called Partial that contains nothing but the MainContent content area. This goes in the shared views area next to the Site master page.

<%@ Master Language="C#" ... %>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>

Next, I added a mode parameter of type string to all the actions in my Home controller which I pass as the name of the master page in the View method (using preview 3 here).

public ActionResult About(string mode)
{
    ViewData["Title"] = "About Page";

    return View("About", mode);
}

Lastly I wrote a little javascript (which uses the asp.net ajax library) to get the contents of the page passing the Partial as the mode and then I stick the results into the content div.

function asyncNav(url) {

    url = url + '?mode=Partial';

    var request = new Sys.Net.WebRequest();
    request.set_url(url);
    request.set_httpVerb("GET");
    request.add_completed(updateMain);
    request.invoke();

}

function updateMain(executor, eventArgs) {
    if (executor.get_responseAvailable()) {
        $get("content").innerHTML = executor.get_responseData();
    }
    else {
        if (executor.get_timedOut())
            alert("Timeout");
        else if (executor.get_aborted())
            alert("Aborted");
    }
}

So now my navigation can accomplish both of my goals because it doesn't unload when the user clicks a link so it has context and it is using urls that comply with MVC. I know, I know, I'm not actually using Silverlight yet, but I think that will be pretty easy to implement and I'm planning on giving it a shot as soon as Beta 2 is released. For now, check out my code and let me know what you think. Am I on the right path or am I missing the boat?

Download Sample Code Here

Update: Just posted Part 2 here which actually uses Silverlight.