MVC 5 Application to display two grids for master-details processing (two related SQL tables)

Aug 15, 2014 at 4:11 PM

I am trying to create an MVC application that displays two grids
on the same screen. The two associated SQL tables are related by the
key arrestNumber and have a one-to-many relationship;
Master Table: Arrests (one)=======>(many) Details Table: ArrestCharges

The application should function in the following manner:
When a row is clicked in the master grid all records with matching
arrestNumber in the ArrestCharges table should display in the details grid.

I am able to get the master grid to display the Arrests records successfully.

The problem I am having is displaying the matching records in the details grid.
I created a JavaScript for the onRowSelect event but it is not working correctly.

Below is the MVC source code with more detail explanations.

Can you please tell me what I am doing wrong?

Thanks very much,
// ******************************************************
// MVC View for displaying Arrest grid (master table)
// ******************************************************
@using MpdView.Domain.Entities
@using GridMvc.Html
@model IEnumerable<Arrest>

    ViewBag.Title = "MPD Data - View";

@Html.Grid(Model).Named("arrestsGrid").Columns(columns => {
    columns.Add(foo => foo.ArrestNumber).Titled("Arrest Number").SetWidth(25).Sortable(true);
    columns.Add(foo => foo.PDID).Titled("PDID").SetWidth(25).Sortable(true);
    columns.Add(foo => foo.BookingDate).Titled("Booking Date").SetWidth(25).Format("{0:MM/dd/yyyy}").Sortable(true).ThenSortBy(o => o.DefendantLastName).ThenSortBy(o => o.DefendantFirstName);
    columns.Add(foo => foo.DefendantFirstName).Titled("First Name").SetWidth(50).Sortable(true);
    columns.Add(foo => foo.DefendantLastName).Titled("Last Name").SetWidth(50).Sortable(true).ThenSortBy(o => o.DefendantFirstName);
// ArrestNumber hardcoded for testing - this code works
// This line is removed when using below script.  
@Html.Action("ArrestCharge", "Arrest", new { itemArrestNumber = "555555555" })

    $(function () {
        pageGrids.arrestsGrid.onRowSelect(function (e) {


            // With this code nothing happens when I click on the row
            @Html.Action("ArrestCharge", "Arrest", new { itemArrestNumber = "555555555" })

            // With this code error generated: 
            // Compiler Error Message: CS0103: The name 'e' does not exist in the current context
            @Html.Action("ArrestCharge", "Arrest", new { itemArrestNumber = e.row.ArrestNumber })
// *************************************************************************
// MVC Partial view for displaying ArrestCharges grid (details table)
// *************************************************************************
@using MpdView.Domain.Entities
@using GridMvc.Html

@model IEnumerable<ArrestCharge>

@Html.Grid(Model).Columns(columns => {
    columns.Add(foo => foo.ArrestNumber, "CH_ArrestNumber").Titled("Arrest Number").SetWidth(25).Sortable(true);
    columns.Add(foo => foo.ArrestChargeCD).Titled("Arrest Charge Description").SetWidth(50).Sortable(true);
    columns.Add(foo => foo.IncidentDate).Titled("Incident Date").SetWidth(25).Format("{0:MM/dd/yyyy}").Sortable(true);
    columns.Add(foo => foo.LocationCode).Titled("Incident Location").SetWidth(50).Sortable(true);
// *********************************************
// MVC Layout 
// *********************************************
<!DOCTYPE html>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <link href="~/Content/Gridmvc.css" rel="stylesheet" />
    <script src="~/Scripts/gridmvc.min.js"></script>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
    <div class="navbar navbar-inverse" role="navigation">
        <a class="navbar-brand" href="#">MPD VIEW</a>
    <div class="row panel">
        <div class="col-xs-8">