0

我有一些剃刀语法，它动态生成一个 html 表并在生成它时填充数据。我需要对我的 MVC ASP.Net 控制器进行 jQuery ajax 调用，以获取一些数据以进入该确切表中的另一个字段。现在我要做的是遍历该表的子节点，并在加载后在这些行中逐个单元格地附加该字段单元格。

然而，这并不成功，该表显示为好像它没有任何子节点，即到那时剃刀语法尚未执行完毕。

我该怎么做才能在 html 表填满数据后执行添加额外字段的脚本？这是我的代码。这是 razor 和 html 语法。

@if (Model.ToList().Count > 0) {
      <table id ="groupTable">
        <thead>
            <tr>
                <th>Group Name</th>
                <th>Description</th>
            </tr>
        </thead>

        <tbody id="innerTable">
        @foreach (var group in Model) {
        // display a link with each GroupName as a list which directs to that group with that id
        <tr>    
            <td> @Html.ActionLink(group.Group.GroupName,"DisplayGroup","Groups", new {id = group.GroupId},null) </td>

            <td>
                @if(group.Group.Description.Length > 40){   
                    @group.Group.Description.Substring(0, 40)                   
                    <span>...</span> 
                }
                else
                {
                    @group.Group.Description.Substring(0, group.Group.Description.Length - 1)
                }
            </td>
        </tr>
        }
     </tbody>
  </table>
}

这是在 document.ready 上执行的脚本

$(document).ready( function() {
  @foreach (var group in Model)
    {
    <text>
    jQuery.ajax({
        type: 'POST',
        url: '/Groups/GetInvitedFriends',
        data: { groupId: '@group.Group.GroupId' },
        success: function (friendMembers) {
            $.each(friendMembers, function (index, friendName) {
                // append friend Members at row with index index at that cell
                var tbody = $('#innerTable')[0];
                var trow = tbody.childNodes[index];

                if (trow.index() === 0) {
                    trow.append('<td> Members </td>');
                } else {
                    trow.append('<td>' + friendName + '</td>');
                }
            });
        },
        traditional: true
        });
    </text>
    }
})
4

1 回答 1

0

由于 javascript 只会在客户端浏览器上执行，因此您可以将组的 id 存储在 javascript 数组中，然后在文档加载中，在该数组上循环以添加每个额外的单元格。

这是javascript代码：

<script type="text/javascript">

    //List of groups id
    var groupIds = [];

    $(function() {

        //Initializing the array with values
        @foreach (var group in Model) {
            <text>groupIds .push(@group.Group.GroupId);</text>
         }

        InsertExtraCells(groupIds.pop()); //Insert for the first groupid in the array

    });

    function InsertExtraCells(groupId) {
        jQuery.ajax({
            type: 'POST',
            url: '/Groups/GetInvitedFriends',
            data: { groupId: '@group.Group.GroupId' },
            success: function (friendMembers) {

                //Do your work

                $.each(friendMembers, function (index, friendName) {
                    // append friend Members at row with index index at that cell
                    var tbody = $('#innerTable')[0];
                    var trow = tbody.childNodes[index];

                    if (trow.index() === 0) {
                        trow.append('<td> Members </td>');
                    } else {
                        trow.append('<td>' + friendName + '</td>');
                    }
                });


                //If ids remaining in the array, loop to the next group id
                if (groupIds.length > 0) {
                    InsertExtraCells(groupIds.pop());
                }
                else {
                    //Do whatever when finish
                }
            },
            traditional: true
        });

    }

</script>
于 2013-05-23T16:59:42.250 回答