Using List View Control

Many times we need to show data to the user in List Views. For demonstration purpose I have extracted this sample from a project which search Ayah text from entering some text in search box.

As you can see that first thing is ListView which contains data source as "SqlDataSource1" which is given at the end of code.  That SqlDataSource contains mandatory tags which are easy to learn.

Now come to the ListView code:

First of all we have to define a overall layout of List View. How we want to show our contents to the user. As you can see that I have shown the Title (the keywords to be searched) using property GetTextBoxText and under that another property which shows how many results found by GetTotalResults.

under these two things there is a ul which is actually a container of list items li. Notice that li has the id "itemPlaceholder". This li will contain items of the list.

 After the list we have DataPager component in our layout. DataPager has three main things one is FirstPage second is the numeric page numbers and third is the LastPage. we will just have to give PagedControlID as ListView's ID. At this point our main layout is completed.

ItemTemplate contains your customized code which will show your items in List


[code]
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" >
                   
                    <LayoutTemplate>
                    <i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Search Result for: <b><%=GetTextBoxText%></b></i>
                    <p>Total results found: <%=GetTotalResults%></p>
                        <ul ID="itemPlaceholderContainer" runat="server"
                            style="font-family: Verdana, Arial, Helvetica, sans-serif;">
                            <li runat="server" id="itemPlaceholder" />
                        </ul>
                        <div style="text-align: center;background-color: #CCCCCC;font-family: Verdana, Arial, Helvetica, sans-serif;color: #000000;">
                            <asp:DataPager ID="DataPager1" runat="server" PageSize="10" PagedControlID= "ListView1">
                                <Fields>
                                    <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"
                                        ShowNextPageButton="False" ShowPreviousPageButton="False" />
                                    <asp:NumericPagerField />
                                    <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True"
                                        ShowNextPageButton="False" ShowPreviousPageButton="False" />
                                </Fields>
                            </asp:DataPager>
                        </div>
                       
                    </LayoutTemplate>
<ItemTemplate>
                        <li style="background-color: #DCDCDC;color: #000000;"><b>AyahText:</b>
                            <asp:Label ID="AyahTextLabel" runat="server" Text='<%#HighlightKeywords(""+Eval("AyahText"),txt_search.Text)%>' />
                            <br />
                        </li>
                        <br />
                        <i><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# String.Format("AyahDetail.aspx?chno={0}&ayahno={1}", Eval("ChapterID"),Eval("VerseIdBegin")) %>'>Sura Name:&nbsp;<%#DataHandling.GetSurahName(Convert.ToInt32(Eval("ChapterID")))%>&nbsp; Ayah No:&nbsp;<%#Eval("VerseIdBegin")%></asp:HyperLink></i>
                        </ItemTemplate>

                        <AlternatingItemTemplate>
                           
                            <li style="background-color: #FFF8DC;"><b>AyahText:</b>
                                <asp:Label ID="AyahTextLabel" runat="server" Text='<%#HighlightKeywords(""+Eval("AyahText"),txt_search.Text)%>' />
                                <br />
                            </li>
                            <br />
                        <i><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# String.Format("AyahDetail.aspx?chno={0}&ayahno={1}", Eval("ChapterID"),Eval("VerseIdBegin")) %>'>Sura Name:&nbsp;<%#DataHandling.GetSurahName(Convert.ToInt32(Eval("ChapterID")))%>&nbsp; Ayah No:&nbsp;<%#Eval("VerseIdBegin")%></asp:HyperLink></i>
                        </AlternatingItemTemplate>

                    <ItemSeparatorTemplate>
                       
                        <hr /><br />
                        </ItemSeparatorTemplate>
                    </asp:ListView>

//---------------------------------------------------------------------------------------------------------------------
//---------------------------------SQL Data Source---------------------------------------------------------------

 <asp:SqlDataSource ID="SqlDataSource1" runat="server"
                        ConnectionString="<%$ ConnectionStrings:QuranConnectionString2 %>"
                      
                        SelectCommand="SELECT * FROM [Quran] WHERE (([QuranID] = @QuranID) AND ([AyahText] LIKE '%' + @AyahText + '%') OR ([Keywords] LIKE '%' + @Keywords + '%'))">
                        <SelectParameters>
                            <asp:Parameter DefaultValue="100" Name="QuranID" Type="Decimal" />
                            <asp:ControlParameter ControlID="txt_search" Name="AyahText"
                                PropertyName="Text" Type="String" />
                            <asp:ControlParameter ControlID="txt_search" Name="Keywords"
                                PropertyName="Text" Type="String" />
                        </SelectParameters>
</asp:SqlDataSource>

[/code]