Free practice test , mock test, driving test, interview questions » Arunava

State Management in ASP.NET

Arunava — Mon, 04 Jan 2010 17:11:21 +0000

Introduction

For any HTTP based protocol it is true that Web Forms are stateless and for each new request to the web server web pages are destroyed and recreated. As a result we do not get page information beyond the life cycle of a single page. State is the ability of a web application to retain user information and therefore state management becomes an important issue in developing web application.

Objectives

The main objective of this tutorial is to show how the state is managed in ASP.NET Web application. Through this tutorial we have tried to cover:
• State Management and different types of available options in ASP.NET
• Use of Session, Application and Cache variables to manage server state
• Use of Cookies, QueryString, Hidden Field and ViewState to manage client state

State management and its different options

ASP.NET provides state management which saves information within the round trip of page between the server and user’s machine and as a result the information entered by the user can be reused. Please have a look on Figure-1 which clearly shows the difference between state management and without state management.

Figure-1: Difference between ‘Without State Management’ and ‘With State Management’

If state is maintained between pages the information entered originally by an user can be reused in other pages. As shown in Figure-1, user enters his name in Login.aspx page and then the information is sent to the web server so that in the Welcome.aspx page the system can show the same piece of information. But without state management it is not possible.

ASP.NET provides two types of state management, so that information can be maintained between server roundtrips. The types are:

• Server-Side
• Client-Side

User can store state information by using server resources in Server-side management. These options provide higher security than Client-side.

Client-Side state management is simple and has minimal security and does not use server resources to store state information.

Different options are available for both Server -side and Client-side state management. First we discuss on the available options for Server-side state management.

1.Application State:

Application state is a key value dictionary structure that is created during each request to the web pages in a web server. ASP.NET provide instance of HttpApplicationState class for each web application to store the application state.
User can use the Application object to share information among all users of a particular Web application. The Application object is not global to the machine. It is global to HttpApplicaton.

User should prevent the other users or applications to update the Application variables when he/she is modifying it. ASP.NET provides two methods Application.Lock() and Application.UnLock() which can be used to prevent concurrent multiple access of the application variable.

Here we provide a small example about the use of application variables:

Application.Lock(); //Locking the Application variables
Application[“TotalMember”]=int.parse(Application[“TotalMember”].ToString())+1; //Modifying it
Application.UnLock(); //Unlocking the variables

//Retrieving Application variable’s value
LabelCount.Text=”You are member number:“ +Application[“TotalMember “].ToString();

2.Session State with asp.net

In Session state, information is available only to a user of a particular session of a web application. HTTPSessionState class in ASP.NET provides session state. Session state is limited to the current browser session. For example if many users are using a web application then every user will get different session state. This session state is available until the user leaves the application.

Like application state session state is also structured as a key value dictionary structure and it is used to store session specific information which is useful between request for pages and round trip to the web server.ASP.NET provides the session variables that are needed to maintain session state. Generally short lived, sensitive data important for a specific session is stored in session state.

We can identify each active web application session by using a 120 bit Session ID which is formed of ASCII characters and allowed in the URLs.

If a user has not requested a page for more than 20 minutes by default session time out occurs. So if the same user returns back after 20 minutes , he/she will be considered as new user by the web application. But we can modify the session duration in the Web Configuration file. The following is the code in Web.Config file that sets the session duration 30 minutes:

In below we have just written two lines to add and retrieve values from session variables:

Session[“PersonName”]=”Scott”; //Storing name in session variable

Label1.Text=”Welcome Mr.”+ Session[“PersonName”].ToString(); //Retrieving the data

3. The Cache object in asp.net

The Cache object can be used to store information that we can also be stored in application variables. But for each Web Application ASP.NET creates a single Cache object and the items stored in the Cache object cannot be used by other web applications running on the same web server. Thus rather than recreating the value each time, a single cached value can be accessed by any page in the web application.

The Cache object uses key-value pairs to store and retrieve objects. Like dictionary we can add item in a cache object. Here a simple example is shown:

Cache[“PersonName”]=”Scott” ; // Add item in Cache object

Label1.Text=”Welcome Mr.”+ Cache[“PersonName”].ToString(); // Retrieve information from Cache

Like application object Cache object provides automatic lock management on items that are stored in Cache object. As a result users can not modify Cache objects concurrently.

Cache object is made to ensure that the web application does not use server memory much. As a result the Cache object automatically removes the least used items when there is a shortage of server’s memory. Users can set priority on Cache items. So items with higher priority are less likely to be removed from the Cache. The detail on Cache object is out of scope of this tutorial.

Client side state management

Client side state management also has different options to store sate or information. The options are discussed below:

1.Cookies

A cookie is a text file that store small amount of information. The text file is stored on the file system of the client computer or in the memory of client browser session. Generally a cookie contains page specific information and also the information of the domain that issued the cookie.

We can classify cookies in two types:
a.Temporary
b.Persistent

Temporary cookies (non-persistent) exist only in the memory of a browser and as a result information added in temporary cookies are lost when the browser is shut down.

Persistent cookies have a defined expiration period and these type of cookies are stored in user’s hard disk. Users can delete the cookies before the cookie expires. So there is no assurance on the life span of persistent cookies created in user’s machine.

Users should take care of the following things to store information in cookies:

• Cookies can be stolen and faked. So find out different option before storing secured information in cookies.
• Users can not store information more than 4KB in a cookie. So cookie has size restriction.
• Cookies cannot be trusted and users need to cross validate the data retrieved from a cookie.

2. Query Strings

Through query string navigation specific data can be passed and this information is appended to the end of a URL. A typical example might look like the following:

http://abc.com/ItemList.aspx?category=watch&type=ladies

Above in the URL path, the query string starts with the question mark (?) and contains two attribute-value pairs: category and type. Information can be retried from the query string like the following:

Label1.Text=”Items of category ”+Request.QueryString[“category”].ToString()+” are displayed”;

But please remember that query string is the most hackable element on a web site. Users can play with it by changing values and may enter in the restricted pages. A good idea is to return Response.StatusCode=404 when someone changes a URL to an unreasonable value.

3.Hidden Fields

Hidden input fields are sent back as name-value pairs in a Form POST exactly like any other control , except they are not rendered. They are like hidden text boxes. Figure-2 shows a Hidden Field control with the available properties in Visual Studio:

Figure-2: Hidden Field and its Properties

When this control is drag and dropped in the test page the following line is also added in the source section.

Now add a string value in this hidden field as shown in Figure-3:

Figure-3: Add a string value in the Hidden Field

When we run the page we will find the value is added in the HTML code like Figure-4:

Figure-4: HTML code changed for the Hidden Field

4. View State

Web forms provide the ViewState property as a built-in structure for automatically retaining values between multiple requests for same page. ViewState exposes itself as a collection of key/value pairs but renders itself as a hidden field with the name “__VIEWSTATE “ (Shown in Figure-5)

Figure-5: ViewState and its value

View state can store both simple and complex type objects. We can simply add values in ViewState like the following:

ViewState["Name"] = “Scott”;

Note that ViewState value uses only valid ASCII characters to represent all its contents. It is big and appears to be opaque. Viewstate is not acceptable for any kind of sensitive data.

Conclusion

ASP.NET provides lots of functions and utilities (which we discussed in our tutorial above) to store page state in an efficient and effective manner. Choosing among the options will depend on the web application but we should think about the following points before making the choice:
• Amount of information we need to store
• Sensitivity of the information
• Performance expectation from the pages

Web Services with ASP .NET- Part-II

Arunava — Sun, 13 Dec 2009 18:02:20 +0000

This is second part of the tutorial ‘Web Services with ASP.NET’. Please go through Web Services with ASP.NET–Part-I before you continue further.

Consuming a XML Web Service

Exposing data and logic as SOAP to disparate systems across the world becomes simple with the help of ASP.NET. But users are not limited to consuming XML Web services only into ASP.NET application. Web Services can be consumed in Windows forms, mobile applications, databases and more. But here we show the example of how to consume a web service from a .net based web application. Again we are describing the whole process step by step.

1. Create a new Web site by selecting File->New->Web Site from the IDE. When the New Web Site dialog opens , select the ASP.NET Web Site and name it ‘BindWebService’ as shown in Figure-9:

Figure-9: Creating Web Site ‘BindWebService’

2. To consume the web service ‘TestService’ that we have already created right click on the project in the solution explorer of ‘BindWebService’ and select ‘Add Reference’ as shown in Figure-10:

Figure-10: ‘Add Web Reference’ in the project

3. This pulls up the Add Web Reference dialog box as shown in Figure-11

Figure-11: ‘Add Web Reference’ Dialog Box

This dialog box enables users to point to a particular .asmx file to make a reference.

