Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Using Lookups searches on the Web

In this article, we will see how to develop search in the lookup style, in order to suppress this need, so common in our day-to-day.

ASP.NET

Using “Lookups” searches on the Web

 

This article examines:

This article uses the following technologies:

·       Typed DataSets;

·       Form for the inclusion of customers;

·       Popup style Lookups and calendars.

Visual Studio 2005, ASP.NET 2.0, C#.

 

All systems which work with a database, which contains related tables, need to make available a way for search records, such as, for example, a search to find a specific customer or the products in a certain order.

When we are developing a system for the Web, we have the same necessity; however, in many occasions, we are limited by the controls available. A good alternative is the use of controls such as the DropDownList or ListBox; however, some searches need a more detailed interface, especially when the table, where we will perform the search, has a large amount of records.

In this article, we will see how to develop search in the lookup style, in order to suppress this need, so common in our day-to-day.

New Web Site

Open your Visual Studio 2005 and create a new ASP.NET Web Site. In this example, we will use the C# language. We will develop a page where we will simulate the inclusion of an order. In order to do this, we will use the Northwind database in the SQL Server 2005.

Create a connection with the Northwind in the Server Explorer and see, as shown in Figure 1, that we have the Customers table, which will be used in the lookup search which we will perform.

 

Figure 1. Tables of the Northwind database

 

Using Typed DataSet

We will create a typed DataSet to make our work easier. Right click on the project in the Solution Explorer and choose the option Add New Item. Choose DataSet; in Name, type “Northwind.xsd” and click in Add. Since we are creating a DataSet in an ASP.NET project, the Visual Studio will suggest that the DataSet is included in the App_Code folder, therefore, in the message that appears, click in Yes.

With the DataSet opened, open the Server Explorer and expand the connection of the Northwind. In order to create a typed DataSet, it is enough to drag the desired table(s) of the Server Explorer. In our case, we will use only the Customers table; therefore, we will drag it to the DataSet. Your DataSet will have to the same as the one demonstrated in Figure 2.

 

 

Figure 2. Typed Dataset of the Customers table

 

Observe that a DataTable was created and, along with that, a TableAdapter, that will be used to recover the data of the table of the Northwind. It is obvious that you can use the method that you prefer to recover the data of the database; we are using the typed DataSet since it is a simple and entirely compatible method with the Object Oriented Programming.

 

Form for inclusion of the order

In the Default.aspx, draw an interface as demonstrated in Figure 3, where we have a simple form for the inclusion of orders.

 

Figure 3. Form for Inclusion of Orders

 

Observe that we have two Buttons in the form, one for the Customer field and another for the Order Date. They will be used to call the search windows of our example. An important observation before continuing is that, since the center of interest of the article is the lookup search, we will not worry about validations and inclusion routines.

 

Search of customers

A lookup search is nothing more than another window which will be presented for the consultation of the table in question. Therefore, our interface of search of customers will be another ASPX page. For this, we will include a new page in the project and name it “Customers.aspx”.

Drag an ObjectDataSource to the page that we have just finished creating. In the Smart Tag of the control, click in the option Configure Data Source. In the first screen of the configuration engine, we have to choose the Business Object which will be used. For this example, as Figure 4 shows, choose CustomersTableAdapter and click in Next. Following, it is enough to click in Finish to complete the configuration.

 

Figure 4. Configuring the ObjectDataSource

 

Add a GridView below the ObjectDataSource. In the Smart Tag of the GridView click in the Auto Format option and choose a format of your liking. After that, yet in the Smart Tag, in Choose Data Source, select the ObjectDataSource1.

See that all the fields of the table have been presented in the GridView. Again, in the Smart Tag, click in the option Edit Columns. In Selected fields, keep only the CustomerID and CompanyName columns, excluding all others. In Available fields¸ expand the option CommandField and add a column of the Select type. The configuration of the columns of the GridView shall be as Figure 5 shows.

 

Figure 5. Editing the columns of the GridView

 

Click in OK to finish the configuration of the GridView. We will enable the paging and sorting, clicking in the options Enable Paging and Enable Sorting of the Smart Tag. Your Customers.aspx page shall be as Figure 6 shows. Return to the Default.aspx, double click in the lookup button of Customer and insert the code of Listing 1.

 

Figure 6. Customers.aspx page

 

Listing 1. Click event of the btnCustomers button

protected void btnCustomers_Click(object sender,

  EventArgs e)

{

   String script = "";

   script += "<script language='JavaScript'>";

  script += "window.open('Customers.aspx','', "+

   "'resizable=no, menubar=no,scrollbars=no,"+

   "width=450,height=450')";

   script += "</script>";

   ClientScript.RegisterClientScriptBlock(GetType(),

     "client", script);

}

 

Notice that a JavaScript command was created which opens a new browser window. Observe that, through the window.open, we can delimit the size of the window; determine that the new window will not have scrollbars; will not be able to be resized or will have menu options.

 

Observation: In order to know more about the configurations (parameters) of the window.open, access: msdn.microsoft.com/workshop/author/dhtml/reference/methods/open_0.asp.

 

The Javascript is executed through the RegisterClientScriptBlock, which we have in the ClientScript property of the Page object. A very important observation is that this window is opened as a popup; therefore, it is necessary that you enable the use of popups for each customer who will use the application.

To finish our first example, return to the Customers.aspx page. Click in the GridView and go to the properties window. Change to the events and double click in the SelectedIndexChanged event (Figure 7).

 

Figure 7. Customers.aspx page

 

Add to the SelectedIndexChanged event the code of Listing 2. Watch that, again, we are firing a Javascript to return the code and the name of the customer.

 

Listing 2. SelectedIndexChanged event of the GridView

protected void GridView1_SelectedIndexChanged(

  object sender, EventArgs e)

{

   String script = "";

   script += "<script language='JavaScript'>";

   script += "window.opener.document.forms[0]"+

     "['txtCustomerID'].value='";

   script += GridView1.SelectedRow.Cells[1].Text;

   script += "';";

   script += "window.opener.document.forms[0]"+

     "['txtCompanyName'].value='";

   script += GridView1.SelectedRow.Cells[2].Text;

   script += "';";

   script += "self.close()";

   script += "</script>";

   ClientScript.RegisterClientScriptBlock(GetType(),

     "client", script);

}

Testing the Lookup search of customers

Save, compile and run the project so that we can test it. See that the Default.aspx is opened. Click in the button of the Customer field and see that a new window is opened bringing the GridView with all the customers of the Customers table of the Northwind (Figure 8).

 

Figure 8. Testing the Lookup search of customers

 

Choose any customer and click in the respective Select button. Watch that the code and the name of the customer are returned to the order inclusion form. In this example, you can even include a filter to search the customers by name or any other information which may be important in the search.

 

Calendar

Another very common lookup search is the calendar for fields of the Date type. In this example, we will use the calendar control, available in the ASP.NET and will call it in another window, just as we have done with the search of customers.

In the Solution Explorer, right click on the project and choose the option Add New Item. Choose Web Form; name it (Name) “Calendar.aspx” and click in Add. Just as Figure 9 shows, create a table, drag a Calendar control and two Buttons (“btnCancel” and “btnOK”). Double click in Cancel and type the code of Listing 3.

 

Figure 9. Calendario.aspx form

 

Listing 3. Click event of the Cancel button

protected void btnCancel_Click(object sender,

  EventArgs e)

{

   String script = "";

   script += "<script language='JavaScript'>";

   script += "self.close()";

   script += "</script>";

   ClientScript.RegisterClientScriptBlock(GetType(),

     "client", script);

}

 

See that we are simply closing the form through a Javascript (Self.close). In order to complete, return to the design and double click in the OK button. Include the code in Listing 4 and watch that, like what we made in the search of customers, we are filling the txtOrderDate with the date selected in the Calendar.

 

Listing 4. Click event of the OK button

protected void btnOk_Click(object sender,

  EventArgs e)

{

   String script = "";

   script += "<script language='JavaScript'>";

   script += "window.opener.document.forms[0]"+

     "['txtOrderDate'].value='";

   script +=

     Calendar1.SelectedDate.ToShortDateString();

   script += "';";

   script += "self.close()";

   script += "</script>";

   ClientScript.RegisterClientScriptBlock(GetType(),

     "client", script);

}

 

Once again, we are using a Javascript and registering the command through the RegisterClientScriptBlock. Now, it is enough to codify the call of the calendar in the Default.aspx page. In the page, double click in the lookup button of the Order Date field. Add the code of Listing 5 in the event.

 

Listing 5.  Calling the page of the calendar

protected void btnOrderDate_Click(object sender,

  EventArgs e)

{

   String script = "";

   script += "<script language='JavaScript'>";

   script += "window.open('Calendario.aspx','',"+

     "'resizable=no,menubar=no,scrollbars=no,"+

     "width=230,height=250')";

   script += "</script>";

   ClientScript.RegisterClientScriptBlock(GetType(),

     "client", script);

}

 

Observe that again, through the window.open, we are opening a browser window with restricted size. Run a test. Save, compile, run and it see, as shows Figure 10, that the page of the calendar appears as a popup. Just select a date, click in OK and that page is filled out in the txtOrderDate.

 

Figure 10. Testing Lookup search of calendar

 

Conclusion

As it was seen, it is very simple to work with search in the lookup style. With a little bit of Javascript, it is possible to open the windows in the structure of popups, restrict the size of these and remove functionalities such as scrollbars, resizing and menu options. Using this same technique, we can create more advanced search screens, with the use of filters and multiple selection.



colunista nao disponivel

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login