Question

每当我对启用了ajax的webgrid进行分页或排序时，我的滚动条位置都会重置为页面顶部。有没有办法保持滚动条的位置？

@model Registrar.WebUI.Models.InstructorPageViewModel

@{
var grid = new WebGrid(canPage: true, 
                        canSort: true, 
                        rowsPerPage: Model.PagingInfo.ItemsPerPage, 
                        ajaxUpdateContainerId: "grid");
grid.Bind(Model.Instructors, rowCount:Model.PagingInfo.TotalItems, autoSortAndPage:false);
grid.Pager(WebGridPagerModes.All);
}

<div id="grid">
 @grid.GetHtml(columns: grid.Columns(
                        grid.Column(format: x => Html.ActionLink("Edit", "Edit", new {id=x.Id})),
                        grid.Column("FirstName", "First Name"),
                        grid.Column("LastName", "Last Name"),
                        grid.Column("Email"),
                        grid.Column("UserName", "User Name"),
                        grid.Column("Phone")                            )
                  )                      
</div>

Answer 1

这是因为标头中生成的排序链接有href =“＃”。我遇到了同样的问题，这是我的解决方案。

这是我的_grid.cshtml局部视图

@{
  var grid = new WebGrid(Model.LeaseOffers, canPage: false, ajaxUpdateContainerId: "offerGrid", ajaxUpdateCallback: "afterLoad()");
}
<div id="offerGrid" class="offer-table-wrapper">
@grid.GetHtml(
  rowStyle: "offer-table-tr-odd",
  alternatingRowStyle: "offer-table-tr-even",
  columns: grid.Columns(
    grid.Column("ProviderLogo", "", format: @<img src="@Url.Content(string.Format(Constants.LeaseOfferProviderLogoContentUrlFormat, item.ProviderId))" />, style: "col-first", canSort: false),
    grid.Column("ProviderName", "Leasingodawca", format: @<div>@item.ProviderName</div>, style: "col-name"),
    grid.Column("DownPayment", "Udział Własny", format: @<div>@item.DownPayment.ToString(Constants.PercentDataToStringFormat)</div>, style: "col-third"),
    grid.Column("LeasePeriod", "Okres leasingu", format: @<div>@string.Format(Constants.LeasePeriodDataFormat, item.LeasePeriod)</div>),
    grid.Column("LeasePayment", "Rata leasingu", format: @<div>@string.Format(Constants.MoneyDataFormat, item.LeasePayment)</div>),
    grid.Column("ResidualValue", "Wartość wykupu", format: @<div>@item.ResidualValue.ToString(Constants.PercentDataToStringFormat)</div>),
    grid.Column("TotalLeasePayments", "Suma opłat", format: @<div>@item.TotalLeasePayments.ToString(Constants.PercentDataToStringFormat)</div>),
    grid.Column("Actions", "", format: @<div><a href="@Url.LeaseAssetDetailsWithLeaseOffer(Model.LeaseAssetId, (int)item.Id)"><img src="@Href("~/Modules/LeaseBroker.Orchard.Module/Content/Images/Mockups/wezleasing.png")"/></a></div>, style: "col-last", canSort: false)
  ),
  htmlAttributes: new { cellpadding = "0", cellspacing = "0" }
)
<script language="javascript">
  function afterLoad() {
    $("#offerGrid > table > thead > tr > th > a").attr('href', 'javascript:void(0)');
  }
  jQuery(document).ready(function ($) {
    afterLoad();
  });
</script>

网格加载后我将标题链接中的所有href属性替换为“javascript：void（0）”

Answer 2

您需要确保禁用自动回复，听起来您的页面正在重定向，您可能没有注意到它正在发生如此之快。

Razor WebGrid不保持滚动条位置

2 个答案: