2014-01-13 134 views
0

在我的項目中,我必須實現Datagrid View。經過多次研究,我發現Jqgrid在asp.net mvc3 razor中的自定義Gird視圖中更加靈活。 所以通過閱讀教程[使用jQuery網格與ASP.NET MVC] [1]我已經創建了一個控制器和一個視圖,但現在它不呈現視圖頁面。當我點擊從索引頁面鏈接它只顯示該錯誤404頁面不存在。ASP.Net MVC3 Razor Jqgrid not rendering the View Page

我的控制器代碼

 [HttpGet] 
     public ActionResult ViewEmployeeData() 
     { 
      return View(); 
     } 
     [HttpPost] 
     public ActionResult ViewEmployeeData(string Eord, string Empid, int page, int rows) 
     { 

      ElixirERPContext empdata = new ElixirERPContext(); 
      var query = from emp in empdata.EmpData 
         select emp; 
      var count = query.Count(); 
      var resultquery = new 
      { 
       tottal = 1, 
       page = page, 
       records = count, 
       rows = query.Select(x => new { x.EmpId, x.FirstName, x.MiddleName, x.LastName, x.Address, x.DateOfJoining, x.Department, x.Position }).ToList() 
        .Select(x => new { id = x.EmpId,Date=x.DateOfJoining, cell = new string[] { x.EmpId.ToString(), x.FirstName, x.MiddleName, x.LastName, x.Address, x.DateOfJoining.ToString(), x.Department, x.Position } }).ToArray(), 
      }; 
      return Json(resultquery, JsonRequestBehavior.AllowGet); 

      //return View(); 
     } 
    [1]: htt 

號碼://haacked.com/archive/2009/04/14/using-jquery-grid-with-asp.net-mvc.aspx/

查看頁面

@{ 
    ViewBag.Title = "ViewEmployeeData"; 
    Layout = "~/Views/Shared/_LayoutUser.cshtml"; 
} 

    @* Script For Jqgrid*@ 
<script type="text/javascript"> 
jQuery(document).ready(function() { 
    jQuery("#list").jqGrid({ 
     url: '/Home/ViewEmployeeData/', 
     datatype: 'json', 
     mtype: 'GET', 
     colNames: ['EmpId', 'FirstName', 'MiddleName', 'LastName', 'Address', 'DateOfJoining', 'Department', 'Position'], 
     colModel: [ 
     { name: 'EmpId', index: 'EmpId', width: 40, align: 'left' }, 
     { name: 'FirstName', index: 'FirstName', width: 40, align: 'left' }, 
     { name: 'LastName', index: 'LastName', width: 200, align: 'left'}], 
     { name: 'LastName', index: 'LastName', width: 200, align: 'left'}], 
     { name: 'Address', index: 'Address', width: 200, align: 'left'}], 
     { name: 'DateOfJoining', index: 'DateOfJoining', width: 200, align: 'left'}], 
     { name: 'Department', index: 'Department', width: 200, align: 'left'}], 
     { name: 'Position', index: 'Position', width: 200, align: 'left'}], 
     pager: jQuery('#pager'), 
     width: 660, 
     height: 'auto', 
     rowNum: 10, 
     rowList: [5, 10, 20, 50], 
     sortname: 'EmpId', 
     sortorder: "desc", 
     viewrecords: true, 
     caption: 'Employee Information' 
    }); 
}); 
</script> 

<h2>ViewEmployeeData</h2> 
<table id="list" ></table> 
<div id="pager"></div> 

索引頁

<li><a href="#"><i class="icon-table-2"></i>Employee Management</a> 
         <ul> 
         <li><a href="@Url.Action("EmployeeRegistration", "Home")"><i class="icon-double-angle-right"></i>Employee registration</a></li> 
          <li><a href="@Url.Action("ViewEmployeeData", "Home")""><i class="icon-double-angle-right"></i>View/Edit Employee Details</a></li> 

         </ul> 
+0

perphaps你需要HttpGet而不是HttpPost屬性來指定。或者用HttpGet渲染這個網格的另一個ActionResult ... – xurca

+0

@xurca當我使用Httpget時也發生同樣的結果..沒有改變。我已經嘗試了兩個。 – Nidheesh

+0

@ xurca..hello我編輯了代碼。現在頁面呈現沒有grid.Just空白頁 – Nidheesh

回答

1

在jqGrid塊中,您有額外的支撐。檢查它們並刪除

colModel: [ 
     { name: 'EmpId', index: 'EmpId', width: 40, align: 'left' }, 
     { name: 'FirstName', index: 'FirstName', width: 40, align: 'left' }, 
     { name: 'LastName', index: 'LastName', width: 200, align: 'left'} ], 
     { name: 'LastName', index: 'LastName', width: 200, align: 'left'} ], 
     { name: 'Address', index: 'Address', width: 200, align: 'left'} ], 
     { name: 'DateOfJoining', index: 'DateOfJoining', width: 200, align: 'left'} ], 
     { name: 'Department', index: 'Department', width: 200, align: 'left'} ], 
     { name: 'Position', index: 'Position', width: 200, align: 'left'}]