title: BackBone.JS Displaying a details view of an item in the collection
body: <p>I'm just starting out using Backbone.js , I have managed to bring back a list of items from the server, but I'm stuck with the next step which is when an item is clicked a detail view of the model is displayed. In the router I have tried creating a route called "show:id" : "show" , but it does not pick up the route inside my MVC controller inside an ASP.NET MVC3 application , which is decorated with the [HttpGet] verb. A good start would just be to get the show method firing when i hit app.navigate('show/1', true) in the console.</p>
  
  <pre><code> EventDate = Backbone.Model.extend({
      idAttribute: "eventDateID"
  });
  EventDates = Backbone.Collection.extend(
      {
          model: EventDate,
          url: "WebPortal.MVC/Api/EventsAttending"
          //url: "WebPortal.MVC/events/list"
      });
  eventDates = new EventDates();
  
  EventsListView = Backbone.View.extend(
      {
          initialize: function () {
              _.bindAll(this, 'render');
              this.template = $("#yourevents-template");
              this.collection.bind("reset", this.render);
              window.ViewModel = this.model;
          },
  
          render: function () {
              var html = this.template.tmpl(this.collection.toJSON());
              $(this.el).html(html);
              return this;
          }
      });
  
  
  
  
  var EventsAdmin = Backbone.Router.extend({
      initialize: function () {
          eventsListView = new EventsListView({ collection: eventDates, el: ".yourEvents tbody" });
      },
      routes: {
          "": "index",
          "/Show/:id": "Show"
      },
      index: function () {
          eventsListView.render();
      },
      Show: function (id) {
          $('#show').html("The id is " + id);
      }
  
  
  
   });
  
  
  &gt; jQuery(function() {
  
      eventDates.fetch({
              success: function() {
                  //creater the router
                  window.app = new EventsAdmin();
                  Backbone.history.start();
              },
              error: function() {
                  //display a nice error page
              }
          });
  });
  </code></pre>
  
  <p>The following is the code in my controller</p>
  
  <pre><code>[HttpGet]
          public ActionResult Index(int userid = 1)
          {
              var FindEvents = new FindEventsByAttendeeRequest { UserID = userid };
              var model = _eventsService.FindEventsByUserID(FindEvents).EventFound;
  
              return Json(model.Select(c =&gt; new
                              {
                                  c.EventDate.Event.Description,
                                  c.EventDate.Event.Title,
                                  c.EventDate.StartDate,
                                  userid,
                                  eventDateID = c.EventDate.ID,
                                  VenueName = c.EventDate.Venue.Name,
                                  c.EventDate.VenueID,
                                  eventID = c.EventDate.Event.ID,
                                  attendeeID = c.ID
                              }).OrderBy(o =&gt; o.StartDate).Where(u =&gt; u.StartDate.Date &gt;= DateTime.Today), JsonRequestBehavior.AllowGet);
      }
  
      [HttpGet]
      public ActionResult Show(int ID)
      {
          var FindAttendee = new GetAttendeeRequest {Id = ID};
          var model = _eventsService.GetAttendees(FindAttendee);
  
          return Json(model);
      }
  </code></pre>