更新部分而不是整个页面

本文关键字：更新部 | 更新日期: 2023-09-27 18:06:37

我在我的页面上使用下面的代码和部分渲染，如下所示。我添加了部分以供参考。我有一个下一个按钮上的部分，当我点击按钮，它去到服务器，并返回下一页从服务器作为部分。我想知道如何更新部分数据，而不是整个页面。

Main.cshtm 

<div class="pr-nav">
    <div class="btn btn-primary">
        User Guide
    </div>
    <div class="btn btn-primary">
        Key Info
    </div>
</div>
<div class="container">
@{ Html.RenderPartial("Partial"); }
</div>

Partial.cshtml 

  <div>
        <ul class="dashbord">
            @foreach (var i in Model)
            {
                <li class="item"><a href="@Url.Action("", "CISIProfessionalRefresherController", new { subjectID = i.subject_id })">
                    <div class="itemBox">
                        <div class="itemImage">
                            Image will go here
                        </div>
                        <div class="itemContent">
                            @i.subject_title
                            <br />
                            @i.cpd_time_text
                            <br />
                            @i.sub_heading
                        </div>
                    </div>
                </a></li>
            }
        </ul>
    </div>
    @if (Model.HasPreviousPage)
    {
        @Html.ActionLink("< Prev", "getMySubjectList", new { catogoryId = 0, pageid = Model.PageNumber - 1 })
    }
    else
    {
        @Html.Raw("&nbsp;");
    }
    &nbsp;
    @if (Model.HasNextPage)
    {
        @Html.ActionLink("Next >", "getMySubjectList", new { catogoryId = 0, pageid = Model.PageNumber + 1 })
    }
    else
    {
        @Html.Raw("&nbsp;")
    }

更新部分而不是整个页面

如果你的上一页和下一页的id分别是"#aPrev"answers"# Next"，那么你可以:

$(".container").on("click", "#aPrev,#aNext", function(){
        $.get($(this).attr("href"), function(data){
              $(".container").html(data);
       })
})

额外的注意,

设置上一个Id和下一个Id，可以使用:

 @Html.ActionLink("< Prev", "getMySubjectList", new { catogoryId = 0, pageid = Model.PageNumber - 1, id = "aPrev" })

@Html.ActionLink("Next >", "getMySubjectList", new { catogoryId = 0, pageid = Model.PageNumber + 1, id = "aNext" })

请注意，默认情况下，当您通过Ajax请求一个Action方法时，Sitefinity将返回完整的页面html。

您需要先注册一个自定义MVC路由，然后向该操作发送一个ajax请求。在你的操作方法中检查Request.IsAjaxRequest()，然后返回部分视图。

注册MVC路由示例(v.8):

Bootstrapper.MVC.MapRoute(name: "ajaxRoute",
                                    url: "ajax/{controller}/{action}/{departmentUrl}/{page}",
                                    defaults: new
                                    {
                                        controller = "ProductList",
                                        action = "Index",
                                        departmentUrl = UrlParameter.Optional,
                                        page = UrlParameter.Optional
                                    });

对自定义路由的示例请求:

@Html.PagedListPager(Model.Products,
                    p => Url.RouteUrl("ajaxRoute",
                        new
                        {
                            controller = ViewContext.RouteData.Values["controller"].ToString(),
                            action = "Index",..
}
相关文章：