Question

Basically, I started working on this app knowing nothing about web development which is severely inhibiting my search-fu. Probably should read a book, but that’s not likely. Using ASP.NET MVC3 RC2, I’m trying to make a strongly typed partial view which can navigate to related items, as well as maintaining a bread crumb trail (which I thought would be a List in the ViewBag?). A good analogy would be a dictionary page with a thesaurus sub-view.

class Entry
{
   string Name;
   string Definition;
   IEnumerable<Entry> Synonyms;
}

Primarily the page shows the word and its definition, etc. But there’s a div with synonyms that you can click to see the selected word’s synonyms, replaced w/ ajax.

I was initially thinking I needed to do an html helper, but then I saw stuff about returning PartialView from my controller which seems a lot better.

I’m having trouble piecing together all the pieces of the puzzle. A sample or outline would be great.

Thanks!

Answer 1

Man, I knew I should have worked on it a little longer before asking.

So, here’s the recipe:

1. Make a function in the controller, Synonym(id) { return PartialView(GetEntry(id)); }
2. Make a partial view, Synonym.cshtml, strongly typed to Entry.
3. Display the partial view in your main display with <div id="Synonyms">@{Html.RenderAction("Synonym", @Model.Id);}</div>

4. For the ajax navigation link inside Synonym.cshtml, use something like this

   @foreach(Entry syn in @Model.Synonyms)
       @Ajax.ActionLink((string)@syn.Name, "Synonym", 
           new { id = @syn.Id }, new AjaxOptions { UpdateTargetId = "Synonyms" })
   

One thing that briefly tripped me up was the new { id = @syn.Id } because the parameter name in my controller was actually number, I had to use new { number = ... }

Oh, and I asked about navigation. I think the browser’s back button will be sufficient for most navigation, but still wanted a “Back to Current Word” link. For that I did the following:

1. Modified Controller.Synonym to take another parameter, int orig and set ViewBag.OrigId = orig; before returning.
2. Modified the ActionLinks to say new { id = @syn.Id, orig = @ViewBag.OrigId }
3. Created the back link inside Synonym.cshtml – @Ajax.ActionLink("Back To Current Word", "Synonym", new { id = @ViewBag.OrigId, orig = @ViewBag.OrigId }, new AjaxOptions { UpdateTargetId = "Synonyms" })
4. Modified the call to @Html.RenderAction to pass an object like in the ActionLinks new { id = @Model.Id, orig = @Model.Id }

If someone else comes up with a better answer that makes me want to rewrite my stuff, I’ll accept theirs instead. And I’d love feedback on whether I’m missing anything, like how I could avoid the second parameter to Controller.Synonym or other simplifications or improvements.