使用EF在MVC4 Razor中不显示JQgrid [英] JQgrid Is Not Displaying in MVC4 Razor with EF

查看:73
本文介绍了使用EF在MVC4 Razor中不显示JQgrid的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我开始研究MVC Razor,使用Entity框架,我的目标是在JQgrid中显示用户的详细信息。我从我的控制器返回json数据。它工作正常,它命中数据库,并检索数据库,但当涉及到查看部分时,我得到数组中的值,而不是网格中的值。网格根本没有在视图中显示。我的问题是什么。



<% -  CSS Files  -  %> ;  
< link href = / Content / jquery-ui-1.8.7。 css rel = stylesheet type = text / css />
< link href = / Content / ui.jqgrid.css rel = < span class =code-string> stylesheet type = text / css />
< link href = / Content / ui.multiselect.css rel = < span class =code-string> stylesheet type = text / css />

<% - jQuery Library - %>
< script src = / Scripts / jquery-1.5.2.min.js type = text / javascript>< / script>

<% - 必须在脚本标记之前加载语言标记 - %>
< script src = / Scripts / grid.locale-en.js type = text / javascript>< / script>
< script src = / Scripts / jquery.jqGrid.min.js类型= text / javascript>< / script>






< h2> GetUserDetails < / h2 >
< script type = text / javascript>
jQuery( document )。ready( function (){
jQuery(< span class =code-string> #list)。jqGrid({
url:' / User / GetUserDetails'
datatype:' json'
mtype:' POST'
colNames:[' Id'' 名称'' 名称'' 城市'],
colModel:[
{name:' Id',index:< span class =code-string>' Id',width: 40 ,对齐:' left'},
{name:' 名称',索引:' 名称,宽度: 40 ,对齐:' left'},
{name:' Designation',index :' 名称',宽度: 400 ,align:' left'},
{name:' City',index:' 城市,widt h: 150 ,对齐:' left'}
],
pager:jQuery(' #pager'),
rowNum: 2
rowList:[ 5 10 20 50 ],
sortname: ' Id'
sortorder: desc
viewrecords: true

标题:' 我的第一个网格'
});
});
< / script>

<% - HTML必需 - %>
< h2>我的网格数据< / h2 >
< table id = list class = < span class =code-string> scroll cellpadding = 0 cellssacing = 0> < / 表格 >
< div id = pager class = scroll style = text-align:center;> < / div >
le = text-align:center ;> < / div >





和我的控制器看起来像这样



  public  JsonResult GetUserDetails( string  sidx =   Id string  sord =   asc int  page =  1  int  rows =  5 
{

int pageIndex = Convert.ToInt32(page) - 1 ;
int pageSize = rows;
int totalRecords = db.Users.Count();
int totalPages =( int )Math.Ceiling(( float )totalRecords /( float )pageSize);

// var userdata = db.Users.OrderBy(sidx ++ sord) .Skip(pageIndex * pageSize).Take(pageSize);


var userdata = db.Users。 OrderBy(sidx + + sord).Skip(pageIndex * pageSize).Take(pageSize)。选择(u = > new {u.Id,u.Name,u.Designation,u。城市});

var jsonData = new
{

total = totalPages,
page,
records = totalRecords,

rows =(
from u in userdata.AsEnumerable()
select new
{
i = u.Id,
cell = new string [] {u.Id.ToString(),u.Name,u.Designation,u.City}
})。ToArray()
};
return Json(jsonData,JsonRequestBehavior.AllowGet);
}
}





我的路线配置是

< pre lang =cs> public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute( {resource} .axd / {*} PATHINFO);

routes.MapRoute(
name: 默认
url: {controller} / {action} / {id}
默认值: new {controller = 用户,action = GetUserDetails,id = UrlParameter.Optional}
);
}





请解决我的问题。我在我的VS 2012,MVC 4中这样做。我在这里缺少任何参考。

提前谢谢

解决方案

可能有Jquery冲突问题也存在于布局页面中。



参考文章。



Asp.Net MVC-4,实体框架和JQGrid演示与简单的Todo列表WebApplication [ ^ ]


Hi, I started working on MVC Razor, with Entity framework , my aim is to display the details of user in JQgrid. and i am returning json data from my controller. its working fine, it hits the Database, and retriebing the database, but when it comes to view part,i am getting values in arrays, not in grid. grid is not at all displaying in view. what is my issue.

 <%--CSS Files--%>
    <link href="/Content/jquery-ui-1.8.7.css" rel="stylesheet" type="text/css" />
    <link href="/Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <link href="/Content/ui.multiselect.css" rel="stylesheet" type="text/css" />

    <%--jQuery Library--%>
    <script src="/Scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
    
    <%--Must load language tag BEFORE script tag--%>
    <script src="/Scripts/grid.locale-en.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
  





<h2>GetUserDetails</h2>
 <script type="text/javascript">
     jQuery(document).ready(function () {
         jQuery("#list").jqGrid({
             url: '/User/GetUserDetails',
             datatype: 'json',
             mtype: 'POST',
             colNames: ['Id', 'Name', 'Designation','City'],
             colModel: [
          { name: 'Id', index: 'Id', width: 40, align: 'left' },
          { name: 'Name', index: 'Name', width: 40, align: 'left' },
          { name: 'Designation', index: 'Designation', width: 400, align: 'left' },
          { name:'City', index:'City', width:150, align:'left'}
          ],
             pager: jQuery('#pager'),
             rowNum: 2,
             rowList: [5, 10, 20, 50],
             sortname: 'Id',
             sortorder: "desc",
             viewrecords: true,
           
             caption: 'My first grid'
         });
     }); 
    </script>  

 <%-- HTML Required--%>
    <h2>My Grid Data</h2>
    <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
    <div id="pager" class="scroll" style="text-align:center;"></div>
   le="text-align:center;"></div>



and my controller looks like this

public JsonResult GetUserDetails(string sidx="Id", string sord="asc", int page=1, int rows=5)
      {

          int pageIndex = Convert.ToInt32(page) - 1;
          int pageSize = rows;
          int totalRecords = db.Users.Count();
          int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

         // var userdata = db.Users.OrderBy(sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize);


          var userdata = db.Users.OrderBy(sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize).Select(u => new { u.Id, u.Name, u.Designation, u.City });

          var jsonData = new
          {

              total = totalPages,
              page,
              records = totalRecords,

              rows = (
                  from u in userdata.AsEnumerable()
                  select new
                  {
                      i = u.Id,
                      cell = new string[] { u.Id.ToString(), u.Name, u.Designation, u.City }
                  }).ToArray()
          };
          return Json(jsonData,JsonRequestBehavior.AllowGet);
      }
  }



My route config is

public static void RegisterRoutes(RouteCollection routes)
       {
           routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

           routes.MapRoute(
               name: "Default",
               url: "{controller}/{action}/{id}",
               defaults: new { controller = "User", action = "GetUserDetails", id = UrlParameter.Optional }
           );
       }



please sort out my issue. i am doing this in my VS 2012 , MVC 4. am i missing any reference here.
Thanks in advance

解决方案

There might be Jquery conflict issues which is also present in layout page.

Refer article.

Asp.Net MVC-4,Entity Framework and JQGrid Demo with simple Todo List WebApplication[^]


这篇关于使用EF在MVC4 Razor中不显示JQgrid的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