How to make jqGrid row a link to an Action in asp.net MVC 3

Question

I finally got my asp.net grid to display data... But I need it to link to an action when clicking on one of the rows... or if need be, a single column How can I get a route into one of my columns or rows in MVC3?

I am using jqGrid btw...

Here is how I set up my Grid

$("#list").jqGrid({
                        shrinkToFit: false,
                        autowidth: true,
                        datatype: 'jsonstring',
                        mtype: 'POST',
                        colNames: [
                                   'MRN',
                                   'Hospital Fin',
                                   'First Name',
                                   'Last Name',
                                   'Date of birth',
                                   'Completed Pathway',
                                   'Completed Pathway Reason',
                                   'PCP Appointment',
                                   'Specialist Appointment',
                                   'Admit Date'
                                   ],
                        colModel: [
                                   { name: 'MRN', width: 125, align: 'left' },
                                   { name: 'Hospital_Fin', width: 145, align: 'left' },
                                   { name: 'First_Name', width: 115, align: 'left' },
                                   { name: 'Last_Name', width: 115, align: 'left' },
                                   { name: 'Date_of_birth', width: 145, align: 'left' },
                                   { name: 'Completed_Pathway', width: 125, align: 'left' },
                                   { name: 'Completed_Pathway_Reason', width: 165, align: 'left' },
                                   { name: 'PCP_Appointment', width: 115, align: 'left' },
                                   { name: 'Specialist_Appointment', width: 125, align: 'left' },
                                   { name: 'Admit_Date', width: 185, align: 'left' }],
                        rowNum: 10,
                        rowList: [5, 10, 20, 50],
                        sortname: 'Id',
                        sortorder: "desc",
                        viewrecords: true,
                        imgpath: '/Content/themes/UPMC-theme/images',
                        caption: 'My first grid'
    });

Any way to make an entire row clickable to an action method? To open my view I need to call a controller and an action...

EditEncoutner is the controller, and EditEncounter is the Action...

public ActionResult EditEncounter(int encounterId, int popId)
        {
            string UID = HttpContext.User.Identity.Name;
            DataRepository dr = new DataRepository();
            PatientACOModel patMod = dr.Get(encounterId, UID);
            TempData["POPULATIONID"] = popId;
            return View(patMod);
        }

Now I write up the JSON string myself... I am think of putting an <a /> tag in the relevant columns. But that would mean I am not making the entire row clickable, and I would then have to chose which column to put the link... I could just make an edit column, which is what I will do if all else fails, I was kind of hoping for a more elegant solution however.

Answer 1

Assuming your View is binded to a List of Products class objects

@model IEnumerable<Product>
<table>
@foreach(var product in Model)
{
 <tr class="trClickable" data-viewurl="@Url.Action("View","Product",new {@id=product.ID})">
   <td>
     @product.Name
   </td>
   <td>
     @product.Price
   </td>
 </tr>
}
</table>

We will add a little javascript to capture the click event of the row.

<script type="text/javascript">
 $(function () {
     $(".trClickable").click(function () {
         var item = $(this);
         window.location.href = item.data("viewurl");
     });
 });

Assuming you have an action method called View inside your ProductController which accepts a parameter called id and show some data in it's view