asp.net mvc3 - 始终在 div 中加载视图答案

【问题标题】：asp.net mvc3 - Loading a view always in a divasp.net mvc3 - 始终在 div 中加载视图
【发布时间】：2013-07-27 10:15:45
【问题描述】：

我正在开发一个在搜索时加载页面的 mvc3 控制器。在主索引页面中，有一个搜索按钮，它会在给定的 div 中加载另一个（详细信息列表）页面。

我已将分页合并到子视图（详细信息列表）中。因此，单击“下一步”链接后，它会加载下一页。

索引页面的cshtml：flat id指的是详细列表的加载位置。

<div id='FlatDetailcontainer'>Select a Project for Flat Details.. Loading...</div>

<script type="text/javascript" language="javascript">
   // $(document).ready(function () {
    function login() {
        var check = document.getElementById("rad").value;
        $("input[name=selectproj][value="+check+"]").attr('checked', true);
        //document.getElementById("selectproj").checked = document.getElementById("rad").value;
        if (check != "") {
            handleprojselect(check);
        }

    }
    function handleprojselect(myRadio) {
//        document.getElementById("rad").value = myobj["proj"];
        $.get('@Url.Action("Details", "ProjectDetails")?id=' + myRadio,
        function (viewResult) {
            $("#FlatDetailcontainer").html(viewResult);
        });
    }

    function createproj() {
        var url = '@Url.Action("Create")';
        window.location.href = url;
    }

</script>

详情页有next和url action的链接如下：

@if (Model.HasNextPage)
{
    @Html.ActionLink("Next >", "Details", new { page = Model.PageNumber + 1 })
    @Html.Raw(" ");
    @Html.ActionLink(">>", "Details", new { page = Model.PageCount })
}
else
{
    @:Next >
    @Html.Raw(" ")
    @:>>
}

但是，此链接总是在新页面上加载，因为没有对主索引页面的 div id 的引用。请问有人可以建议如何进行吗？

【问题讨论】：

标签： asp.net asp.net-mvc-3 pagination hyperlink

【解决方案1】：

只要您通过 AJAX 调用加载页面的一部分，您还应该使用 AJAX 来处理您的分页。你应该像下面这样创建 JS 函数：

function nextPageClick(e)
{
    e.preventDefault();
    $.get($(this).attr("href"),   //getting the URL from your link and loading the content via AJAX
        function (viewResult) {
            $("#FlatDetailcontainer").html(viewResult);
        });
}

并将其绑定到页面加载时的分页链接：

$(function (){
    $('.nextPageLink').live('click', nextPageClick);
})

请注意，“实时”jQuery 方法将点击处理程序分配给动态加载的内容以及现有的静态内容，因此您无需在每次数据重新加载后重新评估处理程序。

您应该将 CSS 类添加到您的链接以便能够找到它：

@Html.ActionLink("Next >", "Details", new { page = Model.PageNumber + 1, @class="nextPageLink" })

当然，您可以使用 ID 或任何其他方式来唯一标识您的分页链接。

【讨论】：