Question

您好我最近开始使用Razor View Engine开发MVC4，我使用Entity Framework 5进行My Data访问，我需要在UI中显示用户信息，所以我在Codeproject文章的帮助下实现了Flexigrid，但这是不适合我。当我运行我的应用程序时，除了普通的内置索引页面之外没有任何内容显示。我正在尝试仅在索引页面中实现Flexigrid。我的查看代码看起来像 {

<table id="notification" style="display:none">
    <script type="text/javascript">
        $("#notifications").flexigrid({
            url: 'Controllers/Notifications/NotificationsList',
            dataType: 'json',
            colModel: [
                { display: 'NotificationID', name: 'NotificationID', width: 40, sortable: true, align: 'left' },
                { display: 'Notification', name: 'Notification', width: 100, sortable: true, align: 'left' },
                { display: 'IsDisplay', name: 'IsDisplay', width: 100, sortable: true, align: 'left' },
                { display: 'CreatedBy', name: 'CreatedBy', width: 100, sortable: true, align: 'left' },
                { display: 'CreatedOn', name: 'CreatedOn', width: 100, sortable: true, align: 'left' },
                { display: 'ModifiedBy', name: 'ModifiedBy', width: 80, sortable: true, align: 'left' },
                { display: 'ModifiedOn', name: 'ModifiedOn', width: 60, sortable: true, align: 'left' }

                ],
            searchitems: [
                { display: 'NotificationID', name: 'NotificationID' },
                { display: 'Notification', name: 'Notification' },
                { display: 'IsDisplay', name: 'IsDisplay' },
                { display: 'CreatedBy', name: 'CreatedBy' },
                { display: 'CreatedOn', name: 'CreatedOn' },
                { display: 'ModifiedBy', name: 'ModifiedBy' }
                ],
            sortname: 'NotificationId',
            sortorder: 'asc',
            usepager: true,
            title: 'Notifications',
            useRp: true,
            rp: 15,
            showTableToggleBtn: true,
            width: 1040,
            height: 380
        });
    </script>
    </table>
}

控制器看起来像 {

public ActionResult NotificationsList()
        {

            var q = from c in db.Tbl_Notification
                    select c;

            List<Tbl_Notification> notes = q.ToList();
            FlexigridObject flexigridObject = new FlexigridObject();
            flexigridObject.page = 1;
            flexigridObject.total = db.Tbl_Notification.Count();
            foreach (Tbl_Notification notify in notes)
            {
                FlexigridRow cell = new FlexigridRow()
                {
                    id = notify.NotificationId,
                    cell = GetPropertyList(notify)
                };
                flexigridObject.rows.Add(cell);
            }

            return View("FlexigridObject", flexigridObject);
        }

        private List<string> GetPropertyList(object obj)
        {
            List<string> propertyList = new List<string>();

            Type type = obj.GetType();
            PropertyInfo[] properties = type.GetProperties(BindingFlags.Instance | BindingFlags.Public);
            foreach (PropertyInfo property in properties)
            {
                object o = property.GetValue(obj, null);
                propertyList.Add(o == null ? "" : o.ToString());
            }

            return propertyList;
        }
    }
    public static class ExtensionMethods
    {
        public static IQueryable<T> OrderBy<T>(this IQueryable<T> source, string propertyName, bool asc)
        {
        var type = typeof(T);
        string methodName = asc ? "OrderBy" : "OrderByDescending";
        var property = type.GetProperty(propertyName);
        var parameter = Expression.Parameter(type, "p");
        var propertyAccess = Expression.MakeMemberAccess(parameter, property);
        var orderByExp = Expression.Lambda(propertyAccess, parameter);
        MethodCallExpression resultExp = Expression.Call(typeof(Queryable), methodName, new Type[] { type, property.PropertyType }, source.Expression, Expression.Quote(orderByExp));
        return source.Provider.CreateQuery<T>(resultExp);
    }

    public static IQueryable<T> Like<T>(this IQueryable<T> source, string propertyName, string keyword)
    {
        var type = typeof(T);
        var property = type.GetProperty(propertyName);
        var parameter = Expression.Parameter(type, "p");
        var propertyAccess = Expression.MakeMemberAccess(parameter, property);
        var constant = Expression.Constant("%" + keyword + "%");
        MethodCallExpression methodExp = Expression.Call(null, typeof(SqlMethods).GetMethod("Like", new Type[] { typeof(string), typeof(string) }), propertyAccess, constant);
        Expression<Func<T, bool>> lambda = Expression.Lambda<Func<T, bool>>(methodExp, parameter);
        return source.Where(lambda);
    }
}

}

我需要不惜一切代价实现Grid，请建议我。请让我知道Kendo UI可以免费使用的天气吗？

Answer 1

看起来您可能错过了在flexigrid脚本周围添加$(document).ready()函数调用。因此，浏览器根本不会调用您的flexigrid。

试试这个：

<table id="notification" style="display:none">
    <script type="text/javascript">
$(document).ready(function () {
        $("#notifications").flexigrid({
            url: 'Controllers/Notifications/NotificationsList',
            dataType: 'json',
            colModel: [
                { display: 'NotificationID', name: 'NotificationID', width: 40, sortable: true, align: 'left' },
                { display: 'Notification', name: 'Notification', width: 100, sortable: true, align: 'left' },
                { display: 'IsDisplay', name: 'IsDisplay', width: 100, sortable: true, align: 'left' },
                { display: 'CreatedBy', name: 'CreatedBy', width: 100, sortable: true, align: 'left' },
                { display: 'CreatedOn', name: 'CreatedOn', width: 100, sortable: true, align: 'left' },
                { display: 'ModifiedBy', name: 'ModifiedBy', width: 80, sortable: true, align: 'left' },
                { display: 'ModifiedOn', name: 'ModifiedOn', width: 60, sortable: true, align: 'left' }

                ],
            searchitems: [
                { display: 'NotificationID', name: 'NotificationID' },
                { display: 'Notification', name: 'Notification' },
                { display: 'IsDisplay', name: 'IsDisplay' },
                { display: 'CreatedBy', name: 'CreatedBy' },
                { display: 'CreatedOn', name: 'CreatedOn' },
                { display: 'ModifiedBy', name: 'ModifiedBy' }
                ],
            sortname: 'NotificationId',
            sortorder: 'asc',
            usepager: true,
            title: 'Notifications',
            useRp: true,
            rp: 15,
            showTableToggleBtn: true,
            width: 1040,
            height: 380
        });
        });
    </script>
    </table>

此外，将脚本驻留在表格布局中可能不是最佳选择。制作标签汤。

Flexigrid不使用带有EntityFramework的MVC4 Razor

1 个答案: