在MVC4部分视图中使用PagedList时的不良行为

Question

I have a partial view that displays a number of search results from a list. For aesthetic reasons, I display the results two list items per row:

list item 1 | list item 2

list item 3 | list item 4

etc....

I'm implementing paging with PagedList, and since it's a partial view I'm using Ajax.ActionLink s to navigate each 'paged list'. Eg:

@Ajax.ActionLink("<<", "GetAllProperties", new { page = 1 }, new AjaxOptions { UpdateTargetId = "quick-property-search-results" })

When the page loads, all items from the list are displayed correctly - two list items per row. However when I click Next > , the next items are displayed but the formatting goes off, like this:

list item 1

list item 2

list item 3

etc...

I tried passing the css class that actually gives me the two-list-items-per-row layout as html attributes to the ActionLinks, but it didn't help.

Does anyone know what's causing this behaviour - and how to remedy it?

Edit: added css class and razor code.

.result-container { 
    border: 3px solid #999;
    padding: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
    width: 563px; 
    float: left; 
    height:130px;
}


@foreach (var result in Model)
{
    <div class="result-container">
    // output model data...
    </div>
}

Answer 1

What does the generated markup look like for @Ajax.ActionLink? I'm guessing it's a matter of binding to your dynamic content after your ajax call. In jquery, you'd use the .on event vs the .click event.