Question

I’m trying to set up a messages view with asp.net mvc that will display inbox, etc. What would be a nice tool to utilize for this implementation?

Answer 1

OK, here’s the guts of how we do it with jqGrid. The idea here is to show unread messages in bold, and with a preview of the body, like Outlook:

jqGrid custom formatters (this syntax is for jqGrid 3.5; earlier versions are different:

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

Grid configuration:

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 to Entities:

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

You can find my series of articles on using jqGrid with ASP.NET MVC on my blog.