2012-02-22 6 views
0

ASP.NET MVC3 Razor EngineとjQueryの使用jqGrid PostDataをどのように使用する必要がありますか?

私はカレンダー(フルカレンダー)とグリッド(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に関する情報が見つかりました。だから、グリッドのをすべてリロードする毎に、カレンダーからその日に関する追加情報をに送信することができます。これを行うのですか、あなたは、プロパティ名'date'がサーバーに送信される追加のパラメータになります場合は

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

を使用することができます。

currentMaintenanceGrid.trigger('reloadGrid', [{page: 1}]); 
:あなたはdayClickreloadGridのコールをコールバックに含める

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

は、さらに私はお勧め:だからGetCurrentMaintenanceItemsメソッドのパラメータのリストにdateパラメータを含める必要があります

関連する問題