Introduction

This article demonstrates an interesting and very useful concept in ASP.NET.

Question: What is query extender?

In simple terms "It filters the data from a selected data source".

Step 1: Create a new web application

Output1.jpg

Step 2: Adding a new LINQ-to-SQL

Output2.jpg

Step 3: Add new data source to GridView

Output3.png

Output5.jpg

Output6.png

Output7.png

Output8.png

Step 4: The complete code of WebForm1.aspx is as in the following:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="QueryExtenderApp.WebForm1" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head id="Head1" runat="server">
  5. <title></title>
  6. </head>
  7. <body>
  8. <form id="form1" runat="server">
  9. <center>
  10. <div>
  11. <table>
  12. <tr>
  13. <td colspan="3" align="center">
  14. <asp:Label ID="Label2" runat="server" Text="Query Extender" Font-Bold="true" Font-Names="Verdana"
  15. Font-Size="Large"></asp:Label>
  16. </td>
  17. </tr>
  18. <tr>
  19. <td>
  20. <asp:Label ID="Label1" runat="server" Font-Names="Verdana" Font-Bold="true" Text="Please Filter By FirstName"></asp:Label>
  21. </td>
  22. <td>
  23. <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  24. </td>
  25. </tr>
  26. </table>
  27. </div>
  28. <div>
  29. <asp:GridView ID="GridView1" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan"
  30. BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" AutoGenerateColumns="False"
  31. DataKeyNames="EmpId" DataSourceID="LinqDataSource1">
  32. <AlternatingRowStyle BackColor="PaleGoldenrod" />
  33. <Columns>
  34. <asp:BoundField DataField="EmpId" HeaderText="EmpId" InsertVisible="False" ReadOnly="True"
  35. SortExpression="EmpId" />
  36. <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
  37. <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
  38. <asp:BoundField DataField="Age" HeaderText="Age" SortExpression="Age" />
  39. </Columns>
  40. <FooterStyle BackColor="Tan" />
  41. <HeaderStyle BackColor="Tan" Font-Bold="True" />
  42. <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
  43. <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
  44. <SortedAscendingCellStyle BackColor="#FAFAE7" />
  45. <SortedAscendingHeaderStyle BackColor="#DAC09E" />
  46. <SortedDescendingCellStyle BackColor="#E1DB9C" />
  47. <SortedDescendingHeaderStyle BackColor="#C2A47B" />
  48. </asp:GridView>
  49. <asp:LinqDataSource ID="LinqDataSource1" runat="server" ContextTypeName="QueryExtenderApp.DataClasses1DataContext"
  50. EntityTypeName="" TableName="Employees">
  51. </asp:LinqDataSource>
  52. <br />
  53. <asp:QueryExtender ID="QueryExtender1" runat="server" TargetControlID="LinqDataSource1">
  54. <asp:SearchExpression DataFields="FirstName" SearchType="StartsWith">
  55. <asp:ControlParameter ControlID="TextBox1" />
  56. </asp:SearchExpression>
  57. </asp:QueryExtender>
  58. </div>
  59. </center>
  60. </form>
  61. </body>
  62. </html>

Step 5: The complete code of WebForm1.aspx.cs is as in the following:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. namespace QueryExtenderApp
  8. {
  9. public partial class WebForm1 : System.Web.UI.Page
  10. {
  11. protected void Page_Load(object sender, EventArgs e)
  12. {
  13. }
  14. }
  15. }

Step 6: The output of the application is as in the following:


Output9.png
Step 7: The selected output of the application is as in the following:

Output10.png


I hope this article was useful for you.