MVC 2 - I have a control that uses a lot of HTML. How do I improve the performance?

I am developing a product with users who up until now have been using Excel and they want my MVC application to be similar to that. They like the visual impact of seeing annual leave, so I have developed a scrollable table which looks like this;

The table is going to be about 300 cells across, and I might have 15 people to display this information, so you can see this could get very large indeed. I mentioned to them before I built the control that there would be performance issues. But now they like the product and want it to load more quickly. I would not be surprised if the code I wrote could be refactored. No doubt it could be written better anyway, and maybe performance can be improved as well, so I will show you that. However I suspect the real problem is too much HTML. What are my other options? I am not yet familiar with Silverlight or HTML5, although I am happy to look into it if someone can provide me with some good links. My webpage has this markup;

<% if (Model.cvm != null && Model.cvm.Lines != null && Model.cvm.Lines.Count > 0)
   { %> 
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <table cellpadding="0" cellspacing="0" id="TeamNames"><!-- Table to display names of team members -->
                        <tr>
                            <td style="height:65px"></td>
                        </tr>
                        <% foreach (SHP.Models.CalendarViewModel.CalendarLine cl in Model.cvm.Lines)
                        {%>
                            <tr>
                                <td align="right"><%: cl.Name%></td>
                            </tr>
                        <%} %>
                    </table>
       开发者_开发问答         </td>
                <td>
                    <div id="pageWidthCalendar"><!-- Table to display a scrollable grid of the annual leave calendar -->
                    <table id="ScheduledLeaveCalendar">
                        <%: Html.DisplayFor(x => x.cvm.Header1)%>
                        <%: Html.DisplayFor(x => x.cvm.Header2)%>
                        <%: Html.DisplayFor(x => x.cvm.Header3)%>
                        <%: Html.DisplayFor(x => x.cvm.Lines)%>
                    </table>
                    </div><!-- pageWidthCalendar - puts scrollbars on the calendar control -->
                </td>
            </tr>
        </table>

My Calendar Lines Display Template has this markup;

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SHP.Models.CalendarViewModel+CalendarLine>" %>
<%@ Import Namespace="SHP.WebUI.HtmlHelpers" %>
<%@ Import Namespace="SHP.Models" %>

<tr>
    <% foreach (var item in Model.HtmlCellCollection) { %>
            <%: Html.CalendarCellClass(item)%>
    <% } %>
</tr>

The other display templates are similar.

My CalendarCellClass helper method looks like;

    public static MvcHtmlString CalendarCellClass(this HtmlHelper helper, CalendarViewModel.CalendarCell _cell)
    {
        TagBuilder td_Outer = new TagBuilder("td");
        if (_cell.MorningOnlyFlag == true || _cell.AfternoonOnlyFlag == true)
        {
            td_Outer.InnerHtml = GetHalfDayTable(_cell);
        }
        else
            td_Outer.MergeAttribute("class", _cell.HtmlCellClass);

        return MvcHtmlString.Create(td_Outer.ToString());
    }

As others have noted, profiling would be useful.

A request times graph as per Internet Explorers 'F12 developer tools' or Firebug, YSlow, PageSpeed or some such tool would be useful.

Also Timings server side to actually create the view would help. It could also be a case of rendering on the client side thats the issue.

Remember in internet applications Perception is often as important as 'true performance' in that regard, AJAX-ifying might improve their perception, by loading the rest of the page before the calendar itself. You may be able to speed up both download and server side by stransfering just JSON, and build the UI on the client using jquery. But that wont help if client rendering is where the major problem is.

as Chris Chilvers said, what is the concrete problem? data access? or html generation? If the slow operation is data access or process in the controller and your data no change so much, you can try to use de [OutputCache] for example, if you want to cache the data result of the action in the controller, that return the view you want to display, set [OutputCache(Duration=10)] for caching by ten seconds the result.

Example:

you can read more in the scottgu blog at http://weblogs.asp.net/scottgu/archive/2008/07/14/asp-net-mvc-preview-4-release-part-1.aspx