消息视图的最佳工具？

Question

我试图设置一个消息视图与asp.net mvc将显示收件箱等等什么是一个很好的工具来利用这个实现？

Answer 1

好的，这里是我们如何使用jqGrid做的内容。这里的想法是用粗体显示未读邮件，并与身体的预览，如Outlook：

jqGrid的自定义格式（这种语法是jqGrid的3.5;早期版本是不同的：

importanceFormatter: function(cellval, opts, action) { 
    switch (cellval) { 
     case -1: 
      { 
       return '<img class="notificationImportanceIcon" alt="Low importance" title="Low importance" src="/Content/Images/lowimportance.png" />'; 
      } 
     case 1: 
      { 
       return '<img class="notificationImportanceIcon" alt="High importance" title="High importance" src="/Content/Images/highimportance.png" />'; 
      } 
    } 
    return cellval; 
}, 

recipientFormatter: function(cellval, opts, action) { 
    if (cellval) { 
     var html; 
     var i = 1; 
     for (i in cellval) { 
      if (i == 0) { 
       html = cellval[i]; 
      } 
      else { 
       html = html + '; ' + cellval[i]; 
      } 
     } 
     return html; 
    } 
    return cellval; 
}, 

messageFormatter: function(cellval, opts, action) { 
    if (cellval) { 
     var subject = '<span class="notificationSubject">' 
      + (cellval.Subject || "") + '</span>'; 
     var body = cellval.Body || ""; 
     var read = cellval.IsRead; 
     var html; 
     if ((body !== "") && (!read)) { 
      var maxLength = 200; 
      var excerpt = body.length > maxLength ? 
       body.substring(0, maxLength - 1) + "...." : body; 
      html = subject + '<br /><span class="notificationBody" title="' 
       + body + '" >' + excerpt + '</span>' 
     } 
     else { 
      html = subject; 
     } 
     if (!read) { 
      html = '<span class="unread">' + html + '</span>'; 
     } 
     return html; 
    } 
}, 

CSS ：

td.unread span.notificationSubject 
{ 
    font-weight: bold; 
} 

td span.notificationBody 
{ 
    color: Blue; 
    font-size: smaller; 
} 

#listTable tbody td 
{ 
    cursor: pointer; 
    vertical-align: text-top; 
} 

.notificationHighImportance 
{ 
    color: Red; 
    font-weight: bolder; 
} 

.notificationLowImportance 
{ 
    color:Blue; 
} 

img.notificationImportanceIcon 
{ 
    vertical-align: text-bottom; 
} 

td > img.notificationImportanceIcon 
{ 
    display: block; 

    /* not sure why, but the following centers the image - taken from a W3C example */ 
    margin-left: auto; 
    margin-right: auto; 
} 

网格配置：

setupGrid: function(grid, pager, search) { 
    grid.jqGrid({ 
     colNames: ['AltId', '', 'From', 'Subject', 'To', 'Received', 'Actions'], 

     colModel: [ 
      { name: 'AltId', index: 'AltId', hidden: true }, 
      { name: 'Importance', index: 'Importance', width: 10, formatter: Vertex.Notification.List.importanceFormatter }, 
      { name: 'From', index: 'From', width: 50 }, 
      { name: 'NotificationMessage', index: 'Subject', width: 200, formatter: Vertex.Notification.List.messageFormatter, sortable: false }, 
      { name: 'Recipients', index: 'To', width: 50, formatter: Vertex.Notification.List.recipientFormatter, sortable: false }, 
      { name: 'Created', index: 'Created', width: 60, align: 'right', formatter: Vertex.UI.Grid.dateTimeFormatter }, 
      { name: 'ActionsAltId', index: 'ActionsAltId', width: 38, formatter: Vertex.UI.Grid.rowEditButtons, formatoptions: { buttons: { HideEdit: false} }, sortable: false } 
     ], 
     pager: pager, 
     sortname: 'Created', 
     sortorder: "desc" 
    }).navGrid(pager, { edit: false, add: false, del: false, search: false }); 
    search.filterGrid(grid.attr("id"), { 
     gridModel: false, 
     filterModel: [{ 
      label: 'Search', 
      name: 'search', 
      stype: 'text' 
      }] 
     }); 
    } 
}; 

LINQ实体：

[AcceptVerbs(HttpVerbs.Get), CacheControl(HttpCacheability.NoCache)] 
    public ActionResult ListGridData(JqGridRequest gridRequest) 
    { 
     var q = (from n in Repository.SelectAll() 
       from nr in n.NotificationRecipients 
       where nr.Recipient.UserName.Equals(
        LoggedInUserName, StringComparison.InvariantCultureIgnoreCase) 
       orderby n.Created descending 
       select new PresentationModel 
       { 
        Id = n.Id, 
        AltId = n.AltId, 
        ActionsAltId = n.AltId, 
        Importance = n.Importance, 
        From = n.Creator.Person.DisplayName, 
        Created = n.Created,   
        Subject = n.Subject, //used for search 
        Recipients = from r in n.NotificationRecipients 
            select r.Recipient.Person.DisplayName, 
        NotificationMessage = new NotificationMessage 
        { 
         Body = n.Body, 
         Subject = n.Subject, 
         IsRead = nr.MarkedAsRead /*IsRead for current user*/ 
        } 
       }).ToList().AsQueryable(); 
     return Json(q.ToJqGridData(
      gridRequest.ToGridPageDescriptor(new [] {"From", "Subject"}))); 
    } 

你可以找到my series of articles on using jqGrid with ASP.NET MVC on my blog。