4. Now write down the URL of our created web service and click on ‘GO’. It will automatically find out the proper web service from localhost (as our test web service is in local machine).Now give the Web reference name as ‘MyService’ and then click on ‘Add Reference’ (Figure-12).When any third party wants to use our service he/she needs to mention the proper URL to fetch it (i.e http://abc.com/TestService/Service.asmx where abc.com is the server in which the web service is deployed for hosting)

Figure-12: Adding the proper web reference and rename it accordingly

5. Clicking the ‘Add Reference’ button causes Visual Studio to make an actual reference to the web service and we will find some additional files (web service’s WSDL file) as shown in Figure-13.
The application’s web.config file also contains the reference to the web service in its section.

Figure-13: Web service reference and additional files within solution explorer

6. Now we will show how to utilize web methods in our ‘BindWebService’ application. In the ‘Default.aspx’ page add the code as shown in Figure-14:

Figure-14: Source code for Default.aspx page

Here we take two text boxes in which user will enter two integers and after pressing the ‘ADD’ button the result (called through the web method) will be displayed at the ‘lblResult’ label.

7. Now from the design window double click on the ‘ADD’ button and this will give us the option to write code in the code behind page for the click event of ‘ADD’. The code is given within Figure-15:

Figure-15: Code for Click event of ‘btnAdd’

Here first we check the text boxes are blank or not. If any of them is blank the system will through an error message. Otherwise when the end user clicks the ‘ADD’ button after providing two integers , the application sends a SOAP request to the remote XML web service with the two input values as parameters and gets back a SOAP response containing the result (return value of ‘add’ web method). Proper parsing is required as we are converting string to integer (for arguments) and integer to string (for result).

8. So our application is ready for testing. Press ‘F5’ to run the application. Give two integers as input in the text boxes and press ‘ADD’ which will give you the result. Here we test the application for the values 10 and 15 and get the result 25 (shown in Figure-16)

Figure-16: Desired Output

We do not write code for addition in the code behind page and thus the web method ‘add’ for our previously build web service provide the proper result. Hence we can conclude that our application and the web service is working properly.

Summary

Web Services are an integral part of .Net platform and Visual Studio makes building and consuming web service very easy. This tutorial provides you a simple idea of what is web service and how to build it and access it from .Net based web application. This tutorial focuses on the basic functionalities of web service so that the beginners clearly understand the whole procedure.

Web Services with ASP .NET- Part I

Arunava — Sun, 13 Dec 2009 17:27:29 +0000

Introduction

Web services are a new way of performing remote method calls over HTTP with the use of Simple Object Access Protocol (SOAP) . It becomes very easy for us to use all of this with the help of .Net framework. This tutorial covers building XML Web services and how we can consume XML Web service interfaces and integrate them into ASP.NET applications. But first we examine what is Web service some of the underlying technologies such as SOAP, WSDL and more.

Objective

The main objectives of this tutorial are
a.Give a simple idea about XML web service and the backend technologies.
b.How to build XML web service with the help of Visual Studio 2008
c.How to consume the web service within a web application built in .Net
We will cover the first two portions in Part-I of this tutorial and Part-II will cover the remaining portion.

What is Web Service?

In short we can define Web service as small units of code which is independent of operating system and programming languages and use XML based communicating protocol.

XML is considered ideal for data representation purpose because it enables developers to structure XML documents. But sending self structured XML documents between dissimilar systems cannot solve the purpose. The industry decided on using SOAP (Simple Object Access Protocol) to make the standard XML structure work. SOAP enables user to expose and consume complex data structures such as Datasets or Datatables. So actually ASP.NET Web services generally use SOAP over HTTP using the HTTP post protocol.

WSDL (Web Service Description Language) is another fully XML compliant syntax and specifies Web services by the available methods, the types used by these methods, the request and response message format sent by the methods via protocols like SOAP,HTTP-GET etc. We can say WSDL completely describes Web services, the available methods and the various ways of calling these methods.

Building a Simple XML Web Service

In this tutorial we use Visual Studio 2008 to build an XML Web service. Like our previous tutorial we will provide step by step procedures to create the application:

1.Create a new Web site by selecting File->New->Web Site from the IDE. When the New Web Site dialog opens , select the ASP.NET Web Service and name it ‘TestService’ as shown in Figure-1:

Figure-1: Select ASP.NET Web Service and name it ‘TestService’

2. In the solution explorer there is a single XML Web service named Service.asmx and its code-behind file is located in the App_Code folder (Service.cs).

Figure-2: Files in Solution Explorer

3.Open the Service.asmx file in Visual Studio and you can see the file contains only WebService page directive as shown in Figure-3:

Figure-3: Webservice directive in Service.asmx page

4. Now look at the WebService.cs file—the code behind file for the XML Web. By default a structure of code is already in place in this file. Now we will add a method which we will from our .Net web application in this Web service. Adding a method accessible through the Web service simply requires defining the method as public and giving it ‘WebMethod’ attribute.
Here we will include a function called ‘add’ which will take two integers as arguments and simply returns the added output as result. We will call this function from our .net application Figure-4 shows you the code for that:

Figure-4: ‘add’ function is added

5. Like the ‘WebService’ attribute ‘WebMethod’ can also contain some properties. Some of them are described in short below:
BufferResponse: When it is set to ‘TRUE’ ,the response from the XML web service is held in memory.
CacheDuration: Specifies the life time (in seconds) of the response in system’s cache
Description: Add a description for the WebMethod
EnableSession: ‘TRUE’ enables session state for a method. Default setting is ‘FALSE’

6. Running ‘Service.asmx’ in the browser pulls up the ASP.NET Web service test page. This visual interface is really important for the testing purpose. The page generated for the ‘TestService’ web service is shown in Figure-5:

Figure-5: Exposed web methods for ‘TestService’

The interface shows the name of the Web service in the blue bar with white color at the top of the page. By default the name of the class is used and in this case we have not renamed it. A bulleted list of links to all the Web service’s WebMethods is displayed.

7. A link to the Web Services Description Language (WSDL) document is also available with the link titled ‘Service Description’ in the above figure (Figure-5). Everything we need for the request and the response is described in the WSDL document. Figure-6 shows you the WSDL (just click on the ‘Service Description’ to get the WSDL) for the ‘TestService’:

Figure-6: ‘WSDL’ for ‘TestService’

8. User can test the WebMethod directly from the service.asmx page. Once you click on the ‘add’ method you will find the following screen (Figure-7):

Figure-7: Testing WebMethod directly from the page

As our webmethod ‘add’ requires two input parameters to get a response , we see the two textboxes included in the page. If the webmethod does not require any parameter then there will be only the ‘Invoke’ method.

9. Now put two integers in the two textboxes respectively (as parameter) and click on the ‘Invoke’ button to send SOAP request to the web server. Here we give a=8 b=7 and invoke the method and it will cause a new browser instance with the result to appear (shown in Figure-8)

Figure-8: Expected output

Now we are sure that our webmethod is working properly and we can consume it in an ASP.NET application. This is discussed in Web Services with ASP.NET–Part-II of this tutorial

Advanced features of ASP .Net Chart Control

Arunava — Sun, 29 Nov 2009 19:55:18 +0000

This is the second part of .Net chart control and this is going to cover some advanced topic. Please go thorugh Microsoft Chart Control Tutorial before you continue this.

Introduction

In this tutorial we will discuss some advanced features on .Net chart control. As our previous tutorial covers the basics of chart control, we will not discuss those same things over here. Here we focus on the advanced features primarily based on two examples:
1. Creating .Net chart from the data of an XML file
2. Creating .Net chart only by configuring ‘ChartArea’ sectionof the control from the source page
Both of these two examples also show you different features of .Net chart .

Displaying XML data using .Net chart

We are going to mention the steps one by one to create the same things in your machine for practice:

a. First we will add an XML file in our existing project. Right click on the ‘ChartExample’ (the same project created in the last example) in the solution explorer and click ‘Add New Item’ and select ‘XML File’ like Figure-1:

Figure-1: Adding ‘XMLFile.XML’ in the project

b. Add the following data as shown in the snapshot in the XML file:

Figure-2: Data for the XML file

Here we have added the maximum and minimum temperature for a region from the month January to June. Don’t forget to add the ‘’ element otherwise you will encounter an XML exception later.

c. Add another web page in the project and rename it as ‘FromXML.aspx’
d. In the design section drag and drop a Microsoft Chart control from the toolbox.
e. In the code behind page (FromXML.aspx.cs) add the following code within the ‘Page_Load()’ event:

Figure-3: Code within the ‘Page_Load()’ event

Let’s discuss few things about the code mentioned above:
The Dataset gets the XML document using ReadXML() function. You just need to specify the location correctly. Here we will show the maximum and minimum temperature of a region as bar chart. So we need two series with same X axis value within a chart.

We add Series[0] and set the ‘Name’ and ‘temperaturemax’ of each month as X and Y axis value.After that we add another series (‘Series2’) within the same chart and set ‘Name’ and ‘temperaturemin’ of each month as X and Y axis value. Please have a look on Figure-4 and Figure-5 for more clarification.

Figure-4: Binding the first series

Figure-5: Binding the second series

Although data is required for a chart but ‘Title’ is also necessary for better understanding. They can be added in design time as well as at run time. Here we have added title to the chart and the axes (Figure-6 )

Figure-6: Setting the title of the chart and axes

f. Now run the application by setting this as start page you will find the output as shown in Figure-7.

Figure-7: Output with axes and chart title added

g. Sometimes in order to better execution of the details and to reduce the chart size it may be necessary to change the maximum and minimum for the axes. For example the graph shown in Figure-7 has used the default 0 and 50 as minimum and maximum for Y axis. This could be changed by using the maximum and minimum properties of Y axis as shown in Figure-8:

Figure-8: Changing the maximum and minimum for Y axis

Now we will get the chart like Figure-9 on run time

Figure-9: Output with changed minimum and maximum for Y axis

Creating .Net chart by configuring ‘ChartArea’ section

In this example we are going to plot another temperature –month graph but it will be a line graph. Here we will design it totally at design time. Please follow the mentioned steps again to recreate the application

a. Add a new web page in our existing project and rename it as ‘FromChartArea.aspx’
b. In the design section drag and drop a Microsoft Chart control from the toolbox.
c. Here we will build the chart totally at design time.
d. First we will change the default backcolor and height, width of the chart. Change the first line of the chart control from the ‘Source’ window like the following:

e. Now we will add the title and default legend for the graph with the following lines:

<asp:Title Text=”Monthwise Temperature Chart” ForeColor=”Red” />

Titles>

<asp:Legend Name=”DefaultLegend” Docking=”Top” />

Legends>

We can add multiple ‘Title’ and ‘Legend’ for our graph. We will show how the ‘Legend’ appears in a graph later in this example.

f. Now we will add the ‘ChartArea’ object which set up the charting area. This area contains the name of the charting region which is important because a chart can have multiple charting areas and series object.

The ‘InnerPlotPosition’ specifies the region of the charting area to render the chart itself in.

g. In this step we will configure the X and Y axes according to our preference and then close our ‘ChartArea’. Add the following lines now. We will explain the meaning for each line below:

The ‘Title’ beside AxisX and AxisY sets the title for these two axes. We can also set the line color and other properties over here. The ‘LabelStyle’ object specifies settings to use for labels that will be appeared within the chart. The ‘MajorGrid’ specifies whether to draw a line for the major X or Y value and ‘LineWidth’ specifies the width of that line. The chart control automatically determine the major values to draw the grid lines. However we can override this feature to include those lines we prefer.

The .Net chart control provides the control to create custom labels along X and Y axes. We have taken decimal values because the X and Y values are double. So if we specify a value 25 , it may be either 24.9999999999 or 25.0000000001 and both of these is not perfect. That’s why it is good to use a decimal value.

After that we have closed the ‘ChartAreas’ for our chart control

h. Next we will add the ‘Series’ and ‘DataPoints’ in our chart. ‘ Series ‘ refers the reference object and ‘DataPoints’ represent actual data range. Here again we show the maximum and minimum temperature of a region in ‘Line Chart’ format. So we need to add two series (one for maximum and another for minimum)
So just add the mentioned lines to complete the example:

Please note that each series contains the ‘ChartArea’ name in which it will be included. Here we only have one ‘ChartArea’ and the two ‘Series’ point that charting area. Below we are adding the total source code again for your reference:

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”FromChartArea.aspx.cs” Inherits=”FromChartArea” %>

Untitled Page

i. Now run the application by setting ‘FromChartArea.aspx’ as start page and you will find the following output (Figure-10)

Figure-10: Desired output for the Monthwise Temperature Chart

Please have a look in Figure-11 for explanation on the output

Figure-11: Output with proper explanation

Summary

So in the first example we have shown the binding of .Net chart control to XML data. At the same time we have also explored the other chart properties. Chart title and the range of Y axis values are also explored in this example.

In the second example we have shown how the chart control uses ‘Series’ and ‘DataPoints’ to render a chart within a chart region controlled by a ‘ChartArea’ object. This example clearly shows how much control a developer can have over the colors, borders, lines, rendering regions and other styling of the chart.

Beginner’s tutorial for ASP.NET programming – Part 2

Arunava — Thu, 12 Nov 2009 18:40:35 +0000

This is in part 2 of the tutorial Beginner’s Tutorial for programming with ASP.NET – Part 1. Please go through this before you continue further.

Creating the Database Table

Here we will create a table called ‘LoginTable’ in our SQL Server. Please have a look at Figure-22 for the design structure of the table. This table contains two columns ‘Name’ and ‘Password’.

Figure-22: Structure of the ‘LoginTable’

Now we will add the following data in this table

Figure-23: Data in the ‘LoginTable’

So the table at the back end is also prepared for our Tutorial.

Connecting the Database table from our web application

In the next step we will demonstrate how to connect the database table in windows authentication mode from our web application. There are several methods for this but here we will show the method of declaring a key ‘ConnectionString’ and its value in Web.config file. Add the following line under the section of web config:

Here as our SQL Server belongs to the same machine we do not mention any server name in the ‘value’.

Integrated Security=SSPI refers windows authentication to connect to the database.

Initial Catalog specifies the Database name in which our table belongs. In our example we create the ‘LoginTable’ under ‘Practice’ database. You may create the table under different database . In that case you specify the database name in place of ‘Practice’.

Creating the code behind page for Login.aspx to make the application ready

The default method for implementing server side code in Visual Studio is to use code-behind pages. When we use code-behind pages, the programming logic is in a separate file than the visual elements of the page.

To go to the page behind page press F7 in the Design view of ‘Login.aspx’ page or from the solution explorer click ‘Login.aspx.cs’ . At the top of this page you will find the default namespaces declared. Most of the general purpose .Net base classes are in a namespace called ‘system’. Now to connect with the SQL Server please add another namespace ‘System.Data.SqlClient’ as shown in the Figure-24:

Figure-24: Add the System.Data.SqlClient namespace in the code behind page

You can now find a function Page_Load() declared in the code behind page. This is a page event which runs every time the page is requested. Now it is not only the one page event. When an ASP.NET page is requested, there are a series of page events that occur. These events always occur in the same order , which is referred to as the page event life cycle. Let’s discuss on it in brief.
The page event life cycle consists of the following page events, which occur in the following order:

Page request: The page request occurs before the page life cycle begins. When the page is requested by a user, ASP.NET determines whether the page needs to be parsed and compiled or whether a cached version of the page can be sent in response without running the page.

Start:In the start step, page properties such as Request and Response are set.

Page initialization:This page event initializes the page by creating and initializing the web server controls on the page.

Load:This event runs every time the page is requested.

Validation:During validation, the Validate method of all validator controls is called, which sets the ‘IsValid’ property of individual validator controls and of the page.

Postback event handling:If the request is a postback, any event handlers are called.

Rendering: During the rendering phase, the page calls the Render method for each control, providing a text writer that writes its output to the OutputStream of the page’s Response property.

Unload:Unload is called after the page has been fully rendered, sent to the client, and is ready to be discarded.

Now let’s back in our example. Here the user will enter the ’Name’ and ‘Password’ in our Login.aspx page and we will search our ‘LoginTable’ with those credentials to find any existing entry. If such entry exists then user will be redirected to the ‘Welcome.aspx’ page.

So at first we will create a boolean function ‘SearchTable()’ which creates and opens a SQL connection. After that we will search the ‘LoginTable’ with the proper query (with the entered ‘Name’ and ‘Password’) and if any match found then the function will return true, otherwise it returns false. Please find the attached snapshot (Figure-25) to get the code.

Figure-25: Details of the function ‘SearchTable()’

The code shown here is self explanatory but let’s again clarify two terms:

DataSet: These are complex objects that allow you to store multiple DataTables of data from a data source. DataSet objects are similar to a virtual database that is inside a web application.

DataAdapter: This object serves as a link between a DataSet object and a data source that can be used for retrieving and saving data. The SqlDataAdapter class is specific to a SQL Server version 7.0 or later database.

Now we will call this ‘SearchTable()’ function when the user click’s the ‘Submit’ button from Login.aspx page. Just go to the Design view of this page and click on the ‘Submit’ button. This will add the button click event at the code behind page like this:

Figure-26: Click event function added on the code behind page

Now add these lines within this function to complete the application.

Figure-27: Call the ‘SearchTable’ function and set the proper output

Now our web application is ready for testing.

Testing the Web Application

Now set the start page ‘Login.aspx’ by right clicking on the project in solution explorer and press F5 to run the application from localhost. If you are working in windows XP please install IIS from the ‘Additional Windows Components’ of Windows XP CD before running the application.

Here we can have three test sceanarios:

Scenario 1:

User does not enter anything in the text boxes and press the ‘Submit’ button. In this case the ‘Required field Validators ‘ will show ‘Required’ messages. Please have a look at the two figures below to understand the scenario:

Figure-28: Click on ‘Submit’ without entering values in the text boxes

Figure-29: Desired output for scenario 1

Scenario 2:

User will enter a valid ‘Name’ and ‘Password’ and click’s on ‘Submit’. User will be redirected to ‘Welcome.aspx’ page. Figure-30 and 31 will make yourself clear about this scenario:

Figure-30: User enters a correct entry

Figure-31: Desired output for correct entry

Scenario-3

User enters a wrong ‘Name’ or ‘Password’ or both and then he/she will be prompted by an error message at the bottom of ‘Login.aspx’ page. Here are the screenshot of the test case and desired output.

Figure-32: User enters a wrong ‘Name’

Figure-33: Desired output for scenario-3

So our application is working fine for the entire test scenarios.

Please leave your comments and feedback.

ASP.NET programming tutorial for beginner – Part-I

Arunava — Thu, 12 Nov 2009 17:59:54 +0000

Introduction
The term .Net gives us a feeling that it is something to do only with the Internet or network related applications. Though .Net provides strong environment for creating such applications, it is also possible to create many other types of applications (Windows form based applications, Console applications, Windows custom controls etc.)

.Net is Microsoft’s development model in which software becomes platform and device independent and data becomes available over the Internet. The .Net framework is the heart of .Net. Central to the .Net framework is its runtime execution environment known as the Common Language Runtime (CLR) and the code running under the control of the CLR is often termed as Managed Code.

In this tutorial we will show how to create a dynamic data driven web application in .Net environment and we also focus on understanding basic ASP.Net components for web application.

Problem Statement for this tutorial

We will create a web application which asks user to provide user id and password (both are required fields).We will store some user ids and corresponding passwords in database table. If a user id and password matches with the database entry at the back end then the user will be redirected to Welcome page, otherwise he /she will be prompted a Invalid Login message.

Approach

We will divide this into two parts. In first part we discuss how to create and design the web pages in VS 2008, how to add web controls in the pages, available validation controls and their features etc.

In second part we show the procedure to connect the web application with SQL Server and discuss about the ADO.Net controls and finally compile and run the application to verify its correctness.

Requirements

• Windows XP Professional with Service Pack 2/Windows Vista
• Internet Explorer 6 or later/Any Web Browser
• Visual Studio 2005/2008 Professional
• SQL Server 2005/2008 Developer Edition
• IIS (Internet Information Service) version 5.0 or later

Here we have set up the example with Visual Studio 2008 and SQL Server 2005 environment. But you can also proceed with VS 2005 version.

Installation

Both Visual Studio and SQL Server are not free. You need to purchase it from Microsoft but you can download the trial versions of both of these software from Microsoft. Here are the links:

• http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=83c3a1ec-ed72-4a79-8961-25635db0192b (Visual Studio 2008 Professional Edition Trial Version)
• http://www.microsoft.com/sqlserver/2005/en/us/trial-software.aspx (Download the developer version of SQL Server 2005)

If you are working in Windows XP then you need to install IIS in your machine. Go to ‘Start->Settings->Control Panel’. Click On ‘Add/Remove Programs’ and then select ‘Add/Remove Windows Components’. Now from the Windows Component Wizard select Internet Information Services and click ‘next’ to proceed. You need to insert Windows XP Professional CD to complete the set up.
IIS 7.0 is included with Windows Vista.

Creating the Web Application

Once you launch the VS 2008 you will be presented with a window similar to the screen shot below:

Figure-1: Start Page of VS 2008

The Start Page is the first page you see whenever you launch Visual Studio 2008 and this page guides you as you start projects, as well as search for help or resources. From the screen shot you can see the Recent Projects box at the left side of the page. This box contains the latest projects on which we have worked. From this box you can also create a new project or open an existing project that is not listed. The Getting Started box allows you to create new projects from existing code , create new web sites, pull up the MSDN help application. If you close the Start page from Document Window you can reactivate the Start Page by selecting View->Other Windows->Start Page option.

Now close the Start Page and from the Visual Studio Menu go to File->New->Web Site like Figure-2(below)

Figure-2: Create New Web site from the Menu

Now you will see another window appears to select the template. Select the ASP.Net Web Site template and name it as “TutorialExample” like the screenshot below. Set the Language at the right side as Visual C# (it is the language that will be used at the code behind page which will be discussed later). You may also set it as Visual Basic but here we have used C# to show the example.

Figure-3: Create the “TutorialExample” web site

Now the Default.aspx page will be opened like the screenshot below. The Solution Explorer (at the right side) which provides an organized view of the project contains one folder (App_Data) and two files.

Figure-4: Default page and the Solution Explorer

The App_Data folder is the default directory for database but here we will not use this folder as we will use separate SQL Server database. Application and directory level settings are stored in Web.Config file. Each Web Application has at least one Web.config file.
Now select the Default.aspx file in the Solution explorer and press F2 to rename it as Login.aspx (Screen shot below).

Figure-5: Rename Default.aspx as Login.aspx

The document window is where you create the ASP.NET pages. This section of the IDE enables you to create ASP.NET pages either by dragging and dropping elements onto a design surface or by directly coding them. Visual Studio 2008 offers three views of a page: Design, Split and Source view but Visual Studio 2005 offers only two views: Design and Source. Figure-6 shows the document window in VS 2008 with Split View.

Figure-6: Split View of Login.aspx page in the document window

Now we will add server controls in our Login page. But before doing that we will briefly discuss what is a server control. ASP.NET server controls are components that run on the server and encapsulate UI and other related functionality . Server controls include Buttons, Text Boxes, Drop Down Lists etc. The following is an example of Button server control:

Server controls have a runat=”server” attribute. This means that the logic in the control runs on the server and not on the user’s browser. Server controls are different from HTML controls in that they run only on the client’s browser and have no action on the server. Another feature of server controls is that the view state, the settings and the user input of the control are automatically saved when the page is sent back and forth between the client and the server. Traditional HTML controls are stateless and revert to their default setting when the page is returned from the server to client.

Now let’s add web server controls within a table in our Login page. Place the following code in the source view to create a table first. Please look at Figure-7 to add a table.

Figure-7: Add a 3x3 table in the Login Page

Now if you go to the Design view you will find a table like Figure-8.

Figure-8: Table in the Design view

You can also change the style of this table (like set border, change border color ,width etc.) from the Design view. As an example we will just set a border for this table. Select the table in the design view and press ‘F4’. It will open the Properties Window which controls the properties of any item that is a part of your application. Now change the border type as shown in Figure-9:

Figure-9: Change the Border type of the table

You may also change the other properties from this window as experiment.

Now we will add controls within this table. At the right bottom of the page you can find an icon called ‘ToolBox’ which basically allows you to use a drag and drop operation on the controls in this application. When you click on it , you can find the available tools grouped by category. Please have a look on Figure-10 for details.

Figure-10: Tools grouped by Category in the Toolbox

Now expand the standard category which consists of Web Server Controls and drag a ‘TextBox’ control from it and drop it in the second column of the first row like Figure-11.

Figure-11: A TextBox is added in the second column of first row

Now add another TextBox in the column below and a Button at the last like Figure-12.

Figure-12: Text Box and Button Controls are added

Then write ‘Name’ and ‘Password’ like Figure-13: in the Table

Figure-13: Name and Password added

Now Select the button control and press F4 to view the properties window. In properties change the ‘Text’ property from ‘Button’ to ‘Submit’ (shown in Figure-14)

Figure-14: Change the Text property of the Button control

After changing this property the design view of Login page will be like Figure-15

Figure-15: ‘Submit’ button Added

At last we will add validation controls for two text boxes. The ASP.Net page framework includes different types of validation controls . Here we are adding small description of different types of validation controls:

•CompareValidator: Compares an input control to another input control
•CustomValidator: Allows you to write your own code to create the validation expression.
•RangeValidator: This can verify that the user input is between two values.
•RegularExpressionValidator: Verifies that the entry matches a pattern that has been specified by a regular expression.
•RequiredFieldValidator: Checks whether a value has been entered into a control or not.
•ValidationSummary: Displays a summary of all of the validation errors for all of the validation controls on the page.

In our application user need to provide both ‘Name’ and ‘Password’ and these are required fields. So we will add two RequiredFieldValidator for the two TextBoxes. Now drag two ‘RequiredFieldValidator’ from the ‘Validation’ category of ToolBox and place them at the last column of the first two rows of the table.
Here is the screenshot:

Figure-16: Two RequiredFieldValidators are added

Now select the two RequiredFieldValidators one by one and set the ‘ControlToValidate’ property as ‘TextBox1’ and ‘TextBox2’ respectively . Set the ‘ErrorMessage’ property of both of them as ‘Required’. Please look at the screenshot below for details:

Figure-17: Change the properties of the RequiredFieldValidator1 (same for the second)

As a result of this if an user press the ‘Submit’ button keeping the TextBox1 or TextBox2 blank, then he/she will get a ‘Required’ message beside the appropriate TextBox .

At last we will add a asp:label control below the table. If a user enters a wrong ‘Name’ or ‘Password’ then this control will show the proper error message. From the properties window set the ‘ForeColor’
‘Red’ and leave ‘Text’ blank as shown in Figure-18.

Figure-18: Change the ‘ForeColor’ and ‘Text’ properties of ’ Label1’

So our Login.aspx page is ready. Now we will add another web page called ‘Welcome.aspx’ into our project. This page will contain just one one ‘label’ control which will show a welcome message after successful login.

To add another web page in our project just right click on the project in the Solution Explorer and select ‘Add New Item’ (Shown in Figure-19)

Figure-19: Select ‘Add New Item’ to add another page

From the appeared templates select ‘Web Form’ and Name it as ‘Welcome.aspx’ (screenshot below)

Figure-20: Add ‘Welcome.aspx’ page in the project

Now in the design view drag and drop a ‘Label’ control from the toolbox and change the properties like the attached snapshot.

Figure-21: Add welcome label in ‘Welcome.aspx’ page

Now designs of both the pages are ready now and it is the end for Part-I. We will create the required table in SQL Server and show how to connect the web application with the database in Part-II.

Beginner’s tutorial for programming with ASP.NET – Part-2

Microsoft Chart Control Tutorial

Arunava — Tue, 03 Nov 2009 17:18:20 +0000

Introduction
In this tutorial we will explore the Microsoft Chart Control, the new addition to .Net framework and how we can use this in our web application. So now there is no need of any third party tools to add chart and graph in our ASP.Net web application.

Prerequisites
• Visual Studio 2008 SP1
• .Net framework 3.5 SP1
• Microsoft Chart Control (MSChart.exe)
• Visual Studio 2008 support tool for the chart control (MSChart_VisualStudioAddOn.exe)
Please note that MSChart is not compatible with .Net framework versions below 3.5

Installation

Download the above mentioned files from Microsoft. After installing .Net framework 3.5 SP1 install MSChart.exe first and then the add-on file MSChart_VisualStudioAddOn.exe . This add-on will add the chart control in the Visual Studio toolbox. Once both the files are successfully installed then you are ready to go.

Main Properties Of MSChart

• Series: Data that you plot in your Chart area
• ChartAreas: Area where the chart is plotted. One chart may have many ChartAreas and that means you can plot more than one chart.
• ChartType: Set the chart type (i.e Line,Pie,Bar etc)
• Palette: Set the color of your chart
• Titles: Text used to describe the chart
• Labels: Text used to describe the axes/points

Creating the Web Application

In this tutorial we will create a web application which displays the chart on the web page and also by connecting SQL Server 2008 database table. Here you go step by step:
1. Open Visual Studio 2008.
2. From File->New->Web Site create a new website.

New->Web Site" width="474" height="368" />

Figure 1: File->New->Web Site

3. The new website window will be opened and select ASP.Net web site
4. Name it as “ChartExample”.

Figure 2: Create the ‘ChartExample’ site

5. You can select the language as Visual Basic/Visual C#. In this tutorial we show the application in Visual C#.

The project will consist of a Default.aspx page, an App_Data folder and a web.config file.

Now we will add the asp.net chart control in the web page . If you make the installation properly as mentioned above then you can find the MS chart control as shown in the following diagram:

Figure 3: MS Chart control in the Data tab of the toolbox

6. Double click the Chart item in the toolbox (or you can simply drag and drop the control from the toolbox) and it will add the ASP.Net chart control as ‘Chart1’ in the Default.aspx page. If you go to the design mode of the web page you will find a Bar chart has been added in the page but the X and Y axis here dummy and does not reflect any data. It is simply the interface of the chart so that you can configure the chart.

Figure 4: Chart1 in the Default.aspx page

Here is the screen shot of the source view of the Default page:

Figure 5: Source view of Default page

Now we will add the real data for display in the Page_Load() event of Default.aspx

7. Go to the code behind page i.e Default.aspx.cs and add the following lines of code

Figure 6: Code in Page_Load () event

8. Now press F5 to run the web application and you can find the following output in the Default.aspx page. You will get the Line chart as you mention the ChartType as Line. But you can change it accordingly. In Step 9 we show the example of a Pie chart

Figure 7: Output as a Line chart

9. To get the Pie chart of the given data you can change the ChartType like this in Default.aspx.cs page:

Chart1.Series[0].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Pie;
And here is the output as Pie chart:

Figure 8: Output as Pie chart

10. You can also change the chart type from the Design mode of Default.aspx like this:
Go to the Design Mode->Select Chart1->Press F4 and the Properties window of Chart1 will be opened. Now click on ‘Series’ and set the chart type according the requirement.

Figure 9: Change the Chart Type from the design mode

11. Now we are going to extract the data from SQL Server tables and bind the data for our Chart1.

12. In this example we have created a database named ‘Practice’ in our SQL Server and created a simple table called ‘StorePayments’ which contains the StoreName and the Amount to be paid.
Here are the table schema and values inserted shown:

Figure 10: Structure of the table ‘StorePayments’

Figure 11: Data in the table ‘StorePayments’

13. Now add the connection string in the web.config file like this within the’ ’ section:

14. In the code behind page (Default.aspx.cs) we will define a function which makes the connection with the database and stores the values in a dataset and at last it returns the dataset. Here is the snapshot for the function FillData():

Figure 12: Inserting the data from the table into a dataset

15. At last we call this function in the Page_Load() event and store the values of two columns into two arrays. We pass these two arrays in the DataBindXY() function as arguments. Here is the code for the Page_Load() section:

Figure 13: Binding the data at the Page_Load() event

16. Now if we run the application we will find the output like this :

Figure 14: Data of the table ‘StorePayments’ is populated as Bar Chart

We can again change the chart type as described in step 9 and 10 according to our requirement.

Summary

In this tutorial we described the main features of Microsoft Chart Control , installation procedure and how we can use these charts in our web application. We have also shown how to bind the data from the SQL Server here.