ASP.NET MVC, автозаполнение в jQGrid не вызывает контроллер для данных

Question

Автозаполнение не вызывает соответствующего действия на контроллере. В моем случае здесь 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("");
    }

Это также не вызывается. FindLocation с параметрами работает нормально, если автозаполнение используется с текстовым полем html.

Pl, помогите мне найти проблему. Видел почти все сообщения, связанные с этим .. работает над этим с 2 дней сейчас ..

Спасибо, Bhoomi.

Answer 1

Прежде всего, в вашей программе есть простая, но очень важная ошибка: файл grid.locale-en.js должен быть вставлен до jquery.jqGrid.js. Если вы используете версию разработчика jqGrid из GitHub , то 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. Кроме того, я рекомендую использовать jQuery UI 1.8.2 вместе с jqGrid 1.7.2.

Использование некоторых параметров по умолчанию, таких как align: 'left' или editable: false, не требуется.