ListView от различни ъгли

Контролата ListView беше въведена в .Net Framework 3.5 като заместител на остарелия GridView. Новият елемент има по-разширена функционалност от своя предшественик, но в същото време му липсват някои вътрешни механизми, което обаче е изцяло следствие от разширената универсалност на ListView. Сред разликите между ListView и GridView е настройката за гъвкаво оформление, която ви позволява да показвате данни не само в таблична форма, но като цяло по какъвто начин желае програмистът. Благодарение на шаблоните ItemTemplate, EditItemTemplate, InsertItemTeplate, можете да персонализирате външния вид във всяко от състоянията на ListView: редактиране или избиране на елемент.

Реших да напиша тази статия, за да споделя моя опит с ListView, да дам някои начини за решаване на често срещани проблеми и също така да опиша проблемите, които срещнах и които не успях да разреша твърде красиво. Възможно е при обсъждането на статията да има по-гъвкави решения на описаните задачи, за което само ще се радвам.

Съдържание

  • сортиране;
  • отхвърляне на AlternatingTemplate;
  • избор на елемент;
  • обединяване на клетки в колона;
  • използване на DropDownList за търсене по време на редактиране;
  • искане за премахване;
  • редактиране и запазване на няколко реда наведнъж;
  • скриване на DataPager;
  • динамична промяна на заявките за ListView.

Сортиране

ти клас ="bankTd" > asp:LinkButton ID ="sortBank" runat ="сървър" CommandName ="sort" CommandArgument ="Bank.shortName" Текст ="Bank" /> ти > * Този изходен код беше маркиран с инструмента за открояване на изходния код.

ТукCommandArgument="Bank.shortName" указва коя колона от източника на данни да се сортира.

Отказ от AlternatingItemTemplate

AlternatingItemTemplate има за цел да опише модела на четните елементи от списъка. Това ви позволява да изобразявате таблици и други типове набори от данни по красив начин, като например да променяте фона на редовете с данни в таблица. Като цяло отделен шаблон е, разбира се, добър, но най-често цялата разлика между редовете в таблицата се крие само в различен фон или различни css класове. В този случай обемистият шаблон ми се струва излишен и предлагам друго решение (видено в интернет):

ItemTemplate > tr Контейнер. DataItemIndex % 2 == 0? "" : " > alt \ "" %> >

В този пример, вместо да въвеждам AlternatingItemTemplate в кода, замествам специален css клас за четните редове. Между другото, в реален проект това ми спестява около 30 реда код.

Избор на елемент

ListView, подобно на GridView, предлага механизъм за избор на ред от набор от данни. Изборът на данни е търсен в много задачи за обработка на информация и ListView предлага, в допълнение към поддръжката на такъв избор, силен механизъм за шаблони. Какво означава? Това означава, че избраните данни могат да бъдат представени по напълно различен начин, отколкото са били представени в общия набор от данни. Например, можете да разширите обикновен ред за въвеждане и да покажете допълнителни данни, да покажете допълнителна лента с инструменти за работа с данни, да добавите допълнителни връзки, които разширяват изгледа на избраните данни. Ще покажа пример:

Има такъв знак:

данни

А ето как изглежда резултатът от селектиране на данни в него:

ъгли

При използване на ajax работата с такъв знак за крайния потребител става удобна и приятна. Можете да опитате пример на живо тук. Лесно е да се види, че след като изберете даннитепотребителят получава достъп до разширена информация и допълнителни услуги, в този случай за отпечатване на данни, но също така може да има редактиране, скриване, изтриване на данни, в случай че техният създател или лице, което има право да извършва тези операции, работи с данните.

Няма да давам редове код в този пример, тъй като имплементацията не надхвърля обичайното, всичко е имплементирано в SelectedItemTemplate, в който вместо един tr ред в този случай се показват три: старият с удебелен шрифт, разширена информация и лента с инструменти.

Обединяване на клетки в колона

различни

Много често срещана ситуация е, когато трябва да обедините вертикално повтарящи се данни в една клетка. В GridView реших този проблем чрез събитието OnRowDataBound, в което беше възможно да се получи достъп до текущия ред, който се обработва, и да се присвои желаният ред на желаната клетка, както и да се скрият ненужните клетки. В ListView, за съжаление, няма подобен инструмент. Още повече, че в момента не знам подобен начин за решаване на проблема. Методът, който предлагам, не прилага строго сливането на клетки в ListView, а само маскира данните. Имаме следното маркиране:

ItemTemplate > tr runat ="сървър" > td class ="bankTd" runat ="server" id ="bankName" style =' ' > asp:HyperLink ID="hlBank" runat ="сървър" Текст =' ' NavigateUrl ='test.aspx' > asp:Хипервръзка > td >

частен низ _bankName = ""; публичен низ GetRowspanVisible( низ bankName) низ резултат = "граница: 0px; граница-ляво: плътен 1px #C0C0C0; размер на шрифта: 0px;" ;

if (Request.Browser.Browser == "IE" ) result = "visibility: hidden; граница: 0px; border-left: плътен 1px #C0C0C0;" ;

if (_bankName != bankName) _bankName = bankName; result = "border-top: solid 1px #C0C0C0; граница-ляво: 1px; border-bottom: 0px;" ; >

връщане на резултат; > * Този изходен код беше подчертан с инструмента за открояване на изходния код.

Кодът не претендира за елегантен. Приемам всякакви конструктивни предложения за промяната му. Веднага трябва да кажа, че връзката към стиловете беше избрана поради факта, че този подход не работи за мен лично чрез класове. И така: както можете да видите, когато обработвате клетки в колона, им се присвоява различен стил, в зависимост от това какво се изисква: скриване или показване. По този начин потребителят ще види данни само в първата клетка и празни полета в следващата. Резултатът може да се види на фигурата по-горе. Недостатъкът на това решение, наред с други неща, е, разбира се, свързването на показаните данни към горната граница, тъй като тези данни са елемент от горния ред и не съдържат обхват на реда.

Използване на DropDownList за търсене по време на редактиране

По принцип задачата е проста, но все пак реших да дам решение в тази статия. В списъчния изглед, когато редактирате, се изисква да се покаже DropDownList, който ще бъде попълнен с данни от референтен източник на данни на трета страна и обвързан с нашия източник на данни за списъчния изглед. Пример:

данни

Решението, както казах, е просто:

asp:DropDownList ID ="ddlMetals" runat ="сървър" DataSourceID ="dsMetalDic" DataTextField ="name" DataValueField ="id" SelectedValue =' ' > asp:DropDownList > * Този изходен код беше маркиран с инструмента за открояване на изходния код.

Тук dsMetalDic са референтните данни, Bind("metalId") е обвързването към нашия източник на данни за ListView.

Искане за изтриване

asp:LinkButton ID ="DeleteButton" runat ="сървър" CommandName ="Изтриване" Text ="Изтриване" OnClientClick ="връщанеOnDeleteClick();" /> * Този изходен код беше маркиран с инструмента за открояване на изходния код.

Редактиране и запазване на няколко реда наведнъж

Понякога е необходимо да се покаже наведнъж целия набор от данни, състоящ се от много редове в режим на редактиране.

ъгли

Тази задача се решава чрез ItemTemplate и като цяло това е тривиална задача. Друго нещо е как да запазите промените във всички тези редове с едно щракване върху бутона "Запазване на всички"? Решение по-долу:

foreach (променлив елемент в lvEdit.Items) lvEdit.UpdateItem(item.DataItemIndex, true); > * Този изходен код беше подчертан с инструмента за открояване на изходния код.

Където lvEdit е ListView.

Скриване на DataPager

protected void rlv_DataBound( обект изпращач, EventArgs e) ListView listView = подател като ListView; if (listView != null ) DataPager пейджър = listView.FindControl( "dp" ) като DataPager; if (pager != null ) pager.Visible = pager.PageSize * Този изходен код беше маркиран с инструмента за открояване на изходния код.

Тук rlv_DataBound е манипулаторът на събитие OnDataBound на ListView, dp е името на нашия DataPager, който е "вграден" чрез шаблони в ListView.

Динамична промяна на заявката за ListView

protected void dsResume_Selecting( подател на обект, LinqDataSourceSelectEventArgs e) e.Result = Query; > * Този изходен код беше подчертан с инструмента за открояване на изходния код.

Тук dsResume_Selecting е манипулаторът на събитие OnSelecting на LinqDataSource.

Заключение

PS: съжаляваме за възможните проблеми в подчертаването на синтаксиса, този проблем сега се разрешава с поддръжката на Habr.

И тук можете да получите грант за тестов период на Yandex.Cloud. Необходимо е само да въведете "Habr" в полето "секретна парола".