ASP.Net State Management Trivia Answers

Hi Friends,

Please refer the below answers for the Trivia questions

1. Correct Answer: B
A. Incorrect: Client-side state management requires the client to transmit the user name and
password with each request. It also requires the client to store the information locally,
where it might be compromised. This is not a secure solution.
B. Correct: Server-side state management provides better security for confidential information
by reducing the number of times the information is transmitted across the network.

2. Correct Answer: A
A. Correct: Client-side state management is an excellent choice for storing nonconfidential
information. It is much easier to implement than server-side state management when
multiple web servers are involved, and it minimizes load on the servers.
B. Incorrect: You could use server-side state management; however, it would require a
server-side database to synchronize information among multiple web servers. This
would increase the load on your servers.

3. Correct Answer: A
A. Correct: View state is the simplest way to store this information. Because it is enabled by
default, you might not need to write any code to support state management for your form.
B. Incorrect: You can use control state; however, it requires extra coding and is only necessary
if you are creating a control that might be used in a webpage that has view state disabled.
C. Incorrect: You can store the information in hidden fields; however, that requires writing
extra code. View state supports your requirements with little or no additional code.
D. Incorrect: Cookies require extra coding and are only required if you need to share
information between multiple web forms.
E. Incorrect: You can use query strings to store user preferences. However, you need to
update every link on the page that the user might click. This is very time consuming
to implement.

4. Correct Answer: D
A. Incorrect: View state can only store information for a single web form.
B. Incorrect: Control state can only store information for a single control.
C. Incorrect: Hidden fields can only store information for a single web form.
D. Correct: Unless you specifically narrow the scope, the user’s browser submits information
stored in a cookie to every page on your site. Therefore, each page processes the user
preference information. If you configure the cookie expiration to make it persistent, the
browser submits the cookie the next time the user visits your site.
E. Incorrect: You can use query strings to store user preferences. However, you need to
update every link on the page that the user might click. This is very time consuming
to implement.

5. Correct Answer: E
A. Incorrect: View state information is not stored in the URL, and therefore is lost if the URL
is bookmarked.
B. Incorrect: Control state information is not stored in the URL, and therefore is lost if
the URL is bookmarked.
C. Incorrect: Hidden fields are not stored in the URL, and therefore are lost if the URL is
bookmarked.
D. Incorrect: Cookies are not stored in the URL, and therefore are lost if the URL is bookmarked.
E. Correct: Query strings are stored in the URL. Although they are not the easiest type of
client-side state management to implement, they are the only technique that allows state
management data to be easily bookmarked and sent via email.

Thanks,
Rahul
Happy Coding

1,618 total views, 1 views today

ASP.Net State Management Trivia

Hi Friends,

Quiz time. Let’s get started with some basic questions from state management. Answer these with explanation. Correct answers will be posted in the next series of the same with some other questions.

1. You need to store a person’s user name and password as user navigates to different
pages on your site, so that you can pass these credentials to the server. Which type of
state management should you use?

A. Client-side state management

B. Server-side state management
2. You need to track general user preferences when a user visits your site, to
minimize additional load on your servers. You distribute requests among multiple web
servers, each running a copy of your application. Which type of state management
should you use?

A. Client-side state management
B. Server-side state management

3. You are creating an ASP.NET webpage that allows a user to browse information in a
database. Every time user accesses the page, you need to track the search and sorting values. What you don’t need to store the information between visits to the webpage. Which type of client-side state management would meet your requirements and be the simplest
to implement?

A. View state
B. Control state
C. Hidden fields
D. Cookies
E. Query strings

4. You are creating an ASP.NET website with dozens of pages. You want to allow the
user to set user preferences and have each page process the preference information.
You want the preferences to be remembered between visits, even if the user closes
the browser. Which type of client-side state management meets your requirements
and is the simplest to implement?

A. View state
B. Control state
C. Hidden fields
D. Cookies
E. Query strings

5. You are creating an ASP.NET web form that searches product inventory and displays items
that match the user’s criteria. You want users to be able to bookmark or send search
results in email. Which type of client-side state management meets your requirements
and is the simplest to implement?

A. View state
B. Control state
C. Hidden fields
D. Cookies
E. Query strings

Till then, stay tuned and happy coding.

Thanks,
Rahul
Happy Coding

1,671 total views, 1 views today

Code First Approach – Entity Framework.

Hi Friends,

Today in this discussion, we’ll see more about code first approach. This one is my personal favorite. In the previous discussions I made the models using the EF designer. In the 1st case what i did is reverse engineered an existing database into model and then i created a model right from scratch in the designer and then created the database. So, basically in both the cases, designer generates the code. some of us really like to work with designers. But, there are also huge no of followers who just love to stick to code and work from there itself. So, for this case, we have another approach “Code First Approach“. So, let’s get started.

Let’s start with some of its features.

  • Code First has the ability to use the model classes written by user and create the same as table in the database.
  • It has also got the ability to update the database if any of the model classes gets changed or any new class added using Code First Migrations feature.

Code1st_2nd

 

so, in the above screen shot i have got a bunch of sample classes. Also you could see it has got one navigation property with OrderDetails class so that it can build relationship with Orders class. so, these are some classes which is going to play crucial role in code 1st EF.

So, in order to make use of these classes i’ll be making one more layer just to make things tidy in the same solution with name DAL (Data Access Layer) and then subsequently i’ll add references to this class library project. When i said references i mean EF references as shown below.

Code1st_3rd

Code1st_4th

Code1st_5th

 

Code1st_6th

 

So, now we have successfully added the EF references in the project. It has also added App.config and packages.config file just to make the proper configurations for EF in there.

Code1st_7th

 

Now, since all the configurations in place, i can go ahead and get started with the context class and inherit the same with DbContext class.

Code1st_8th

so, DbContext is a class which undersstands EF code first approach and in order to understand my model classes, i need to convert the same in DbSet. So, basically a DbSet of these model class will allow EF to do manage objects or to allow any kind of CRUD operation required in the application. In order to do that 1st i need to reference my model classes to DAL layer, so that same can be exposed.

Code1st_9th

Now, one important point i would like to point out here, in order to validate your data model, you must validate the same against the designer, whether the desired diagram is generating or not. In order to do that, 1st what you need to do is to import one tool from Extensions ad Updates option. you need to just type “Entity Framework Power Tools” as shown below and then install the same. after installation VS might ask you to restart the IDE just to make sure that tool will take effect.

Code1st_10th

 

As you see above in snapshot, I have already installed that tool. Now, in order to validate the data model what you need to do 1st make sure that your DAL layer is marked as Startup Project, just to avoid the connection string error. And then do the following as shown below.

Code1st_11th

Now, when you do the same it might throw error if any is present like if any class hasn’t been annotated with [Key] attribute because EF won’t understand which is the key in the class. And if everything goes well, it will generate the diagram as shown below.

Code1st_12th

 

so, this was the diagram which was supposed to come. This is fairly simple model based on the class relationship. you could see in the diagram that 1st two entities are having relationship and other two are independent, i made the same way just to keep the things simple.

Now, another important concept one should understand that code first doesn’t bother about the database until runtime. So, this happens in two step 1st is to locate the database and 2nd step is to create the database if required.

Now, let’s start doing demonstration with one little console app where in i’ll be exposing the context to walk through one of the tables and print the result like shown below.

Code1st_13th

Now, when i ran the app, you could see in the side screen that DAL.SampleModel has been created. Currently, there won’t be any data inside. so, we need to seed the data in there to populate on the screen.

Code1st_14th

So, it may happen that if you are going to run the app again it would throw you an exception reason being the default behavior restricts the user for database initialization to one time, however we can do override the same using certain configuration changes, because if our model changes then we need to update the database as well. so, what we can do here is instead of using initialization every time, we could use database migrations. so, i need to go into package manager console and from there i need to enable database migrations like shown below

Code1st_15th

 

Code1st_16th

 

Code1st_16th

 

Code1st_17th Code1st_18th

so, now when migrations enabled, we need to specifically set the option which one am going to use for migrations out of 4 as listed below.

  • CreateDatabaseIfNotExists –> This is the default one .
  • DropCreateDatabaseIfModelChanges
  • DropCreateDatabaseAlways
  • MigrateDatabaseToLatestVersion

so, these are the four options, so am going to use the last one, because in this scope it suits me.

Code1st_19

 

Now, next step is seeding the database. so, basically i can mock some data either manually by directly entering the data into tables or via code. so, when we go via code approach, we term this as seeding of database. so, for doing the same we’ll override the configuration Seed method by changing the commented part as shown below.

Code1st_20th

 

Code1st_21

 

so, above in the screen shot, I have added two records via seed method. Seeding is really useful when you want to test your app against some mock data before it is being promoted to production just to get the feel of real app.

Now, when i run my app and step through it, it should produce these two record set in the console screen as shown below.

 

 

Code1st_22

 

 

Now, with this i would like to wrap this module. I have also attached the sample code for your reference. Till then stay tuned and Happy Coding.

Download Link :-SampleModel

Thanks,
Rahul
Happy Coding

5,183 total views, 1 views today

Entity Framework :- Database first approach

Hi Friends,

Today, in this section we’ll see how Database first approach works with Entity framework. The idea behind using the existing database and create a new entity model which will interact with EF designer. So, starting with this i’ll start with class library as my data project just to make sure the same can be easily reused in other applications also.

1st

so, it will generate the sample library with sample class file in there as shown below in the snapshot. But, i really don’t want that class file. so, what i do is just go ahead and delete the class file.

database1st_2nd

 

and then i’ll add my model and it’s pretty easy to find the same. If we go in the data tab and look for ADO.Net Entity Data Model. what i’ll do is select the same and give the same edmx file a proper name and then add the same.

database1st_3rd

Then, this will ask for a option whether you would like to create from an existing database or from an empty one. I’ll select the existing database as shown below.

database1st_4th

 

since, i already have the server explorer set up to my destined database, hence this will flag me the below message with connection string. this will also go ahead and save the connection string in the App.config file.

database1st_5th

now, in the next case it will ask which are the tables, views, stored procedures or functions you would like to select. I have selected those which i believe ok for the explanation.

database1st_6th

now, one important point to note here is that i have three checkboxes and by default all are checked. the 1st checkbox tells the names are pluralized or singularized means if the wizard finds the table name with singular then entities will be pluralized and vice versa. Now, the next option is Include foreign keys column in the model, again this is by default selected. so if you got relationships defined in the database which means there is a primary key and foreign key, so EF will recognize these and build subsequent relationships. Now, the last option tells how the wizard handles the stored procedure and functions. so, when this option by default is selected, wizard is making your easy btw by giving you a choice that you can use the same in code. so, now i’ll go ahead and click finish. so, this will generate the Entity diagram with some warnings in there.

database1st_7th

so, you could also see some messages and warnings in there. but, these are ok. we should not be concerned about these. Basically, what happens there is a general rule in entity framework that every table should have a primary key and in this case we have views also which is not having one primary key. so, wizard what did is created a composite key on all the combination of non nullables in the views. so besides on these warnings, there has been a lot of task has been performed by the wizard behind the scenes. so, below in the snapshot if you can see lines between the objects, these are basically relationships which are being created based on the primary-foreign key relationship.

database1st_8th

Now, but in the mean the mean time designer has given me all the entities at one place, some times hard to identify between tables, views and procedures. but, we have a way to check the same by checking the model Browser by rt-clicking on the designer as shown below.

database1st_9th

by doing so, we’ll have the access of model browser in the side pane of the Visual studio as shown below.

database1st_10th

 

now, there are couple of key points one should understand here, so the place where functions and stored procedures reside are in function imports. so these have converted to functions means functions which are executed will return results and what the wizard did for each one of the functions returns it created a complex type. There is one more things which is known as scalar valued function, scalar valued function is something which is used in queries.

Now, the next thing which we need to understand the visual representation of model which we are seeing is actually xml file behind the scenes as shown below.

database1st_11th

now, attached the edmx file, we have the T4 template for generating context and then also for generating the model classes. so, these model classes are basically POCO (Plain Object CLR Objects) as shown below

database1st_12th

so, basically it doesn’t have any dependency on any EF Api or any external APIs.

Now, in order to understand table mapping what we can do is rt-click on the table designer and then click on table mapping for the desired table and it will give you the table mapping for the same like shown below.

database1st_13th

database1st_14th

 

however, what i can do in the entities are move up or move down the properties or rename the same as well and obviously you can undo the changes which you have done so far. also, one more interesting thing is coloring the entities means by default all the entities are blue in color but i would like to maintain some kind of distinction between a set of tables or between tables and views.  so in that case what we can do is go ahead and set the fillcolor property for that particular entity with a different color just to differentiate the items like shown below.

database1st_15th

another nice feature here in that we can split a single diagram into multiple diagrams. the best way to do the same is to add a new diagram in the model browser and then start dragging and dropping the desired models in there.

however, also there are many scenarios where in we are keep changing table definitions or something in the database. so, in that case we need update our designer, so in order to do that we need to rt-click on the designer surface and click on update model from the database. This will update the designer with the latest changed effects in the database.

database1st_16th

Now, one of the most awaited features in Entity Framework was Enums. Without Enums in earlier people used to have work arounds. so, basically if we want to use an enum type we can use it against the property of integer type. Let me show you that how to create an enum type, we need to go in the model browser, then rt-click the enum and say add enum type.

database1st_17th

 

database1st_18th

so basically there could these many types allowed for enum what is shown in the dropdown box. Now, let’s go ahead and create the same.

database1st_19th

 

Now, below flags i’ll keep these unchecked. these are basically bit wise operators means if i have a requirement to check for a combination of members, then we need to use that. Now when i click ok, it will generate one type under Enum category in the model browser as shown below.

database1st_20th

Now, when i save this browser one new model will get created for the enum as shown below.

database1st_21th database1st_22th

 

so, now when i got my enum defined i can go ahead an map the int type with new enum type as shown below.

database1st_23rd database1st_24th

 

so, now when the EF creates a query a database it will actually transform the enum into actual value.

so, with this i would like to wrap this module for Database 1st modeling approach. Now, to expose the same in any application, you can use the same class library in the project and add it’s reference in there.

I have also attached the sample model code which i used in this demo as well. In the next session we will see how to use code first approach, that is my favorite. So, till then stay tuned.

Download Link:- Database First Approach

Thanks,
Rahul
Happy Coding

2,308 total views, no views today

Factories and Services in Angular.

Hi friends,

Now, we’ll see factories and services in detail and how to use the same in Angular’s context.

angular33

basically this is one of the features in angular which is going to encapsulate data functionality into factories and services. so, let’s suppose i have to fetch all employees data, and i need those data into multiple controllers, so in that case i don’t have to hard code the data in there, rather what i’ll prefer i’ll move the common version to either factory or service provider to fetch data for me.

The difference between them is just the way in which they create the object that goes and gets the data.

  1.  With the factory we actually create an object inside of the factory and return it.
  2.  With the service we just have a standard function that uses the this keyword to define function.
  3.  With the provider there’s a $get you define and it can be used to get the object that returns the data.

however, what i like using factories more often than the other two technique, in real life app, we can have data residing in server and we can make ajax call to fetch the same. In terms of angular we use $http object to fetch the same. But, in this case, we’ll be using simple collection of employees and fetch the same.

what we’ll first do create a factory as shown below in the snapshot and then create and empty object for the same just for the initialization purpose. then with that factory object we’ll create two functions one to fetch the employees and the other one to post the employees.

angular34

 

Now, we are almost done we got the factory which is going to return my collection. But, my view doesn’t know about the factory but it does know about my controller, so in that context i’ll just pass my factory to that function like shown below in the snapshot.

angular35

 

so, you might have noticed that I have commented the Post employee logic written in there in factory. That’s basically a To Do part, let’s suppose you want to commit certain server side activity so in that case you will take an object of employee and send the same to database via ajax call. But, currently in this context that is not needed, hence to avoid the confusion I have just commented the same. so, basically post logic will remain the same where in it’s adding the new employees to in memory array. so, with this if you try the same it will give you the same output like it did give in earlier ones. sample Output shown below.

angular38

I have also attached the solution file in it’s finished form. you can download the same for future reference. So, with this I am going to wrap with this module. See you with some other module in the next section. So, till then stay tuned.

Download Link:- Angular

Thanks
Rahul
Happy Coding

1,233 total views, no views today

Routes in Angular

Hi Friends,

Now in this section we’ll discuss more about routes it’s roles and how in SPA app, routes are key ingredient. Below is a sample snapshot of sample SPA app.

angular21

So, we have when View1 is clicked, @ that instant may be there is another view which is having link on 1st view like “/View1”. so,this will load that view. and then, when we click on a link that has View2 in the path; then that would load up View2 but it’s not going to load up the whole shell page. Angular will only load up the page that we want.

There’s two ways we can load views.

First is, the view could be embedded as a script template in the actual shell page and then we could just tell instruct Angular with template id to load.

The second way is we can have the same on the server and we might actually have all these Views. we can also refer the same as partial page as in MVC,  because they’re part of a page. we can instruct Angular with the template url which am interested in to load and then we can give this URL to the server.

Now, i’ll create three different views as in html files in my solution folder so that the same can be embedded in the shell page. So, if you can see the snippet below how i used routing is basically i have defined one config section where in i have declared all the routing mechanism.

angular22

 

Now, I have also written one small snippet to add the employees which could be seen in the next snapshot. This function will simply push the data into an array which is basically in memory data, so when you refresh the same it will wipe out only static data which is written on the page that will remain.

angular22 angular23

 

Now, i have cleared the div which you could see in the snippet and subsequently i have added three different views View1, View2 and View3. Also,  View 1 has got the functionality to add a new employee. so for that I have used ng-click attribute just to handle the click event of button and then i have written the same function in the demoapp.html under the simple controller where in $scope has been passed in becuase $scope is the only way to communicate between controllers and view. so, if you see this function this is simply assigning the new values which is provided by the user to the existing attributes and hence getting added in the screen. Below are the screenshots of the sample Views.

angular24 angular25 angular26

 

Now, when you run the app, it will appear like

angular27 angular28 angular29 angular30

Now, in order to check whether routing is working or not, click on the below hyperlink and check the same in below snapshots.

angular31 angular32

 

So, this is how routing works in Angular JS . In the next section we’ll see how factories and services work. Till then stay tuned.

Thanks,
Rahul
Happy Coding

1,306 total views, no views today

Modules in Angular JS

Hi Friends,

Now in this section we’ll see how modules can actually be used to create other things like controllers, routes, factories and services, and then how all this fits together.

angular16

 

so, basically the above diagram is the simplified version of angular that how angular really fits different things together to produce a big picture. So, a module can have something like config function and which in return is used to define different routes. Now routes again are really important from the SPA perspective because if we have different views and those views need to be loaded into the shell page then we need some mechanism to understand what route we’re on and what view that’s associated with and then what controller goes with that view.

so, here in this case we need to understand this fact that modules basically act as containers as shown below in the diagram.

angular17

Now,here is a module object say angular.module – and from this module we can configure the routes, create custom filters, custom directives. we can get data from different sources using Factories, Services, Providers or Values. we can then even create Controllers using the module. So, basically modules act as really just an object container.

angular18

 

so, as you can see in the code snippet above, i have declared the module name @ the top of the page in “<html data-ng-app=”basicApp”>” so that my page will come to know about the module being invoked. later on the module’s body is being declared at the bottom section of the page. also, you could have noticed that we have created our controller in the module itself and the same has been called with “data-ng-controller=”basicController”“.

So, in the next section we’ll see Routes and Factories. Till then stay tuned and Happy Coding.

Thanks,
Rahul
Happy Coding

1,868 total views, no views today

Views, Controllers and Scope in Angular

Hi friends,

In this section we will see that how Views, Controllers and Scope are tied together. Scope is basically another term for ViewModel. In angular, we term it as scope. If i have to summarize scope, it’s basically a pipeline between view and controller. The way it works like we have a view, so instead of maintaining the in memory objects in there in the view, we will have one controller which will be injected in the page, and with this scope, we will fetch the data from the controller. So, it’s a basically nice separation which is required indeed because it will promise maintainability and test-ability of the code.

The glue between the View and the Controller is called the Scope, and in Angular we’re going to see a lot of objects  that start with $. $scope represents the scope object. Frankly speaking, Views really don’t know anything about the controller and vice versa. But, when it comes to the data association, there should be a medium so that data can be transferred that is termed as scope here. we’ll see that view can know about the controller by using the directive @ the top of the page.

Creating a basic Controller

angular12

You’ll notice here in the parameter signature we pass $scope. This is dependency injection that’s built into AngularJS. What is going to happen is it will automatically inject a scope object in. and on the top of that you can add different kinds of properties in there.

so, when this controller gets initialized, the scope gets automatically passed in. so, basically when you see the below snippet i have called the controller explicitly by using data-ng-controller attribute so that controller gets initialized and then in the ng-repeat directive I looped in the property name which i made using $scope object, in this case it is $scope.employee. Also, i have retained the filtering option. so you can see that both the directives are working simultaneously.

angular13 angular14 angular15

 

 

Now, in the next section we will see that how to use Modules, Routes and Factories. Till then stay tuned.

Thanks,
Rahul
Happy Coding

1,080 total views, no views today

Angular unleashed

As mentioned already, in my last blog that Angular is really a full-featured SPA framework. It performs various operations underneath. Some of the basic operations like

Two-way data binding.
Model-View-Controller.
Routing of the Views.
Testing.
DOM manipulation jQLite is built-in which is kind of lighter version of jQuery. However, if you want to use more advanced stuff you can even use jQuery in here.
History’s built in. We can share code through factories and services and other things.

So, to get started we, will be starting the same from http://angularjs.org. From here, we will do download the required angular.js or minified version of the same file and use the same for later developments

The very 1st thing which we are going to discuss here is talk about

 

angular1

So, once we have grabbed the script as shown below in our web page. so, now we can start with Directives, Filters and Databinding

angular2

so, basically directives are a way to instruct about Angular or in short they teach HTML New tricks.

so, in the below snippet I have used basic built in Directives just to print whatever is getting typed in input text box.

angular3

 

we have used ng-app at the top of the page. we use  ng- to instruct that it is  Angular directive. It’s a built-on directive. we can also write custom directives.

This particular directive is very important because the script that’s now loaded at the bottom of the page which will initialize the Angular app.

So for example, this is an example of another directive called ng-model.
What ng-model does is behind the scenes it’s going to add a property up in the memory called “name” into what’s called “the scope”. This is like a ViewModel as in Knockout. what this is really doing behind the scenes is making an empty ViewModel but then filling it with a name property. Now if I want to write out that value then I can simply come over and add a data binding expression. Now, in angular databinding expression is always wrapped in between {{data-binding expression}} .

angular4 angular5

