how to view in table from return JSON value using asp.net mvc

Question

When dropdown onchange id is pass to the database and returning corresponding fields

<div class="col-lg-4">
                        <fieldset class="form-group">
                            <label class="form-label" for="exampleInput">Domain Name</label>
                            @Html.DropDownList("DomainID", null, "--- Select Domain Name ---", new { @class = "select2-arrow" })
                        </fieldset>
                    </div>

The returned JSON value we need to view corresponding fields in table.

<script>
        $(document).ready(function () {

            $("#DomainID").change(function () {

                var id = $(this).val();
                $("#example tbody tr").remove();

                $.ajax({

                    type: 'POST',

                    url: '@Url.Action("ViewModules")',
                    dataType: 'json',
                    data: { id: id },
                    success: function (data) {
                        var items = '';
                        $.each(data, function (i, item) {

                            var rows = "<tr>"
                            + "<td>" + item.ModuleName + "</td>"
                            + "<td>" + item.Url + "</td>"
                            + "</tr>";
                            $('#example tbody').append(rows);
                        });

                    },
                    error: function (ex) {
                        var r = jQuery.parseJSON(response.responseText);
                        alert("Message: " + r.Message);
                        alert("StackTrace: " + r.StackTrace);
                        alert("ExceptionType: " + r.ExceptionType);
                    }
                });
                return false;
            })
        });
    </script>

Table code

<table id="example" class="display table table-bordered" cellspacing="0" width="100%;">
                        <thead>
                            <tr>
                                @*<th>S#</th>*@
                                <th>Module Name</th>
                                <th>Url</th>
                                @*<th>Roles</th>
                                <th>Action</th>*@
                            </tr>
                        </thead>
                        <tbody>


                        </tbody>
                    </table>

controller code:

[HttpPost]
        [MyExceptionHandler]
        public ActionResult ViewModules(int id)
        {
            Domain_Bind();
            dynamic mymodel = new ExpandoObject();
            userType type = new userType();
            mymodel.viewRoleModules = type.GetRoleModulesViews(id);
            return Json(mymodel, JsonRequestBehavior.AllowGet);

        }

In above code it returns 3 arrays value return Json(mymodel, JsonRequestBehavior.AllowGet);

we are pass to javascript but it shows undefined

In above image you can see there is 3 value but i cannot able to pass item.ModuleName which is present inside the rows.

When the function success also the value shows undefined.

public List<ViewRoleModules> GetRoleModulesViews(int id)
            {
                using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["Admin"].ConnectionString))
                {
                    List<ViewRoleModules> EmpList = new List<ViewRoleModules>();
                    SqlCommand com = new SqlCommand("MEDEIL_Modules_SelectDomainModules", conn);
                    com.CommandType = CommandType.StoredProcedure;
                    com.Parameters.AddWithValue("@DomainID", id);
                    SqlDataAdapter da = new SqlDataAdapter(com);
                    DataTable dt = new DataTable();

                    conn.Open();
                    da.Fill(dt);
                    conn.Close();
                    foreach (DataRow dr in dt.Rows)
                    {

                        EmpList.Add(

                            new ViewRoleModules
                            {
                                ModuleID = Convert.ToInt32(dr["ModuleID"]),
                                CompanyTypeID = Convert.ToInt32(dr["CompanyTypeID"]),
                                DomainID = Convert.ToInt32(dr["DomainID"]),
                                ParentModuleID = Convert.ToInt32(dr["ParentModuleID"]),
                                ModuleName = Convert.ToString(dr["ModuleName"]),
                                FolderName = Convert.ToString(dr["FolderName"] == DBNull.Value ? null : dr["FolderName"].ToString()),
                                Url = Convert.ToString(dr["Url"]),
                                TabOrder = Convert.ToInt32(dr["TabOrder"]),
                                Style = Convert.ToString(dr["Style"]),
                                Status = Convert.ToString(dr["Status"]),
                                IsTab = Convert.ToString(dr["IsTab"]),
                                ApprovalProcess = Convert.ToString(dr["ApprovalProcess"]),
                                CreatedBy = Convert.ToInt32(dr["CreatedBy"] == DBNull.Value ? null : dr["CreatedBy"].ToString()),
                                CreatedDate = Convert.ToDateTime(dr["CreatedDate"]),
                                ModifiedBy = Convert.ToInt32(dr["ModifiedBy"] == DBNull.Value ? null : dr["ModifiedBy"].ToString()),
                                ModifiedDate = Convert.ToDateTime(dr["ModifiedDate"] == DBNull.Value ? null : dr["ModifiedDate"].ToString())
                            }
                        );
                    }

                    return EmpList;
                }
            }

Answer 1

try this

 public ActionResult ViewModules(int id) 
    { 
      Domain_Bind(); 
      userType type = new userType(); 
      List<ViewRoleModules> EmpList = type.GetRoleModulesViews(id); 
      return Json(EmpList, JsonRequestBehavior.AllowGet); 
    }

provide the return type instead of using dynamic

Answer 2

should it be item.viewRoleModules[0].ModuleName etc ?