Working with the Wizard Control Using Visual Studio 2005
 
Published: 31 Jan 2006
Unedited - Community Contributed
Abstract
In this article, Eric Arther examines the workings of the Wizard control shipped with .NET Framework 2.0. He also discusses how to use the control to present forms and populate the entered values into a database table using a SQL Server 2005 Express Edition stored procedure.
by ERIC ARTHER
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 28845/ 136

Step 1 – Creating the Project

[Download Sample Code]

1) Start Visual Studio 2005.

2) Click on the Create Website option in the main Start page of Visual Studio 2005.

3) In the Visual Studio installed templates section, select ASP.NET Web Site.  Set these options on the lower part of the screen:

   (a) Location: File System

   (b) Language: Visual C#

   (c) Desired folder name where your project should be saved

In this example, the project name is called FormWizard.

4) Upon clicking OK, a new website with a Default.aspx page is created for you. We will come to this page once I explain how to create a database from this screen.

5) By default, to the right of the IDE you will have the Solution Explorer, which will list all the file names used in the project.

Step 2 – Establishing a Database Connection Using SQL Server 2005 Express Edition

You will have to set up a database connection using Server Explorer; it is located at the left side of the IDE above the ToolBox panel, or it can be accessed using the View | Server Explorer menu.

1) Click on the Server Explorer panel, right-click on Data Connections, and select the Add Connection option.

2) In the window that pops up, select the Microsoft SQL Server Database file option and create a new database file called FormWizard_db.mdf.  Set your login credentials as appropriate for your server; the default is Windows Authentication.

3) At this stage you can select the default settings, and the database will be created for you by Visual Studio.

4) You will notice the database in the Server Explorer once it is created.

5) Click on the database name to expose the nodes underneath.  Right-click on the Tables node and add a new table with these columns:

   id - varchar(10)
   Fname - varchar(10)
   Lname - varchar(10)
   Email - varchar(50)
   Tel - varchar(20)

Choose to Save Table and name this new table Table1.

6) Add a stored procedure called dbo.StoredProcedure1 by right-clicking on the Stored Procedures node on the Server Explorer.  The code for this stored procedure can be found in Listing 1.

Listing 1 - Stored Procedure dbo.StoredProcedure1

CREATE PROCEDURE dbo.StoredProcedure1

 

  @Fname varchar(10),

  @Lname varchar(10),

  @Email varchar(50),

  @Tel varchar(20)

AS

  INSERT INTO table1 (Fname, Lname, Email, Tel)

  VALUES (@Fname, @Lname, @Email, @Tel)

  RETURN

7) Create the connection string in the web.config file as shown in Listing 2.

Listing 2 - connectionStrings section of web.config

   <connectionStrings>
      <add name="dbConnectionString"
connectionString="Data
Source=.\SQLEXPRESS;AttachDbFilename=C:\Inetpub\wwwroot\FormWizard\App_Data\FormWizard_db.mdf;Integrated
Security=True;Connect Timeout=30;User Instance=True"
providerName="System.Data.SqlClient"/>
   </connectionStrings>

Note: You should modify the path of the database file accordingly.

Step 3 – Adding the Wizard Control and Modifying the Code

1) Drag and drop the "Wizard" control from the toolbox onto the default.aspx web form.

2) Add additional text boxes to the Wizard as shown in the code for the wizard control below in Listing 3. Looking at the code you will find that two textboxes have been added in Step 1, and two in Step 2.  The last wizard step is left blank.

Listing 3 - Default.aspx Code for the Wizard control

<asp:Wizard ID="Wizard1"
runat="server" ActiveStepIndex="2" OnFinishButtonClick =
"Wizard1_FinishButtonClick">
  <WizardSteps>
    <asp:WizardStep ID="WizardStep1"
runat="server" Title="Step 1">
      First Name<asp:TextBox
ID="TextBox1" runat="server"></asp:TextBox>
      Last Name<asp:TextBox
ID="TextBox2" runat="server"></asp:TextBox>
    </asp:WizardStep>
    <asp:WizardStep ID="WizardStep2"
runat="server" Title="Step 2">
      Email<asp:TextBox ID="TextBox3"
runat="server"></asp:TextBox>
      Tel<asp:TextBox ID="TextBox4"
runat="server"></asp:TextBox>
    </asp:WizardStep>
    <asp:WizardStep ID="WizardStep3"
runat="server" StepType="Finish"
Title="Overview">
    </asp:WizardStep>
  </WizardSteps>
</asp:Wizard>

3) When the user clicks Finish in the last Overview step, we capture that click by setting a value for the OnFinishButtonClick event.  The code in Wizard1_FinishButtonClick will be called to handle the event.  In the corresponding code behind seen in Listing 4, the insertDataIntoDB function is called and it executes the stored procedure, which saves the data into Table1.

Listing 4 - Default.aspx.cs

protected void Page_Load(object sender, EventArgs
e)
  {
 
  }
 
public void insertDataIntoDB(string fname,
string lname, string email, string tel)
  {
    string conn =
System.Configuration.ConfigurationManager.ConnectionStrings["dbConnectionString"].ConnectionString;
    System.Data.SqlClient.SqlConnection
myConnection = new System.Data.SqlClient.SqlConnection(conn);
    string MySQL = "StoredProcedure1";
    System.Data.SqlClient.SqlCommand cmd = new
System.Data.SqlClient.SqlCommand(MySQL, myConnection);
    cmd.CommandType =
System.Data.CommandType.StoredProcedure;
    cmd.Parameters.Add(new
System.Data.SqlClient.SqlParameter("@Fname", fname));
    cmd.Parameters.Add(new
System.Data.SqlClient.SqlParameter("@Lname", lname));
    cmd.Parameters.Add(new
System.Data.SqlClient.SqlParameter("@Email", email));
    cmd.Parameters.Add(new
System.Data.SqlClient.SqlParameter("@Tel", tel));
 
    myConnection.Open();
    cmd.ExecuteNonQuery();
    myConnection.Close();
  }
 
protected void Wizard1_FinishButtonClick(object
sender, WizardNavigationEventArgs e)
  {
    insertDataIntoDB(TextBox1.Text.ToString().Trim(),
TextBox2.Text.ToString().Trim(), TextBox3.Text.ToString().Trim(),
TextBox4.Text.ToString().Trim());
  }

4) As a last step to make the form beautiful, right-click the Wizard control in the design mode of the Visual Studio 2005 IDE, choose AutoFormat, and select your favorite design.

5) Run the application.

6) Once you come to the final step and click Finish, the form information will be saved in Table1.

 

Screenshots

Figure 1

Figure 2

Figure 3

Summary

In this article, I've examined the usage of the Wizard control with the help of code samples and screenshots.  Wizard controls are used in places where you have a huge form in your website which you would expect your users to fill out.  This control provides a step-by-step interface to fill out a form in smaller pieces.



User Comments

Title: nfl jerseys cheap   
Name: NIKE NFL jerseys
Date: 2012-07-02 10:11:56 AM
Comment:
http://www.jersey2shop.com
http://www.cheapjersey2store.com
http://www.jerseycaptain.com
http://www.yourjerseyhome.com
We are professional jerseys manufacturer from china,wholesal.cheap nike nfl jerseys, mlb jerseys, nhl jerseys,nba jerseys and shoes
Cheap NFL,NBA,MLB,NHL
,heap jerseys,2012 nike nfl Jerseys,nba jersey and shorts,oklahoma city thunder jersey,official jeremy lin new york knicks jersey,NFL Jerseys Wholesale,blake griffin jersey blue,NFL jerseys For Sale online.All Our Jerseys Are Sewn On and Directly From Chinese Jerseys Factory
,Wholesale cheap jerseys,Cheap mlb jerseys,]Nike NFL Jerseys,Cheap China Wholesae,Wholesale jerseys From China,2012 nike nfl Jerseys,Jerseys From China,,2012 nike nfl Jerseys,Revolution 30 nba jerseys,jersey of nba chicago bulls direk rose ,nfl jerseys,green bay packers jerseys wholesale,Buffalo Bills nike nfl jerseys sale,good supplier soccer jerseys,cool base mlb jerseys,Revolution 30 nba jerseys,2012 stanley cup nhl jersey,
We are professional jerseys manufacturer from china,wholesal.cheap nike nfl jerseys, mlb jerseys, nhl jerseys,nba jerseys and shoes. www.yourjerseyhome.com
Title: shubhjcjha   
Name: hghg
Date: 2012-06-29 2:05:43 AM
Comment:
njn,h jhjch shd hdsh sac
Title: Solve My Problem - - - Keep it Up   
Name: Faheem Ahmad
Date: 2007-12-24 6:31:32 AM
Comment:
It is an excellent article for beginners like me. Thanks aspalliance.
Title: Good   
Name: Althaf
Date: 2007-06-04 8:20:26 AM
Comment:
Thanks!!!!

Excellant assitance..

Keep going..
Title: Feedback 4 Wizard Control VS 2005   
Name: Mahesh Sharma
Date: 2007-05-30 2:21:21 PM
Comment:
hi,
to all.
this is very nice article. i will get 100% assistence. and not need to look anywhere.
Title: Working with the Wizard Control Using Visual Studio 2005   
Name: Princess
Date: 2006-08-24 12:25:45 PM
Comment:
Thank you..
Title: Perfect!   
Name: Tori Martinez
Date: 2006-05-21 12:15:12 PM
Comment:
This is exactly what I was looking for. Thanks Eric!!!
Title: VB Code   
Name: Riceee
Date: 2006-05-16 6:07:22 AM
Comment:
Heres the VB code for all of you that wanted it...

Public Sub insertDataIntoDB(ByVal fname As String, ByVal lname As String, ByVal email As String, ByVal tel As String)
Dim conn As String = System.Configuration.ConfigurationManager.ConnectionStrings("dbConnectionString").ConnectionString
Dim myConnection As System.Data.SqlClient.SqlConnection = New System.Data.SqlClient.SqlConnection(conn)
Dim MySQL As String = "sp_results"
Dim cmd As System.Data.SqlClient.SqlCommand = New System.Data.SqlClient.SqlCommand(MySQL, myConnection)
cmd.CommandType = System.Data.CommandType.StoredProcedure
cmd.Parameters.Add(New System.Data.SqlClient.SqlParameter("@Fname", fname))
cmd.Parameters.Add(New System.Data.SqlClient.SqlParameter("@Lname", lname))
cmd.Parameters.Add(New System.Data.SqlClient.SqlParameter("@Email", email))
cmd.Parameters.Add(New System.Data.SqlClient.SqlParameter("@Tel", tel))

myConnection.Open()
cmd.ExecuteNonQuery()
myConnection.Close()
End Sub


Protected Sub Wizard1_FinishButtonClick(ByVal sender As Object, ByVal e As WizardNavigationEventArgs)
insertDataIntoDB(TextBox1.Text.ToString().Trim(), TextBox2.Text.ToString().Trim(), TextBox3.Text.ToString().Trim(), TextBox4.Text.ToString().Trim())
End Sub
Title: NIce Post   
Name: Rob
Date: 2006-05-10 2:27:25 PM
Comment:
Nice Job! It was just what I was looking for (along time)! I was able to port the cs to vb with one of the many on-line cool tools.
Rob
Title: VB   
Name: Mystical
Date: 2006-05-05 5:32:50 AM
Comment:
hi..

I need the code in VB too
Title: Working with the Wizard Control Using Visual Studio 2005   
Name: Shawn
Date: 2006-04-19 4:22:18 AM
Comment:
Hi,

Can I have the codes in VB.

Thank you
Shawn






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2019 ASPAlliance.com  |  Page Processed at 2019-06-25 10:37:46 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search