Datatable.js:单击数据表中的编辑按钮时的页面回发

Question

​

​

​

​

脚本

  <script type="text/javascript">

        $(function() {
           // $.noConflict();
            $('#customerGrid').DataTable({
                "columnDefs": [  
                    { "targets": [0], "visible": false }
                ]
            });
        });

        function startEdit(obj) {            
            $(".inline-view").show();
            $(".inline-edit").hide();
            $(obj).closest('tr').find("td .inline-view").hide();
            $(obj).closest('tr').find("td .inline-edit").show();
        }
        function onCancelEdit() {
            $(".inline-view").show();
            $(".inline-edit").hide();            
        }
    </script>

Index.chtml

<thead>
 <th>
      @Html.DisplayNameFor(model => model.FirstName)
 </th>
</thead>


<tbody>
   @foreach (var item in Model)
      {                                                
         <td>
           <div class="inline-view">
               @Html.DisplayFor(modelItem => item.FirstName)
           </div>
           <div class="inline-edit" style='display:none;'>
               @Html.EditorFor(modelItem => item.FirstName)
           </div>
      </td>



 <td>
      <div class="inline-view">
            <button class="editBtn" onclick='startEdit(this);'>Edit</button>
      </div>
      <div class="inline-edit" style="display:none">
            <input class="saveButton" type="submit" id="saveBtn" value="Save" data-eid="@item.CustomerId" />
            <button id="cancelBtn" onclick='oncancelEdit(); return false;'>Cancel</button>
      </div>
</td>
}
</tbody>

我使用的是adminlte 3主题的数据表。每当我单击datatable中的编辑按钮时，如图1所示，它会再次回发页面。未抛出任何错误。不知道我错过了什么。

当我单击编辑按钮时，它应该只是从视图模式切换到编辑模式。这就是我想要做的。上面是相同的代码。

仅供参考:仅在问题中显示/包含了一列，以提供清晰度。

Answer 1

没有type属性的button将充当type="submit"，并在单击时尝试提交表单数据。因此，您的页面中会出现回发。尝试将type="button"添加到其中，它将很好地工作，如下所示：

<button type="button" class="editBtn" onclick='startEdit(this);'>Edit</button>