更新部分但不是整页

时间:2015-08-06 13:36:07

标签: c# asp.net asp.net-mvc sitefinity

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

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;")
    }

2 个答案:

答案 0 :(得分:1)

如果你的Prev和Next有id“#aPrev”和“#aNext”,那么你可以:

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

额外注意,

设置Prev和Next 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" })

答案 1 :(得分:1)

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

您需要先注册自定义MVC路由,然后向该操作发送ajax请求。在你的action方法中检查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",..
}