ASP.NET GridView с отложенной загрузкой данных складной панели

Question

В проекте vb.net asp.net webforms мне нужно загрузить список записей в сетку, и как только пользователь щелкнет строку, необходимо развернуть панель, которая отображает детали записи под строкой,Там мне нужно загружать детали записи только тогда, когда запись выбрана.Каков наилучший метод для достижения этой цели?Могу ли я использовать плагин для складной панели jQuery с сеткой и загружать данные только при выбранной строке?или я должен использовать ajax CollapsiblePanel?

Answer 1

Если вы хотите использовать gridview, вам нужно использовать шаблон одного элемента, чтобы связать все поля, и вы можете назначить правильное имя класса для любого поля, с помощью которого вы хотите свернуть и развернуть. затем вы можете использовать функцию slideToggle, чтобы показать / скрыть следующий элемент, который содержит детали для выбранной записи. Пожалуйста, проверьте следующий пример.

 <asp:GridView ID="GridView1"
 runat="server" AutoGenerateColumns="False" dataSourceID="ObjectDataSource1"> 
 <Columns>

<asp:TemplateField HeaderText="columname" >

<ItemTemplate>
    <asp:Label ID="Label1" runat="server" cssclass="expand"
        Text='<%# Bind("fieldname") %>'></asp:Label>
 <div class="details">
 your detail binding
 </div>
</ItemTemplate>
</asp:TemplateField>
</Columns> 
</asp:GridView>

--------------- запрос свернуть / развернуть ---------------

$(".expand").click(function () {
        if ($(this).attr("class") == "collapse") {
            $(this).attr("class", "expand")
        }
        else {
            $(this).attr("class", "collapse")
        }
        $(this).next(".details").slideToggle();

    })

    $(".collapse").click(function () {
        if ($(this).attr("class") == "collapse") {
            $(this).attr("class", "expand")
        }
        else {
            $(this).attr("class", "collapse")
        }

        $(this).next(".details").slideToggle()

    })

Answer 2

В вашем вопросе недостаточно подробностей, и ответ зависит от того, какой именно состав "деталей" может быть показан в каждой строке.

Однако я бы сделал следующее, используя jquery с обработчиком ajax asp.net, чтобы получить данные (по требованию) и вставить их в новую строку gridview.

При событии click, при котором ваша строка переходит в «выбранный» режим, я запускаю функцию jquery.

Эта функция jquery будет запускать попадание ajax в GrabRowDetails.aspx.

GrabRowDetails.aspx будет принимать входные данные в строке запроса.

На основании этого ввода он будет запрашивать базу данных.

В конечном итоге GrowRowDetails.aspx должен упаковать соответствующие данные в JSON, который будет возвращен клиенту.

Response.ContentType = "application/json"
Response.Write(SB.ToString()) 'emits the JSON

Наконец, ваш обработчик ajax-success позаботится о создании новой строки таблицы и вставке соответствующих данных в эту новую строку.

Как он узнает, куда поместить новую строку? Обработчик щелчка, упомянутый вверху, должен передавать ссылку на элемент управления, инициирующий событие щелчка.

Используя эту ссылку, вы можете использовать функцию ближайший . this.nearest("tr").after(..new_row_with_max_colspan_cell..).

Функция после вставит элемент после выбранного элемента (ов). Итак, вам просто нужно вставить новый TR с одним TD с максимальным colspan. Затем вы можете работать внутри этой области.

Когда дело доходит до подобных вещей, мне больше повезло, если я использую raw jquery, а не элемент управления ASP.NET.

Примечания

• .ashx является более производительным, чем .aspx для обработки ajax-запросов, но я столкнулся с некоторыми проблемами отладки с обработчиками http. Итак, я использую полноценный .aspx. Если бы скорость была проблемой, я бы определенно использовал Ashx.
• Ваша функция jquery также должна удалять все ранее открытые строки сведений. Это можно сделать, установив определенный класс css для строк сведений, например details, а затем с помощью функции remove избавиться от любых сохраняющихся строк сведений.