2012-02-22 84 views
0

使用ASP.NET MVC3 Razor引擎和jQuery我應該如何使用jqGrid PostData?

我有一個日曆(fullcalendar)和一個網格(jqgrid)。當我在日曆上選擇日期時,我需要根據所選日期更新網格。我如何在網格中執行此操作?我已經看到了一些關於使用postdata的討論,但我似乎無法讓它正常工作。

的Jquery:

currentMaintenanceGrid.jqGrid({ 
       url: '@Url.Action("GetCurrentMaintenanceItems", "Home")', 
       datatype: 'json', 
       mtype: 'POST', 
       colNames: ['Component Type', 'Serial Number', 'Facility', 'Building', 'Area', 'Schedule Type', 'Task Hours', 'Reschedule', 'ComponentScheduleID'], 
       colModel: [ 
        { name: 'ComponentType', index: 'A', width: 40 }, 
        { name: 'SerialNumber', index: 'B', width: 40 }, 
        { name: 'Facility', index: 'C', width: 400 }, 
        { name: 'Building', index: 'D' }, 
        { name: 'Area', index: 'E' }, 
        { name: 'ScheduleType', index: 'F' }, 
        { name: 'TaskHours', index: 'G' }, 
        { name: 'Reschedule', index: 'H' }, 
        { name: 'ID', index: 'j', key: true, hidden: true } 
       ], 
       pager: '#pager', 
       rowNum: 10, 
       rowList: [5, 10, 20, 50], 
       sortname: 'ComponentType', 
       sortorder: 'desc', 
       rownumbers: true, 
       viewrecords: true, 
       altRows: true, 
       //altclass: 'myAltRowClass', 
       height: '100%', 
       gridview: true, 
       jsonReader: { cell: "" }, 
       caption: 'Grid Title', 
      }); 

     $('#calendar').fullCalendar({ 
      theme: true, 
      header: { 
       left: 'prev', 
       center: 'title', 
       right: 'next' 
      }, 
      selectable: false, 
      defaultView: 'month', 
      editable: false, 
      dayClick: function (date, allDay, jsEvent, view) { 
       $(this).addClass('activeDay') 
       if (activeDay != this) { 
        $(activeDay).removeClass('activeDay') 
       } 
       activeDay = this; 
      } 
     }); 

控制器:

public ActionResult GetCurrentMaintenanceItems(string sidx, string sord, int page, int rows) 
     { 
      // TODO: Fix Testing Data so we don't have to hardcode dates 
      IQueryable<schedule> lstQuery = m_clsScheduleRepository.GetMaintenanceSchedules(Convert.ToDateTime("1/21/2010")); 

      return CreateMaintenanceGridJsonResult(lstQuery, false, sidx, sord, page, rows); 
     } 

現在我們只是用一個硬編碼的日期,並明確這是不是我們想要的。我們應該在哪裏開始正確地工作?

回答

0

我從來沒有使用過fullcalendar插件,但我在文檔中找到了關於getDate的信息。因此,您可以發送關於日曆上日曆的其他信息,每次重新加載。做爲此,您可以使用

postData: { 
    date: function() { 
     return $('#calendar').fullCalendar('getDate'); 
    } 
} 

在這種情況下屬性名稱'date'將是將被髮送到服務器的附加參數。所以,你應該包括的GetCurrentMaintenanceItems方法的參數列表date參數:

public ActionResult GetCurrentMaintenanceItems (string sidx, string sord, int page, 
               int rows, string date) { 
    ... 
} 

此外,我建議你包括在dayClick回調reloadGrid電話:

currentMaintenanceGrid.trigger('reloadGrid', [{page: 1}]);