Strange issue while including Scripts in MVC razor

Question

I have developed mvc applications before. I am currently working on cRUd based application. I have to use a JQuery Bootgrid. The infrastructure is VS 2013. MVC 5. However when i invoke the bootgrid function on the table, the table does not get rendered and only the search plugin comes in the screen. While debugging in chrome i see some error symbol after the script declaration. I am clueless , any advise would help.

I am attaching my code and also screen image from chrome.

 @model COE.Tools.Adapt.DataTransferObjects.ViewModels.UserProfileViewModel

@{
    ViewBag.Title = "Manage User Information";
}

<div class="row">
    <div class="col-lg-12">
        <h2 class="sub-header">ManageUsers</h2>
    </div>
    <!-- /.col-lg-12 -->
</div>

<div class="row">
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="row">
                <div class="col-lg-2 col-md-3">
                    <i class="fa fa-user fa-3x" aria-hidden="true"></i>
                    <button id="btnAddNew" value="NewUser" class="btn btn-default">NewUser</button>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <table id="gridUsers" class="table table-bordered table-hover">
                        <thead>
                            <tr id="tbHeader">
                            <tr>
                                <th data-column-id="firstName">FirstName</th>
                                <th data-column-id="lastName">LastName</th>
                                <th data-column-id="userId">UserId</th>
                                <th data-column-id="email">Email</th>
                                <th data-column-id="role">Role</th>
                                <th data-column-id="app">Applications</th>
                                <th data-column-id="plant">Plant</th>
                                <th data-formatter="Edit">Edit</th>
                                <th data-formatter="Delete">Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                            @{
                                foreach (var vm in Model.lstUserInformation)
                                {
                                    <tr>
                                        <td>@vm.FirstName</td>

                                        <td>@vm.LastName</td>

                                        <td>@vm.UserId</td>

                                        <td>@vm.Email</td>
                                        <td>@vm.RoleDescription</td>
                                        <td>@vm.UserApplication</td>
                                        <td>@vm.DefaultLocation</td>
                                        <td>
                                            <a id="idEditUser" href="@Url.Action("EditUser", "Account", new  {@userId = @vm.UserId })"><i class="fa fa-pencil-square-o fa-2x" aria-hidden="true"></i> Edit </a>
                                        </td>
                                        <td>
                                            <a id="idDeleteUser" href="@Url.Action("DeleteUser", "Account", new {@userId = @vm.UserId  })"><i class="fa fa-trash fa-2x" aria-hidden="true"></i> Delete </a>
                                        </td>
                                    </tr>

                                }
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


@section MyScripts {


    <script type="text/javascript">
        $(document).ready(function () {

            alert('opk');
            $("#gridUsers").bootgrid({
                caseSensitive: false,
                sorting: true,
                multiSort: true,
                selection: true,
                rowSelect: true,
                multiSelect: true,
                keepSelection: true,
                searchSettings: {
                    delay: 100,
                    characters: 1
                },
                labels: {
                    infos: "GridResults",
                    search: "GridSearch",
                    noResults: "GridNoResults",
                    all: "GridAllRowCount",
                    loading: "GridLoading"
                },
                formatters: {

                }
            });
        });
    </script>
}

Answer 1

Found my issue. Stupid me. I had 2 tr and the first one had no data.

thanks for looking into my issue.