Home/ Questions/Q 9230253
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T05:46:45+00:00

I’m trying to create a simple user – role management project using asp.net mvc3

  • 0

I’m trying to create a simple user – role management project using asp.net mvc3 Entity Framework 4 (first model) and use jqgrid to display the data.

but why if I change data relationships between table user and role into many-to-many relation ship,
jqgrid failed to load data.

Below is My Project data:

Project data:

  1. VS 2010
  2. ASP.Net MVC 3
  3. View : Razor
  4. ORM: Linq To Entity

  5. JQGrid Version : jqGrid 3.8

  6. Project Package :

    • EntityFramework” version=”4.1.10715.0
    • jQuery” version=”1.5.1
    • jQuery.UI.Combined” version=”1.8.11
    • jQuery.Validation” version=”1.8.0
    • jQuery.vsdoc” version=”1.5.1″
    • Modernizr” version=”1.7
    • MvcScaffolding” version=”1.0.6
    • T4Scaffolding” version=”1.0.5

Model :

– User

    public partial class User
{

    [Key]
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)] 
    public int UserId { get; set; }
    public string UserName { get; set; }
    public string LoweredUserName { get; set; }
    public string MobileAlias { get; set; }
    public bool IsAnonymous { get; set; }
    public System.DateTime LastActivityDate { get; set; }

    public virtual ICollection<Role> Roles { get; set; }
}

– Role

    public partial class Role
{
    [Key]
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)] 
    public int RoleId { get; set; }
    public string RoleName { get; set; }
    public string LoweredRoleName { get; set; }
    public string Description { get; set; }

    public virtual ICollection<User> Users { get; set; }
}

Controler-User :

        public JsonResult GridData(int rows, int page)
    {
        var count = _context.Users.Count();

        var pageData = _context.Users.OrderBy(x => x.UserId).Skip((page - 1) * rows).Take(rows);

        return Json(new {
            page = page,
            records = count,
            rows = pageData,
            total = Math.Ceiling((decimal)count / rows)
        }, JsonRequestBehavior.AllowGet);
    }

View-Index.cshtml :

@model IEnumerable<CustomControler.Models.User>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<table id="ajaxGrid"></table>
<div id="ajaxGridPager"></div>

<script type="text/javascript">
    jQuery("#ajaxGrid").jqGrid({
        url: '@Url.Action("GridData")',
        datatype: "json",
        mtype: 'GET',
        colNames: ['UserId', 'UserName', 'LoweredUserName', 'MobileAlias', 'IsAnonymous', 'LastActivityDate'],
        colModel: [
            { name: 'UserId', index: 'UserId', editable: true, sortable: false, hidden: true },
            { name: 'UserName', index: 'UserName', editable: true, sortable: false, hidden: false },
            { name: 'LoweredUserName', index: 'LoweredUserName', editable: true, sortable: false, hidden: false },
            { name: 'MobileAlias', index: 'MobileAlias', editable: true, sortable: false, hidden: false },
            { name: 'IsAnonymous', index: 'IsAnonymous', editable: true, sortable: false, hidden: false },
            { name: 'LastActivityDate', index: 'LastActivityDate', editable: true, sortable: false, hidden: false }
        ],**
        rowNum: 5,
        pager: '#ajaxGridPager',
        width: '850',
        height: '15em'
    });
    //jsonReader: { repeatitems: false, id: "UserId" },
    jQuery("#ajaxGrid").jqGrid('navGrid', '#ajaxGridPager',
        { search: false, refresh: false },                     // General options
        { url: '@Url.Action("Edit")', closeAfterEdit: true },  // Edit options
        { url: '@Url.Action("Create")', closeAfterAdd: true }, // Add options
        { url: '@Url.Action("Delete")' }                       // Delete options                           
    );    
</script>

Master page

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9" />

    <title>@ViewBag.Title</title>

    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.2.min.js")" type="text/javascript"></script>

    <!-- To support jqGrid -->
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/i18n/grid.locale-en.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>



</head>

If i set comment to public virtual ICollection <Role> Roles {get; set;} on my User Model, which means I get rid of role relation ship to the table, data can be
loaded in jqGrid.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Solved/Answered By tpeczek :

    The problem is not with jqGrid, but with JavaScriptSerializer trying to serialize the entire objects tree (and getting lost in it), the easiest way around is to use anonymous object (not perfect as you have to type the properties you want to send, but will do the trick)

    See : forums.asp.net

    Hope This Will Be Helpful to Others

    • 0