在 MVC4 部分视图中使用 PagedList 时出现不良行为答案

【问题标题】：Undesired behaviour when using PagedList in an MVC4 partial view在 MVC4 部分视图中使用 PagedList 时出现不良行为
【发布时间】：2013-04-12 16:10:44
【问题描述】：

我有一个局部视图，它显示列表中的多个搜索结果。出于美学原因，我将结果显示为每行两个列表项：

列出项目 1 |列出项目 2

列出项目 3 |列出第 4 项

等等……

我正在使用 PagedList 实现分页，由于它是部分视图，我使用Ajax.ActionLinks 来导航每个“分页列表”。例如：

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

当页面加载时，列表中的所有项目都会正确显示 - 每行两个列表项目。但是，当我单击Next > 时，会显示下一个项目，但格式会消失，如下所示：

列出项目 1

列出项目 2

列出项目 3

等等……

我尝试将实际上为我提供每行两个列表项布局的 css 类作为 html 属性传递给 ActionLink，但没有帮助。

有谁知道导致这种行为的原因以及如何补救？

编辑：添加了 css 类和 razor 代码。

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

【问题讨论】：

如何分隔列表项？通过 CSS 或 |角色？
通过css，我将其添加到问题中。
请同时添加一些示例 html。分页列表 css 和 html 就足够了。
我遇到了非常相似的问题，我几乎可以肯定这是通过 ajax 插入 html 后 css 没有正确重新应用自身的问题。然而事实证明这是我遇到的 dom 元素结构问题，导致我的 css 选择器不匹配，因此无法重新应用。我不确定这是否会是您的答案，但在您的 ajax 调用后查看您的 dom 以确保正确插入内容可能会有所帮助。
你能不能也用firebug看看生成的html，然后发布结果？

标签： c# css razor asp.net-mvc-4 pagedlist

【解决方案1】：

@Ajax.ActionLink 生成的标记是什么样的？我猜这是在您的 ajax 调用之后绑定到您的动态内容的问题。在 jquery 中，您将使用 .on 事件与 .click 事件。

【讨论】：