Как сохранить несколько позиций прокрутки для прокрутки элемента div в зависимости от активного представления в MultiView (веб-форма asp.net

Question

Непонятное название, но я могу выразить это наилучшим образом.

В основном я в настоящее время использую один div с переполнением: auto, который содержит различные GridViews. GridView поменялись местами, используя MultiView, где каждый отдельный вид содержит один GridView.

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

Вот как настроена моя страница.

<div id="scrollingDiv" style="height:100%; overflow:auto;">
  <div id="gridWrap">

  <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline">
  <ContentTemplate>
    <asp:MultiView ID="MultiView1" runat="server">
      <asp:View ID="view1" runat="server">
        <asp:GridView ID="gridView1" runat="server">
        </asp:GridView>
      </asp:View>

      <asp:View ID="view2" runat="server">
        <asp:GridView ID="gridView2" runat="server">
        </asp:GridView>
      </asp:View>
    </asp:Multiview>
  </ContentTemplate>
  </asp:UpdatePanel>

  </div>
</div>

Таким образом, scrollingDiv будет содержать все виды и будет прокручивать для каждого из GridView.

Для переключения между представлениями у меня есть выпадающий список, связанный с

protected void DropDownList_SelectedIndexChanged(object sender, EventArgs e)
{
    switch (DownList.SelectedItem.Value)
    {

        case "view1":
            MultiView1.SetActiveView(view1);
            break;
        case "view2":
            MultiView1.SetActiveView(view2);
            break;
    }
}

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

Любая помощь будет отличной, спасибо.

Answer 1

jQuery и некоторые скрытые поля могут помочь. Попробуй это...

    <asp:Hiddenfield ID="hdnCurrentView" runat="server"/>
    <asp:Hiddenfield ID="hdnMultiView1Top" runat="server"/>
    <asp:Hiddenfield ID="hdnMultiView2Top" runat="server"/>        

На бэкэнде, т.е. в вашем CS-файле, установите текущий вид в скрытом поле...

    protected void DropDownList_SelectedIndexChanged(object sender, EventArgs e)
    {
        switch (DownList.SelectedItem.Value)
        {
            case "view1":
                MultiView1.SetActiveView(view1);
                hdnCurrentView.Value = "View1";
                break;
            case "view2":
                MultiView1.SetActiveView(view2);
                hdnCurrentView.Value = "View2";
                break;
        }
    }

Затем в вашей функции JQuery готов,

    $().ready(function() {

        //for storing scroll position of each view in respective hiddenfields
        $(window).scroll(function () {
          if ($("#hdnCurrentView").val() == "View1") {
             $("#hdnMultiView1Top").val($(window).scrollTop());
          }
          else if ($("#hdnCurrentView").val() == "View2") {
             $("#hdnMultiView2Top").val($(window).scrollTop());
          }
        });

        //for restoring scroll position on page load i.e., ready function in jQuery 
        if ($("#hdnCurrentView").val() == "View1") {
           $(window).scrollTop($("#hdnMultiView1Top").val());
        }
        else if ($("#hdnCurrentView").val() == "View2") {
           $(window).scrollTop($("#hdnMultiView2Top").val());
        }

    });

Это позволит сохранить положение вертикальной прокрутки для каждого мультивью. Если вы хотите сохранить горизонтальные позиции прокрутки, создайте скрытые поля для каждого вида и используйте функцию jQuery, приведенную ниже. Оставлено вам в качестве упражнения...

    $(window).scrollLeft(value);  

Удачного кодирования...;)