Jquery Datatable.js：单击Datatable中的编辑按钮时，页面会回发

剧本

  <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>

$（函数（）{
//$.noConflict（）；
$（'#customerGrid'）。数据表({
“columnDefs”：[
{“目标”：[0]，“可见”：false}
]
});
});
函数startEdit（obj）{
$（“.inline视图”）.show（）；
$（“.inline edit”）.hide（）；
$（obj）.closest（'tr'）.find（“td.inline视图”）.hide（）；
$（obj）.closest（'tr'）.find（“td.inline edit”）.show（）；
}
函数onCancelEdit（）{
$（“.inline视图”）.show（）；
$（“.inline edit”）.hide（）；
}

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>

@DisplayNameFor（model=>model.FirstName）
@foreach（模型中的var项目）
{                                                
@DisplayFor（modelItem=>item.FirstName）
@EditorFor（modeleItem=>item.FirstName）
编辑
取消
}

我正在使用带有adminlte 3主题的datatable。每当我单击datatable中的edit按钮（如图1所示）时，它都会再次回发页面。没有抛出错误。不知道我错过了什么

当我点击编辑按钮时，它应该只是从查看模式切换到编辑模式。这就是我想做的。以上是相同的代码

---

仅供参考：仅在问题中显示/包含一列，以使问题更清晰。

一个不带

类型属性的
按钮
充当
类型=“提交”
，并在单击时尝试提交表单数据。因此，您将在页面中收到回发。尝试向其添加
type=“button”
，它将正常工作，如：

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

编辑
不带
类型属性的
按钮
充当
type=“submit”
，单击时将尝试提交表单数据。因此，您将在页面中收到回发。尝试向其添加
type=“button”
，它将正常工作，如：

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

编辑