Razor WebGrid 不保留滚动条位置

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

您需要确保禁用自动回发，听起来您的页面正在重定向，您可能没有注意到，因为它发生得太快了。