2014-02-12 80 views
-1

您好我最近開始使用Razor View Engine的MVC4,我使用實體框架5爲我的數據訪問,我需要在UI中顯示用戶信息,所以我實施了Flexigrid與Codeproject文章的幫助,但這並不適合我。當我運行我的應用程序時,除了普通的內置索引頁面外,沒有任何內容顯示。我正試圖在索引頁中實現Flexigrid。 我的視圖代碼看起來像 {Flexigrid不與MVC4剃刀與EntityFramework

<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); 
    } 
} 

}

我需要不惜任何代價implememnt網格,請給我建議。並請讓我知道天氣Kendo UI可以免費使用?

回答

0

看起來您可能錯過了在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> 

而且,它可能不會有你的腳本里面居住表格佈局最好的主意。做標籤湯。