Question

我正在使用ASP .NET MVC4开始Web开发，我遇到了以下问题：

我需要在表格中显示视图模型的某些字段，当选择或单击某行时，在带有文本框的另一个div中显示额外数据。这是因为wiewmodel有很多字段，我想在表格中显示更重要的数据（不需要在屏幕上滚动），而另一个div中的表格则不太重要（类似于Outlook邮件客户端功能，当您选择一封电子邮件，电子邮件正文显示在下方）。

所以我想解决这个问题我需要知道所选择的行参数item.A然后用AJAX检索与item.A相关的额外数据。

一些通用代码：

@foreach (var item in Model) {

<tr>
    <td>
        @Html.DisplayFor(modelItem => item.A)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.B)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.C)
    </td>
    ...
    ...
    ...
    <td>
        @Html.DisplayFor(modelItem => item.Z)
    </td>
</tr>
}

我尝试了几个Jquery和javascripts脚本来实现这一点但没有成功，所以我想我错过了一些东西。

这是一个示例脚本

<script>
    $('tr').click(function () {
        alert('values: ' + $(this).data('A'));
    });
</script>

注意：只需使用alert来测试脚本，稍后我将用AJAX调用替换它。

任何帮助将不胜感激。

Answer 1

    @foreach (var item in Model) {

    <tr data-id="@item.A">
        <td>
            @Html.DisplayFor(modelItem => item.A)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.B)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.C)
        </td>
        ...
        ...
        ...
        <td>
            @Html.DisplayFor(modelItem => item.Z)
        </td>
    </tr>
    }


<script>
    $(document).ready(function () {

        $('tr').click(function () {
            alert('values: ' + $(this).data('id'));  //you will get item.A value
//do ajax call here and add partial view html data to div 
        });
    });

</script>

单击表格行时如何使用文本框显示额外数据？

1 个答案: