asp.net: ListView from different sides
The ListView control was introduced in .Net Framework 3.5 as a replacement for the outdated GridView. The new element has more advanced functionality than its predecessor, but at the same time is deprived of some internal mechanisms, which, by the way, is entirely a consequence of the expanded versatility of ListView. Among the differences between ListView and GridView, you can also call flexible customization of markup, which allows you to display data not only in tabular form, but in general any programmer wishes. Thanks to the ItemTemplate, EditItemTemplate, InsertItemTeplate templates, you can customize the appearance of any of the ListView: edit or select items.
I decided to write this article to share my experience with ListView, to give some ways to solve common problems, and also to describe the problems I encountered and which I managed to solve were not very nice. It is possible that when discussing the article there will be more flexible solutions to the tasks described, which I will only be glad of.
Unlike GridView, ListView does not have support for implementing the column sorting mechanism built into the editor. In my opinion, the lack of such support is due to the fact that ListView, unlike GridView, was able to render data not only in a tabular form. However, even in the absence of a mechanism, adding sorting to the ListView table is probably the easiest thing described in this article. Consider the implementation of a specific example:
Here, CommandArgument = "Bank.shortName" indicates which column from the data source to sort.
AlternatingItemTemplate is intended to describe the template of even items in the list. This allows you to render tables and other types of data sets in a beautiful way, for example, so that the backgrounds of the rows of data in the table alternate. In general, a separate template is certainly good, but most often the whole difference between the lines in the table is only in a different background or different css classes. In this case, the volumetric pattern seems to me redundant and I propose another solution (peeped on the Internet):
')
In this example, instead of entering the AlternatingItemTemplate code, I substitute a special css-class for even lines. By the way, in a real project, this allows me to save about 30 lines of code.
ListView, like GridView, offers a mechanism for selecting a row from a dataset. Data selection is required in many information processing tasks and ListView offers, in addition to supporting such a choice, a strong template mechanism. What does it mean? This means that the selected data can not be represented as they were presented in the general data set. For example, you can expand the usual record line and display additional data, display an additional toolbar for working with data, add additional links that extend the view of the selected data. I will show an example:
There is a sign:
And here is the result of the selection of data in it:
When using ajax, working with such a label for the end user becomes convenient and enjoyable. You can try a live example here . It is easy to notice that after selecting the data, the user gets access to the extended information and additional services, in this case, to print the data, but there may be editing, hiding, deleting data, in the case when the data is created by the creator or person entitled to data operations.
I will not give in this example lines of code, because the implementation does not go beyond the ordinary, everything is implemented in the SelectedItemTemplate, in which instead of a single tr line in this case, three are displayed: the old bold font, extended information and a toolbar.
Consider an example:
A very common situation is when it is necessary to merge repetitive vertical data into a single cell. In GridView, this problem was solved by me through the OnRowDataBound event, in which you could get access to the current row being processed and assign the required rowspan to the desired cell, as well as hide unnecessary cells. In ListView, unfortunately, there is no similar tool. Moreover, at the moment I do not know a similar way to solve the problem. The method proposed by me strictly speaking does not implement the union of cells in the ListView, but only masks the data. We have this markup:
Here is a slice of tr in which there is td, which is the purpose of the merge in the case of duplicate data. I propose the source code of the GetRowspanVisible method:
The code does not claim finesse. I accept any constructive suggestions for its alteration. I’ll say right away that the style tie was chosen due to the fact that through classes this approach did not work for me personally. So: as you can see, when processing cells in a column, they are assigned a different style, depending on what is required: hide or show. Thus, the user will see data only in the first cell, and empty fields in the following. The result can be seen in the figure above. The downside of this solution, among other things, is, of course, the binding of the displayed data to the upper boundary, since this data is an element of the upper row and does not contain a rowspan.
I would like to note that the solution is far from ideal, even I myself understand this. But lengthy searches and consultations with the comrades have come to naught, there is no other solution yet. I will be glad to see alternatives and will gladly get rid of the current implementation. In the meantime, that is, that is. Waiting for your comments.
In principle, the task is simple, but I still decided to bring the solution in this article. In the listview, when editing, you need to output a DropDownList that would be filled with data from a third-party reference data source and bind to our data source for the listview. Example:
The solution, as I said, is simple:
Here dsMetalDic is reference data, Bind ("metalId") is a binding to our data source for ListView.
When deleting data, it is important to ask the user for confirmation of the operation. When working with ListView, you can use the following solution. Define the javascript function:
We use it in the element that is responsible for deleting data:
Sometimes it is necessary to display at once the entire data set consisting of many lines in edit mode.
This task is solved through the ItemTemplate and, in general, this is a trivial task. Another thing is how to save changes in all these lines with one click of the “Save All” button? Solution below:
Where lvEdit is a ListView.
When the page in the table is one, it does not make sense to display the Pager, so we will hide it. The difficulty is that in the standard version of the implementation of the paginal breakdown of data access to the DataPager element is not. But we will find it and hide it in the following simple way:
Here rlv_DataBound is the OnDataBound event for the ListView, dp is the name of our DataPager that is “embedded” through the templates in the ListView.
Changing the query for the ListView is not as trivial as it may seem when we use the LinqDataSource. I know one solution that I will give below:
Here dsResume_Selecting is the OnSelecting event handler for the LinqDataSource.
In this article I tried to highlight many aspects of working with ListView, cited a few examples and suggested several solutions to standard and not-so tasks. However, I understand that many tasks can be solved in another way, perhaps even more interesting. I look forward to constructive suggestions, alternative solutions, comments and indications of errors that you find. The article was written for a long time, I apologize for any mistakes in typing.
PS: sorry for possible glitches in syntax highlighting, this issue is now solved with Habra support.
I decided to write this article to share my experience with ListView, to give some ways to solve common problems, and also to describe the problems I encountered and which I managed to solve were not very nice. It is possible that when discussing the article there will be more flexible solutions to the tasks described, which I will only be glad of.
Content
- sorting;
- reject AlternatingTemplate;
- element selection;
- combining cells in a column;
- use DropDownList for lookup when editing;
- delete request;
- editing and saving several lines at once;
- Hiding DataPager;
- dynamic query change for ListView.
Sorting
Unlike GridView, ListView does not have support for implementing the column sorting mechanism built into the editor. In my opinion, the lack of such support is due to the fact that ListView, unlike GridView, was able to render data not only in a tabular form. However, even in the absence of a mechanism, adding sorting to the ListView table is probably the easiest thing described in this article. Consider the implementation of a specific example:
< th class = "bankTd" >
< asp: LinkButton ID = "sortBank" runat = "server" CommandName = "sort" CommandArgument = "Bank.shortName"
Text = "Bank" />
</ th >
* This source code was highlighted with Source Code Highlighter .
Here, CommandArgument = "Bank.shortName" indicates which column from the data source to sort.
AlternatingItemTemplate failure
AlternatingItemTemplate is intended to describe the template of even items in the list. This allows you to render tables and other types of data sets in a beautiful way, for example, so that the backgrounds of the rows of data in the table alternate. In general, a separate template is certainly good, but most often the whole difference between the lines in the table is only in a different background or different css classes. In this case, the volumetric pattern seems to me redundant and I propose another solution (peeped on the Internet):
')
< ItemTemplate >
< tr <% # Container . DataItemIndex % 2 == 0 ? "" : "class = \" alt \ "" % >>
* This source code was highlighted with Source Code Highlighter .
In this example, instead of entering the AlternatingItemTemplate code, I substitute a special css-class for even lines. By the way, in a real project, this allows me to save about 30 lines of code.
Item selection
ListView, like GridView, offers a mechanism for selecting a row from a dataset. Data selection is required in many information processing tasks and ListView offers, in addition to supporting such a choice, a strong template mechanism. What does it mean? This means that the selected data can not be represented as they were presented in the general data set. For example, you can expand the usual record line and display additional data, display an additional toolbar for working with data, add additional links that extend the view of the selected data. I will show an example:
There is a sign:
And here is the result of the selection of data in it:
When using ajax, working with such a label for the end user becomes convenient and enjoyable. You can try a live example here . It is easy to notice that after selecting the data, the user gets access to the extended information and additional services, in this case, to print the data, but there may be editing, hiding, deleting data, in the case when the data is created by the creator or person entitled to data operations.
I will not give in this example lines of code, because the implementation does not go beyond the ordinary, everything is implemented in the SelectedItemTemplate, in which instead of a single tr line in this case, three are displayed: the old bold font, extended information and a toolbar.
Merging cells in a column
Consider an example:
A very common situation is when it is necessary to merge repetitive vertical data into a single cell. In GridView, this problem was solved by me through the OnRowDataBound event, in which you could get access to the current row being processed and assign the required rowspan to the desired cell, as well as hide unnecessary cells. In ListView, unfortunately, there is no similar tool. Moreover, at the moment I do not know a similar way to solve the problem. The method proposed by me strictly speaking does not implement the union of cells in the ListView, but only masks the data. We have this markup:
< ItemTemplate >
< tr runat = "server" >
< td class = "bankTd" runat = "server" id = "bankName" style = '<% # GetRowspanVisible (Eval ("Bank.shortName"). ToString ())%>' >
< asp: HyperLink ID = "hlBank" runat = "server" Text = '<% # Eval ("Bank.shortName")%>' NavigateUrl = 'test.aspx' > </ asp: HyperLink >
</ td >
... This source code was highlighted with Source Code Highlighter .
Here is a slice of tr in which there is td, which is the purpose of the merge in the case of duplicate data. I propose the source code of the GetRowspanVisible method:
private string _bankName = "" ;
public string GetRowspanVisible ( string bankName)
{
string result = “border: 0px; border-left: solid 1px # C0C0C0; font-size: 0px; " ;
if (Request.Browser.Browser == "IE" )
result = "visibility: hidden; border: 0px; border-left: solid 1px # C0C0C0; ";;
if (_bankName! = bankName)
{
_bankName = bankName;
result = "border-top: solid 1px # C0C0C0; border-left: 1px; border-bottom: 0px; " ;
}
return result;
} * This source code was highlighted with Source Code Highlighter .
The code does not claim finesse. I accept any constructive suggestions for its alteration. I’ll say right away that the style tie was chosen due to the fact that through classes this approach did not work for me personally. So: as you can see, when processing cells in a column, they are assigned a different style, depending on what is required: hide or show. Thus, the user will see data only in the first cell, and empty fields in the following. The result can be seen in the figure above. The downside of this solution, among other things, is, of course, the binding of the displayed data to the upper boundary, since this data is an element of the upper row and does not contain a rowspan.
I would like to note that the solution is far from ideal, even I myself understand this. But lengthy searches and consultations with the comrades have come to naught, there is no other solution yet. I will be glad to see alternatives and will gladly get rid of the current implementation. In the meantime, that is, that is. Waiting for your comments.
Use DropDownList to lookup when editing
In principle, the task is simple, but I still decided to bring the solution in this article. In the listview, when editing, you need to output a DropDownList that would be filled with data from a third-party reference data source and bind to our data source for the listview. Example:
The solution, as I said, is simple:
< asp: DropDownList ID = "ddlMetals" runat = "server" DataSourceID = "dsMetalDic" DataTextField = "name" DataValueField = "id" SelectedValue = '<% # Bind ("metalId")%>' > </ asp: DropDownList >
* This source code was highlighted with Source Code Highlighter .
Here dsMetalDic is reference data, Bind ("metalId") is a binding to our data source for ListView.
Removal request
When deleting data, it is important to ask the user for confirmation of the operation. When working with ListView, you can use the following solution. Define the javascript function:
>* This source code was highlighted with Source Code Highlighter .
function OnDeleteClick ()
{
return confirm ( 'Delete data?' );
}
We use it in the element that is responsible for deleting data:
< asp: LinkButton ID = "DeleteButton" runat = "server" CommandName = "Delete" Text = "Delete" OnClientClick = "return OnDeleteClick ();" />
* This source code was highlighted with Source Code Highlighter .
Editing and saving multiple lines at once
Sometimes it is necessary to display at once the entire data set consisting of many lines in edit mode.
This task is solved through the ItemTemplate and, in general, this is a trivial task. Another thing is how to save changes in all these lines with one click of the “Save All” button? Solution below:
foreach ( var item in lvEdit.Items)
{
lvEdit.UpdateItem (item.DataItemIndex, true );
} * This source code was highlighted with Source Code Highlighter .
Where lvEdit is a ListView.
Hiding DataPager
When the page in the table is one, it does not make sense to display the Pager, so we will hide it. The difficulty is that in the standard version of the implementation of the paginal breakdown of data access to the DataPager element is not. But we will find it and hide it in the following simple way:
protected void rlv_DataBound ( object sender, EventArgs e)
{
ListView listView = sender as ListView;
if (listView! = null )
{
DataPager pager = listView.FindControl ( "dp" ) as DataPager;
if (pager! = null )
pager.Visible = pager.PageSize <pager.TotalRowCount;
}
} * This source code was highlighted with Source Code Highlighter .
Here rlv_DataBound is the OnDataBound event for the ListView, dp is the name of our DataPager that is “embedded” through the templates in the ListView.
Dynamic query change for ListView
Changing the query for the ListView is not as trivial as it may seem when we use the LinqDataSource. I know one solution that I will give below:
protected void dsResume_Selecting ( object sender, LinqDataSourceSelectEventArgs e)
{
e.Result = Query;
} * This source code was highlighted with Source Code Highlighter .
Here dsResume_Selecting is the OnSelecting event handler for the LinqDataSource.
Conclusion
In this article I tried to highlight many aspects of working with ListView, cited a few examples and suggested several solutions to standard and not-so tasks. However, I understand that many tasks can be solved in another way, perhaps even more interesting. I look forward to constructive suggestions, alternative solutions, comments and indications of errors that you find. The article was written for a long time, I apologize for any mistakes in typing.
PS: sorry for possible glitches in syntax highlighting, this issue is now solved with Habra support.
Source: https://habr.com/ru/post/36857/
All Articles