如何使 jqGrid 行链接到 asp.net MVC 3 中的操作答案

【问题标题】：How to make jqGrid row a link to an Action in asp.net MVC 3如何使 jqGrid 行链接到 asp.net MVC 3 中的操作
【发布时间】：2012-07-12 21:18:16
【问题描述】：

我终于得到了我的 asp.net 网格来显示数据...... 但是我需要它在单击其中一行时链接到一个动作......或者如果需要，单列我怎样才能在 MVC3 中获得进入我的列或行之一的路由？

顺便说一句，我正在使用 jqGrid...

这是我设置网格的方式

$("#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'
    });

有什么方法可以让动作方法可以点击整行？要打开我的视图，我需要调用一个控制器和一个动作...

EditEncoutner 是控制器，EditEncounter 是 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);
        }

现在我自己编写 JSON 字符串...我想在相关列中放置一个 <a /> 标记。但这意味着我不会让整行都可点击，然后我必须选择放置链接的列... 我可以只做一个编辑列，如果一切都失败了，我会这样做，但是我有点希望有一个更优雅的解决方案。

【问题讨论】：

标签： asp.net-mvc-3 hyperlink jqgrid-asp.net

【解决方案1】：

假设您的 View 绑定到 List 的 Products 类对象

@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>

我们将添加一些 javascript 来捕获 row 的 click 事件。

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

假设您的ProductController 中有一个名为View 的操作方法，它接受一个名为id 的参数并在其视图中显示一些数据

【讨论】：