Расширьте HTML Grid для добавления div в конце Html Grid (MVC Contrib)

Question

У меня есть поиск в Интернете, чтобы найти синтаксис или руководство по этому вопросу, но безуспешно.

Я буду признателен за любую помощь.

Я реализовал Grid в виде, и вместо того, чтобы использовать разбиение на страницы в виде сетки, я пытаюсь реализовать кнопку "Просмотреть больше" в конце сетки, которая загружает больше данных в вид сетки.

См код

@Html.Grid(Model.Orders).Columns(columns =>
        {
            columns.For(c => @Html.AddInstitudeRetangle(c.User.Institute.InstitudeColor, c.User.Institute.InstituteName)).Named("");
            columns.For(c => @Html.CheckBox(c.OrderID.ToString(), false, new { @ID = "cb-" + c.OrderID.ToString(), @Name = "cb-" + c.OrderID.ToString() })).Header("<th><input type=\"checkbox\" id=\"chkHeader\" /></th>");
            columns.For(c => @Ajax.LinkForBootstrapModalNo("OrderDetails", "OrdersManagement", c.OrderID.ToString(), new { OrderID = c.OrderID }, new { id = "OrderID" }).LoadingPanel("Please Wait Loading...").ToMVCHtmlString()).Named(OrdersManagementStrings.OrderID);
            columns.For(c => @Html.GetOrderTypeIcon(c.OrderTypeStatus, c.OrderTypeStatus.GetDescription())).Named(OrdersManagementStrings.OrderType);
            columns.For(c => String.Format("{0:dd/MM/yyyy hh:mm}", c.CreationDate)).Named(OrdersManagementStrings.OrderDate);
            columns.For(c => String.Format("{0} {1}", c.User.FirstName, c.User.LastName)).Named(OrdersManagementStrings.CustomerName);
            columns.For(c => c.User.Institute.InstituteName).Named(OrdersManagementStrings.AffiliateName);
            columns.For(c => c.TotalCost).Named(OrdersManagementStrings.TotalCost);
            columns.For(c => c.ShippingTypeEnum.GetDescription()).Named(OrdersManagementStrings.ShippingType);
            columns.For(c => c.Address.FullAddress).Named(OrdersManagementStrings.Address);
            columns.For(c => c.OrderStatusEnum.GetDescription()).Named(OrdersManagementStrings.OrderStatus);
        }).Attributes(@class => "table table-hover table-responsive table-condensed", @id => "ordersTable")

        <div id="scroll" data-itemsperpage="50" data-spy="scroll">Load More</div

Теперь, когда пользователь нажимает на div в конце, я использую ajax-запрос для загрузки большего количества данных.

Теперь я хочу создать расширение, которое добавит этот div в конец таблицы.

Таким образом, в конце синтаксис будет выглядеть как

columns.For(c => c.OrderStatusEnum.GetDescription())
.Named(OrdersManagementStrings.OrderStatus);
            })
.Attributes(@class => "table table-hover table-responsive table-condensed", @id => "ordersTable")
.LoadMoreButton(50);

Число 50 представляет количество строк на странице

Answer 1

После просмотра источника, я думаю, что это может быть проще расширить HtmlTableGridRenderer как ScrollingHtmlTableGridRenderer и использовать

@Html.Grid(Model.Orders)
     .RenderUsing(new ScrollingHtmlTableGridRenderer(50))
     ...

затем в ScrollingHtmlTableGridRenderer переопределение RenderGridEnd добавить дополнительный DIV

public class ScrollingHtmlTableGridRenderer<T> : HtmlTableGridRenderer<T>
    where T : class
{
     private readonly int _itemsPerPage;

     public ScrollingHtmlTableGridRenderer(int itemsPerPage)
     {
          _itemsPerPage = itemsPerPage;
     }

     protected override void RenderGridEnd()
     {
          base.RenderGridEnd();
          RenderText("<div id=\"scroll\" data-itemsperpage=\"" + _itemsPerPage + \"" data-spy=\"scroll\">Load More</div>");
     }
}

Вы можете сделать это как расширение, которое в основном создает новый рендерер и распространяет на него все данные из базовой модели сетки, но Grid класс создается, чтобы быть расширенным путем замены средства визуализации на то, которое обрабатывает ваши пользовательские потребности, а не расширениями на IGridOptionsModel,