按下键盘输入时如何在 Ajax 调用 url 更改后停止 MVC 页面刷新答案

【问题标题】：How to Stop MVC Page Refresh After Ajax Call url Change when Keyboard Enter Pressed按下键盘输入时如何在 Ajax 调用 url 更改后停止 MVC 页面刷新
【发布时间】：2018-07-13 11:14:28
【问题描述】：

当我在文本框中输入文本并按 Enter 然后我的页面刷新和 URL 更改时，我是 Upload Page Snap，您可以在 Image 中看到。这是我在文本框中输入文本然后数据显示在 jQgrid 中时的 JQgrid 代码。

当我输入文本框值并按键盘 Enter 按钮时如何停止页面刷新。

这是我的 HTML 和 Jquery 代码，我想在文本框中输入值并按 Enter 时停止页面刷新，然后我的页面 Regresh 和页面链接已更改

这是页面链接http://localhost:11736/Home/Index?

jQuery(document).ready(function($) {

  jQuery("#searchAll").change(function() {
    var $grid = $("#searchGrid");

    $grid.jqGrid({
      url: '@Url.Action("Search_All")',
      datatype: 'json',
      postData: {
        mSearch: function() {
          return $("#searchAll").val();
        }
      },
      jsonReader: {
        id: 'MemberShipID'
      },
      colModel: [{
          name: 'MemberShipID',
          index: 'MemberShipID',
          label: 'MemberShip ID',
          width: 20
        },
        {
          name: 'MembershipName',
          index: 'MembershipName',
          label: 'Membership Name',
          width: 30
        },
        {
          name: 'address',
          index: 'address',
          label: 'address',
          width: 50
        },
        {
          name: 'address1',
          index: 'address1',
          label: 'address1',
          width: 50
        },
        {
          name: 'FileID',
          index: 'FileID',
          label: 'File ID',
          width: 20
        },
        {
          name: 'SectorName',
          index: 'SectorName',
          label: 'SectorName',
          width: 20
        },
        {
          name: 'PhaseName',
          index: 'PhaseName',
          label: 'PhaseName',
          width: 20
        },
        {
          name: 'PlotCategory',
          index: 'PlotCategory',
          label: 'PlotCategory',
          width: 20
        },
        {
          name: 'RPersonName',
          index: 'RPersonName',
          label: 'RPersonName',
          width: 20
        },
        {
          name: 'CityName',
          index: 'CityName',
          label: 'City',
          width: 10
        },
        {
          name: 'CountryName',
          index: 'CountryName',
          label: 'Country',
          width: 10
        }
      ],
      additionalProperties: [],
      loadonce: true,
      navOptions: {
        reloadGridOptions: {
          fromServer: true
        }
      },

      formEditing: {

        closeOnEscape: true,
        closeAfterEdit: true,
        savekey: [true, 13],
        reloadGridOptions: {

          fromServer: true
        }
      },
      viewrecords: true,
      height: 300,
      width: 1200,
      rowNum: 100,
      autoheight: true,
      rowList: [10, 20, 30, 50, 100, 500],
      pager: "#jqGridPager",
      rownumbers: true

    });

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="app-search">
  <input type="text" class="form-control" id="searchAll" placeholder="Search for..."> <a class="srh-btn"><i class="ti-search"></i></a>
</form>

【问题讨论】：

标签： jquery ajax jqgrid

【解决方案1】：

据我了解，您的问题是表单标签的默认提交行为，当按下 Enter 键时会引发提交事件。

为了防止该事件，您可以使用以下代码

jQuery(document).ready(function(){
    jQuery("form.app-search").submit(function(e){
        e.preventDefault();
    });
})

jQuery("form.app-search") 是一个 jquery 选择器，用于查找具有 app-search 类的表单标签，即使您可以编写一个非常具体的 Id（# 选择器）。

试试FIDDLE

希望这对你有用。

【讨论】：

感谢它的工作。

【解决方案2】：

$(document).keypress(function(e) 
  { if(e.keyCode === 13) // 13 is ASCII-code for keyboard ENTER key
  { e.preventDefault(); return false; } });

【讨论】：