ASP.NET MVC，jQGrid中的自动完成功能不会调用数据控制器

Question

自动完成功能不会在Controller上调用相应的操作。 在我的情况下，在自动完成的文本框中输入任何内容时，SharedContoller \ FindLocation不会被调用。休息所有的事情都很好。

宣言脚本：

<script src="../../Scripts/jquery-1.4.2.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery-ui-1.8.custom.min.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.autocomplete.js" type="text/javascript"></script>  
<script src="../../Scripts/jquery.jqGrid.js" type="text/javascript"></script> 
<script src="../../Scripts/js/jqModal.js" type="text/javascript"></script> 
<script src="../../Scripts/js/jqDnR.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.maskedinput-1.2.2.min.js" type="text/javascript"></script> 
<script src="../../Scripts/js/grid.locale-en.js" type="text/javascript"></script> 

表声明：

<table id ="RegionAndCity" class="scroll" cellpadding="0" cellspacing="0"></table> 
<div id="listPager" class="scroll" style="text-align:center;"></div> 

最后的jqGrid和自动完成代码：

var PlanId = $("#PlanId").val(); 
var updateDialog = { 
    url: '<%= Url.Action("UpdateRegionAndCity", "BriefAllocation") %>' 
    , closeAfterAdd: true 
    , closeAfterEdit: true 
    , recreateForm: true 
    , modal: false, 
    onclickSubmit: function (params) { 
     var ajaxData = {}; 
     var plannerName = $("#PlannerId :selected").text(); 
     ajaxData = { PlanId: PlanId, PlannerName: plannerName, 
        LocationName: $("#LocationId :selected").text() }; 
     return ajaxData; 
    } 
};  

$("#RegionAndCity").jqGrid({ 
    url: '/BriefAllocation/GetRegionAndCities/?PlanId=' + PlanId, 
    datatype: 'json', 
    mtype: 'GET', 
    prmNames: { PlanId: PlanId }, 
    colNames: ['RegionsAndCitiesId', 'LocationId', 'LocationName'], 
    colModel: [ 
     { name: 'RegionsAndCitiesId', index: 'RegionsAndCitiesId', width: 100, 
      align: 'left', /* key: true,*/editable: true, 
      editrules: { edithidden: false }, hidedlg: true, hidden: true }, 
     { name: 'LocationId', index: 'LocationId', width: 150, align: 'left', 
      editable: false, edittype: 'select', editoptions: { value: countries }, 
      editrules: { required: true }, formoptions: { elmsuffix: ' *'} }, 
     { name: 'LocationName', index: 'LocationName', width: 300, align: 'left', 
      editable: true, edittype: 'text', 
      editoptions: { dataInit: 
       function (elem) { 
        setTimeout(function() { 
         $(elem).autocomplete('/Shared/FindLocation/', { 
          dataType: "json", 
          multiple: false, 
          formatItem: function (item, index, total, query) { 
           return item.value; 
          }, 
          parse: function (data) { 
           return $.map(data, function (item) { 
            return { 
             data: item, 
             value: item.Key, 
             result: item.value 
            } 
           }); 
          } 
         }).result(function (event, row) { 
          $("#LocationId").val(row.Key); 
         }); 
        }, 100); 
       } 
      }, editrules: { required: true } 
     }], 
     pager: $('#listPager'), 
     rowNum: 10, 
     rowList: [5, 10, 20, 50], 
     sortname: 'RegionsAndCitiesId', 
     sortorder: "asc", 
     viewrecords: true, 
     imgpath: '/scripts/themes/steel/images', 
     caption: '<b>Regions And Cities</b>', 
     ondblClickRow: function (rowid, iRow, iCol, e) { 
      $("#RegionAndCity").editGridRow(rowid, prmGridDialog); 
     } 
    }).navGrid('#listPager', { edit: true, add: true, del: true, refresh: true }, 
      updateDialog, 
      updateDialog, 
      updateDialog); 
}); 

自动完成调用SharedController \ FindLocation。代码是：

public ActionResult FindLocation(string q, int limit) 
    { 
     return Content(""); 
    } 

此方法不会被调用。我也试过：

public ActionResult FindLocation() 
    { 
     return Content(""); 
    } 

这也不会被调用。如果自动完成与html文本框一起使用，带参数的FindLocation可以正常工作。

我帮我找到问题。几乎所有的帖子都从这两天开始工作..

谢谢， Bhoomi。

Answer 1

首先，在程序中有一个简单但非常重要的错误：文件grid.locale-en.js必须插入之前 jquery.jqGrid.js。如果您使用GitHub中的jqGrid的Developer Version，那么grid.locale-en.js已经被加载到jquery.jqGrid.js中。

其他小的语法错误在updateDialog。在JavaScript中，你应该小心使用新的行。在某些情况下，您不得不插入;在行和行的末尾插入它给你。例如，你忘了分号后

return { 
    data: item, 
    value: item.Key, 
    result: item.value 
} 

应该

return { 
    data: item, 
    value: item.Key, 
    result: item.value 
}; 

，但它并没有那么糟糕。在另一个地方不太好。你应该重写updateDialog像下面

var updateDialog = { 
    url: '<%= Url.Action("UpdateRegionAndCity", "BriefAllocation") %>', 
    closeAfterAdd: true, 
    closeAfterEdit: true, 
    recreateForm: true, 
    modal: false, 
    onclickSubmit: function (params) { 
     return { PlanId: $("#PlanId").val(), 
       PlannerName: $("#PlannerId :selected").text(), 
       LocationName: $("#LocationId :selected").text() }; 
    } 
}; 

放置在逗号行的末尾，并把var PlanId = $("#PlanId").val();的onclickSubmit功能里面是很重要的。在您当前的代码$("#PlanId").val()将被读取onclickSubmit以外，所以您将使用从“#PlanId”字段的所有时间旧值。

此外你使用哪个版本的jqGrid？属性class="scroll"自从某些版本的jqGrid需要noot。此外，我建议你使用jQuery UI 1.8.2连同jqGrid 1.7.2。

使用一些默认选项，如align: 'left'或editable: false是不需要的。