Asp.net mvc 3 ASP.Net MVC3 Razor Jqgrid未呈现视图页面_Asp.net Mvc 3_Jqgrid

Asp.net mvc 3 ASP.Net MVC3 Razor Jqgrid未呈现视图页面

asp.net-mvc-3 jqgrid

Asp.net mvc 3 ASP.Net MVC3 Razor Jqgrid未呈现视图页面,asp.net-mvc-3,jqgrid,Asp.net Mvc 3,Jqgrid,在我的项目中，我必须实现Datagrid视图。经过几次研究，我发现Jqgrid在asp.net mvc3中的自定义网格视图中更灵活。因此，通过阅读教程[Using jQuery Grid With ASP.NET MVC][1]，我创建了一个控制器和一个视图。但现在它没有呈现视图页面。当我单击索引页面中的链接时，它只是显示错误404。找不到页面我的控制器代码 [HttpGet] public ActionResult ViewEmployeeData()

在我的项目中，我必须实现Datagrid视图。经过几次研究，我发现Jqgrid在asp.net mvc3中的自定义网格视图中更灵活。因此，通过阅读教程[Using jQuery Grid With ASP.NET MVC][1]，我创建了一个控制器和一个视图。但现在它没有呈现视图页面。当我单击索引页面中的链接时，它只是显示错误404。找不到页面

我的控制器代码

      [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

@{
    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>

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

查看页面

      [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

@{
    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>

@{
ViewBag.Title=“ViewEmployeeData”；
Layout=“~/Views/Shared/\u LayoutUser.cshtml”；
}
@*Jqgrid的脚本*@
jQuery（文档）.ready（函数（）{
jQuery（“#list”）.jqGrid({
url:“/Home/ViewEmployeeData/”，
数据类型：“json”，
mtype:'获取'，
colname:['EmpId'，'FirstName'，'MiddleName'，'LastName'，'Address'，'dateofjoint'，'Department'，'Position']，
colModel：[
{名称：'EmpId'，索引：'EmpId'，宽度：40，对齐：'left'}，
{name:'FirstName'，index:'FirstName'，宽度：40，对齐：'left'}，
{name:'LastName'，index:'LastName'，宽度：200，对齐：'left'}]，
{name:'LastName'，index:'LastName'，宽度：200，对齐：'left'}]，
{name:'Address'，index:'Address'，width:200，align:'left'}]，
{name:'DateOfJoining'，index:'DateOfJoining'，宽度：200，align:'left'}]，
{名称：'Department'，索引：'Department'，宽度：200，对齐：'left'}]，
{name:'Position'，index:'Position'，width:200，align:'left'}]，
pager:jQuery（“#pager”），
宽度：660，
高度：“自动”，
rowNum:10，
行列表：[5,10,20,50]，
sortname:“EmpId”，
巫师：“描述”，
viewrecords：是的，
标题：“员工信息”
});
}); 
查看员工数据

索引页

      [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

@{
    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>

在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'}]

perphaps您需要HttpGet而不是HttpPost属性来指定。或者使用HttpGet呈现此网格的另一个ActionResult…@xurca当我使用HttpGet时，同样的结果正在发生..没有变化。我两个都试过了。@xurca..您好，我已经编辑了代码。现在页面呈现时没有网格。只是一个空白页面。然后检查您的浏览器是否抛出了一些js异常，并检查您的js代码。我认为它在jqGrid块中不正确。您有额外的大括号]这一个。检查并删除它们