Блог

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

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

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

При событии click, которое переводит вашу строку в режим «selected», я бы запустил функцию 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..) .

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

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

Примечания

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

если вы хотите использовать 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>
  

—————jquery для сворачивания / развертывания—————

 $(".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()

    })