ASP.Net MVC3 Master/Detail using tabbed Partial Views

I am developing my first ASP.Net MVC 3 web application against a SQL Server Database. I used Database First to create the dbContext and Models from an existing database.

I am trying to create a master/detail view of 1-M relationships. I have TableA which is related to TableB and TableC each with a 1-M relationship. but TableB and TableC are not directly related to each other.

When the user goes to the Details view of a record from TableA, I would like it to show a section at the top of the view with data from the columns within TableA. Then below I would like to have a group of tabs with one tab for each related table (TableB and TableC). When the user clicks on the TableB tab for example, I would like to load a partial view listing all the related records in TableB.

Can someone help me figure out how accomplish this? I would post code, but I'm not really sure where to begin.

I have done some research and found a lot of posts discussing ViewModels, but I'm not sure how this would differ from my TableA Model, which includes the related collections for TableB and TableC. I also have discovered how to load the records from each relationship into different tables within the TableA Details view, but this does not include the tabbing functionality I need.

Thanks in advance.

Answers


I ended up creating partial views for each child table and using an AJAX ActionLink to load the partial view based on the tabs.

Part of TableA view (Master):

<div>
    <nav>
        <ul id="menu">
            <li>@Ajax.ActionLink("TableB", "TableATableBList", "TableB", New With {.id = Model.TableAID}, New AjaxOptions With {.UpdateTargetId = "partial-div"})</li>
            <li>@Ajax.ActionLink("TableC", "TableATableCList", "TableC", New With {.id = Model.TableAID}, New AjaxOptions With {.UpdateTargetId = "partial-div"})</li>
        </ul>
    </nav>
    <section>
        <div id="partial-div">
        </div>
    </section>
</div>

TableB Controller:

Public Class FlightlineController
        Inherits System.Web.Mvc.Controller

        Private db As MyEntities = New MyEntities

        '
        ' GET: /TableB/

        Function Index() As ViewResult
            Dim tableBs = db.TableBs.Include(Function(b) b.TableA)
            Return View(tableBs.ToList())
        End Function

        Function TableATableBList(ByVal id As Guid) As PartialViewResult
            Dim tableA As TableA = db.TableAs.Find(id)
            Return PartialView("TableBList", tableA.TableBs.ToList())
        End Function

Need Your Help

Redirect old page url after .htaccess url rewriting

.htaccess mod-rewrite redirect rewrite rule

I have rewrited my url's with htaccess and now I want to redirect the old url's to the new ones, but I can't figure it out how to do it after all.

Laravel 4 - decoding json into view

php arrays json foreach laravel-4

I've been recently experimenting with Laravel 4, which so far has been a joy to use. However, I am experiencing an issue, not with Laravel 4, but rather my own inabilities.