Question

I’m working with ASP.NET MVC 2 and building a simple business app. Here are some of the details:

• The app deals with work orders and
  has a work order index view. The
  view has a table listing the work
  orders, and several controls (text
  boxes, check boxes, and drop down
  lists) to select the criteria for
  which work orders to display.

• I’m using viewmodels. The work order
  index view has a viewmodel with
  properties for each and every
  control.

• I’ve implemented paging similar to
  what is being done in the answer to
  this question:
  How do I do pagination in ASP.NET MVC?
  I’m using LINQ’s Skip() and Take() as
  demonstrated, and ActionLinks for the
  navigation.

• If I load the page and don’t
  manipulate any of the controls, I can
  click on the page number ActionLinks
  and move around just fine between
  pages of work orders. However, if I
  change something, my changes are lost
  when I navigate to another page.

  For example, if I’m on page 1 and
  click an unchecked check box, and
  then click on the link for page 2,
  the second page of results will load
  but the check box will revert to its
  previous state.

I understand why this happens, but I’m wondering what is the best thing to do from a design standpoint.

Potential solutions I can think of:

1. Set all the control values as route
   values in the ActionLinks. This
   seems really nasty, and could result
   in very long URLs or query strings. Actually, now that I think of it this wouldn’t work without a way to capture the control values.

2. Since ActionLinks don’t post
   anything, replace them with buttons.
   Again, this seems like a bad idea.

3. Change the ActionLinks to links that
   fire off a jQuery script that does a
   POST. I think this is the most
   promising option so far. Do many
   developers do it this way?

This seems like a common enough problem, but none of these options feel quite right. I wonder if I’m missing something.

Answer 1

In the end, I wound up getting rid of the ActionLinks for the paging, and replaced them with regular anchor tags. The current page index is now stored in a hidden form value:

<input id="page" name="page" type="hidden" value="" />

<p>
    <% for (var i = 1; i <= (int)Math.Ceiling(Model.RowsMatchingCriteria / (double)Model.PageSize); i++) { %>

        <%--
            If the page number link being rendered is the current page, don't add the href attribute.
            That makes the link non-clickable.
        --%>
        <a class="pageLink" <%= i != Model.Page ? @"href=""javascript:void(0);""" : string.Empty %>><%: i %></a>

    <% } %>
</p>

Then I added the following jQuery script, which sets the hidden page value and submits the form when a link is clicked:

$(document).ready(function () {

    $('.pageLink:[href]').click(function () {
        $('#page').val($(this).text());  // Set hidden field value to the text of the page link, which is the page number.
        $('form:first').submit();
    });

});

Problem solved.