MVC 3 Webgrid 使整行可点击答案

【问题标题】：MVC 3 Webgrid make entire row clickableMVC 3 Webgrid 使整行可点击
【发布时间】：2012-05-13 19:30:27
【问题描述】：

我在 MVC 3 的 razor 视图中使用 webgrid。下面是我的 webGrid 的外观，我想让整个行可点击，并且在点击时也将值传递给 javascript 方法。

我能够在所有列的文本上调用我的 javascript 方法。我希望点击整行的任意位置也能发生同样的情况。

请指导我。谢谢

           @grid.GetHtml(

            columns: grid.Columns(

            grid.Column("CompanyName", format: @<text><a href="javascript:SubmitValues('@item.Col1','@item.Col2','@item.Col3');">@item.CompanyName</a></text>, header: "ABC"),

            grid.Column("CompanyAddress", format: @<text><a href="javascript:SubmitValues('@item.Col1','@item.Col2','@item.Col3');">@item.CompanyName</a></text>, header: "DEF"),

            ))      

         }

【问题讨论】：

大声笑！被授予 TumbleWeed 奖：提出了一个没有投票、没有答案、没有 cmets 和一周低视图的问题。希望现在答案将开始涌入！ :P

标签： asp.net-mvc-3 razor webgrid

【解决方案1】：

你必须使用 JQuery 来添加行点击功能

在您的 webgrid 中添加 htmlAttributes: new { id="MainTable" }。

<script type="text/javascript">
   $(function () {
        var tr = $('#MainTable').find('tr');
        tr.bind('click', function (event) {
            var values = '';
            var tds = $(this).find('td');


            $.each(tds, function (index, item) {
                values = values + 'td' + (index + 1) + ':' + item.innerHTML + '<br/>';
            });
            alert(values);


        });
    }); 


</script>

【讨论】：

以及如何将值 '@item.Col1','@item.Col2','@item.Col' 传递给我的 javascript 函数？
您已经在传递参数。上面的代码只会突出显示该行。休息你的代码就行了

【解决方案2】：

我已经在我的项目中完成了这项工作，在特定列上添加了一个类 style: "click_able"。

grid.Column("CompanyName", style: "click_able", format: @<text><a href="javascript:SubmitValues('@item.Col1','@item.Col2','@item.Col3');">@item.CompanyName</a></text>, header: "ABC"),

然后添加点击功能就好了。

<script type="text/javascript">
$(".click_able").click(function () {
    // Do something 
});

在我的情况下它工作正常。

【讨论】：