Question

我是MVC的新手，并尝试在webgrid上完善概念。我在view

中有以下代码

@model IEnumerable<MVCMovies.Models.Movie>
@{
  ViewBag.Title = "Index";      

 }
 <script type="text/javascript">
 $(function() {
    $('tbody tr').on('hover', (function () {
        $(this).toggleClass('clickable');
    }));
    $('tbody tr').on('click', (function () {
        alert('rajeev');
    }));
});
</script>
 <style type="text/css">
   .table {
   margin: 4px;
    width: 100%;
    background-color: #FCFCFC;
}

.head {
    background-color: #11E8CD;
    font-weight: bold;
    color: #CC6699;       
}

.webGrid th, .webGrid td {
    border: 1px solid #C0C0C0;
    padding: 5px;
    color:white;
}

.altRow {
    background-color: #E4E9F5;
    color: #000;
}

.gridHead a:hover {
    text-decoration: underline;
}

.description {
    width: auto;
}

.selectRow {
    background-color: #0B7BEB;
}
.clickable {
    cursor: pointer;
    background: #ffff99;
}
</style>
<p>
   @Html.ActionLink("Create New", "Create")
</p>
<div>
  @using (Html.BeginForm())
  {
    @Html.AntiForgeryToken()
    <div style="float:left">Title : @Html.TextBox("SearchString")<br />         </div>
        <div style="float:left; padding-left:5px">
        <input type="button" value="Filter" class="btn" />
    </div>
    }
 </div>
  <div id="grid">
     @{
     var gd = new WebGrid(Model, rowsPerPage: 2, ajaxUpdateContainerId: "grid");
        @gd.GetHtml(tableStyle: "table");
   }

 </div>


     @section Scripts {
   @Scripts.Render("~/bundles/jqueryval")
}

现在我有jquery编写的代码用于点击行functinon，但它在我排序或在webgrid中进行分页后停止工作

Answer 1

ajaxUpdateCallback是服务器调用完成后将调用的javascript函数的名称。这将允许您在分页或排序后调用您的jQuery函数。

 @ { var grid = new WebGrid(data, ajaxUpdateContainerId : "grid", 
            ajaxUpdateCallback: "callBack");
   }

Answer 2

在对表内容进行排序时，请刷新。试试这个

    $(function () {
        $(document).on('click', 'tbody tr', (function () {
            alert('rajeev');
        }));
        $(document).on({
            mouseenter: function () {
                $(this).toggleClass('clickable');
            },
            mouseleave: function () {
            }
        }, 'tbody tr');
    });

Answer 3

你应该使用代表：

$(function() {
    $('tbody').on('hover', 'tr', function () {
        $(this).toggleClass('clickable');
    });
    $('tbody').on('click', 'tr', function () {
       alert('rajeev');
   });
});

您的初始代码将事件处理程序直接绑定到tr元素。在排序和分页时，重新渲染的行会丢失处理程序。

Answer 4

试试这个

<script type="text/javascript">
     $(function() {
        $('tbody tr').live('hover', (function () {
            $(this).toggleClass('clickable');
        }));
        $('tbody tr').live('click', (function () {
            alert('rajeev');
        }));
    });
  </script>

排序或分页后，JavaScript无法在MVC webgrid中运行

4 个答案: