The QueryExtender web server control

In this post I am going to present a hands on example on how to use the QueryExtender web server control.

It is built into ASP.Net 4.0 and it is available from the Toolbox in VS 2010.Before we move on with our example let me explain what this control does and why we need it. 

Its goal is to extend the functionality of the LINQ to Entities and LINQ to SQL datasources.Most of the times when we have data coming out from a datasource we want some sort of filtering. We do achieve that by using a Where clause. Unfortunately the Where property of e.g the LinqDataSource web server control does not provide us with the full expressiveness that LINQ has.By using the QueryExtender web server control way we have richer filtering expressions.

Basically it extends the LinqDataSource and EntityDataSource web server controls with capabilities

1) Launch VS 2010. I am using the Ultimate edition but the express edition will work fine.

2) Create an empty web site from the available templates..

3) Add a new web form to your website.

4) We will need a database. I will use the Pubs database. This is a well known database and many people are familiar with its schema.You can download the Pubs database from this link. If you need some help on how to install the database have a look here . 

5) Add a GridView web server control on the form. Add an EntityDataSource control on the form. Set the DataSourceID property to the EntityDataSource1  ( DataSourceID="EntityDataSource1").

6) Add a new item to your site. Add an ADO.Net Entity Data Model. Name it Pubs.edmx. On the wizard choose "Generate from database". Then click Next and use an existing connection to the Pubs database or create a new one.Then choose all the Pubs tables to be included in the model and click Finish to exit from the wizard.

7) Then you need to configure the EntityDataSource and bind to the Authors table.You can do that from the smart tag of the EntityDataSource control but  I have chosen to do the same thing from the markup.

So it looks like this

<asp:EntityDataSource ID="EntityDataSource1" runat="server" 
ConnectionString="name=pubsEntities" DefaultContainerName="pubsEntities" 
EnableDelete="True" EnableFlattening="False" EnableInsert="True" 
EnableUpdate="True" EntitySetName="authors">
</asp:EntityDataSource>

As you see I have enabled Insert,Update,Delete and set the EntitySetName to authors entity class-object.

8) Run your application and make sure that everything works as expected.

9) Drag and drop a TextBox control on the form. Set the ID of the control to "txtSearch".Add a button to the form. Leave the default name.

10) Drag and drop a QueryExtender control on the form. We will configure some of its properties to create a search expression.The markup I have for my own example is this

<asp:QueryExtender ID="QueryExtender1" runat="server" 
TargetControlID="EntityDataSource1">
<asp:SearchExpression DataFields="city" SearchType="Contains">
<asp:ControlParameter ControlID="txtSearch" />
</asp:SearchExpression>
</asp:QueryExtender>

11) We set the TargetControlID property to the EntityDataSource control.We want to have a search expression that is why we have a SearchExpression control.

We want to filter the data in the gridview according to the City field-DataFields="city".

We will get the filtering data from the textbox,  <asp:ControlParameter ControlID="txtSearch" />.

The search type will be Contains,SearchType="Contains".

12) Run your application, type "v" in the textbox and hit the button. You will see all the records being filtered where the city column contains cities that have "v" in their names.

13) Add a new web form in to your site. Add two textbox controls on the form. Add a button control on the form as well.

14) Add a GridView web server control on the form. Add an EntityDataSource control on the form. Set the DataSourceID property to the EntityDataSource1  ( DataSourceID="EntityDataSource1").

15) Then you need to configure the EntityDataSource and bind to the Sales table.You can do that from the smart tag of the EntityDataSource control but  I have chosen to do the same thing from the markup.

So it looks like this

<asp:EntityDataSource ID="EntityDataSource1" runat="server" 
ConnectionString="name=pubsEntities" DefaultContainerName="pubsEntities" 
EnableDelete="True" EnableFlattening="False" EnableInsert="True" 
EnableUpdate="True" EntitySetName="sales">
</asp:EntityDataSource>

 As you see I have enabled Insert,Update,Delete and set the EntitySetName to sales entity class-object.

16) Drag and drop a QueryExtender control on the form. We will configure some of its properties to create a range expression. We will use the 2 textboxes to allow users to set the minimum and maximum values for the "quantity" column.

The markup I have for my own example is this

 <asp:QueryExtender ID="QueryExtender1" runat="server"
 TargetControlID="EntityDataSource1">
 <asp:RangeExpression DataField="qty" MaxType="Inclusive" MinType="Inclusive">
 <asp:ControlParameter ControlID="TextBox1" />
 <asp:ControlParameter ControlID="TextBox2" />
        
 </asp:RangeExpression>
 </asp:QueryExtender>

 

17) We set the TargetControlID property to the EntityDataSource control.We want to have a range expression that is why we have a RangeExpression control.

We want to filter the data in the gridview according to the qty field-DataFields="qty".

We will get the filtering data from the two textboxes, 

<asp:ControlParameter ControlID="TextBox1" />
<asp:ControlParameter ControlID="TextBox2" />

18) Run your application and type two values in the textboxes e.g 20 and 40 and hit the button. See the results that match the criteria being returned to the grid.

Hope it helps!!!


No Comments