so, as you see in the above demo, whenever am typing in any input in the textbox that is coming as it is in the databinding expression. Let’s trick this a bit and let’s do one more demo with input type = password and then try what it takes out. again the same output will appear as shown below.

angular6

since, am using the Visual studio editor, so in order to get rid of little warning kind of thing on every ng- attribute, am going to prefix the same with data-ng- attribute and this will take out the little warning like shown below.

angular7

 

Now, lets try looping in a set of data or ViewModel with ng-repeat directive.

angular8

 

so, basically data-ng-init=”names=[‘Rahul’,’Sahay’,’Bob’,’Walter’,’Charles’]” is in memory collection of names and this one <li data-ng-repeat=”loop in names”>{{loop}}</li> is going to loop through each names container and take out and print one by one as shown below.

angular9

 

so, as you can notice that earlier binding is also working properly. Likewise, we can go ahead and test many other cases. same can be referred on the link http://docs.angularjs.org/api

Now, next thing is how to use filters. Filters are again very useful tool to get the output in a precised manner. we use this using “filter” keyword and separates the directives using symbol like “|” .

angular10 angular11

 

Now, in the next session we will see how to use Views, Controllers and Scope in conjunction. Till then stay tuned.

Thanks,
Rahul
Happy Coding

1,356 total views, 1 views today

Filtering an ASP.NET GridView control with jQuery

Hi Friends,

This is one more story which i would like to share. some time back when i was working on web application and requirement was like wherein you need to filter the grid on the client side, so that page could be more responsive even on different kinds platforms. i figured out this cool trick to filter out the grid.

Ihave a GridView wired to some sample data. For demo simplicity I’m using an XMLDataSource and reading from an XML file in my App_Data directory.

Ihave a GridView wired to some sample data. For demo simplicity I’m using an XMLDataSource and reading from an XML file in my App_Data directory.

When the user starts to type into the Filter Text Box the rows in the table are filtered, meaning rows that don’t match the character(s) entered are hidden from view.

As the user continues to type, the list is filtered further.

The ASPX Page Markup is as follows.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
&amp;lt;%@ Page Title=&amp;quot;Home Page&amp;quot; Language=&amp;quot;C#&amp;quot; MasterPageFile=&amp;quot;~/Site.master&amp;quot;
         AutoEventWireup=&amp;quot;true&amp;quot; CodeFile=&amp;quot;Default.aspx.cs&amp;quot; Inherits=&amp;quot;_Default&amp;quot; %&amp;gt;
&amp;lt;asp:Content ID=&amp;quot;HeaderContent&amp;quot; runat=&amp;quot;server&amp;quot; ContentPlaceHolderID=&amp;quot;HeadContent&amp;quot;&amp;gt;
    &amp;lt;script src=&amp;quot;Scripts/jquery-1.4.1.js&amp;quot; type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
    &amp;lt;script src=&amp;quot;Scripts/jquery.quicksearch.js&amp;quot; type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
    &amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;
            $(function () {
                $('input#id_search').quicksearch('table#table_example tbody tr');
             })
    &amp;lt;/script&amp;gt;
&amp;lt;/asp:Content&amp;gt;
&amp;lt;asp:Content ID=&amp;quot;BodyContent&amp;quot; runat=&amp;quot;server&amp;quot; ContentPlaceHolderID=&amp;quot;MainContent&amp;quot;&amp;gt;
    &amp;lt;h2&amp;gt;
        Welcome to ASP.NET!
    &amp;lt;/h2&amp;gt;
    &amp;lt;p&amp;gt;
        To learn more about ASP.NET visit
        &amp;lt;a href=&amp;quot;http://www.asp.net&amp;quot; title=&amp;quot;ASP.NET Website&amp;quot;&amp;gt;www.asp.net&amp;lt;/a&amp;gt;.
    &amp;lt;/p&amp;gt;
    &amp;lt;input id=id_search type=text placeholder=&amp;quot;Search&amp;quot;&amp;gt;&amp;lt;br /&amp;gt;&amp;lt;br /&amp;gt;
    &amp;lt;asp:XmlDataSource ID=&amp;quot;productsDataSource&amp;quot; Runat=&amp;quot;server&amp;quot;
                       DataFile=&amp;quot;~/App_Data/Products.xml&amp;quot;&amp;gt;
    &amp;lt;/asp:XmlDataSource&amp;gt;
    &amp;lt;asp:GridView ID=&amp;quot;table_example&amp;quot; Runat=&amp;quot;server&amp;quot;
        DataSourceID=&amp;quot;productsDataSource&amp;quot; AutoGenerateColumns=&amp;quot;False&amp;quot;
        ClientIDMode=&amp;quot;Static&amp;quot; onprerender=&amp;quot;table_example_PreRender&amp;quot;&amp;gt;
        &amp;lt;Columns&amp;gt;
            &amp;lt;asp:BoundField HeaderText=&amp;quot;ProductID&amp;quot; DataField=&amp;quot;ProductID&amp;quot;
                            SortExpression=&amp;quot;ProductID&amp;quot;&amp;gt;&amp;lt;/asp:BoundField&amp;gt;
            &amp;lt;asp:BoundField HeaderText=&amp;quot;ProductName&amp;quot; DataField=&amp;quot;ProductName&amp;quot;
                            SortExpression=&amp;quot;ProductName&amp;quot;&amp;gt;&amp;lt;/asp:BoundField&amp;gt;
            &amp;lt;asp:BoundField HeaderText=&amp;quot;QuantityPerUnit&amp;quot; DataField=&amp;quot;QuantityPerUnit&amp;quot;
                            SortExpression=&amp;quot;QuantityPerUnit&amp;quot;&amp;gt;&amp;lt;/asp:BoundField&amp;gt;
            &amp;lt;asp:BoundField HeaderText=&amp;quot;UnitPrice&amp;quot; DataField=&amp;quot;UnitPrice&amp;quot;
                            SortExpression=&amp;quot;UnitPrice&amp;quot;&amp;gt;&amp;lt;/asp:BoundField&amp;gt;
            &amp;lt;asp:BoundField HeaderText=&amp;quot;UnitsInStock&amp;quot; DataField=&amp;quot;UnitsInStock&amp;quot;
                            SortExpression=&amp;quot;UnitsInStock&amp;quot;&amp;gt;&amp;lt;/asp:BoundField&amp;gt;
        &amp;lt;/Columns&amp;gt;
    &amp;lt;/asp:GridView&amp;gt;
&amp;lt;/asp:Content&amp;gt;
      

On line #8 we select the textbox where the user will eneter text to serve as the filter criteria and then pass as an argument to the quicksearch method the items we are filtering. In our case table rows inside a table.

 

If we run the application at this point though, we will not get the results we desire. When we start filtering we see the column header row disapear.

Take special note of line #28, specifically the “onprerender” specifier.

This event handler exists in the .aspx.cs code-behind file :


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void table_example_PreRender(object sender, EventArgs e)
    {
        if (table_example.Rows.Count &amp;gt; 0)
        {
            table_example.UseAccessibleHeader = true;
            table_example.HeaderRow.TableSection = TableRowSection.TableHeader;
        }
    }
}

This addition to our code is very important in order to achieve the desired behavior.

 

In order to understand this we need to disect the markup that is emitted by our ASP.NET code.

First, lets look at the markup that is emitted by the GridView WITHOUT the prerender event handler.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
&amp;lt;table cellspacing=&amp;quot;0&amp;quot; rules=&amp;quot;all&amp;quot; border=&amp;quot;1&amp;quot; id=&amp;quot;table_example&amp;quot;
       style=&amp;quot;border-collapse:collapse;&amp;quot;&amp;gt;  
   &amp;lt;tr&amp;gt;
      &amp;lt;th scope=&amp;quot;col&amp;quot;&amp;gt;ProductID&amp;lt;/th&amp;gt;
      &amp;lt;th scope=&amp;quot;col&amp;quot;&amp;gt;ProductName&amp;lt;/th&amp;gt;
      &amp;lt;th scope=&amp;quot;col&amp;quot;&amp;gt;QuantityPerUnit&amp;lt;/th&amp;gt;
      &amp;lt;th scope=&amp;quot;col&amp;quot;&amp;gt;UnitPrice&amp;lt;/th&amp;gt;
      &amp;lt;th scope=&amp;quot;col&amp;quot;&amp;gt;UnitsInStock&amp;lt;/th&amp;gt;
   &amp;lt;/tr&amp;gt;
   &amp;lt;tr&amp;gt;
      &amp;lt;td&amp;gt;1&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;Chai&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;10 boxes x 20 bags&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;18.0000&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;39&amp;lt;/td&amp;gt;
   &amp;lt;/tr&amp;gt;
   &amp;lt;tr&amp;gt;
      &amp;lt;td&amp;gt;2&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;Chang&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;24 - 12 oz bottles&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;19.0000&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;17&amp;lt;/td&amp;gt;
   &amp;lt;/tr&amp;gt;
   &amp;lt;tr&amp;gt;
      &amp;lt;td&amp;gt;3&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;Aniseed Syrup&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;12 - 550 ml bottles&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;10.0000&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;13&amp;lt;/td&amp;gt;
   &amp;lt;/tr&amp;gt;
   &amp;lt;tr&amp;gt;
      &amp;lt;td&amp;gt;4&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;Chef Anton&amp;amp;#39;s Cajun Seasoning&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;48 - 6 oz jars&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;22.0000&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;53&amp;lt;/td&amp;gt;
   &amp;lt;/tr&amp;gt;
   &amp;lt;tr&amp;gt;
      &amp;lt;td&amp;gt;5&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;Chef Anton&amp;amp;#39;s Gumbo Mix&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;36 boxes&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;21.3500&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;0&amp;lt;/td&amp;gt;
   &amp;lt;/tr&amp;gt;
   &amp;lt;tr&amp;gt;
      &amp;lt;td&amp;gt;6&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;Baked Beans&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;48 - 6 oz jars&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;12.0000&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;43&amp;lt;/td&amp;gt;
   &amp;lt;/tr&amp;gt;
   &amp;lt;tr&amp;gt;
      &amp;lt;td&amp;gt;7&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;Buffelo Wings&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;12 per box&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;14.0000&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;143&amp;lt;/td&amp;gt;
   &amp;lt;/tr&amp;gt;
&amp;lt;/table&amp;gt;

Note that the headers, the “TH” elements live inside a standard table row “TR”.

Let’s now look at the HTML emitted by the GridView AFTER we add the preinit event handler listed above.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
&amp;lt;table cellspacing=&amp;quot;0&amp;quot; rules=&amp;quot;all&amp;quot; border=&amp;quot;1&amp;quot; id=&amp;quot;table_example&amp;quot;
       style=&amp;quot;border-collapse:collapse;&amp;quot;&amp;gt;
   &amp;lt;thead&amp;gt;
      &amp;lt;tr&amp;gt;
         &amp;lt;th scope=&amp;quot;col&amp;quot;&amp;gt;ProductID&amp;lt;/th&amp;gt;
         &amp;lt;th scope=&amp;quot;col&amp;quot;&amp;gt;ProductName&amp;lt;/th&amp;gt;
         &amp;lt;th scope=&amp;quot;col&amp;quot;&amp;gt;QuantityPerUnit&amp;lt;/th&amp;gt;
         &amp;lt;th scope=&amp;quot;col&amp;quot;&amp;gt;UnitPrice&amp;lt;/th&amp;gt;
         &amp;lt;th scope=&amp;quot;col&amp;quot;&amp;gt;UnitsInStock&amp;lt;/th&amp;gt;
      &amp;lt;/tr&amp;gt;
   &amp;lt;/thead&amp;gt;
   &amp;lt;tbody&amp;gt;
      &amp;lt;tr&amp;gt;
         &amp;lt;td&amp;gt;1&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;Chai&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;10 boxes x 20 bags&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;18.0000&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;39&amp;lt;/td&amp;gt;
      &amp;lt;/tr&amp;gt;
      &amp;lt;tr&amp;gt;
         &amp;lt;td&amp;gt;2&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;Chang&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;24 - 12 oz bottles&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;19.0000&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;17&amp;lt;/td&amp;gt;
      &amp;lt;/tr&amp;gt;
      &amp;lt;tr&amp;gt;
         &amp;lt;td&amp;gt;3&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;Aniseed Syrup&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;12 - 550 ml bottles&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;10.0000&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;13&amp;lt;/td&amp;gt;
      &amp;lt;/tr&amp;gt;
      &amp;lt;tr&amp;gt;
         &amp;lt;td&amp;gt;4&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;Chef Anton&amp;amp;#39;s Cajun Seasoning&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;48 - 6 oz jars&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;22.0000&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;53&amp;lt;/td&amp;gt;
      &amp;lt;/tr&amp;gt;
      &amp;lt;tr&amp;gt;
         &amp;lt;td&amp;gt;5&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;Chef Anton&amp;amp;#39;s Gumbo Mix&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;36 boxes&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;21.3500&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;0&amp;lt;/td&amp;gt;
      &amp;lt;/tr&amp;gt;
      &amp;lt;tr&amp;gt;
         &amp;lt;td&amp;gt;6&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;Baked Beans&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;48 - 6 oz jars&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;12.0000&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;43&amp;lt;/td&amp;gt;
      &amp;lt;/tr&amp;gt;
      &amp;lt;tr&amp;gt;
         &amp;lt;td&amp;gt;7&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;Buffelo Wings&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;12 per box&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;14.0000&amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;143&amp;lt;/td&amp;gt;
      &amp;lt;/tr&amp;gt;
   &amp;lt;/tbody&amp;gt;
&amp;lt;/table&amp;gt;

Note that now the table row that contains the column hreaders is contained inside a “THEAD” element and the actual data rows are contained inside a “TBODY” element.

In this way the plugin can ignore the header row and leave it in place as we filter the data rows.

2,782 total views, no views today