ASP DOT NET

Coding a Snake Game for Android

2020-05-16T07:41:00.003-07:00

This game will use a different engine to the other games on this site as it will make a pre-determined number of “moves” each second, rather than playing as many frames of animation as possible and then timing each frame for maximum smoothness. The reason for this is we can recreate a authentic blocky/jumpy animation.
One dot for the snake and one dot for Bob waiting to be eaten. Before anyone complains that snakes don’t eat Bobs, they don’t eat apples either. As the game continues and many Bobs are eaten the snake grows in length making it more likely that the player will trap or eat himself.

Let’s start coding.
Coding the Snake Activity

As usual, we will start with an Activity which will control a thread in a class which controls the game and handles input from the player. If you want a more in-depth discussion of the interaction between the Activity and the main class then take a look at the Breakout tutorial.

Create a new project in Android Studio, use the Empty Activity template, and call it Snake. Leave the rest of the settings at their defaults. Call the Activity SnakeActivity and amend its code to be the same as this.
One dot for the snake and one dot for Bob waiting to be eaten. Before anyone complains that snakes don’t eat Bobs, they don’t eat apples either. As the game continues and many Bobs are eaten the snake grows in length making it more likely that the player will trap or eat himself.

import android.app.Activity;
import android.graphics.Point;
import android.os.Bundle;
import android.view.Display;

public class SnakeActivity extends Activity {

    // Declare an instance of SnakeEngine
    // We will code this soon
    SnakeEngine snakeEngine;

}

Here we declare an instance of SnakeEngine called snakeEngine which doesn’t exist yet but it will soon. Now code the onCreate method of the SnakeActivity class to initialize the SnakeEngine object. Obviously there will be errors in our code but if we code SnakeActivity in full we won’t need to keep coming back to it. Add the following code and we will discuss it.

import android.app.Activity;
import android.graphics.Point;
import android.os.Bundle;
import android.view.Display;

public class SnakeActivity extends Activity {

    // Declare an instance of SnakeEngine
    SnakeEngine snakeEngine;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Get the pixel dimensions of the screen
        Display display = getWindowManager().getDefaultDisplay();

        // Initialize the result into a Point object
        Point size = new Point();
        display.getSize(size);

        // Create a new instance of the SnakeEngine class
        snakeEngine = new SnakeEngine(this, size);

        // Make snakeEngine the view of the Activity
        setContentView(snakeEngine);
    }
}
The onCreate method uses the Display class and an object of type Point to get the resolution of the device the game is running on. Our SnakeEngine class will need a reference to the Activity and the resolution so we pass them in to the SnakeEngine constructor. The last thing we do is use snakeEngine to be the View of the SnakeActivity.
Now we can code the onPause and onResume methods. Add the following code. Again. for a full explanation read the Breakout tutorial but basically Android will call these onPause and onResume methods then these methods call the relevant methods inside SnakeEngine to start and stop the thread which handles the entire game.

// Start the thread in snakeEngine
@Override
protected void onResume() {
    super.onResume();
    snakeEngine.resume();
}

// Stop the thread in snakeEngine
@Override
protected void onPause() {
    super.onPause();
    snakeEngine.pause();
}
Making the game fullscreen and landscape

We want to use every pixel that the device has to offer so we will make changes to the app’s AndroidManifest.xml configuration file.

    In the project explorer pane in Android Studio double click on the manifests folder, this will open up the AndroidManifest.xml file in the code editor.
    In the AndroidManifest.xml file, locate the following line of code: android:name=”.SnakeActivity”>
    Place the cursor before the closing > shown above. Tap the enter key a couple of times to move the > a couple of lines below the rest of the line shown above.
    Immediately below ParallaxActivity but BEFORE the newly positioned > type or copy and paste these two lines to make the game run full screen and lock it in the landscape orientation.

android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
android:screenOrientation="landscape"
1
2

android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
android:screenOrientation="landscape"

Add the sound to the project

Download the sounds by right-clicking on the files listed below. Add them to the Snake project by using your operating system’s file browser go to the app\src\main folder of the project and create a new folder called assets. Add your sound files to this folder. Here are my sound effects. Right-click and select Save link as… to download them.

Note: At the moment my Web host seems to be restricting me from uploading .ogg files. Just look at one of my other projects, download the files from them and rename them to suit below. You could also make your own or download the bonus content (above). Sorry will fix this as soon as I can.

snake_crash

eat_bob

We can now get rid of the errors by moving on to the SnakeEngine class.
Coding SnakeEngine

Add a new class called SnakeEngine and amend the code as shown next so we have all the required imports.
import android.content.Context;
import android.content.res.AssetFileDescriptor;
import android.graphics.Point;
import android.media.AudioManager;
import android.media.SoundPool;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import java.io.IOException;
import java.util.Random;
import android.content.res.AssetManager;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;

class SnakeEngine extends SurfaceView implements Runnable {

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import android.content.Context;
import android.content.res.AssetFileDescriptor;
import android.graphics.Point;
import android.media.AudioManager;
import android.media.SoundPool;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import java.io.IOException;
import java.util.Random;
import android.content.res.AssetManager;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;

class SnakeEngine extends SurfaceView implements Runnable {

}

When we extend SurfaceView so that the call to setContentView in the SnakeActivity class works and we implement the Runnable interface so we can later pass this class to the Thread constructor to create a Thread instance. Runnable has one method that we must implement and we will overide run soon.
The SnakeEngine variables

Add all the member variables after the class declaration then they will be ready for use as we proceed through the rest of the code.
// Our game thread for the main game loop
private Thread thread = null;

// To hold a reference to the Activity
private Context context;

// for plaing sound effects
private SoundPool soundPool;
private int eat_bob = -1;
private int snake_crash = -1;

// For tracking movement Heading
public enum Heading {UP, RIGHT, DOWN, LEFT}
// Start by heading to the right
private Heading heading = Heading.RIGHT;

// To hold the screen size in pixels
private int screenX;
private int screenY;

// How long is the snake
private int snakeLength;

// Where is Bob hiding?
private int bobX;
private int bobY;

// The size in pixels of a snake segment
private int blockSize;

// The size in segments of the playable area
private final int NUM_BLOCKS_WIDE = 40;
private int numBlocksHigh;

// Control pausing between updates
private long nextFrameTime;
// Update the game 10 times per second
private final long FPS = 10;
// There are 1000 milliseconds in a second
private final long MILLIS_PER_SECOND = 1000;
// We will draw the frame much more often

// How many points does the player have
private int score;

// The location in the grid of all the segments
private int[] snakeXs;
private int[] snakeYs;

// Everything we need for drawing
// Is the game currently playing?
private volatile boolean isPlaying;

// A canvas for our paint
private Canvas canvas;

// Required to use canvas
private SurfaceHolder surfaceHolder;

// Some paint for our canvas
private Paint paint;
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

// Our game thread for the main game loop
private Thread thread = null;

// To hold a reference to the Activity
private Context context;

// for plaing sound effects
private SoundPool soundPool;
private int eat_bob = -1;
private int snake_crash = -1;

// For tracking movement Heading
public enum Heading {UP, RIGHT, DOWN, LEFT}
// Start by heading to the right
private Heading heading = Heading.RIGHT;

// To hold the screen size in pixels
private int screenX;
private int screenY;

// How long is the snake
private int snakeLength;

// Where is Bob hiding?
private int bobX;
private int bobY;

// The size in pixels of a snake segment
private int blockSize;

// The size in segments of the playable area
private final int NUM_BLOCKS_WIDE = 40;
private int numBlocksHigh;

// Control pausing between updates
private long nextFrameTime;
// Update the game 10 times per second
private final long FPS = 10;
// There are 1000 milliseconds in a second
private final long MILLIS_PER_SECOND = 1000;
// We will draw the frame much more often

// How many points does the player have
private int score;

// The location in the grid of all the segments
private int[] snakeXs;
private int[] snakeYs;

// Everything we need for drawing
// Is the game currently playing?
private volatile boolean isPlaying;

// A canvas for our paint
private Canvas canvas;

// Required to use canvas
private SurfaceHolder surfaceHolder;

// Some paint for our canvas
private Paint paint;

We can now code the constructor.
Coding the SnakeEngine constructor

Add this code next, be sure to add it inside the closing curly brace of the SnakeEngine class.
public SnakeEngine(Context context, Point size) {
    super(context);

    context = context;

    screenX = size.x;
    screenY = size.y;

    // Work out how many pixels each block is
    blockSize = screenX / NUM_BLOCKS_WIDE;
    // How many blocks of the same size will fit into the height
    numBlocksHigh = screenY / blockSize;

    // Set the sound up
    soundPool = new SoundPool(10, AudioManager.STREAM_MUSIC, 0);
    try {
        // Create objects of the 2 required classes
        // Use m_Context because this is a reference to the Activity
        AssetManager assetManager = context.getAssets();
        AssetFileDescriptor descriptor;

        // Prepare the two sounds in memory
        descriptor = assetManager.openFd("get_mouse_sound.ogg");
        eat_bob = soundPool.load(descriptor, 0);

        descriptor = assetManager.openFd("death_sound.ogg");
        snake_crash = soundPool.load(descriptor, 0);

    } catch (IOException e) {
        // Error
    }

    // Initialize the drawing objects
    surfaceHolder = getHolder();
    paint = new Paint();

    // If you score 200 you are rewarded with a crash achievement!
    snakeXs = new int[200];
    snakeYs = new int[200];

    // Start the game
    newGame();
}
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

public SnakeEngine(Context context, Point size) {
    super(context);

    context = context;

    screenX = size.x;
    screenY = size.y;

    // Work out how many pixels each block is
    blockSize = screenX / NUM_BLOCKS_WIDE;
    // How many blocks of the same size will fit into the height
    numBlocksHigh = screenY / blockSize;

    // Set the sound up
    soundPool = new SoundPool(10, AudioManager.STREAM_MUSIC, 0);
    try {
        // Create objects of the 2 required classes
        // Use m_Context because this is a reference to the Activity
        AssetManager assetManager = context.getAssets();
        AssetFileDescriptor descriptor;

        // Prepare the two sounds in memory
        descriptor = assetManager.openFd("get_mouse_sound.ogg");
        eat_bob = soundPool.load(descriptor, 0);

        descriptor = assetManager.openFd("death_sound.ogg");
        snake_crash = soundPool.load(descriptor, 0);

    } catch (IOException e) {
        // Error
    }

    // Initialize the drawing objects
    surfaceHolder = getHolder();
    paint = new Paint();

    // If you score 200 you are rewarded with a crash achievement!
    snakeXs = new int[200];
    snakeYs = new int[200];

    // Start the game
    newGame();
}

First, we initialize, context, screenX and screenY with the values passed in from SnakeActivity. Next, we divide the number of pixels by the final int NUM_BLOCKS_WIDE in order to determine the appropriate number of pixels in the width of blockSize. Now we can use this to work out, based on the number of vertical pixels, how many blocks high the playable area will be.

Next, the sound files are loaded and associated with an appropriately named identifier. They are now ready to play at will with soundPool.playSound.
After this, we initialized the two int arrays. snakeXs will hold the horizontal coordinate of each segment of the snake and snakeYs will hold each vertical coordinate.

The last part of the code we call the newGame method which unsurprisingly starts the game. We will code newGame shortly.
Making the thread run the game loop

All the in the run method, including method calls from the run method, works in a separate thread to the Android UI. This will allow our game to run smoothly at the same time as listening for player input. Add the run method as well as pause and resume and then we will talk about them.
@Override
public void run() {

    while (isPlaying) {

        // Update 10 times a second
        if(updateRequired()) {
            update();
            draw();
        }

    }
}

public void pause() {
    isPlaying = false;
    try {
        thread.join();
    } catch (InterruptedException e) {
        // Error
    }
}

public void resume() {
    isPlaying = true;
    thread = new Thread(this);
    thread.start();
}
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

@Override
public void run() {

    while (isPlaying) {

        // Update 10 times a second
        if(updateRequired()) {
            update();
            draw();
        }

    }
}

public void pause() {
    isPlaying = false;
    try {
        thread.join();
    } catch (InterruptedException e) {
        // Error
    }
}

public void resume() {
    isPlaying = true;
    thread = new Thread(this);
    thread.start();
}

The pause and resume methods are called by SnakeActivity when Android or the player causes the app to call onPause or onResume. The resume method creates a new instance of Thread when required and pause stops the it when required. Now our instance of Thread will play nicely with Android.

Everything in, and called by the run method, will now happen in a separate thread.

The run method calls update and then draw. The whole thing is wrapped in a while loop that repeats continuously if isPlaying is set to true and the thread is running.

These calls are also contained within if(updateRequired()). Only if this is true are the update and draw methods called. The updateRequired method can, therefore, control the frame rate of the game ensureing the blocky/authentic motion.
Some more methods

As we saw, the newGame method is called by the constructor it is also called when the snake crashes and a new game is required. Add the newGame method.
public void newGame() {
    // Start with a single snake segment
    snakeLength = 1;
    snakeXs[0] = NUM_BLOCKS_WIDE / 2;
    snakeYs[0] = numBlocksHigh / 2;

    // Get Bob ready for dinner
    spawnBob();

    // Reset the score
    score = 0;

    // Setup nextFrameTime so an update is triggered
    nextFrameTime = System.currentTimeMillis();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

public void newGame() {
    // Start with a single snake segment
    snakeLength = 1;
    snakeXs[0] = NUM_BLOCKS_WIDE / 2;
    snakeYs[0] = numBlocksHigh / 2;

    // Get Bob ready for dinner
    spawnBob();

    // Reset the score
    score = 0;

    // Setup nextFrameTime so an update is triggered
    nextFrameTime = System.currentTimeMillis();
}

In the newGame method, the snake is prepared. The length is set to just one block then the head of the snake is set to the center of the screen. The first position of each of the arrays holds the head. It is only the head that we will use when we code the collision detection. Next, Bob is prepared for a terrible demise by calling spawnBob and score is initialized to .

The final bit of code in the newGame method sets nextFrameTime to whatever the current time is. This will cause the update and draw methods run.
Spawning and eating Bob

The spawnBob method uses two random int values within the ranges of zero and NUM_BLOCKS_WIDE, zero and numBlocksHigh, then initializes the horizontal and vertical location of the mouse.
public void spawnBob() {
    Random random = new Random();
    bobX = random.nextInt(NUM_BLOCKS_WIDE - 1) + 1;
    bobY = random.nextInt(numBlocksHigh - 1) + 1;
}
1
2
3
4
5

public void spawnBob() {
    Random random = new Random();
    bobX = random.nextInt(NUM_BLOCKS_WIDE - 1) + 1;
    bobY = random.nextInt(numBlocksHigh - 1) + 1;
}

Optimization tip: Instantiating a new instance of Random is slow and could be done in the constructor then just reused each time spawnBob is called. In this context, however it will not affect the smooth running of the game.

The eatBob method is simple too.

The snake’s length is increased by one block, a new mouse is spawned, 1 is added to the score and a sound effect is played.

Here is the code for the eatBob method to add after the spawnBob method.
private void eatBob(){
    // Got him!
    // Increase the size of the snake
    snakeLength++;
    //replace Bob
    // This reminds me of Edge of Tomorrow. Oneday Bob will be ready!
    spawnBob();
    //add to the score
    score = score + 1;
    soundPool.play(eat_bob, 1, 1, 0, 0, 1);
}
1
2
3
4
5
6
7
8
9
10
11

private void eatBob(){
    // Got him!
    // Increase the size of the snake
    snakeLength++;
    //replace Bob
    // This reminds me of Edge of Tomorrow. Oneday Bob will be ready!
    spawnBob();
    //add to the score
    score = score + 1;
    soundPool.play(eat_bob, 1, 1, 0, 0, 1);
}

The moveSnake method is quite long but doesn’t involve anything too tricky. Add the code and then we can go through it.
private void moveSnake(){
    // Move the body
    for (int i = snakeLength; i > 0; i--) {
        // Start at the back and move it
        // to the position of the segment in front of it
        snakeXs[i] = snakeXs[i - 1];
        snakeYs[i] = snakeYs[i - 1];

        // Exclude the head because
        // the head has nothing in front of it
    }

    // Move the head in the appropriate heading
    switch (heading) {
        case UP:
            snakeYs[0]--;
            break;

        case RIGHT:
            snakeXs[0]++;
            break;

        case DOWN:
            snakeYs[0]++;
            break;

        case LEFT:
            snakeXs[0]--;
            break;
    }
}
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

private void moveSnake(){
    // Move the body
    for (int i = snakeLength; i > 0; i--) {
        // Start at the back and move it
        // to the position of the segment in front of it
        snakeXs[i] = snakeXs[i - 1];
        snakeYs[i] = snakeYs[i - 1];

        // Exclude the head because
        // the head has nothing in front of it
    }

    // Move the head in the appropriate heading
    switch (heading) {
        case UP:
            snakeYs[0]--;
            break;

        case RIGHT:
            snakeXs[0]++;
            break;

        case DOWN:
            snakeYs[0]++;
            break;

        case LEFT:
            snakeXs[0]--;
            break;
    }
}

The for loop starts at the last block of the snake in snakeXs and snakeYs and advances it into the location previously occupied by the block ahead of it. When the for loop is complete the last position is in the place the block ahead used to be in and the block that was just behind the head is where the head used to be.

Therefore, as long as we handle the head properly all the other blocks will be correctly positioned too.

To move the head we switch based on the current value of heading and add or subtract 1 from either the heads vertical or horizontal position.

In the detectDeath method, we do collision detection. Notice in the code that follows we check for two things. Has the snake’s head bumped into the edge of the screen and has the snake’s head bumped into a block of the snake’s body?
private boolean detectDeath(){
    // Has the snake died?
    boolean dead = false;

    // Hit the screen edge
    if (snakeXs[0] == -1) dead = true;
    if (snakeXs[0] >= NUM_BLOCKS_WIDE) dead = true;
    if (snakeYs[0] == -1) dead = true;
    if (snakeYs[0] == numBlocksHigh) dead = true;

    // Eaten itself?
    for (int i = snakeLength - 1; i > 0; i--) {
        if ((i > 4) && (snakeXs[0] == snakeXs[i]) && (snakeYs[0] == snakeYs[i])) {
            dead = true;
        }
    }

    return dead;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

private boolean detectDeath(){
    // Has the snake died?
    boolean dead = false;

    // Hit the screen edge
    if (snakeXs[0] == -1) dead = true;
    if (snakeXs[0] >= NUM_BLOCKS_WIDE) dead = true;
    if (snakeYs[0] == -1) dead = true;
    if (snakeYs[0] == numBlocksHigh) dead = true;

    // Eaten itself?
    for (int i = snakeLength - 1; i > 0; i--) {
        if ((i > 4) && (snakeXs[0] == snakeXs[i]) && (snakeYs[0] == snakeYs[i])) {
            dead = true;
        }
    }

    return dead;
}

If either of the collision possibilities happens then detectDeath returns true to the update method which takes further action.
Coding the update method

This method does three things:

    It checks if the head has touched/eaten a mouse. If it has then the eatBob method handles things.
    It calls the moveSnake method which was coded previously.
    It calls the detectDeath method and if it returns true a sound is played and the game begins again.

All this happens ten times per second because of the way updateRequired will work. We will code updateRequired in a minute. Add the code for the update method.
public void update() {
    // Did the head of the snake eat Bob?
    if (snakeXs[0] == bobX && snakeYs[0] == bobY) {
        eatBob();
    }

    moveSnake();

    if (detectDeath()) {
        //start again
        soundPool.play(snake_crash, 1, 1, 0, 0, 1);

        newGame();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

public void update() {
    // Did the head of the snake eat Bob?
    if (snakeXs[0] == bobX && snakeYs[0] == bobY) {
        eatBob();
    }

    moveSnake();

    if (detectDeath()) {
        //start again
        soundPool.play(snake_crash, 1, 1, 0, 0, 1);

        newGame();
    }
}

Drawing the game

Add all the code for the draw method and then we will go through it.
public void draw() {
    // Get a lock on the canvas
    if (surfaceHolder.getSurface().isValid()) {
        canvas = surfaceHolder.lockCanvas();

        // Fill the screen with Game Code School blue
        canvas.drawColor(Color.argb(255, 26, 128, 182));

        // Set the color of the paint to draw the snake white
        paint.setColor(Color.argb(255, 255, 255, 255));

        // Scale the HUD text
        paint.setTextSize(90);
        canvas.drawText("Score:" + score, 10, 70, paint);

        // Draw the snake one block at a time
        for (int i = 0; i < snakeLength; i++) {
            canvas.drawRect(snakeXs[i] * blockSize,
                    (snakeYs[i] * blockSize),
                    (snakeXs[i] * blockSize) + blockSize,
                    (snakeYs[i] * blockSize) + blockSize,
                    paint);
        }

        // Set the color of the paint to draw Bob red
        paint.setColor(Color.argb(255, 255, 0, 0));

        // Draw Bob
        canvas.drawRect(bobX * blockSize,
                (bobY * blockSize),
                (bobX * blockSize) + blockSize,
                (bobY * blockSize) + blockSize,
                paint);

        // Unlock the canvas and reveal the graphics for this frame
        surfaceHolder.unlockCanvasAndPost(canvas);
    }
}
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

public void draw() {
    // Get a lock on the canvas
    if (surfaceHolder.getSurface().isValid()) {
        canvas = surfaceHolder.lockCanvas();

        // Fill the screen with Game Code School blue
        canvas.drawColor(Color.argb(255, 26, 128, 182));

        // Set the color of the paint to draw the snake white
        paint.setColor(Color.argb(255, 255, 255, 255));

        // Scale the HUD text
        paint.setTextSize(90);
        canvas.drawText("Score:" + score, 10, 70, paint);

        // Draw the snake one block at a time
        for (int i = 0; i < snakeLength; i++) {
            canvas.drawRect(snakeXs[i] * blockSize,
                    (snakeYs[i] * blockSize),
                    (snakeXs[i] * blockSize) + blockSize,
                    (snakeYs[i] * blockSize) + blockSize,
                    paint);
        }

        // Set the color of the paint to draw Bob red
        paint.setColor(Color.argb(255, 255, 0, 0));

        // Draw Bob
        canvas.drawRect(bobX * blockSize,
                (bobY * blockSize),
                (bobX * blockSize) + blockSize,
                (bobY * blockSize) + blockSize,
                paint);

        // Unlock the canvas and reveal the graphics for this frame
        surfaceHolder.unlockCanvasAndPost(canvas);
    }
}

First, we lock the surface which is required by Android. If this works, we clear the screen with drawColor and then change the color of all future objects we will draw by calling setColor. We do this once for the snake and once for Bob. Now we draw the text for the score.

We use a for loop to draw a block/square to represent each block of the snake. The code positions the blocks to screen coordinates by using their grid positions(contained in the array) multiplied by blockSize which was determined in the constructor based on screen resolution.

Now we can draw single block to represent Bob.
Coding updateRequired

We are almost done!

The updateRequired method will let us know if the nextFrameTime variable has been exceeded by the actual current time. If it has then a new time is retrieved and put back in nextFrameTime. The method then returns true allowing draw and update to execute. If not, false is returned and the next frame is delayed until it is time.

You can now add the updateRequired method.
public boolean updateRequired() {

    // Are we due to update the frame
    if(nextFrameTime <= System.currentTimeMillis()){
        // Tenth of a second has passed

        // Setup when the next update will be triggered
        nextFrameTime =System.currentTimeMillis() + MILLIS_PER_SECOND / FPS;

        // Return true so that the update and draw
        // functions are executed
        return true;
    }

    return false;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

public boolean updateRequired() {

    // Are we due to update the frame
    if(nextFrameTime <= System.currentTimeMillis()){
        // Tenth of a second has passed

        // Setup when the next update will be triggered
        nextFrameTime =System.currentTimeMillis() + MILLIS_PER_SECOND / FPS;

        // Return true so that the update and draw
        // functions are executed
        return true;
    }

    return false;
}

Handling screen touches (player input)

The final code handles the player removing their finger. Holding won’t work. The onTouchEvent method uses motionEvent.getAction to detect MotionEvent.ACTION_UP. This notifies us the player’s finger has left the screen. We then use motionEvent.getX() to determine if that action was on the left or the right of the screen.

If they tap on the left side of the screen then the snake moves to the next direction in the enumeration going anti-clockwise if they tap on the right then it’s clockwise.

It’s meant to be awkward, it is authentic to the original. Add this code to handle touches on the screen.
@Override
public boolean onTouchEvent(MotionEvent motionEvent) {

    switch (motionEvent.getAction() & MotionEvent.ACTION_MASK) {
        case MotionEvent.ACTION_UP:
            if (motionEvent.getX() >= screenX / 2) {
               switch(heading){
                   case UP:
                       heading = Heading.RIGHT;
                       break;
                   case RIGHT:
                       heading = Heading.DOWN;
                       break;
                   case DOWN:
                       heading = Heading.LEFT;
                       break;
                   case LEFT:
                       heading = Heading.UP;
                       break;
               }
            } else {
                switch(heading){
                    case UP:
                        heading = Heading.LEFT;
                        break;
                    case LEFT:
                        heading = Heading.DOWN;
                        break;
                    case DOWN:
                        heading = Heading.RIGHT;
                        break;
                    case RIGHT:
                        heading = Heading.UP;
                        break;
                }
            }
    }
    return true;
}
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

@Override
public boolean onTouchEvent(MotionEvent motionEvent) {

    switch (motionEvent.getAction() & MotionEvent.ACTION_MASK) {
        case MotionEvent.ACTION_UP:
            if (motionEvent.getX() >= screenX / 2) {
               switch(heading){
                   case UP:
                       heading = Heading.RIGHT;
                       break;
                   case RIGHT:
                       heading = Heading.DOWN;
                       break;
                   case DOWN:
                       heading = Heading.LEFT;
                       break;
                   case LEFT:
                       heading = Heading.UP;
                       break;
               }
            } else {
                switch(heading){
                    case UP:
                        heading = Heading.LEFT;
                        break;
                    case LEFT:
                        heading = Heading.DOWN;
                        break;
                    case DOWN:
                        heading = Heading.RIGHT;
                        break;
                    case RIGHT:
                        heading = Heading.UP;
                        break;
                }
            }
    }
    return true;
}

Validating ASP.NET Server Controls on Asp.Net !

2011-12-07T08:47:00.001-08:00

By Bill Evjen
Reuters

December 2003

Applies to:
    Microsoft® ASP.NET
    Microsoft Visual Basic® .NET
    Microsoft Visual C#® .NET

Summary: Learn how to use all the available ASP.NET validation server controls that are at your disposal. This paper introduces these new controls and discusses tips and tricks on working with them in practical scenarios. (34 printed pages)

Introduction
Looking at Validation
The RequiredFieldValidator Control
The CompareValidator Control
The RangeValidator Control
The RegularExpressionValidator Control
The CustomValidator Control
The ValidationSummary Control
Conclusion

Introduction

In your studies of ASP.NET, you might have been introduced to a number of different types of controls, whether HTML server controls or Web server controls. This paper focuses on a series of controls that stand out from the rest—validation server controls.

Validation server controls are a series of controls that help you validate the data that the user enters into the other controls that are provided with ASP.NET. They determine whether the form can be processed based upon the rules that you define in the validation server controls.

Looking at Validation

One of the most common elements of Web pages is a form in which the user can input data that is posted back to the server. These forms are made up of different types of HTML elements that are constructed using straight HTML, HTML server controls, or Web server controls. A variety of HTML elements, such as text boxes, check boxes, radio buttons, drop-down lists and more, can be used in forms.

Often when your ASP.NET applications are collecting information from a user, you want to ensure that the data that you collect is valid. Some users are not interested in spending enough time to enter the correct information into a form, and in some cases, users might even intentionally enter false information to gain access or get past a certain step in your application's workflow process.

One of the first steps is to understand what validating data means. Validating, in this case, does not mean that if John Doe types his name into the form field of a text box as Fred Doe the computer sends an alert to inform you that the data is untruthful. No, we still do not have the capability to find out whether a statement is true.

Validation is testing to determine whether the user entered something into the field. After you determine that something was entered, you can then also check to see whether what was entered is a number or a character and if it is in the correct format. From there, you can compare user input in different fields or against values that might be held in other repositories, such as a database. You can check for many types of information, as you learn in the rest of this article.

Data collection on the Internet is one of its most important features, so you must make sure that the data you collect has value and meaning. You ensure this by eliminating any chance that the information collected does not abide by the rules you outline.

Understanding the Difference Between Server-Side and Client-Side Validation

Many people new to ASP.NET don't know the difference between client-side and server-side validation. You must understand these two different ways of validating the data users input into a Web form.

After the user enters data into a Web form, clicks the Submit button, and sends the form data to the server as a request, you can perform server-side validation on the data. If the data is incorrect or not valid, you can send back a response stating this. If, however, when the user clicks the Submit button, a scripting language that is part of the overall HTML page is initiated to check the validity of the data before it is sent to the server, this is client-side validation.

It was a lot easier to understand the difference between these forms of validation when you coded Active Server Pages 3.0 because, as the programmer, you personally performed almost all data validation. You yourself either programmed it to be client-side or server-side.

When you used server-side validation with ASP 3.0, if something the user entered was wrong, you could repost the form and ask the user to correct the information in that particular field of the form. Sometimes, you carried the correct input from the other fields back to the form page, and populated the fields for the users so they didn't have to re-enter the same information again. Some sites on the Internet don't carry this inputted information back to the form page, and the user is then required to enter all the information into the form a second time. Obviously, this may cause people to leave your site for another.

The bad thing about server-side validation is that it requires trips back and forth to the server. This takes a lot of resources and makes for a slower-paced form for the user. Nothing is more annoying to a user who is on a dial-up connection than clicking the Submit button on the form and then waiting for 20 seconds to find out that they didn't enter their password correctly.

The other option for form validation is to put some client-side JavaScript or VBScript at the top of the ASP page that checks if the information in the fields is correct. This takes care of the problem of making unnecessary trips to the server, but it requires another language to learn and manage. JavaScript is a great language, but takes a lot of time to master, and there are always problems getting your JavaScript code to work on different browsers. Listing 1 shows you an example of using client-side JavaScript to perform form validation.

Listing 1: Client-side JavaScript for form validation

<!--

Function CheckForm(form)

{

for(var intCtr = 0; intCtr <= (form.elements.length - 5); ++intCtr)

{

var temp = form.elements[intCtr];

if(temp.type == "text" && temp.value == "")

{

alert("Please Enter All Information!");

temp.focus();

return false;

}

return true;

}

//-->

</script>

This sample piece of JavaScript does some validation, but it doesn't check for all the in-formation that you might need on the form you are building. This piece of code determines only whether the user entered anything at all in all five fields within the form. It does not determine whether the user entered an actual e-mail address within the e-mail address text box, whether the user entered a number between two given numbers, or whether the password and the confirm password text boxes match. After awhile, you can see that you need many JavaScript functions to obtain the level of form validation required.

.NET to the Rescue!

Developers who used classic Active Server Pages 3.0 to develop Web pages might remember that they used to spend a considerable amount of their time developing validation mechanics in their pages. It was time consuming if you did it right. It was most efficient to do the validation of the form on the client-side to limit the number of requests and responses required to work through an application. As I stated, however, you were never quite sure if the requesting browser would understand the scripting code that you used for the validation. So, it was usually better, especially for critical Web applications, to bring the validation to the server.

ASP.NET has changed this by giving you the capability to use the validation server controls that are provided with the other new controls at your disposal. What makes these validation server controls effective is that when an ASP.NET page containing these controls is requested, it is the ASP.NET engine that decides whether to perform the validation on the client or on the server depending on the browser that is making the request. Therefore, your page's functionality changes depending on the requesting browser—thus enabling you to make your Web pages the best they can possibly be—rather than dummying-down your Web applications for the lowest common denominator.

Validation server controls are the only type of ASP.NET server controls that also generate client-side script. All the other controls work with the idea of making postbacks to the server (a request to the server to get a response).

Presently, six different validation server controls are available for ASP.NET:

RequiredFieldValidator
CompareValidator
RangeValidator
RegularExpressionValidator
CustomValidator
ValidationSummary

You can also customize validation for your own needs. Then, if there are any errors in the form data, these validation server controls enable you to customize the display of error information on the browser.

You place validation server controls on your page as you would any other type of controls. After the user submits the form, the user's form information is sent to the appropriate validation control, where it is evaluated. If the information doesn't validate, the control sets a page property that indicates this. After all the form information is sent to all the validation server controls, if one or more of the validation server controls cannot validate the information sent to it, the entire form input is found to be invalid, and the user is notified.

Table 1 describes each of the six validation server controls.

Table 1: Available validation server controls

Validation Server Control	Description
RequiredFieldValidator	Ensures that the user does not skip a form entry field
CompareValidator	Allows for comparisons between the user's input and another item using a comparison operator (equals, greater than, less than, and so on)
RangeValidator	Checks the user's input based upon a lower- and upper-level range of numbers or characters
RegularExpressionValidator	Checks that the user's entry matches a pattern defined by a regular expression. This is a good control to use to check e-mail addresses and phone numbers
CustomValidator	Checks the user's entry using custom-coded validation logic
ValidationSummary	Displays all the error messages from the validators in one specific spot on the page

Not all button clicks are equal

Normally, in a series of HTML form elements, there is some sort of Button, ImageButton, or LinkButton control on the page that submits the form and causes the validation to initiate. This might not be the functionality that you are always looking for in your Web forms. You may not want each and every button on the ASP.NET page to initiate validation.

For instance, you might have a Cancel or Reset button on the Web page. If the user clicks one of these buttons, you don't want that button click to validate the contents contained in the Web form.

To prevent this, you have to set the CausesValidation property for the control to False.

<asp:Button id="Button1" runat="server" Text="Button"

CausesValidation="False"></asp:Button>

The RequiredFieldValidator Control

The RequiredFieldValidator server control makes sure that the user enters something into the field that it is associated with in the form. You need to tie the RequiredFieldValidator to each control that is a required field in the form. Although this is the simplest of the validation server controls, you must understand certain things about it.

To see an example of using the RequiredFieldValidator server control, create a Web form that contains a TextBox server control and a Button server control. Next to the button, place a RequiredFieldValidator server control. Your ASP.NET page should look like the code illustrated in Listing 2.

Listing 2: Using the RequiredFieldValidator control

Visual Basic .NET

<%@ Page Language="VB" %>

Sub Button1_Click(sender As Object, e As EventArgs)

Label1.Text = "Page is valid!"

End Sub

</script>

<html>

<head>

</head>

<body>

<p>

<asp:TextBox id="TextBox1"

runat="server"></asp:TextBox>

<asp:RequiredFieldValidator

id="RequiredFieldValidator1" runat="server"

ErrorMessage="Required!"

ControlToValidate="TextBox1">

</asp:RequiredFieldValidator>

</p>

<p>

<asp:Button id="Button1" onclick="Button1_Click"

runat="server" Text="Button"></asp:Button>

</p>

<p>

<asp:Label id="Label1" runat="server"></asp:Label>

</p>

</form>

</body>

</html>

Visual C# .NET

<%@ Page Language="C#" %>

void Button1_Click(Object sender, EventArgs e) {

Label1.Text = "Page is valid!";

}

</script>

<html>

<head>

</head>

<body>

<p>

<asp:TextBox id="TextBox1"

runat="server"></asp:TextBox>

<asp:RequiredFieldValidator

id="RequiredFieldValidator1" runat="server"

ErrorMessage="Required!"

ControlToValidate="TextBox1">

</asp:RequiredFieldValidator>

</p>

<p>

<asp:Button id="Button1" onclick="Button1_Click"

runat="server" Text="Button"></asp:Button>

</p>

<p>

<asp:Label id="Label1" runat="server"></asp:Label>

</p>

</form>

</body>

</html>

Run this page and then omit putting a value in the text box. When you click the button, you get a result similar to that shown in Figure 1.

Figure 1: Causing the RequiredFieldValidator server control to fire

There are a few things to be aware of when using the RequiredFieldValidator server control in your ASP.NET pages. First of all, the most important property of this validation control is the ControlToValidate property. The value assigned to this control needs to be the value of the id property for the control to which you want to link the RequiredFieldValidator control. You can link only one RequiredFieldValidator server control to any other server control on the page. For instance, if you have three required TextBox controls on your ASP.NET page, you need three separate RequiredFieldValidator controls to make sure that they are all required.

The second property of this control is the ErrorMessage property. This is the text that appears where the RequiredFieldValidator control is located on the ASP.NET page if the TextBox is left empty. Instead of using the ErrorMessage property, you can also use the Text property:

<asp:RequiredFieldValidator id="RequiredFieldValidator1"

runat="server" Text="Required!"

ControlToValidate="TextBox1">

</asp:RequiredFieldValidator>

Or you can use the following construct:

<asp:RequiredFieldValidator id="RequiredFieldValidator1"

runat="server" ControlToValidate="TextBox1">

Required!

</asp:RequiredFieldValidator>

As you run this simple page, notice a few things. First of all, if you are running a client that is considered an upper-level browser (for example, Internet Explorer 4.0 or better), the code generated to perform the validation is client-side. To see this, right-click the page, and then click View Source. You see JavaScript in the code of the page.

The JavaScript in the code of the page means that the required field checking against the text box on the page is done client-side. To test this, simply click the button on the page, and you see the Required! error message displayed. Next, enter a value in the TextBox control, and then press TAB. The RequiredFieldValidator server control is then triggered.

By default, red text is used for the error messages that are shown by these validation server controls. As with most of the ASP.NET server controls, however, you can change the style of the controls by changing the properties of the control in code or within the designer. For instance, you can apply a more complex style as illustrated here:

<asp:RequiredFieldValidator id="RequiredFieldValidator1"

runat="server" ControlToValidate="TextBox1" BackColor="DarkGray"

BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"

ForeColor="White" Font-Bold="True" Font-Names="Verdana"

Font-Size="X-Small"> Enter something 

</asp:RequiredFieldValidator>

Using code similar to the preceding, you can get a more elaborate result, as shown in Figure 2.

Figure 2: A RequiredFieldValidator control with a little more style

Note The RequiredFieldValidation server control works with most HTML form elements except for check boxes. You cannot validate against the CheckBox or CheckBoxList server controls using the RequiredFieldValidator server control. Instead you need to use the CustomValidator server control. An example of this is shown later in this article.

Double-Checking Client-Side Validation

One interesting point is that even though the form data is validated on the client (eliminating the need for additional requests to and responses from the server to validate the data), the data entered is re-verified on the server. After the data is checked on the client and found valid, it is rechecked on the server using the same validation rules. These are rules that you establish to ensure against some tricky programmer out there trying to bypass the validation process by posting the page to the server as if it passed validation.

Using the InitialValue Property with a TextBox Server Control

Another property to be aware of when working with the RequiredFieldValidator server control is the InitialValue property. Instead of being empty, HTML form elements can be populated with default values. In this case, you expect the user to change the value in these elements.

This situation is illustrated in the Listing 3, which shows a TextBox server control with an associated RequiredFieldValidator server control.

Listing 3: A TextBox control with a default value

<asp:TextBox id="TextBox1" runat="server">Hello</asp:TextBox>

<asp:RequiredFieldValidator id="RequiredFieldValidator1"

runat="server" ErrorMessage="Please change value"

ControlToValidate="TextBox1" InitialValue="Hello">

</asp:RequiredFieldValidator>

In this example, the single text box has a default value of Hello. The value you place here can be from any source, even a dynamic source. There is also a RequiredFieldValidator server control that is assigned to validate this text box. In this case, you want the user to change the initial value of this control to something other than the default value of the InitialValue property —Hello. You can also populate the value of this property from a dynamic source, just as you can populate the TextBox server control from a dynamic source.

RequiredFieldValidator1.InitialValue = some value

Because of the InitialValue property, if the user tries to submit the form without changing the value in the text box, the RequiredFieldValidator control fires and the form does not post to the server. If the user changes the value in the text box and submits the form, this RequiredFieldValidator control does not fire and the form is posted.

Requiring a Value Change and Disallowing Empty Values at the Same Time

When using the RequiredFieldValidator control against a text-based control such as a TextBox control, you can use the InitialValue property. The form validation fails if the value contained in the associated control is not changed from this value. If you use this kind of construct, however, the user can change the value of the text box in any manner to get past the validation. He or she can even empty the text box of any value, and it still passes the validation process.

In some situations, you can require the user not only to change the initial value of the text box, but also to input some value so that it is not empty. To do this, use two RequiredFieldValidator server controls. The first RequiredFieldValidator server control uses the InitialValue property to ensure that the user changes the default value in the text box that the control is associated with. The second RequiredFieldValidator control validates that the same text box is not left empty, as illustrated in Listing 4.

Listing 4: A single TextBox control with two RequiredFieldValidator controls

<asp:TextBox id="TextBox1" runat="server">Hello</asp:TextBox>

<asp:RequiredFieldValidator id="RequiredFieldValidator1"

runat="server" ErrorMessage="Please change value"

ControlToValidate="TextBox1" InitialValue="Hello">

</asp:RequiredFieldValidator>

<asp:RequiredFieldValidator id="RequiredFieldValidator2"

runat="server" ErrorMessage="Do not leave empty"

ControlToValidate="TextBox1">

</asp:RequiredFieldValidator>

Using the InitialValue Property with a DropDownList Control

A good way of using the InitialValue property is with the DropDownList server control. For instance, a drop-down list might have a default value that is not an empty value (by default, some text appears in it). An example of a drop-down list with the RequiredFieldValidator that uses the InitialValue property is illustrated in Listing 5.

Listing 5: Using the RequiredFieldValidator server control with the Drop-DownList server control

<asp:DropDownList id="DropDownList1" runat="server">

<asp:ListItem Selected="True">Select a profession</asp:ListItem>

<asp:ListItem>Programmer</asp:ListItem>

<asp:ListItem>Lawyer</asp:ListItem>

<asp:ListItem>Doctor</asp:ListItem>

<asp:ListItem>Artist</asp:ListItem>

</asp:DropDownList>

<asp:RequiredFieldValidator id="RequiredFieldValidator1"

runat="server" ErrorMessage="Please make a selection"

ControlToValidate="DropDownList1"

InitialValue="Select a profession">

</asp:RequiredFieldValidator>

Using this kind of construct enables you to place a description of the actions required in the drop-down list and also requires the user to make a selection from the choices. To get past the validation process, the user must make a selection other than the Select a profession choice. If the user doesn't enter a profession, an error message is returned (see Figure 3). It takes a lot of code to write your own JavaScript function for this procedure, and that JavaScript also has to be browser-independent. With ASP.NET, the RequiredFieldValidator server control takes care of that.

Figure 3: Validation error based upon the DropDownList control

The CompareValidator Control

The CompareValidator server control compares the value entered into the form field to another field, a database value, or other value that you specify. When comparing against data types, you just set the Operator—DataTypeCheck. After that is done, you can set the Type attribute to String, Integer, Double, Date, or Currency in the CompareValidator control to make sure that the user's input into the field is the specified type.

Validating Against Other Controls on the Web Form

Using the CompareValidator server control, you can make comparisons between different controls within a form on your ASP.NET page. For example, if you want to compare what the user enters in the Password field to the entry in the Confirm Password field to see whether they are the same, you can use the CompareValidator server control. Using these two fields is a common practice when a form asks for a password. It ensures that the user doesn't mistype the password (see Listing 6).

Listing 6: Using the CompareValidator server control

Visual Basic .NET

<%@ Page Language="VB" %>

Sub Button1_Click(sender As Object, e As EventArgs)

Label1.Text = "Passwords match"

End Sub

</script>

<html>

<head>

</head>

<body>

<p>

Password<br>

<asp:TextBox id="TextBox1" runat="server"

TextMode="Password"></asp:TextBox>

<asp:CompareValidator id="CompareValidator1"

runat="server" ErrorMessage="Passwords do not match!"

ControlToValidate="TextBox2"

ControlToCompare="TextBox1"></asp:CompareValidator>

</p>

<p>

Confirm Password<br>

<asp:TextBox id="TextBox2" runat="server"

TextMode="Password"></asp:TextBox>

</p>

<p>

<asp:Button id="Button1" onclick="Button1_Click"

runat="server" Text="Login"></asp:Button>

</p>

<p>

<asp:Label id="Label1" runat="server"></asp:Label>

</p>

</form>

</body>

</html>

Visual C# .NET

<%@ Page Language="C#" %>

void Button1_Click(Object sender, EventArgs e) {

Label1.Text = "Passwords match";

}

</script>

<html>

<head>

</head>

<body>

<p>

Password<br>

<asp:TextBox id="TextBox1" runat="server"

TextMode="Password"></asp:TextBox>

<asp:CompareValidator id="CompareValidator1"

runat="server" ErrorMessage="Passwords do not match!"

ControlToValidate="TextBox2"

ControlToCompare="TextBox1"></asp:CompareValidator>

</p>

<p>

Confirm Password<br>

<asp:TextBox id="TextBox2" runat="server"

TextMode="Password"></asp:TextBox>

</p>

<p>

<asp:Button id="Button1" onclick="Button1_Click"

runat="server" Text="Login"></asp:Button>

</p>

<p>

<asp:Label id="Label1" runat="server"></asp:Label>

</p>

</form>

</body>

</html>

In this example, the Web form uses two TextBox server controls. One is for the user to enter the password, and the second TextBox control requires the user to enter the password again to ensure they didn't mistype the original. By using the CompareValidator server control, you guarantee that they are equal strings. If they are not equal, the page returns an error message (see Figure 4). If they are equal, your page submits as valid.

Figure 4: In this example, the user mistyped the password and got an error message.

Validating Against Constants

You can also use the CompareValidator server control to make sure that the value typed into the form field by a user is valid when compared against a constant, some dynamic value that you retrieve, or that it adheres to a specific data type. Listing 7 shows an example of this.

Listing 7: Checking to make sure value entered is of a specific data type

Age:

<asp:TextBox id="TextBox1" runat="server" MaxLength="3">

</asp:TextBox>

<asp:CompareValidator id="CompareValidator1" runat="server"

ErrorMessage="You must enter a number"

ControlToValidate="TextBox1" Type="Integer"

Operator="DataTypeCheck"></asp:CompareValidator>

In this example, the user must enter an integer in the text box; otherwise, the CompareValidator server control fires and displays an error message on the page. By giving the Type property of the CompareValidator server control a value of Integer, you ensure that the value entered in the text box conforms to this .NET Framework data type.

You also have the option of not only comparing values against specific data types, but also ensuring that values are valid when compared against certain constants (see Listing 8).

Listing 8: Comparing values against constants for validity

Age:

<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>

<asp:CompareValidator id="CompareValidator1" runat="server"

Operator="GreaterThan" ValueToCompare="18"

ControlToValidate="TextBox1" ErrorMessage="You must be older than

18 to join" Type="Integer"></asp:CompareValidator>

In this case, a few checks are made against any value that the user types in the text box. The first is based on the Type property in the CompareValidator server control. The Type property has the value of Integer, therefore any value placed in the text box needs to conform to this .NET Framework data type. If the user enters a string into the text box, the form submission is invalid. The next property is the Operator property. This property has a value of GreaterThan, meaning that for the form submission to be valid, the value entered in the text box has to be greater than the value that is assigned to the ValueToCompare property. For this CompareValidator server control, the ValueToCompare property has a value of 18. This means that the value entered in the text box on the page must be an integer greater than 18. If it does not meet these criteria, the value is considered invalid, and the CompareValidator server control displays an error message in the browser.

In the situation shown in Listing 8, you are not comparing two fields in the form; instead, you are comparing one field against a value that you have specified in code. The Operator property can contain one of the following values:

Equal
NotEqual
GreaterThan
GreaterThanEqual
LessThan
LessThanEqual
DataTypeCheck

The RangeValidator Control

The RangeValidator server control is similar to the CompareValidator server control, but the RangeValidator server control compares what is entered into the form field with two values and makes sure that what was entered by the user is between these two specified values.

For instance, imagine that you have a text box where you want end users to enter their ages. Instead of being greater than or less than a specific constant, you want the values entered to be between a specific range of numbers. For this, you use the RangeValidator server control, as illustrated in Listing 9.

Listing 9: Using the RangeValidator server control to work with a range of numbers

Age:

<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>

<asp:RangeValidator id="RangeValidator1" runat="server"

ControlToValidate="TextBox1" Type="Integer"

ErrorMessage="You must be between 30 and 40"

MaximumValue="40" MinimumValue="30"></asp:RangeValidator>

In this case, the user should enter a value between 30 and 40 in the text box. If some number is entered that is outside of this range, the RangeValidator server control fires an error message and considers the form submission invalid.

The Type property enables you to make comparisons against many different .NET Framework types, such as String, Integer, Double, Date, and Currency. These choices enable you to do a number of range comparisons. For instance, you can use the Currency value in the Type property to retrieve monetary-value entries that are within a certain range. You can also use the Date value for the Type property to make sure that the entry is between specific date ranges.

Also, just as you can use the String data type in the CompareValidator server control, you can use the String data type with the RangeValidator server control to make sure that the value entered falls within a specific range of characters. For example, if the user is entering her last name, and you want only people with last names starting with M and P to proceed, you can easily do this by using the RangeValidator server control, as illustrated in Listing 10.

Listing 10: Comparing an entry to a range of characters

Last name:

<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>

<asp:RangeValidator id="RangeValidator1" runat="server"

ControlToValidate="TextBox1"

ErrorMessage="Your last name needs to be between M and P"

MaximumValue="Q" MinimumValue="M"></asp:RangeValidator>

In the example in Listing 10, the value is being checked against a range that is specified by using the MaximumValue and MinimumValue properties. Notice, in this example, that the Type property is not specified. In this case, it doesn't need to be specified because the default value of the Type property is String. If not specified, it is considered to have the value of String.

The RegularExpressionValidator Control

The RegularExpressionValidator server control is a validation control that enables you to check the user's input based on a pattern defined by a regular expression. This is a great control to check whether the user has entered a valid e-mail address or telephone number. In the past, these kinds of validations took a considerable amount of JavaScript coding. The RegularExpressionValidator control with ASP.NET saves coding time.

In the Properties window for the RegularExpressionValidator server control, click the button in the ValidationExpression box, and Visual Studio.NET provides you with a short list of expressions to use in your form via the Regular Expression Editor. However, you are not limited to these regular expressions in your ASP.NET applications. The list of prepared expressions is shown in Figure 5.

Figure 5: The Regular Expression Editor

For an example of using the RegularExpressionValidator server control to make sure that a value entered in a text box is an e-mail address, look at Listing 11.

Listing 11: Validating an e-mail address

Email:

<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>

<asp:RegularExpressionValidator id="RegularExpressionValidator1"

runat="server" ControlToValidate="TextBox1"

ErrorMessage="You must enter an email address"

ValidationExpression="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">

</asp:RegularExpressionValidator>

In this example, notice that you place the Internet e-mail address regular expression in your ValidationExpression property. The great thing is that it is pretty simple, and it takes hardly any coding. Figure 6 shows the error message that results if a user enters an incorrect e-mail address in the text box.

Figure 6: Validating whether an e-mail address is entered in a text box

Note The e-mail address is checked only to see whether it is in the correct format. The e-mail address is not checked in to ensure that it is an actual e-mail address.

A great place on the Internet to find free regular expressions is the RegEx Library at

Using Images for Your Error Messages

One interesting way of showing your error messages when using validation controls is to use images along with text for identifying errors on your ASP.NET pages. This secret is not limited to the RegularExpressionValidator server control, but can be used with all the validation server controls.

To use an image instead of text for your error messages, you create something similar to the code in Listing 13.

Listing 13: Using images for your validation messages

Email:

<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>

<asp:RegularExpressionValidator id="RegularExpressionValidator1"

runat="server" ControlToValidate="TextBox1"

ErrorMessage='<img src="error.gif">'

ValidationExpression="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">

</asp:RegularExpressionValidator>

To use an image instead of text for your error messages, you use an HTML string that points to the image that you want to display for the value of the ErrorMessage property (see Figure 7).

Figure 7: An image is displayed when the incorrect e-mail address is entered.

The CustomValidator Control

You are not limited to the validation controls that have been shown thus far in this article; you also have the CustomValidator server control. The CustomValidator server control enables you to develop your own custom server-side or client-side validations. At times, you may want to compare the user's input to a value in a database, or to determine whether his input conforms to some arithmetic validation that you are looking for (for instance, if the number is even or odd). You can do all this and more by using this type of validation control.

Client-side Validation

One of the cool things about using the validation controls, in general, is that they allow for client-side validation of certain HTML server controls. As I said, you can create your own JavaScript functions that provide you with a higher level of validation capabilities.

Listing 14 illustrates how to use JavaScript and the CustomValidator server control to expand upon the default validation capabilities that are provided to you with the .NET Framework.

Listing 14: Creating your own client-side validation functions

Visual Basic .NET

<%@ Page Language="VB" %>

Sub Button1_Click(sender As Object, e As EventArgs)

Label1.Text = "VALID NUMBER!"

End Sub

</script>

<html>

<head>

function validateNumber(oSrc, args) {

args.IsValid = (args.Value % 5 == 0);

}

</script>

</head>

<body>

<p>

Number:

<asp:TextBox id="TextBox1"

runat="server"></asp:TextBox>

<asp:CustomValidator id="CustomValidator1"

runat="server" ControlToValidate="TextBox1"

ErrorMessage="Number must be divisible by 5"

ClientValidationFunction="validateNumber">

</asp:CustomValidator>

</p>

<p>

<asp:Button id="Button1" onclick="Button1_Click"

runat="server" Text="Button"></asp:Button>

</p>

<p>

<asp:Label id="Label1" runat="server"></asp:Label>

</p>

</form>

</body>

</html>

Visual C# .NET

<%@ Page Language="C#" %>

void Button1_Click(Object sender, EventArgs e) {

Label1.Text = "VALID NUMBER!";

}

</script>

<html>

<head>

function validateNumber(oSrc, args) {

args.IsValid = (args.Value % 5 == 0);

}

</script>

</head>

<body>

<p>

Number:

<asp:TextBox id="TextBox1"

runat="server"></asp:TextBox>

<asp:CustomValidator id="CustomValidator1"

runat="server" ControlToValidate="TextBox1"

ErrorMessage="Number must be divisible by 5"

ClientValidationFunction="validateNumber">

</asp:CustomValidator>

</p>

<p>

<asp:Button id="Button1" onclick="Button1_Click"

runat="server" Text="Button"></asp:Button>

</p>

<p>

<asp:Label id="Label1" runat="server"></asp:Label>

</p>

</form>

</body>

</html>

The important part of the CustomValidator server control here is the ClientValidationFunction property. The value of this property must be the client-side JavaScript function that is in the page—in this case, the validateNumber function. By simply using this with the ClientValidationFunction property, you have tied the validation process to the custom client-side function that you created, as illustrated in Figure 8.

Figure 8: Performing a custom client-side validation using the CustomValidator server control

You set the args.IsValid property to either True or False in the JavaScript function. The args.Value property is the value from the user that is retrieved from the control that the CustomValidator server control is tied to.

Using the ClientValidationFunction property enables you to incorporate your own JavaScript functions into ASP.NET controls so that they behave like the other validation controls.

Server-side Validation

The other way of performing validation on Web forms using the CustomValidator server control is to use server-side validation. This is just as easy as the client-side validation.

Server-side validation of your Web forms enables you to create rather elaborate validation capabilities. Listing 15 shows you a not-too-elaborate example of server-side checking. Here the code determines whether the number entered in the text box on the ASP.NET page is even.

Listing 15: Creating your own server-side validation functions

Visual Basic .NET

<%@ Page Language="VB" %>

Sub Button1_Click(sender As Object, e As EventArgs)

If Page.IsValid Then

Label1.Text = "VALID ENTRY!"

End If

End Sub

Sub ValidateNumber(sender As Object, args As ServerValidateEventArgs)

Try

Dim num As Integer = Integer.Parse(args.Value)

args.IsValid = ((num mod 5) = 0)

Catch ex As Exception

args.IsValid = false

End Try

End Sub

</script>

<html>

<head>

</head>

<body>

<p>

Number:

<asp:TextBox id="TextBox1"

runat="server"></asp:TextBox>

<asp:CustomValidator id="CustomValidator1"

runat="server" ControlToValidate="TextBox1"

ErrorMessage="Number must be divisible by 5"

OnServerValidate="ValidateNumber"></asp:CustomValidator>

</p>

<p>

<asp:Button id="Button1" onclick="Button1_Click"

runat="server" Text="Button"></asp:Button>

</p>

<p>

<asp:Label id="Label1" runat="server"></asp:Label>

</p>

</form>

</body>

</html>

Visual C# .NET

<%@ Page Language="C#" %>

void Button1_Click(Object sender, EventArgs e) {

if (Page.IsValid) {

Label1.Text = "VALID ENTRY!";

}

void ValidateNumber(object source, ServerValidateEventArgs args)

{

try

{

int num = int.Parse(args.Value);

args.IsValid = ((num%5) == 0);

}

catch(Exception ex)

{

args.IsValid = false;

}

</script>

<html>

<head>

</head>

<body>

<p>

Number:

<asp:TextBox id="TextBox1"

runat="server"></asp:TextBox>

<asp:CustomValidator id="CustomValidator1"

runat="server" ControlToValidate="TextBox1"

ErrorMessage="Number must be even"

OnServerValidate="ValidateNumber"></asp:CustomValidator>

</p>

<p>

<asp:Button id="Button1" onclick="Button1_Click"

runat="server" Text="Button"></asp:Button>

</p>

<p>

<asp:Label id="Label1" runat="server"></asp:Label>

</p>

</form>

</body>

</html>

Performing custom server-side validation with the CustomValidator server controls requires that you use the OnServerValidate property instead of the ClientValidationFunction property. The ClientValidationFunction is used with the CustomValidator server control when working with client-side validation.

In this case, you need to give the OnServerValidate property a value that is equal to the name of the server-side function that you would write in one of the .NET-compliant languages.

Making Validation More Secure

If you are going to use the CustomValidator server control for client-side validation, you should also consider re-evaluating the user's input using a server-side validation function.

It is not too hard for some people to post a form back to your server and bypass or fool the client-side validation. If you re-evaluate the input on the server, you can stop this from occurring, making your ASP.NET applications more secure.

Using the CustomValidator server control to validate the Checkbox server control

If you have been working through the examples so far in this article, note that there wasn't a validation server control in place that was able to validate the CheckBox server control. Don't be too worried. You can use the CustomValidator server control to work through this control. You can use it any time that a validation server control on your page is not using the ControlToValidate property. For an example of this, see Listing 16.

Listing 16: Validating a check box Visual Basic .NET

<%@ Page Language="VB" %>

Sub CustomValidator1_ServerValidate(source As Object, _

args As ServerValidateEventArgs)

args.IsValid = (CheckBox1.Checked = True)

End Sub

Sub Button1_Click(sender As Object, e As EventArgs)

If Page.IsValid Then

Label1.Text = "Thank you for your donation!"

Else

Label1.Text = ""

End If

End Sub

</script>

<html>

<head>

</head>

<body>

<p>

Check checkbox if you want to donate $10

</p>

<p>

<asp:CheckBox id="CheckBox1" runat="server"

Text="Donate $10"></asp:CheckBox>

<asp:CustomValidator id="CustomValidator1"

runat="server" ErrorMessage="Please donate $10"

OnServerValidate="CustomValidator1_ServerValidate">

</asp:CustomValidator>

</p>

<p>

<asp:Button id="Button1" onclick="Button1_Click"

runat="server" Text="Submit"></asp:Button>

</p>

<p>

<asp:Label id="Label1" runat="server"></asp:Label>

</p>

</form>

</body>

</html>

Visual C# .NET

<%@ Page Language="C#" %>

void CustomValidator1_ServerValidate(Object source,

ServerValidateEventArgs args) {

args.IsValid = (CheckBox1.Checked == true);

}

void Button1_Click(Object sender, EventArgs e) {

if (Page.IsValid) {

Label1.Text = "Thank you for your donation!"; }

else {

Label1.Text = "";

}

</script>

<html>

<head>

</head>

<body>

<p>

Check checkbox if you want to donate $10

</p>

<p>

<asp:CheckBox id="CheckBox1" runat="server"

Text="Donate $10"></asp:CheckBox>

<asp:CustomValidator id="CustomValidator1"

runat="server" ErrorMessage="Please donate $10"

OnServerValidate="CustomValidator1_ServerValidate">

</asp:CustomValidator>

</p>

<p>

<asp:Button id="Button1" onclick="Button1_Click"

runat="server" Text="Submit"></asp:Button>

</p>

<p>

<asp:Label id="Label1" runat="server"></asp:Label>

</p>

</form>

</body>

</html>

Note that a CheckBox server control appears on the page. Also notice that there isn't a validation server control on the page that has this CheckBox server control tied to it via any property settings. Instead, a CustomValidator server control on the page references a server-side function called CustomValidator1_ServerValidate.

Within this server-side function, validation performed in the code checks whether the CheckBox server control's Checked property has a value of True (meaning that it is checked). If the value of this property is True, the CustomValidator server control is passed a True value—meaning that the input passed the test.

The CustomValidator server control enables you to do almost any type of validations that you can think of. This is a great control to use if you do any database validations on the input that is entered into a form by a user. This control can also apply any complicated logic that you want to include in the validation process.

The ValidationSummary Control

The ValidationSummary server control works with all the validation server controls on the page. It takes all the error messages that the other validation controls send back to the page and puts them all in one spot (that you specify) on the page. These error messages can be displayed in a list, bulleted list, or paragraph.

Showing a Bulleted List of Errors

You can use the ValidationSummary server control in a number of ways, but the example in Listing 17 shows you how to use it in a simple manner. For this example, two text boxes on the page are associated with a RequiredFieldValidator control. When an error is triggered, not only does it display the error next to the text box itself, it also displays it in a summary at the bottom of the ASP.NET page.

Listing 17: Having a summary of errors appear on the screen

<p>First name

<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>

<asp:RequiredFieldValidator id="RequiredFieldValidator1"

runat="server" ErrorMessage="You must enter your first name"

ControlToValidate="TextBox1"></asp:RequiredFieldValidator>

</p>

<p>Last name

<asp:TextBox id="TextBox2" runat="server"></asp:TextBox>

<asp:RequiredFieldValidator id="RequiredFieldValidator2"

runat="server" ErrorMessage="You must enter your last name"

ControlToValidate="TextBox2"></asp:RequiredFieldValidator>

</p>

<p>

<asp:Button id="Button1" onclick="Button1_Click" runat="server"

Text="Submit"></asp:Button>

</p>

<p>

<asp:ValidationSummary id="ValidationSummary1" runat="server"

HeaderText="You received the following errors:">

</asp:ValidationSummary>

</p>

<p>

<asp:Label id="Label1" runat="server"></asp:Label>

</p>

Using this kind of construct, when the validation server control is triggered, error messages similar to the ones shown in Figure 9 appear on the screen.

Figure 9: Validation errors shown using the ValidationSummary server control

By default, the ValidationSummary server control shows the errors in a bulleted list on the page using red text. You have the option to completely alter how output displays in the browser.

To change how the error messages are displayed, you can change the value of the DisplayMode property of the ValidationSummary control. The possible values of this control can be set to the following:

BulletList
List
SingleParagraph

If you use the BulletList value for the DisplayMode property, it appears as shown in Figure 11. If you use List, it appears without bullets. If you use SingleParagraph, the errors appear in a text area all on one line in a single paragraph.

Showing a Dialog Box Containing Error Notifications

One flexible feature of the ValidationSummary server control is that you can easily show the ASP.NET page's errors in a pop-up dialog box. You have the option of showing the summary in the browser and the dialog box together, or just in the dialog box.

The property that controls whether the message appears in the browser is the ShowSummary property. To turn off the display of validation errors in the browser, set the value of the ShowSummary property to False. To show validation errors in a dialog box, set the ValidationSummary control's ShowMessageBox property to True (see Listing 18).

Listing 18: Showing errors in a dialog box

<asp:ValidationSummary id="ValidationSummary1" runat="server"

ShowMessageBox="True" ShowSummary="False"></asp:ValidationSummary>

This code produces results similar to those in Figure 10.

Figure 10: A dialog box showing the page's validation errors

Understanding the Difference Between the ErrorMessage and Text Properties

In the examples shown so far using the ValidationSummary server control, the error messages were next to the items that were being validated (the RequiredFieldValidator server controls) and were displayed within the ValidationSummary server control. One ideal way of presenting this validation-error information is to have an asterisk (*) appear next to the HTML form fields in question, while the error messages stating what is wrong with the input appear in the list of errors shown within the ValidationSummary control.

To accomplish this, you use the specific validation controls—not the ValidationSummary server control itself. For instance, if there is a RequiredFieldValidator server control validating a text box, you construct this validation control as shown in Listing 19.

Listing 19: Showing text differently than it is displayed in the ValidationSummary server control

<asp:RequiredFieldValidator id="RequiredFieldValidator1"

runat="server" ErrorMessage="You must enter your first name"

ControlToValidate="TextBox1">*</asp:RequiredFieldValidator>

Or:

<asp:RequiredFieldValidator id="RequiredFieldValidator1"

runat="server" ErrorMessage="You must enter your first name"

ControlToValidate="TextBox1" Text="*">

</asp:RequiredFieldValidator>

By constructing the page's validation server controls, as shown here, using different values for the ErrorMessage and Text properties, you get a result similar to that shown in Figure 11.

Figure 11: Using different text for the validation error messages

When both the ErrorMessage and Text properties are used for the validation controls, the value of the ErrorMessage property is displayed in the ValidationSummary server control's listing of validation errors, and the value assigned to the Text property is displayed in the validation control itself.

Conclusion

You can do a lot with validation, far more than this article explains. Validation controls make a developer's life a lot easier. (To develop the same type of functionality in the past, a developer had to sometimes go to extreme JavaScript-coding measures.)

The powerful thing about using these validation controls is that they are easy to implement. Modifying them is a piece of cake, so you can easily check for all sorts of parameters on the input generated from your forms.

Validation and Web controls make an outstanding combination for building smart forms.

About the Author

Bill Evjen is an active proponent of .NET technologies and community-based learning initiatives for .NET. He is a technical director for Reuters, the international news and financial services company based in St. Louis, Missouri. Bill is the founder and executive director of thewhich represents more than 100,000 members worldwide. Bill is also an author and speaker and has written such books as ASP.NET Professional Secrets, XML Web Services for ASP.NET, Web Services Enhancements, and the Visual Basic .NET Bible (all from Wiley).

Validating ASP.NET Server Controls on Asp.Net !

2011-12-07T08:42:00.001-08:00

By Bill Evjen
Reuters

December 2003

Applies to:
    Microsoft® ASP.NET
    Microsoft Visual Basic® .NET
    Microsoft Visual C#® .NET

Introduction

Looking at Validation

Understanding the Difference Between Server-Side and Client-Side Validation

Many people new to ASP.NET don't know the difference between client-side and server-side validation. You must understand these two different ways of validating the data users input into a Web form.

Listing 1: Client-side JavaScript for form validation

<!--

Function CheckForm(form)

{

for(var intCtr = 0; intCtr <= (form.elements.length - 5); ++intCtr)

{

var temp = form.elements[intCtr];

if(temp.type == "text" && temp.value == "")

{

alert("Please Enter All Information!");

temp.focus();

return false;

}

return true;

}

//-->

</script>

.NET to the Rescue!

Presently, six different validation server controls are available for ASP.NET:

RequiredFieldValidator
CompareValidator
RangeValidator
RegularExpressionValidator
CustomValidator
ValidationSummary

Table 1 describes each of the six validation server controls.

Table 1: Available validation server controls

Validation Server Control	Description
RequiredFieldValidator	Ensures that the user does not skip a form entry field
CompareValidator	Allows for comparisons between the user's input and another item using a comparison operator (equals, greater than, less than, and so on)
RangeValidator	Checks the user's input based upon a lower- and upper-level range of numbers or characters
RegularExpressionValidator	Checks that the user's entry matches a pattern defined by a regular expression. This is a good control to use to check e-mail addresses and phone numbers
CustomValidator	Checks the user's entry using custom-coded validation logic
ValidationSummary	Displays all the error messages from the validators in one specific spot on the page

Not all button clicks are equal

For instance, you might have a Cancel or Reset button on the Web page. If the user clicks one of these buttons, you don't want that button click to validate the contents contained in the Web form.

To prevent this, you have to set the CausesValidation property for the control to False.

<asp:Button id="Button1" runat="server" Text="Button"

CausesValidation="False"></asp:Button>

The RequiredFieldValidator Control

Listing 2: Using the RequiredFieldValidator control

Visual Basic .NET

<%@ Page Language="VB" %>

Sub Button1_Click(sender As Object, e As EventArgs)

Label1.Text = "Page is valid!"

End Sub

</script>

<html>

<head>

</head>

<body>

<p>

<asp:TextBox id="TextBox1"

runat="server"></asp:TextBox>

<asp:RequiredFieldValidator

id="RequiredFieldValidator1" runat="server"

ErrorMessage="Required!"

ControlToValidate="TextBox1">

</asp:RequiredFieldValidator>

</p>

<p>

<asp:Button id="Button1" onclick="Button1_Click"

runat="server" Text="Button"></asp:Button>

</p>

<p>

<asp:Label id="Label1" runat="server"></asp:Label>

</p>

</form>

</body>

</html>

Visual C# .NET

<%@ Page Language="C#" %>

void Button1_Click(Object sender, EventArgs e) {

Label1.Text = "Page is valid!";

}

</script>

<html>

<head>

</head>

<body>

<p>

<asp:TextBox id="TextBox1"

runat="server"></asp:TextBox>

<asp:RequiredFieldValidator

id="RequiredFieldValidator1" runat="server"

ErrorMessage="Required!"

ControlToValidate="TextBox1">

</asp:RequiredFieldValidator>

</p>

<p>

<asp:Button id="Button1" onclick="Button1_Click"

runat="server" Text="Button"></asp:Button>

</p>

<p>

<asp:Label id="Label1" runat="server"></asp:Label>

</p>

</form>

</body>

</html>

Run this page and then omit putting a value in the text box. When you click the button, you get a result similar to that shown in Figure 1.

Figure 1: Causing the RequiredFieldValidator server control to fire

<asp:RequiredFieldValidator id="RequiredFieldValidator1"

runat="server" Text="Required!"

ControlToValidate="TextBox1">

</asp:RequiredFieldValidator>

Or you can use the following construct:

<asp:RequiredFieldValidator id="RequiredFieldValidator1"

runat="server" ControlToValidate="TextBox1">

Required!

</asp:RequiredFieldValidator>

<asp:RequiredFieldValidator id="RequiredFieldValidator1"

runat="server" ControlToValidate="TextBox1" BackColor="DarkGray"

BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"

ForeColor="White" Font-Bold="True" Font-Names="Verdana"

Font-Size="X-Small"> Enter something 

</asp:RequiredFieldValidator>

Using code similar to the preceding, you can get a more elaborate result, as shown in Figure 2.

Figure 2: A RequiredFieldValidator control with a little more style

Double-Checking Client-Side Validation

Using the InitialValue Property with a TextBox Server Control

This situation is illustrated in the Listing 3, which shows a TextBox server control with an associated RequiredFieldValidator server control.

Listing 3: A TextBox control with a default value

<asp:TextBox id="TextBox1" runat="server">Hello</asp:TextBox>

<asp:RequiredFieldValidator id="RequiredFieldValidator1"

runat="server" ErrorMessage="Please change value"

ControlToValidate="TextBox1" InitialValue="Hello">

</asp:RequiredFieldValidator>

RequiredFieldValidator1.InitialValue = some value

Requiring a Value Change and Disallowing Empty Values at the Same Time

Listing 4: A single TextBox control with two RequiredFieldValidator controls

<asp:TextBox id="TextBox1" runat="server">Hello</asp:TextBox>

<asp:RequiredFieldValidator id="RequiredFieldValidator1"

runat="server" ErrorMessage="Please change value"

ControlToValidate="TextBox1" InitialValue="Hello">

</asp:RequiredFieldValidator>

<asp:RequiredFieldValidator id="RequiredFieldValidator2"

runat="server" ErrorMessage="Do not leave empty"

ControlToValidate="TextBox1">

</asp:RequiredFieldValidator>

Using the InitialValue Property with a DropDownList Control

Listing 5: Using the RequiredFieldValidator server control with the Drop-DownList server control

<asp:DropDownList id="DropDownList1" runat="server">

<asp:ListItem Selected="True">Select a profession</asp:ListItem>

<asp:ListItem>Programmer</asp:ListItem>

<asp:ListItem>Lawyer</asp:ListItem>

<asp:ListItem>Doctor</asp:ListItem>

<asp:ListItem>Artist</asp:ListItem>

</asp:DropDownList>

<asp:RequiredFieldValidator id="RequiredFieldValidator1"

runat="server" ErrorMessage="Please make a selection"

ControlToValidate="DropDownList1"

InitialValue="Select a profession">

</asp:RequiredFieldValidator>

Figure 3: Validation error based upon the DropDownList control

The CompareValidator Control

Validating Against Other Controls on the Web Form

Listing 6: Using the CompareValidator server control

Visual Basic .NET

<%@ Page Language="VB" %>

Sub Button1_Click(sender As Object, e As EventArgs)

Label1.Text = "Passwords match"

End Sub

</script>

<html>

<head>

</head>

<body>

<p>

Password<br>

<asp:TextBox id="TextBox1" runat="server"

TextMode="Password"></asp:TextBox>

<asp:CompareValidator id="CompareValidator1"

runat="server" ErrorMessage="Passwords do not match!"

ControlToValidate="TextBox2"

ControlToCompare="TextBox1"></asp:CompareValidator>

</p>

<p>

Confirm Password<br>

<asp:TextBox id="TextBox2" runat="server"

TextMode="Password"></asp:TextBox>

</p>

<p>

<asp:Button id="Button1" onclick="Button1_Click"

runat="server" Text="Login"></asp:Button>

</p>

<p>

<asp:Label id="Label1" runat="server"></asp:Label>

</p>

</form>

</body>

</html>

Visual C# .NET

<%@ Page Language="C#" %>

void Button1_Click(Object sender, EventArgs e) {

Label1.Text = "Passwords match";

}

</script>

<html>

<head>

</head>

<body>

<p>

Password<br>

<asp:TextBox id="TextBox1" runat="server"

TextMode="Password"></asp:TextBox>

<asp:CompareValidator id="CompareValidator1"

runat="server" ErrorMessage="Passwords do not match!"

ControlToValidate="TextBox2"

ControlToCompare="TextBox1"></asp:CompareValidator>

</p>

<p>

Confirm Password<br>

<asp:TextBox id="TextBox2" runat="server"

TextMode="Password"></asp:TextBox>

</p>

<p>

<asp:Button id="Button1" onclick="Button1_Click"

runat="server" Text="Login"></asp:Button>

</p>

<p>

<asp:Label id="Label1" runat="server"></asp:Label>

</p>

</form>

</body>

</html>

Figure 4: In this example, the user mistyped the password and got an error message.

Validating Against Constants

Listing 7: Checking to make sure value entered is of a specific data type

Age:

<asp:TextBox id="TextBox1" runat="server" MaxLength="3">

</asp:TextBox>

<asp:CompareValidator id="CompareValidator1" runat="server"

ErrorMessage="You must enter a number"

ControlToValidate="TextBox1" Type="Integer"

Operator="DataTypeCheck"></asp:CompareValidator>

You also have the option of not only comparing values against specific data types, but also ensuring that values are valid when compared against certain constants (see Listing 8).

Listing 8: Comparing values against constants for validity

Age:

<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>

<asp:CompareValidator id="CompareValidator1" runat="server"

Operator="GreaterThan" ValueToCompare="18"

ControlToValidate="TextBox1" ErrorMessage="You must be older than

18 to join" Type="Integer"></asp:CompareValidator>

Equal
NotEqual
GreaterThan
GreaterThanEqual
LessThan
LessThanEqual
DataTypeCheck

The RangeValidator Control

Listing 9: Using the RangeValidator server control to work with a range of numbers

Age:

<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>

<asp:RangeValidator id="RangeValidator1" runat="server"

ControlToValidate="TextBox1" Type="Integer"

ErrorMessage="You must be between 30 and 40"

MaximumValue="40" MinimumValue="30"></asp:RangeValidator>

Listing 10: Comparing an entry to a range of characters

Last name:

<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>

<asp:RangeValidator id="RangeValidator1" runat="server"

ControlToValidate="TextBox1"

ErrorMessage="Your last name needs to be between M and P"

MaximumValue="Q" MinimumValue="M"></asp:RangeValidator>

The RegularExpressionValidator Control

Figure 5: The Regular Expression Editor

For an example of using the RegularExpressionValidator server control to make sure that a value entered in a text box is an e-mail address, look at Listing 11.

Listing 11: Validating an e-mail address

Email:

<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>

<asp:RegularExpressionValidator id="RegularExpressionValidator1"

runat="server" ControlToValidate="TextBox1"

ErrorMessage="You must enter an email address"

ValidationExpression="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">

</asp:RegularExpressionValidator>

Figure 6: Validating whether an e-mail address is entered in a text box

Note The e-mail address is checked only to see whether it is in the correct format. The e-mail address is not checked in to ensure that it is an actual e-mail address.

A great place on the Internet to find free regular expressions is the RegEx Library at

Using Images for Your Error Messages

To use an image instead of text for your error messages, you create something similar to the code in Listing 13.

Listing 13: Using images for your validation messages

Email:

<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>

<asp:RegularExpressionValidator id="RegularExpressionValidator1"

runat="server" ControlToValidate="TextBox1"

ErrorMessage='<img src="error.gif">'

ValidationExpression="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">

</asp:RegularExpressionValidator>

To use an image instead of text for your error messages, you use an HTML string that points to the image that you want to display for the value of the ErrorMessage property (see Figure 7).

Figure 7: An image is displayed when the incorrect e-mail address is entered.

The CustomValidator Control

Client-side Validation

Listing 14 illustrates how to use JavaScript and the CustomValidator server control to expand upon the default validation capabilities that are provided to you with the .NET Framework.

Listing 14: Creating your own client-side validation functions

Visual Basic .NET

<%@ Page Language="VB" %>

Sub Button1_Click(sender As Object, e As EventArgs)

Label1.Text = "VALID NUMBER!"

End Sub

</script>

<html>

<head>

function validateNumber(oSrc, args) {

args.IsValid = (args.Value % 5 == 0);

}

</script>

</head>

<body>

<p>

Number:

<asp:TextBox id="TextBox1"

runat="server"></asp:TextBox>

<asp:CustomValidator id="CustomValidator1"

runat="server" ControlToValidate="TextBox1"

ErrorMessage="Number must be divisible by 5"

ClientValidationFunction="validateNumber">

</asp:CustomValidator>

</p>

<p>

<asp:Button id="Button1" onclick="Button1_Click"

runat="server" Text="Button"></asp:Button>

</p>

<p>

<asp:Label id="Label1" runat="server"></asp:Label>

</p>

</form>

</body>

</html>

Visual C# .NET

<%@ Page Language="C#" %>

void Button1_Click(Object sender, EventArgs e) {

Label1.Text = "VALID NUMBER!";

}

</script>

<html>

<head>

function validateNumber(oSrc, args) {

args.IsValid = (args.Value % 5 == 0);

}

</script>

</head>

<body>

<p>

Number:

<asp:TextBox id="TextBox1"

runat="server"></asp:TextBox>

<asp:CustomValidator id="CustomValidator1"

runat="server" ControlToValidate="TextBox1"

ErrorMessage="Number must be divisible by 5"

ClientValidationFunction="validateNumber">

</asp:CustomValidator>

</p>

<p>

<asp:Button id="Button1" onclick="Button1_Click"

runat="server" Text="Button"></asp:Button>

</p>

<p>

<asp:Label id="Label1" runat="server"></asp:Label>

</p>

</form>

</body>

</html>

Figure 8: Performing a custom client-side validation using the CustomValidator server control

Using the ClientValidationFunction property enables you to incorporate your own JavaScript functions into ASP.NET controls so that they behave like the other validation controls.

Server-side Validation

The other way of performing validation on Web forms using the CustomValidator server control is to use server-side validation. This is just as easy as the client-side validation.

Listing 15: Creating your own server-side validation functions

Visual Basic .NET

<%@ Page Language="VB" %>

Sub Button1_Click(sender As Object, e As EventArgs)

If Page.IsValid Then

Label1.Text = "VALID ENTRY!"

End If

End Sub

Sub ValidateNumber(sender As Object, args As ServerValidateEventArgs)

Try

Dim num As Integer = Integer.Parse(args.Value)

args.IsValid = ((num mod 5) = 0)

Catch ex As Exception

args.IsValid = false

End Try

End Sub

</script>

<html>

<head>

</head>

<body>

<p>

Number:

<asp:TextBox id="TextBox1"

runat="server"></asp:TextBox>

<asp:CustomValidator id="CustomValidator1"

runat="server" ControlToValidate="TextBox1"

ErrorMessage="Number must be divisible by 5"

OnServerValidate="ValidateNumber"></asp:CustomValidator>

</p>

<p>

<asp:Button id="Button1" onclick="Button1_Click"

runat="server" Text="Button"></asp:Button>

</p>

<p>

<asp:Label id="Label1" runat="server"></asp:Label>

</p>

</form>

</body>

</html>

Visual C# .NET

<%@ Page Language="C#" %>

void Button1_Click(Object sender, EventArgs e) {

if (Page.IsValid) {

Label1.Text = "VALID ENTRY!";

}

void ValidateNumber(object source, ServerValidateEventArgs args)

{

try

{

int num = int.Parse(args.Value);

args.IsValid = ((num%5) == 0);

}

catch(Exception ex)

{

args.IsValid = false;

}

</script>

<html>

<head>

</head>

<body>

<p>

Number:

<asp:TextBox id="TextBox1"

runat="server"></asp:TextBox>

<asp:CustomValidator id="CustomValidator1"

runat="server" ControlToValidate="TextBox1"

ErrorMessage="Number must be even"

OnServerValidate="ValidateNumber"></asp:CustomValidator>

</p>

<p>

<asp:Button id="Button1" onclick="Button1_Click"

runat="server" Text="Button"></asp:Button>

</p>

<p>

<asp:Label id="Label1" runat="server"></asp:Label>

</p>

</form>

</body>

</html>

In this case, you need to give the OnServerValidate property a value that is equal to the name of the server-side function that you would write in one of the .NET-compliant languages.

Making Validation More Secure

If you are going to use the CustomValidator server control for client-side validation, you should also consider re-evaluating the user's input using a server-side validation function.

Using the CustomValidator server control to validate the Checkbox server control

Listing 16: Validating a check box Visual Basic .NET

<%@ Page Language="VB" %>

Sub CustomValidator1_ServerValidate(source As Object, _

args As ServerValidateEventArgs)

args.IsValid = (CheckBox1.Checked = True)

End Sub

Sub Button1_Click(sender As Object, e As EventArgs)

If Page.IsValid Then

Label1.Text = "Thank you for your donation!"

Else

Label1.Text = ""

End If

End Sub

</script>

<html>

<head>

</head>

<body>

<p>

Check checkbox if you want to donate $10

</p>

<p>

<asp:CheckBox id="CheckBox1" runat="server"

Text="Donate $10"></asp:CheckBox>

<asp:CustomValidator id="CustomValidator1"

runat="server" ErrorMessage="Please donate $10"

OnServerValidate="CustomValidator1_ServerValidate">

</asp:CustomValidator>

</p>

<p>

<asp:Button id="Button1" onclick="Button1_Click"

runat="server" Text="Submit"></asp:Button>

</p>

<p>

<asp:Label id="Label1" runat="server"></asp:Label>

</p>

</form>

</body>

</html>

Visual C# .NET

<%@ Page Language="C#" %>

void CustomValidator1_ServerValidate(Object source,

ServerValidateEventArgs args) {

args.IsValid = (CheckBox1.Checked == true);

}

void Button1_Click(Object sender, EventArgs e) {

if (Page.IsValid) {

Label1.Text = "Thank you for your donation!"; }

else {

Label1.Text = "";

}

</script>

<html>

<head>

</head>

<body>

<p>

Check checkbox if you want to donate $10

</p>

<p>

<asp:CheckBox id="CheckBox1" runat="server"

Text="Donate $10"></asp:CheckBox>

<asp:CustomValidator id="CustomValidator1"

runat="server" ErrorMessage="Please donate $10"

OnServerValidate="CustomValidator1_ServerValidate">

</asp:CustomValidator>

</p>

<p>

<asp:Button id="Button1" onclick="Button1_Click"

runat="server" Text="Submit"></asp:Button>

</p>

<p>

<asp:Label id="Label1" runat="server"></asp:Label>

</p>

</form>

</body>

</html>

The ValidationSummary Control

Showing a Bulleted List of Errors

Listing 17: Having a summary of errors appear on the screen

<p>First name

<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>

<asp:RequiredFieldValidator id="RequiredFieldValidator1"

runat="server" ErrorMessage="You must enter your first name"

ControlToValidate="TextBox1"></asp:RequiredFieldValidator>

</p>

<p>Last name

<asp:TextBox id="TextBox2" runat="server"></asp:TextBox>

<asp:RequiredFieldValidator id="RequiredFieldValidator2"

runat="server" ErrorMessage="You must enter your last name"

ControlToValidate="TextBox2"></asp:RequiredFieldValidator>

</p>

<p>

<asp:Button id="Button1" onclick="Button1_Click" runat="server"

Text="Submit"></asp:Button>

</p>

<p>

<asp:ValidationSummary id="ValidationSummary1" runat="server"

HeaderText="You received the following errors:">

</asp:ValidationSummary>

</p>

<p>

<asp:Label id="Label1" runat="server"></asp:Label>

</p>

Using this kind of construct, when the validation server control is triggered, error messages similar to the ones shown in Figure 9 appear on the screen.

Figure 9: Validation errors shown using the ValidationSummary server control

By default, the ValidationSummary server control shows the errors in a bulleted list on the page using red text. You have the option to completely alter how output displays in the browser.

To change how the error messages are displayed, you can change the value of the DisplayMode property of the ValidationSummary control. The possible values of this control can be set to the following:

BulletList
List
SingleParagraph

Showing a Dialog Box Containing Error Notifications

Listing 18: Showing errors in a dialog box

<asp:ValidationSummary id="ValidationSummary1" runat="server"

ShowMessageBox="True" ShowSummary="False"></asp:ValidationSummary>

This code produces results similar to those in Figure 10.

Figure 10: A dialog box showing the page's validation errors

Understanding the Difference Between the ErrorMessage and Text Properties

Listing 19: Showing text differently than it is displayed in the ValidationSummary server control

<asp:RequiredFieldValidator id="RequiredFieldValidator1"

runat="server" ErrorMessage="You must enter your first name"

ControlToValidate="TextBox1">*</asp:RequiredFieldValidator>

Or:

<asp:RequiredFieldValidator id="RequiredFieldValidator1"

runat="server" ErrorMessage="You must enter your first name"

ControlToValidate="TextBox1" Text="*">

</asp:RequiredFieldValidator>

By constructing the page's validation server controls, as shown here, using different values for the ErrorMessage and Text properties, you get a result similar to that shown in Figure 11.

Figure 11: Using different text for the validation error messages

Conclusion

Validation and Web controls make an outstanding combination for building smart forms.

About the Author

SQL Server 2008 SP3 and HP Database Enterprise Appliance on ASP.NET !

2011-12-07T08:15:00.000-08:00

The list of updated features begins with an overall improved upgrading experience from SQL Server’s older versions to the latest SQL Server 2008 SP3 edition. Microsoft has implemented measures that provide enhanced performance and reliability while making the upgrade as well. Logs in SQL Server Integration Services will display the aggregate number of rows transmitted in Data Flows, and enabling the Shrink Database option will produce enhanced warning messages when maintenance plan development takes place.
Microsoft’s blog post continues with the list of SP3 upgrades, noting that users should see improvements when using Sequence Functions in a Parallel execution plan. Query outcomes are optimized when the indexed Spatial Data Type column is referenced by the Database Tuning Advisor too. Lastly, SP3 includes a fix to a recurring database problem when transparent data encryption is enabled and now supplies availability should the certificate be dropped.
You can download SQL Server 2008 SP3 in its standard or Express version plus its Feature Pack via the Microsoft Download Center. The Feature Pack is described as a set of standalone install packages that enhance the SQL Server 2008 SP3 experience. Microsoft is offering the upgrades free of charge to its customers.

Microsoft Teams with HP for SQL Server Appliance
Last week’s Microsoft Pass Summit 2011 was the setting for the announcement that Microsoft would team up with HP to release the HP Enterprise Database Consolidation Appliance for SQL Server. The appliance will become available in November, and it promises to offer the rapid deployment and consolidated management of numerous database instances in a virtualized private cloud environment.
Microsoft touts the HP Enterprise Database Consolidation Appliance as an industry first. Such a claim comes from the fact that it can use integrated database migration and management tools to supply database consolidation without having to incur any application or database changes. Customers will be able experience the deployment of new database instances within minutes. The appliance offers several cost-cutting advantages over more traditional database deployments as well. In fact, Microsoft stated that the elimination of the need for conventional infrastructure, floor space, high energy usage, and more could translate into a savings of up to 75 percent in operational costs.
Although Microsoft referred to the HP Enterprise Database Consolidation Appliance as the first in its class, it appears to be obvious that it is being released to rival Oracle’s Exadata, a database machine that currently has over 1,000 deployments. Oracle’s competitors claim that most of Exadata’s deployments have been used for consolidation in transactional environments, but it can also be configured for data warehousing. According to InformationWeek, “The HP Enterprise Database Consolidation Appliance is essentially the transactional-side counterpart to the HP Enterprise Data Warehouse Appliance, which was introduced early this year and runs Microsoft's SQL Server 2008 R2 Parallel Data Warehouse.”
The HP Enterprise Database Consolidation Appliance will be offered in two configurations to suit varying needs. The full rack configuration comes equipped with 400 hard drives, a 58 terabyte storage capacity, 192 logical processors, and 2 terabytes of RAM. A half rack configuration will be available as well. A host of software will be included in each package, beginning with various configuration, testing, and management tools. Microsoft will also supply clients with SQL Server Enterprise Edition, Windows Server Datacenter 2008 R2, and Database Consolidation 2012. Included virtualization templates should help users rapidly deploy database instances of different sizes with ease.
As for compatibility, Microsoft assured its followers that the appliance will work with SQL versions supported by Hyper-V, both old and new, including next year’s upcoming SQL Server 2012. Details on pricing have not yet been released.
The Pass Summit 2011 was not used solely as a springboard for Microsoft’s announcement on its upcoming consolidation appliance project with HP, as the company also offered up other SQL-related news. A Windows-specific distribution of Hadoop will become available in the future, as well as Microsoft’s SQL Azure Hadoop and SQL Azure Federation cloud-based database services. Both Azure services will reportedly be released before 2012.
Beyond the announcements of future releases, the immediate availability of a pair of community technology previews (CTP) was also revealed. First up was the SQL Azure Reporting service that puts Microsoft business intelligence tools in developers’ hands for the creation and deployment of app- or browser-embeddable reports. The second service revealed, SQL Azure Data Sync, allows users to synchronize both on-premise SQL Server and SQL Azure databases in the cloud.

.NET LinkButton web control on ASP.NET !

2011-12-07T08:10:00.000-08:00

A web developer is routinely faced with the challenge of knowing which link was clicked. The typical solution involves passing information on the querystring in the clear, like this: "GetProduct.asp?ID=3762". A key benefit of the LinkButton web control is the power to know which link was clicked by using POST rather than GET. This is accomplished by setting 2 properties on the LinkButton: CommandName and CommandArgument. These properties are passed into the onCommand event when the user clicks a LinkButton. In the event handler for onCommand, the CommandName and CommandArgument properties can be evaluated in CommandEventArgs. Because this all takes place in the POST, the querystring is shorter and the postback data is hidden. Let's begin by looking at some code. First, a "mini" database of products is created in the code using two instances of System.Collection.Hashtable. One hashtable stores the ProductId and ProductTitle, and the other hashtable stores the ProductId and ProductDescription. The two Hashtables are related by the ProductId. This technique is OK for demonstration purposes; however, there are cleaner ways to accomplish this.



Hashtable hashProductName = new Hashtable();

    Hashtable hashProductDesc = new Hashtable();

void BuildMiniDatabase()

    {

        hashProductName[0] = "Jalapeno Dip" ;

        hashProductDesc[0] = "Simmered in mayonaise and wine, this Jalapeno Dip will make your eyes water" ;



        hashProductName[1] = "Smoked Sausage" ;

        hashProductDesc[1] = "Mouth watering and delicious sausage" ;



        hashProductName[2] = "Shrimp Fiesta" ;

        hashProductDesc[2] = "East Coast's finest shrimp" ;



        hashProductName[3] = "Jerk Chicken" ;

        hashProductDesc[3] = "A real island experience you will not forget" ;



        hashProductName[4] = "Beer-Battered Fish" ;

        hashProductDesc[4] = "Pabst Blue Ribbon and Fish. Wow!" ;



        hashProductName[5] = "Bacon Burger" ;

        hashProductDesc[5] = "Big, juicy, and bursting with flavor" ;



        hashProductName[6] = "Sirloin Tip" ;

        hashProductDesc[6] = "Delicate cuts with no fat" ;



        hashProductName[7] = "Baked Alaska" ;

        hashProductDesc[7] = "Fine dessert comprised of sponge cake topped with ice cream and covered with meringue. The meringue is browned before the ice cream can melt." ;



        hashProductName[8] = "Fried Chicken" ;

        hashProductDesc[8] = "Country cookin'" ;



        hashProductName[9] = "Fresh Garden Salad" ;

        hashProductDesc[9] = "Crispy iceberg lettuce and a garden of vegtables" ;



        hashProductName[10] = "One Pea" ;

        hashProductDesc[10] = "A single green pea that will leave you craving more" ;



    }

Next, the web page layout is very basic. Inside a form, a table is built with 2 columns. The left side cell will hold the product links. The right cell will display the product description.



<body>

<form id="MainForm" method="post" runat="server" >

<asp:Table CellPadding=6 CellSpacing=2 BorderColor="#DDDDDD" BorderStyle=Solid BorderWidth=2 Runat=server>

<asp:TableRow Runat=server>

  <asp:TableCell id=LinkList Wrap=False BackColor="#FFFFFF" Runat=server/>

  <asp:TableCell id="tablecellMessage" CssClass="ProductDesc" Runat=server></asp:TableCell>

</asp:TableRow>

</asp:Table>

</form>

</body>

Now that the web page is designed, the LinkButtons can be added. The LinkButtons are added dynamically using code. The System.Web.UI.WebControls.LinkButton control is instantiated and assigned to _LB1. The Text property is used for rendering the hyperlink label. That is, the text that sits between . The CommandName and CommandArgument are what's it all about. Use the CommandArgument property to specify an argument that complements the CommandName property. What might have been placed on the querystring, will now simply be assigned in the CommandName and/or CommandArgument properties. In my example, I'm really just using the CommandArgument property for storing the ProductId of each product link. The CommandName is used to identify my grouping of links which happen to be the same - they're all products.



void BuildLinkList()

    {

        for (int i=1; i<=10; i++)

        {

            LinkButton _LB1 = new LinkButton();

            _LB1.Text = hashProductName[i].ToString();

            _LB1.CssClass = "ProductLinks";

            _LB1.CommandName = "Products";

            _LB1.CommandArgument = i.ToString() ;

The onCommand event is fired when a user clicks a LinkButton. Because my LinkButtons are added programatically, I need to wire the onCommand event to the control and assign it to the OnLinkClick event handler.



           _LB1.Command += new System.Web.UI.WebControls.CommandEventHandler(OnLinkClick);



            LinkList.Controls.Add(_LB1);

            LinkList.Controls.Add(new LiteralControl("

"));

When the user clicks a product link, the OnLinkClick event handler will determine which link was clicked, get the ProductId from the CommandArgument property, retrieve the ProductDescription from the mini database, and display the result on the web page.



    void OnLinkClick(object O, System.Web.UI.WebControls.CommandEventArgs E)

    {

        int RecordId = Int32.Parse(E.CommandArgument.ToString());

        tablecellMessage.Text = "<b>" + hashProductName[RecordId].ToString() + "</b>

<i>" + hashProductDesc[RecordId].ToString() + "</i>";

    }

The LinkButton web control will most likely become a fundamental part of your ASP.Net programming.

Validate uploaded image content in ASP.NET www.aspdotnetweb.blogspot.com !

2011-11-23T10:20:00.000-08:00

A very few day ago i had to face the situation where hacker uploaded the malicious ASP script to the web server by changing its extension to .JPG through user interface which allow user to upload image file. Although developer team had put the validation on extension. But unfortunately extension of ASP script was .JPG and hence it is allowed extension. So hacker could upload that malicious script.

After this situation i thought just checking only extension for uploaded file is not the sufficient. We need to check content as well of the uploaded file.

So i decided to check header information in uploaded image file. If it found valid header information then only save uploaded file otherwise discard uploaded file. After Digging couple of hour on

Image File Header Information Table
File Format	Offset	Length	Value
JPG / JPEG	0	4	0xFF, 0xD8, 0xFF, 0xE0
PNG	0	4	0x89, 0x50, 0x4E, 0x47
TIF / TIFF	0	4	0x49, 0x49, 0x2A, 0x00
GIF	0	4	0x47, 0x49, 0x46, 0x38
BMP	0	2	0x42, 0x4D
ICO	0	4	0x00, 0x00, 0x01, 0x00

Instead of checking only header, we could also check whole file content against its file format. But checking only header could serve our purpose and it is also speedy process than checking whole file content so i am not checking whole file content.

Following code snippet validate header of known image types (JPG, PNG, TIFF, GIF, BMP, ICO) Please do let me know if i have missed any image types.

NOTE: In code snippet fuImage refer to ASP.NET file upload control

--------------------------------------------------------------------------------------------------------------------------

`01`	`protected` `void` `btnUpload_Click(object` `sender, EventArgs e)`

02 {

`03`	`// DICTIONARY OF ALL IMAGE FILE HEADER`

`04`	`Dictionary<string,` `byte[]> imageHeader =` `new` `Dictionary<string,` `byte[]>();`

`05`	`imageHeader.Add("JPG",` `new` `byte[] { 0xFF, 0xD8, 0xFF, 0xE0 });`

`06`	`imageHeader.Add("JPEG",` `new` `byte[] { 0xFF, 0xD8, 0xFF, 0xE0 });`

`07`	`imageHeader.Add("PNG",` `new` `byte[] { 0x89, 0x50, 0x4E, 0x47 });`

`08`	`imageHeader.Add("TIF",` `new` `byte[] { 0x49, 0x49, 0x2A, 0x00 });`

`09`	`imageHeader.Add("TIFF",` `new` `byte[] { 0x49, 0x49, 0x2A, 0x00 });`

`10`	`imageHeader.Add("GIF",` `new` `byte[] { 0x47, 0x49, 0x46, 0x38 });`

`11`	`imageHeader.Add("BMP",` `new` `byte[] { 0x42, 0x4D });`

`12`	`imageHeader.Add("ICO",` `new` `byte[] { 0x00, 0x00, 0x01, 0x00 });`

13

`14`	`byte[] header;`

`15`	`if` `(fuImage.HasFile)`

16 {

`17`	`// GET FILE EXTENSION`

`18`	`string` `fileExt;`

`19`	`fileExt = fuImage.FileName.Substring(fuImage.FileName.LastIndexOf('.') + 1).ToUpper();`

20

`21`	`// CUSTOM VALIDATION GOES HERE BASED ON FILE EXTENSION IF ANY`

22

`23`	`byte[] tmp = imageHeader[fileExt];`

`24`	`header =` `new` `byte[tmp.Length];`

25

`26`	`// GET HEADER INFORMATION OF UPLOADED FILE`

`27`	`fuImage.FileContent.Read(header, 0, header.Length);`

28

`29`	`if` `(CompareArray(tmp, header))`

30 {

`31`	`lblMessage.Text =` `"Valid ."` `+ fileExt +` `" file.";`

`32`	`// VALID HEADER INFORMATION`

`33`	`// CODE TO PROCESS FILE`

34 }

35 else

36 {

`37`	`lblMessage.Text =` `"Invalid ."` `+ fileExt +` `" file.";`

`38`	`// INVALID HEADER INFORMATION`

39 }

40 }

41 else

42 {

`43`	`lblMessage.Text =` `"Please select image file.";`

44 }

45 }

46

`47`	`private` `bool` `CompareArray(byte[] a1,` `byte[] a2)`

48 {

`49`	`if` `(a1.Length != a2.Length)`

`50`	`return` `false;`

51

`52`	`for` `(int` `i = 0; i < a1.Length; i++)`

53 {

`54`	`if` `(a1[i] != a2[i])`

`55`	`return` `false;`

56 }

57

`58`	`return` `true;`

59 }

------------------------------------------------------------------------------------------------------------------------------

Upload picture, resize and save in SQL database www.aspdotnetweb.blogspot.com !

2011-11-23T10:07:00.000-08:00

I have been looking for a solution for this all over the web and it took me a couple of hours to figure it out. Finally I did it. So, here's my code to upload a picture file using the fileupload control, resize the file and then store it to a SQL Server database.

----------------------------------------------------------------------

  If FleUpload.HasFile Then
            Dim fileName As String = Server.HtmlEncode(FleUpload.FileName)
            Dim extension As String = System.IO.Path.GetExtension(fileName)
            If (extension.ToUpper = ".JPG") Or (extension.ToUpper = ".GIF") Then

                '**** Resize image section ****
                Dim image_file As System.Drawing.Image = System.Drawing.Image.FromStream(FleUpload.PostedFile.InputStream)
                Dim image_height As Integer = image_file.Height
                Dim image_width As Integer = image_file.Width
                Dim max_height As Integer = 120
                Dim max_width As Integer = 160


                image_height = (image_height * max_width) / image_width
                image_width = max_width

                If image_height > max_height Then
                    image_width = (image_width * max_height) / image_height
                    image_height = max_height
                Else
                End If


                Dim bitmap_file As New Bitmap(image_file, image_width, image_height)
                Dim stream As New System.IO.MemoryStream

                bitmap_file.Save(stream, System.Drawing.Imaging.ImageFormat.Jpeg)
                stream.Position = 0

                Dim data(stream.Length) As Byte
                stream.Read(data, 0, stream.Length)
                '**** End resize image section ****


                Dim myConn As New SqlConnection(ConfigurationManager.ConnectionStrings("cs").ConnectionString)
                Dim mycmd As New SqlCommand("se_equipmentimages_insert", myConn)
                mycmd.CommandType = CommandType.StoredProcedure

                mycmd.Parameters.AddWithValue("@equipment_id", id)
                mycmd.Parameters.AddWithValue("@image_file", data)

                Try
                    myConn.Open()
                    mycmd.ExecuteNonQuery()
                Catch ex As Exception
                Finally
                    myConn.Close()
                End Try

            Else
                lblError.Text = "Please only upload .jpg or .gif files"
                lblError.Visible = True
            End If
        Else
            lblError.Text = "No file selected"
            lblError.Visible = True
        End If

------------------------------------------------------------------------

EDIT: I found an online converter so not sure if this code would work, 
but could you please tell me where I am supposed to start the if 
statement?

------------------------------------------------------------------------

{
    if (FleUpload.HasFile) {
        string fileName = Server.HtmlEncode(FleUpload.FileName);
        string extension = System.IO.Path.GetExtension(fileName);
        if ((extension.ToUpper == ".JPG") | (extension.ToUpper == ".GIF")) {
            
            //**** Resize image section ****
            System.Drawing.Image image_file = System.Drawing.Image.FromStream(FleUpload.PostedFile.InputStream);
            int image_height = image_file.Height;
            int image_width = image_file.Width;
            int max_height = 120;
            int max_width = 160;
            
            
            image_height = (image_height * max_width) / image_width;
            image_width = max_width;
            
            if (image_height > max_height) {
                image_width = (image_width * max_height) / image_height;
                image_height = max_height;
            }
            else {
            }
            
            
            Bitmap bitmap_file = new Bitmap(image_file, image_width, image_height);
            System.IO.MemoryStream stream = new System.IO.MemoryStream();
            
            bitmap_file.Save(stream, System.Drawing.Imaging.ImageFormat.Jpeg);
            stream.Position = 0;
            
            byte[] data = new byte[stream.Length + 1];
            stream.Read(data, 0, stream.Length);
            //**** End resize image section ****
            
            
            SqlConnection myConn = new SqlConnection(ConfigurationManager.ConnectionStrings("cs").ConnectionString);
            SqlCommand mycmd = new SqlCommand("se_equipmentimages_insert", myConn);
            mycmd.CommandType = CommandType.StoredProcedure;
            
            mycmd.Parameters.AddWithValue("@equipment_id", id);
            mycmd.Parameters.AddWithValue("@image_file", data);
            
            try {
                myConn.Open();
                mycmd.ExecuteNonQuery();
            }
            catch (Exception ex) {
            }
            finally {
                myConn.Close();
                
            }
        }
        else {
            lblError.Text = "Please only upload .jpg or .gif files";
            lblError.Visible = true;
        }
    }
    else {
        lblError.Text = "No file selected";
        lblError.Visible = true;
    }
}

---------------------------------------------------------------------------

Uploading images via .NET www.aspdotnetweb.blogspot.com !

2011-11-23T10:01:00.000-08:00

Previously, adding the ability to upload images via ASP (with sizing, thumbnail features, etc.) would have required the use of an external component. With the advent of .NET, the ability to handle images can be done easily and freely through the use of the Bitmap and Image classes.

In this tutorial, we will be going through the steps of creating a simple web form in which you can upload an image file, and the form will verify whether it�
s a JPEG file, whether there are duplicate files already (and rename your uploaded file if necessary), and create a thumbnail of the file uploaded.

This tutorial already assumes a basic knowledge of .NET Web Forms and C#.
By the way, some credit goes to Rajesh Sitapara for his code on uploading. If you need to upload the image into a DB, then look at his article.

Create a new web application project.
Open up the web form.
Add a File field from the HTML tab onto your form, and convert it into a server control. In this example, the file field will be named filUpload.
(To convert any HTML tag into a server control, right click on it and select Run As Server Control.)
Switch to HTML view and add/alter the enctype attribute of the form tag to multipart/form-data.
Example: enctype="multipart/form-data"
Add a Web Form Button onto the form, and name it btnUpload.
Add a folder called /images to the web application.
Add a Web Form Image onto the form, and name it imgPicture. Adjust the width to 160 and height to 120.
Add a Label called lblOutput. This will return any errors if the upload happens to fail.
In the btnUpload Click event, add the following code.
(If you want to analyze the code in detail below, it's better to copy and paste into the VS.NET IDE since some of the lines are long.)

--------------------------------------------------------------------------------------------------------------------------

private void btnUpload_Click(object sender, System.EventArgs e)
{
    // Initialize variables

    string sSavePath;
    string sThumbExtension;
    int intThumbWidth;
    int intThumbHeight;

    // Set constant values

    sSavePath = "images/";
    sThumbExtension = "_thumb";
    intThumbWidth = 160;
    intThumbHeight = 120;

    // If file field isn�t empty

    if (filUpload.PostedFile != null)
    {
        // Check file size (mustn�t be 0)

        HttpPostedFile myFile = filUpload.PostedFile;
        int nFileLen = myFile.ContentLength;
        if (nFileLen == 0)
        {
            lblOutput.Text = "No file was uploaded.";
            return;
        }

        // Check file extension (must be JPG)

        if (System.IO.Path.GetExtension(myFile.FileName).ToLower() != ".jpg")
        {
            lblOutput.Text = "The file must have an extension of JPG";
            return;
        }

        // Read file into a data stream

        byte[] myData = new Byte[nFileLen];
        myFile.InputStream.Read(myData,0,nFileLen);

        // Make sure a duplicate file doesn�t exist.  If it does, keep on appending an 

        // incremental numeric until it is unique

        string sFilename = System.IO.Path.GetFileName(myFile.FileName);
        int file_append = 0;
        while (System.IO.File.Exists(Server.MapPath(sSavePath + sFilename)))
        {
            file_append++;
            sFilename = System.IO.Path.GetFileNameWithoutExtension(myFile.FileName)
                             + file_append.ToString() + ".jpg";
        }

        // Save the stream to disk

        System.IO.FileStream newFile
                = new System.IO.FileStream(Server.MapPath(sSavePath + sFilename), 
                                           System.IO.FileMode.Create);
        newFile.Write(myData,0, myData.Length);
        newFile.Close();

        // Check whether the file is really a JPEG by opening it

        System.Drawing.Image.GetThumbnailImageAbort myCallBack = 
                       new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback);
        Bitmap myBitmap;
        try
        {
            myBitmap = new Bitmap(Server.MapPath(sSavePath + sFilename));

            // If jpg file is a jpeg, create a thumbnail filename that is unique.

            file_append = 0;
            string sThumbFile = System.IO.Path.GetFileNameWithoutExtension(myFile.FileName)
                                                     + sThumbExtension + ".jpg";
            while (System.IO.File.Exists(Server.MapPath(sSavePath + sThumbFile)))
            {
                file_append++;
                sThumbFile = System.IO.Path.GetFileNameWithoutExtension(myFile.FileName) + 
                               file_append.ToString() + sThumbExtension + ".jpg";
            }

            // Save thumbnail and output it onto the webpage

            System.Drawing.Image myThumbnail
                    = myBitmap.GetThumbnailImage(intThumbWidth, 
                                                 intThumbHeight, myCallBack, IntPtr.Zero);
            myThumbnail.Save (Server.MapPath(sSavePath + sThumbFile));
            imgPicture.ImageUrl = sSavePath + sThumbFile;

            // Displaying success information

            lblOutput.Text = "File uploaded successfully!";

            // Destroy objects

            myThumbnail.Dispose();
            myBitmap.Dispose();
        }
        catch (ArgumentException errArgument)
        {
            // The file wasn't a valid jpg file

            lblOutput.Text = "The file wasn't a valid jpg file.";
            System.IO.File.Delete(Server.MapPath(sSavePath + sFilename));
        }
    }
}

public bool ThumbnailCallback()
{
    return false;
}

Run the webpage, and test with JPG files and other files to test the error-checking mechanism.
If you have any problems/suggestions, please leave a message below. :-)

How to Upload an Image Using ASP.NET www.aspdotnetweb.blogspot.com !

2011-11-23T09:54:00.000-08:00

This article is for beginners who want to learn how to upload images.

Step 1:-

<input id="Upload" style="Z-INDEX: 102; LEFT: 104px; WIDTH: 288px; 
  POSITION: absolute; TOP: 64px; HEIGHT: 22px" type="file" 
  size="28" name="Upload" runat="server">

--------------------------------------------------------------------------------------
This control will upload your image.

Step 2 :-

Create a Button called "Upload" and another called "LoadImage". Add the DataGrid and do required bindings.

Step 3 :-

Lets see some sample code now.

----------------------------------------------------------------------------------------------------------------------------

private void Button1_Click(object sender, System.EventArgs e)
    {
        //It verifies if the archive exists 

        if (Upload.PostedFile != null)
        {
            //To create a PostedFile

            HttpPostedFile File = Upload.PostedFile;

            //Create byte Array with file len

            byte[] Data = new Byte[File.ContentLength];
            //force the control to load data in array

            File.InputStream.Read(Data,0,File.ContentLength);
                
            int i = 0;

            //Dysplay array data in textbox

            for (i=0;i<Data.Length;i++)
            {
                TextBox1.Text += Data[i].ToString();  
            }

            //Create procedure parameter

            object[] obj = new object[1]; 

            obj[0] = Data;

            //Execute the procedure with Microsoft.ApplicationBlocks.Data

            //Simple procedure

            /*CREATE PROCEDURE sp_img(@img image)  AS

            insert into tb_img values(@img)*/

            //record data

            SqlHelper.ExecuteNonQuery(connectionString,"sp_img",obj);       

        }
    }

    private void Button2_Click(object sender, System.EventArgs e)
    {
        //Bind data to your grid

        //more details consulting

        //Working DataGrid TemplateColumns and Bind this Columns 

        DataSet ds = SqlHelper.ExecuteDataset(connectionString,
            "sp_load_img",null);
        grid.DataSource  = ds.Tables[0].DefaultView;
        grid.ObjectName = "Image1";
        grid.FieldName = "img";
        grid.Editable = false;
        grid.DataBind();
        grid.DataBindObjects(grid,ds,0,grid.PageSize);  

        int i =0;

        for (i=0;i<ds.Tables[0].Rows.Count;i++)
        {
                        //test your bitmap is valid 

                        //Demonstration

            byte[] bits = (byte[]) ds.Tables[0].Rows[i]
                ["img"];  
            MemoryStream memorybits = new MemoryStream(bits);
            Bitmap bitmap = new Bitmap(memorybits);
        }

 
    }

    private void grid_PageIndexChanged(object source, 
           System.Web.UI.WebControls.DataGridPageChangedEventArgs e)
    {
        //Page your grid

        //Bind data to your grid

        //more details consulting

        //Working DataGrid TemplateColumns and Bind this Columns 

        grid.CurrentPageIndex =e.NewPageIndex; 
        DataSet ds = SqlHelper.ExecuteDataset(connectionString,
            "sp_load_img",null);
        grid.DataSource  = ds.Tables[0].DefaultView;
        grid.ObjectName = "Image1";
        grid.FieldName = "img";
        grid.Editable = false;
        grid.DataBind();
        grid.DataBindObjects(grid,ds,e.NewPageIndex,grid.PageSize);  
        
    }
}

-------------------------------------------------------------------------------------------

Google Plus +1 Button How to add Google +1 Button to a Website

2011-09-01T11:15:00.000-07:00

This code is 15 px size google pluse Button !

<g:plusone size="small" annotation="inline" href="http://aspdotnetweb.blogspot.com/"></g:plusone>


<script type="text/javascript">
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
This code copy and past your site !
--------------------------------------

This code is 60 px size google pluse Button !

<g:plusone size="tall" annotation="inline" href="http://aspdotnetweb.blogspot.com/"></g:plusone>


<script type="text/javascript">
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

This code copy and past your site !

How to write audio vedio converter code in asp.net (c#)

2011-07-22T01:29:00.000-07:00

To convert to flv:
<asp:Button ID="btn_Submit" runat="server" Text="Submit" OnClick="btn_Submit_Click" />
<asp:FileUpload ID="fileuploadImageVideo" runat="server" />
----------------------------------------------------------------------------------------------------------------

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO;
public partial class _Default : System.Web.UI.Page
{
    private bool ReturnVideo(string fileName)
    {
        string html = string.Empty;
        //rename if file already exists

        int j = 0;
        string AppPath;
        string inputPath;
        string outputPath;
        string imgpath;
        AppPath = Request.PhysicalApplicationPath;
        //Get the application path 
        inputPath = AppPath + "OriginalVideo";
        //Path of the original file 
        outputPath = AppPath + "ConvertVideo";
        //Path of the converted file 
        imgpath = AppPath + "Thumbs";
        //Path of the preview file 
        string filepath = Server.MapPath("~/OriginalVideo/" + fileName);
        while (File.Exists(filepath))
        {
            j = j + 1;
            int dotPos = fileName.LastIndexOf(".");
            string namewithoutext = fileName.Substring(0, dotPos);
            string ext = fileName.Substring(dotPos + 1);
            fileName = namewithoutext + j + "." + ext;
            filepath = Server.MapPath("~/OriginalVideo/" + fileName);
        }
        try
        {
            this.fileuploadImageVideo.SaveAs(filepath);
        }
        catch
        {
            return false;
        }
        string outPutFile;
        outPutFile = "~/OriginalVideo/" + fileName;
        int i = this.fileuploadImageVideo.PostedFile.ContentLength;
        System.IO.FileInfo a = new System.IO.FileInfo(Server.MapPath(outPutFile));
        while (a.Exists == false)
        {

        }
        long b = a.Length;
        while (i != b)
        {

        }


        string cmd = " -i \"" + inputPath + "\\" + fileName + "\" \"" + outputPath + "\\" + fileName.Remove(fileName.IndexOf(".")) + ".flv" + "\"";
        ConvertNow(cmd);
        string imgargs = " -i \"" + outputPath + "\\" + fileName.Remove(fileName.IndexOf(".")) + "

                        .flv" + "\" -f image2 -ss 1 -vframes 1 -s 280x200 -an \"" + imgpath + "\\" + fileName.Remove(fileName.IndexOf(".")) + ".jpg" + "\"";
        ConvertNow(imgargs);


        return true;
    }
    private void ConvertNow(string cmd)
    {
        string exepath;
        string AppPath = Request.PhysicalApplicationPath;
        //Get the application path 
        exepath = AppPath + "ffmpeg.exe";
        System.Diagnostics.Process proc = new System.Diagnostics.Process();
        proc.StartInfo.FileName = exepath;
        //Path of exe that will be executed, only for "filebuffer" it will be "flvtool2.exe" 
        proc.StartInfo.Arguments = cmd;
        //The command which will be executed 
        proc.StartInfo.UseShellExecute = false;
        proc.StartInfo.CreateNoWindow = true;
        proc.StartInfo.RedirectStandardOutput = false;
        proc.Start();

        while (proc.HasExited == false)
        {

        }
    }
    protected void btn_Submit_Click(object sender, EventArgs e)
    {
        ReturnVideo(this.fileuploadImageVideo.FileName.ToString());
    }
}

------------------------------

<
asp:Button ID="btn_Submit" runat="server" Text="Submit" OnClick="btn_Submit_Click" />
<asp:FileUpload ID="fileuploadImageVideo" runat="server" />
----------------------------------------------------------------------------------------

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO;
public partial class _Default : System.Web.UI.Page
{
    private bool ReturnVideo(string fileName)
    {
        string html = string.Empty;
        //rename if file already exists

        int j = 0;
        string AppPath;
        string inputPath;
        string outputPath;
        string imgpath;
        AppPath = Request.PhysicalApplicationPath;
        //Get the application path 
        inputPath = AppPath + "OriginalVideo";
        //Path of the original file 
        outputPath = AppPath + "ConvertVideo";
        //Path of the converted file 
        imgpath = AppPath + "Thumbs";
        //Path of the preview file 
        string filepath = Server.MapPath("~/OriginalVideo/" + fileName);
        while (File.Exists(filepath))
        {
            j = j + 1;
            int dotPos = fileName.LastIndexOf(".");
            string namewithoutext = fileName.Substring(0, dotPos);
            string ext = fileName.Substring(dotPos + 1);
            fileName = namewithoutext + j + "." + ext;
            filepath = Server.MapPath("~/OriginalVideo/" + fileName);
        }
        try
        {
            this.fileuploadImageVideo.SaveAs(filepath);
        }
        catch
        {
            return false;
        }
        string outPutFile;
        outPutFile = "~/OriginalVideo/" + fileName;
        int i = this.fileuploadImageVideo.PostedFile.ContentLength;
        System.IO.FileInfo a = new System.IO.FileInfo(Server.MapPath(outPutFile));
        while (a.Exists == false)
        {

        }
        long b = a.Length;
        while (i != b)
        {

        }


        string cmd = " -i \"" + inputPath + "\\" + fileName + "\" \"" + outputPath + "\\" + fileName.Remove(fileName.IndexOf(".")) + ".flv" + "\"";
        ConvertNow(cmd);
        string imgargs = " -i \"" + outputPath + "\\" + fileName.Remove(fileName.IndexOf(".")) + ".flv" + "\" -f image2 -ss 1 -vframes 1 -s 280x200 -an \"" + imgpath + "\\" + fileName.Remove(fileName.IndexOf(".")) + ".jpg" + "\"";
        ConvertNow(imgargs);


        return true;
    }
    private void ConvertNow(string cmd)
    {
        string exepath;
        string AppPath = Request.PhysicalApplicationPath;
        //Get the application path 
        exepath = AppPath + "ffmpeg.exe";
        System.Diagnostics.Process proc = new System.Diagnostics.Process();
        proc.StartInfo.FileName = exepath;
        //Path of exe that will be executed, only for "filebuffer" it will be "flvtool2.exe" 
        proc.StartInfo.Arguments = cmd;
        //The command which will be executed 
        proc.StartInfo.UseShellExecute = false;
        proc.StartInfo.CreateNoWindow = true;
        proc.StartInfo.RedirectStandardOutput = false;
        proc.Start();

        while (proc.HasExited == false)
        {

        }
    }
    protected void btn_Submit_Click(object sender, EventArgs e)
    {
        ReturnVideo(this.fileuploadImageVideo.FileName.ToString());
    }
}

File Download in ASP.NET and Tracking the Status of Success/Failure of Download

2011-07-22T01:22:00.000-07:00

Introduction

This article demonstrates how to provide download of a file in ASP.NET along with tracking its success and failure. It will be useful especially in an e-commerce system that offers downloadable product option. In an e-commerce system, it is very important to keep track of status of download. For a download option, there can be two scenarios:

Complete/success download
Failure download

In an e-commerce system, the user may have a limited number of downloads allowed which is one in most of the cases. If a download is successful, it should update the record which will indicate to the user that he has already downloaded the file or increment the download count by 1. But for failure download, the user should be able to download it again or the download count should remain the same. So this article will help in tracking such status of download.
While working on an e-commerce project, I had a requirement to implement such a functionality where the success/failure of the download can be tracked. After searching for the solution, I found that there is no such article related to a similar problem. Then I came up with this solution after reading an article on transferring file in small packets. I hope this solution will help others struggling with a similar problem.

Background

When the function provided is called on the click of a download button, a similar window as shown below opens asking the user to Open, Save or Cancel.
Clicking Open or Save will result in start of download whereas Cancel will stop/fail the download.
A user can Cancel the Download even after Open or Save click, which needs to be tracked.

Using the Code

The code contains the basic logic of File Download in ASP.NET, which will not give end-user any hint of the location of the file. First we create System.IO.FileInfo object providing the complete file path, which will give us the file length. We also create a FileStream object which will be passed to BinaryReader object which in turn will help reading the data into bytes.
Then we use the Response object to transfer the data.

//File Path and File Name
string filePath = Server.MapPath("~/ApplicationData/DownloadableProducts");
string _DownloadableProductFileName = "DownloadableProduct_FileName.pdf";

System.IO.FileInfo FileName = new System.IO.FileInfo(filePath + "\\" + 
 _DownloadableProductFileName);
FileStream myFile = new FileStream(filePath + "\\" + 
 _DownloadableProductFileName, FileMode.Open, 
 FileAccess.Read, FileShare.ReadWrite);

//Reads file as binary values
BinaryReader _BinaryReader = new BinaryReader(myFile);

long startBytes = 0;
string lastUpdateTiemStamp = File.GetLastWriteTimeUtc(filePath).ToString("r");
string _EncodedData = HttpUtility.UrlEncode
 (_DownloadableProductFileName, Encoding.UTF8) + lastUpdateTiemStamp; 

//Clear the content of the response
Response.Clear();
Response.Buffer = false;
Response.AddHeader("Accept-Ranges", "bytes");
Response.AppendHeader("ETag", "\"" + _EncodedData +"\"");
Response.AppendHeader("Last-Modified", lastUpdateTiemStamp);

//Set the ContentType
Response.ContentType = "application/octet-stream";

//Add the file name and attachment, 
//which will force the open/cancel/save dialog to show, to the header
Response.AddHeader("Content-Disposition", "attachment;filename="+ FileName.Name);

//Add the file size into the response header
Response.AddHeader("Content-Length", (FileName.Length - startBytes).ToString());
Response.AddHeader("Connection", "Keep-Alive");

//Set the Content Encoding type
Response.ContentEncoding = Encoding.UTF8; 

//Send data
_BinaryReader.BaseStream.Seek(startBytes, SeekOrigin.Begin);

There is no response coming back from the download window whether download is completed or aborted in between, so it becomes more difficult to know the status of download. The basic logic behind tracking the download status is transferring the file into smaller packets(size of packets can be kept as per convenience) and checking whether all the packets have been transferred. If there will be any failure in between the transfer of file, the total number of packets will be compared with the number of packets transferred. This comparison will decide the status (Success/Failure) of download. For a very small file, it is difficult to track failure of download as the number of packets will be very few. So more effective tracking will happen if the file size will be greater than 10 KB.
In the below code, we are getting the total number of packets by dividing the total bytes of data by 1024 to keep the packet size as 1 KB.
To send the data packets one by one, we are using for loop. Using Response.BinaryWrite, we are sending the 1024 bytes of data at a time which is read using BinaryReader.

Collapse

//Dividing the data in 1024 bytes package
int maxCount = (int)Math.Ceiling((FileName.Length - startBytes + 0.0) / 1024);

Collapse

//Download in block of 1024 bytes
int i;
for(i=0; i < maxCount && Response.IsClientConnected; i++)
{
    Response.BinaryWrite(_BinaryReader.ReadBytes(1024));
    Respons.Flush(); 
}

Then we compare the number of data packets transferred with the total number of data packets which we calculated by dividing file length by 1024. If both the parameters are equal, that means that file transfer is successful and all the packets got transferred. If number of data packets transferred are less than the total number of data packets, that indicates there is some problem and the transfer was not complete.

//compare packets transferred with total number of packets
if (i < maxCount) return false;
return true;

Close the Binary reader and File stream in final block.

//Close Binary reader and File stream
_BinaryReader.Close();
myFile.Close();

ASP.NET 4.0 : Visualize Response.RedirectPermanent

2011-07-22T01:17:00.000-07:00

In ASP.NET 4.0 there are new features that enable developer to make SEO friendly websites very easily. And if you google out, you will find plenty of article which explain this feature. But I am more interested in Response.RedirectPermanent. As the name suggest it is used to redirect permanently moved resources to new location. And most of all articles on the net just explain this with some example. But how can we visualize that whether resource is redirected permanently or not. So here is the answer for that. I have used FireBug to examine the same.

Whenever we redirect with Response.Redirect, we can see following activity in FireBug console.

As we can see that page which issues Response.Redirect its response status code 302(Found) which means requested url(default.aspx) is found but it is temporarily moved to about.aspx. More information on HTTP status code can be found here.

Now whenever we redirect with Response.RedirectPermanent, we can see following activity in FireBug console.

As we can see that page which issues Response.RedirectPermanent its response status code 301(Moved Permanently) which means requested url(default.aspx) is moved Permanently to about.aspx. 301 status code is used by search engine crawler to update search index to new moved information.

I hope information provided here would be more helpful to distinguish between Response.Redirect and Response.RedirectPermanent.

Send E-Mail from .NET application

2011-07-22T01:13:00.000-07:00

.NET 2.0 has included System.Net.Mail code namespace for supporting email programming with .NET

Following is the code snippets for how to send mail from .NET application.

`01`	`MailMessage mail =` `new` `MailMessage();`

`02`	`mail.To.Add("email1@email1.com");`

`03`	`mail.To.Add("email2@email2.com");`

`04`	`// you can add even add more to address in the same way.`

05

`06`	`mail.From =` `new` `MailAddress("from email address");`

`07`	`// enter the email address. this address will show in the from field of recipient.`

08

09

`10`	`mail.Subject =` `"Email using .NET";`

`11`	`string` `Body =` `"Hi, this mail is to test sending mail";`

`12`	`mail.Body = Body;`

`13`	`mail.IsBodyHtml =` `true;`

14

`15`	`SmtpClient smtp =` `new` `SmtpClient();`

`16`	`smtp.Host =` `"smtpserveraddress";` `//Or Your SMTP Server Address`

`17`	`// enter you smtp server name.`

18

`19`	`smtp.Credentials =` `new` `System.Net.NetworkCredential("smtp username",` `"smtp password");`

`20`	`//Or your Smtp Email ID and Password`

21

`22`	`smtp.EnableSsl =` `true;`

`23`	`// if required`

24

`25`	`smtp.Send(mail);`

Validate uploaded image content in ASP.NET

2011-07-22T01:12:00.000-07:00

Image File Header Information Table
File Format	Offset	Length	Value
JPG / JPEG	0	4	0xFF, 0xD8, 0xFF, 0xE0
PNG	0	4	0x89, 0x50, 0x4E, 0x47
TIF / TIFF	0	4	0x49, 0x49, 0x2A, 0x00
GIF	0	4	0x47, 0x49, 0x46, 0x38
BMP	0	2	0x42, 0x4D
ICO	0	4	0x00, 0x00, 0x01, 0x00

01protected void btnUpload_Click(object sender, EventArgs e)
02{
03    // DICTIONARY OF ALL IMAGE FILE HEADER
04    Dictionary<string, byte[]=""> imageHeader = new Dictionary<string, byte[]="">();
05    imageHeader.Add("JPG", new byte[] { 0xFF, 0xD8, 0xFF, 0xE0 });
06    imageHeader.Add("JPEG", new byte[] { 0xFF, 0xD8, 0xFF, 0xE0 });
07    imageHeader.Add("PNG", new byte[] { 0x89, 0x50, 0x4E, 0x47 });
08    imageHeader.Add("TIF", new byte[] { 0x49, 0x49, 0x2A, 0x00 });
09    imageHeader.Add("TIFF", new byte[] { 0x49, 0x49, 0x2A, 0x00 });
10    imageHeader.Add("GIF", new byte[] { 0x47, 0x49, 0x46, 0x38 });
11    imageHeader.Add("BMP", new byte[] { 0x42, 0x4D });
12    imageHeader.Add("ICO", new byte[] { 0x00, 0x00, 0x01, 0x00 });
13 
14    byte[] header;
15    if (fuImage.HasFile)
16    {
17        // GET FILE EXTENSION
18        string fileExt;
19        fileExt = fuImage.FileName.Substring(fuImage.FileName.LastIndexOf('.') + 1).ToUpper();
20 
21        // CUSTOM VALIDATION GOES HERE BASED ON FILE EXTENSION IF ANY
22         
23        byte[] tmp = imageHeader[fileExt];
24        header = new byte[tmp.Length];
25 
26        // GET HEADER INFORMATION OF UPLOADED FILE
27        fuImage.FileContent.Read(header, 0, header.Length);
28 
29        if (CompareArray(tmp, header))
30        {
31            lblMessage.Text = "Valid ." + fileExt + " file.";
32            // VALID HEADER INFORMATION 
33            // CODE TO PROCESS FILE
34        }
35        else
36        {
37            lblMessage.Text = "Invalid ." + fileExt + " file.";
38            // INVALID HEADER INFORMATION
39        }
40    }
41    else
42    {
43        lblMessage.Text = "Please select image file.";
44    }
45}
46 
47private bool CompareArray(byte[] a1, byte[] a2)
48{
49    if (a1.Length != a2.Length)
50        return false;
51 
52    for (int i = 0; i < a1.Length; i++)
53    {
54        if (a1[i] != a2[i])
55            return false;
56    }
57 
58    return true;
59}</string,></string,>

Any input on above is greatly appreciated...

CheckBox

2011-06-19T11:49:00.001-07:00

CheckBox

The CheckBox control is used to display a check box.

Property	Description
AutoPostBack	A Boolean value that specifies whether the form should be posted immediately after the Checked property has changed or not. Default is false
Checked	A Boolean value that specifies whether the check box is checked or not
id	A unique id for the control
OnCheckedChanged	The name of the function to be executed when the Checked property has changed
runat	Specifies that the control is a server control. Must be set to "server"
Text	The text next to the check box
TextAlign	On which side of the check box the text should appear (right or left)

Try this:

1	<script runat="server">
2	Sub Check(sender As Object, e As EventArgs)
3	if check1.Checked then
4	work.Text=home.Text
5	else
6	work.Text=""
7	end if
8	End Sub
9	</script>
10	<html>
11	<body>
12	<form runat="server">
13	<p>Home Phone:
14	<asp:TextBox id="home" runat="server" />
15	<br />
16	Work Phone:
17	<asp:TextBox id="work" runat="server" />
18	<asp:CheckBox id="check1" Text="Same as home phone" TextAlign="Right" AutoPostBack="True" OnCheckedChanged="Check" runat="server" />
19	</p>
20	</form>
21	</body>
22	</html>

Save as: Checkbox.aspx

Open Visual Studio
Add a new webform
Name it checkbox.aspx
Click the Add button
Select the Design View
Add 2 labels and 2 textbox controls
Add a checkbox control

Change the text of the labels to:

Home Phone:
Work Phone:

Change the id property of the textboxes to:

Home
Work

Change the id of the checkbox to:

Check1

Change the text of the checkbox to:

Same as home phone

Change the textAlign property to right
Change AutoPostBack to true

Double-click the checkbox
Add this code:

        If Check1.Checked Then
            work.Text = home.Text
        Else
            work.Text = ""
        End If

Test it by pressing CTRL + F5

DataSet Object in ADO.Net 2.0

2011-06-19T11:45:00.001-07:00

DataSet Object in ADO.Net 2.0

The dataset object is an in-memory representation of data
The dataset object has a collection of dataTables and dataRelation objects
The dataset can contain one or more dataTables
Example:
The following example shows how you can have two dataTables in a single dataset and add a dataRelation
Add this line above the page_load
Imports System.data
Add this to the page_load
'create new dataset
Dim ShoppingCart As New DataSet("Cart")
'create dataTable
Dim products As DataTable = ShoppingCart.Tables.Add("Products")
'add columns
products.Columns.Add("product_ID", GetType(Guid))
products.Columns.Add("ProductName", GetType(String))
products.Columns.Add("Price", GetType(Integer))
products.Columns.Add("cat_id", GetType(Guid))
'add primary key
products.PrimaryKey = New DataColumn() {products.Columns("product_ID")}
'create second dataTable
Dim category As DataTable = ShoppingCart.Tables.Add("category")
'add columns
category.Columns.Add("cat_id", GetType(Guid))
category.Columns.Add("catName", GetType(String))
'add primary key
category.PrimaryKey = New DataColumn() {category.Columns("cat_id")}
'create data relation
ShoppingCart.Relations.Add("shoppingcart_Products", _
category.Columns("cat_id"),products.Columns("cat_id") )
Add some sample data
'add data
Dim shop, cat As Guid
'get new guids
shop = Guid.NewGuid()
cat = Guid.NewGuid()
'add row to category table
category.Rows.Add(cat, "household")
'Add row to products
products.Rows.Add(shop, "toaster", 25.21, cat)
'get another guid
shop = Guid.NewGuid()
'Add another row to products
products.Rows.Add(shop, "microwave", 250.0, cat)
'get another guid
shop = Guid.NewGuid()
'Add another row to products
products.Rows.Add(shop, "Silverware", 27.5, cat)
'get two new guids
cat = Guid.NewGuid()
shop = Guid.NewGuid()
'add another row to category
category.Rows.Add(cat, "electronics")
'Add another row to products
products.Rows.Add(shop, "television", 300.0, cat)
'get another guid
shop = Guid.NewGuid()
'Add another row to products
products.Rows.Add(shop, "VCR", 250.0, cat)
Add 2 gridVIews to the webform
Add this code
'bind to first gridView
GridView1.DataSource = ShoppingCart
GridView1.DataMember = "products"
GridView1.DataBind()
'bind to second gridView
GridView2.DataSource = ShoppingCart
GridView2.DataMember = "category"
GridView2.DataBind()
Since a dataset can have more than one dataTable you must set the datasource to the dataset and the dataMember to each dataTable

Serialize dataSet as XML

Use the dataset’s writeXML method to serialize a dataset to XML
Add this code
ShoppingCart.WriteXml(MapPath("Cart.xml"))
Here is the XML is created:
<?xml version="1.0" standalone="yes"?>
<Cart>
<Products>
    <product_ID>9e5ff882-9f22-4ca2-a114-84b93abac05d</product_ID>
    <ProductName>toaster</ProductName>
    <Price>25</Price>
    <cat_id>231a895d-0094-4cb5-bd82-c1ac40c1f0e9</cat_id>
</Products>
<Products>
    <product_ID>4a13fd47-cfd1-4b78-a516-ea7c069b2ea2</product_ID>
    <ProductName>microwave</ProductName>
    <Price>250</Price>
    <cat_id>231a895d-0094-4cb5-bd82-c1ac40c1f0e9</cat_id>
</Products>
<Products>
    <product_ID>5ae1f57d-8ee1-47f8-b32c-9629cb64e9ec</product_ID>
    <ProductName>Silverware</ProductName>
    <Price>28</Price>
    <cat_id>231a895d-0094-4cb5-bd82-c1ac40c1f0e9</cat_id>
</Products>
<Products>
    <product_ID>9a14e5e7-c569-4ae1-8e76-a2809a6a8ed8</product_ID>
    <ProductName>television</ProductName>
    <Price>300</Price>
    <cat_id>c35ef4d4-b702-4fec-89b8-8620a24ffd24</cat_id>
</Products>
<Products>
    <product_ID>84c059a2-0c18-472a-8bf2-3c1e5c679dd0</product_ID>
    <ProductName>VCR</ProductName>
    <Price>250</Price>
    <cat_id>c35ef4d4-b702-4fec-89b8-8620a24ffd24</cat_id>
</Products>
<category>
    <cat_id>231a895d-0094-4cb5-bd82-c1ac40c1f0e9</cat_id>
    <catName>household</catName>
</category>
<category>
    <cat_id>c35ef4d4-b702-4fec-89b8-8620a24ffd24</cat_id>
    <catName>electronics</catName>
</category>
</Cart>

Adding DataType info to the XML file

Change the last line to this
ShoppingCart.WriteXml(MapPath("Cart2.xml"), XmlWriteMode.WriteSchema)
You can also put the schema info into a separate file with the following code
ShoppingCart.WriteXml(MapPath("Cart.xml"))
ShoppingCart.WriteXmlSchema(MapPath("cart.xsd"))
If you double-click on this file in solution explorer you see

Serialize dataset as diffGram

A diffgram is an XML file with all the data from your dataset
It also has the original datarow info
Add this code to create a diffgram:
ShoppingCart.WriteXml(MapPath("cartDiffGram.xml"), _
XmlWriteMode.DiffGram)
A diffgram has all the datarow version info, whether rows have been added, changed etc.

Deserializing from a diffGram

You can use a diffgram to create a dataset from an XML file
Dim fromXml As New DataSet()
'create structure
fromXml.ReadXmlSchema(MapPath("cart.xsd"))
'populate from the XML file
fromXml.ReadXml(MapPath("cartDiffGram.xml"))
'bind to a third gridView
GridView3.DataSource = fromXml
GridView3.DataBind()

ASP:Image

2011-06-19T11:43:00.000-07:00

ASP:Image

The Image control is used to display an image.

Property	Description
AlternateText	An alternate text for the image
Enabled	Specifies whether this control is enabled
Font	Specifies the font for the alternate text
id	A unique id for the control
ImageAlign	Specifies the alignment of the image. Legal values are: NotSet AbsBottom AbsMiddle BaseLine Bottom Left Middle Right TextTop Top
ImageUrl	The URL of the image to display for the link
runat	Specifies that the control is a server control. Must be set to "server"

Download the following image:
http://www.morosko.com/comics1.gif
save it to the c:\inetpub\wwwroot directory

Try this:

1	<html>
2	<body>
3	<form runat="server">
4	<asp:Image runat="server" AlternateText="Ad" ImageUrl=" comics1.gif " />
5	</form>
6	</body>
7	</html>

Save as: ImageEx.aspx

Try this in Visual Studio:

Open Visual Studio
Add a new webform
Name it ImageEx.aspx
Add an Image control

In the properties window change the AlternateText property to Ad
Add an existing item and select the comics1.gif file
Select the image control again
Click on the ellipsis in the imageURL property

Add the Comics1.gif image file
Test it

DropDownList

2011-06-19T11:39:00.000-07:00

DropDownList

Property	Description
SelectedIndex	Index of the item selected

Open Visual Studio

Add a new webform call it DropDownList.aspx
Add a dropDownlist and name it ddlState
Add a label control and name it lblDisplay
Select the smart tag on the dropdownlist
Check the enable AutoPostBack
Select Edit Items

Click Add
Change the text to Pick your state
Leave the value blank
Click Add again
Enter Ohio in the text and OH in the value
Add three more

Florida Fl
California CA
Kentucky KY

Click OK
Test it
Double-click the page and add this code to the page_load

1	If ispostback then
2	If ddlState.SelectedIndex=0 then
3	lblDisplay.text="You did not select anything"
4	else
5	lblDisplay.text="State: " & ddlState.SelectedItem.text & "<br />"
6	lblDisplay.text+="Abbrev: " & ddlState.SelectedItem.value & "<br />"
7	lblDisplay.text+="SelectedIndex: " & ddlState.SelectedIndex
8	end if
9	end if

Detailsview Control

2011-06-19T11:36:00.000-07:00

Detailsview Control

The DetailsView control in ASP.Net 2.0 is used to create an HTML table that displays the contents of a single database record.

Displaying Data with the Details View Control in ASP.Net 2.0

Open Visual Studio
Add a webForm to your website, name it DetailsView.aspx
Add a DataSource control to the page and configure it to a database

Add a DetailsView control to the webForm
Select the DetailsView control and click on the smart tag
Select Choose Data Source
Select the Data Source control you added

The DetailsView control now formats itself for your data

Test it and it displays the first record

1	< asp : SqlDataSource ID ="SqlDataSource1" runat ="server" ConnectionString =" <%$ ConnectionStrings:codecrumbsConnectionString %> " SelectCommand ="SELECT * FROM [Surveys]"></ asp : SqlDataSource >
2	< asp : DetailsView ID ="DetailsView1" runat ="server" AutoGenerateRows ="False" DataSourceID ="SqlDataSource1" Height ="50px" Width ="208px">
3	< Fields >
4	< asp : BoundField DataField ="Survey_id" HeaderText ="Survey_id" InsertVisible ="False" ReadOnly ="True" SortExpression ="Survey_id" />
5	< asp : BoundField DataField ="SurveyName" HeaderText ="SurveyName" SortExpression ="SurveyName" />
6	< asp : BoundField DataField ="SurveyComments" HeaderText ="SurveyComments" SortExpression ="SurveyComments" />
7	</ Fields >
8	</ asp : DetailsView >

1	SQL Sata Source Control Connection String to the database SelectCommand contains the SQL statement to retrieve the data
2	Open DetailsView Control Set the dataSourceID to our SQL Data Source
3	Set up fields
4	Create a dataBound field The HeaderText is SurveyID – This is the text that is used to label the textbox The dataField is set to the Survey_Id database field
5	Create a dataBound field The HeaderText is SurveyName – This is the text that is used to label the textbox The dataField is set to the SurveyName database field
6	Create a dataBound field The HeaderText is SurveyComments – This is the text that is used to label the textbox The dataField is set to the SurveyComments database field
7	Close the Fields
8	Close the DetailsView Control

DetailsView Fields in ASP.Net 2.0

You can control the appearance of the DetailsView

The DetailView control supports the following Fields
BoundField	Displays the value of a data item as text
CheckBoxField	Displays the value of the data item as a check box
CommandField	Displays links for editing, deleting and selecting rows
ButtonField	Displays the value of a data item as a button, imagebutton, linkbutton
HyperlinkField	Displays the value of a data item as a link
ImageField	Displays the value of a data item as an image
TemplateField	Customize the appearance of a data item

Change the text describing each row

Click on the DetailsView smart tag
Select Edit Fields

Select any of the fields

Select HeaderText
Change the value to whatever you want displayed to the left of the data field

<asp:BoundField DataField="SurveyName" HeaderText="Survey Name" SortExpression="SurveyName" />

You can also choose to not display a field
Select the field you do not want to display

Insert Visible – Determine if this field will be displayed when the detailsView’s mode is set to insert
ShowHeader – Determines if this field will display a header text
Visible – Determines if this field will be displayed

<asp:BoundField DataField="Survey_id" HeaderText="Survey_id" InsertVisible="False" ReadOnly="True" SortExpression="Survey_id" ShowHeader="False" Visible="False" />

Formatting Data

I’ve added another field in the database called PricePaid of type money to demonstrate the dataFormatString property

Select the field you want to format
Add your format string to the DataFormatString property

You must also set the HTMLEncode to false to let the DataFormatString work

<asp:BoundField DataField="PricePaid"
DataFormatString="{0:c}" HeaderText="PricePaid"
SortExpression="PricePaid" HtmlEncode="False" />

Change the order the rows are displayed

You can select one of the fields and click the up or down arrow buttons next to it to mode it up or down in the DetailsView

Displaying a message when there is no data

There are two ways to display a message when the data source is returning no results.

EmptyDataText Property
EmptyDataTemplate Property

EmptyDataText Property

Select the detailsView and click on the EmptyDataText property in the property window
Add a text message to display when no data is available

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataSourceID="SqlDataSource1" Height="50px" Width="208px" EmptyDataText="There is no data">

EmptyDataTemplate

You can display more complex messages when there is no data including ASP.Net controls.

Click on the smart tag
Select Edit Templates

Select EmptyDataTemplate from the dropdownlist

You can now drop controls into this box and set their properties

1	< EmptyDataTemplate >
2	< asp : Label ID ="Label1" runat ="server" Text ="Sorry, No Data"></ asp : Label >< br />
3	< asp : Image ID ="Image1" runat ="server" ImageUrl ="~/NoData.gif" />
4	</ EmptyDataTemplate >

Paging Data with the DetailsView Control in ASP.Net 2.0

To allow paging change the AllowPaging property to true

This can be done in the properties window or by clicking the smart tag

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataSourceID="SqlDataSource1"
Height="50px" Width="208px" EmptyDataText="There is no data" AllowPaging="True">

Paging with AJAX

You page is posted back to the server each time you page by default
You can use AJAX to page through the data in the DetailsView control

Set the EnablePagingCallBacks property to true

Now the paging is done on the client-side
To test this let’s add a label control to the page
Name it showTime
Clear the text property
Double click on the page and add this line of code in the page_load method

showTime.text=DateTime.Now

Test the page and do some paging, notice the date and time does not change. This shows that the page never posted back to the server.

Customize the DetailsView Paging Interface

By default, numbers are displayed for paging
You can change that by changing the PagerSettings property
Click the plus sign next to the pagerSettings in the properties window

You can add a URL for an image in the following properties:

FirstPageImageURL
LastPageImageURL
NextPageImageURL
PreviousPageImageURL

You can change the text links in the following properties:

FirstPageText
LastPageText
Next PageText
Previous PageText

You can change the format or the pager by changing the Mode property
Possible Values are:

Numeric (default)
NextPrevious
NextPreviousFirstLast
NumericFirstLast

You can change the position of the paging control by changing the Position property
Possible values are:

Bottom
Top
TopAndBottom

Change the amount of numbers that display by changing the PageButtonCount property

< PagerSettings PageButtonCount ="2" Mode ="NextPreviousFirstLast" />

Updating Data with the DetailsView Control in ASP.Net 2.0

Change the DetailsView control’s autoGenerateEditButton to true

This adds an Edit linkButton

You must set the DataKeyNames property to the primary key of the data source for this to work

Select the ellipsis button in the DataKeyNames value

Select the primary key and click the arrow button

The control will automatically generate textboxes to allow the user to change the values

It also automatically creates a Update and Cancel linkButton
You must also add an UpdateCommand in your dataSource control
Select the data Source control and click on the UpdateQuery property in the properties window

Add your query into the UpdateCommand

By default the detailsView uses the name of each field as the parameter name, you only need put an @ symbol in front of it (For SQL Server)

You can force the DetailsView control to appear in the Edit mode by setting the defaultMode to Edit

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString=" <%$ ConnectionStrings:codecrumbsConnectionString %>"
SelectCommand="SELECT * FROM [Surveys]"
UpdateCommand="Update Surveys set SurveyName=@SurveyName, SurveyComments=@SurveyComments,PricePaid=@PricePaid where Survey_ID=@Survey_ID"> </asp:SqlDataSource>

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataSourceID="SqlDataSource1"
Height="50px" Width="208px" EmptyDataText="There is no data"
AllowPaging="True" EnablePagingCallbacks="True" AutoGenerateEditButton="True" DataKeyNames="Survey_id">

Editing Details View control with Templates

You can add validation when editing in the DetailsView control by using templates.

Click on the DetailsView smart tag
Select Edit Fields

Click on TemplateField
Click the Add button

Click on all but the primary key field and delete it by clicking the red x button

Click the OK button
Click the smart tag again and select Edit templates

Select the smart tag and choose ItemTemplate

The Item template is used to display the data

Add a label for each field and text describing them

Click the first label and select the smart tag
Select Edit Data binding

Make sure text is selected and add this code to the Code Expression

Do this for each label
You can add formatting as well

Make sure Enable Editing is checked

Now you can select EditItemTemplate

Add a two textboxes and text to label them

Click the smart tag on the first textbox
Select Edit DataBinding

Type

bind(“fieldname”)
You must use BIND instead of EVAL

Click OK

Do the same for the next textbox

Add a requiredFieldValidator to the template

Set the controlToValidate property to the name of the first textbox
Do the same for each textbox

Click the smart tag and select End Template Editing

Make sure EnablePagingCalls is false

ASP.Net 2.0 tutorials & training

Using TemplateFields in the GridView Control

2011-06-19T00:46:00.000-07:00

Introduction

The GridView is composed of a set of fields that indicate what properties from the DataSource are to be included in the rendered output along with how the data will be displayed. The simplest field type is the BoundField, which displays a data value as text. Other field types display the data using alternate HTML elements. The CheckBoxField, for example, renders as a checkbox whose checked state depends on the value of a specified data field; the ImageField renders an image whose image source is based upon a specified data field. Hyperlinks and buttons whose state depends on an underlying data field value can be rendered using the HyperLinkField and ButtonField field types.
While the CheckBoxField, ImageField, HyperLinkField, and ButtonField field types allow for an alternate view of the data, they still are fairly limited with respect to formatting. A CheckBoxField can only display a single checkbox, whereas an ImageField can only display a single image. What if a particular field needs to display some text, a checkbox, and an image, all based upon different data field values? Or what if we wanted to display the data using a Web control other than the CheckBox, Image, HyperLink, or Button? Furthermore, the BoundField limits its display to a single data field. What if we wanted to show two or more data field values in a single GridView column?
To accommodate this level of flexibility the GridView offers the TemplateField, which renders using a template. A template can include a mix of static HTML, Web controls, and databinding syntax. Furthermore, the TemplateField has a variety of templates that can be used to customize the rendering for different situations. For example, the ItemTemplate is used by default to render the cell for each row, but the EditItemTemplate template can be used to customize the interface when editing data.
In this tutorial we'll examine how to use the TemplateField to achieve a greater degree of customization with the GridView control. In the preceding tutorial we saw how to customize the formatting based on the underlying data using the DataBound and RowDataBound event handlers. Another way to customize the formatting based on the underlying data is by calling formatting methods from within a template. We'll look at this technique in this tutorial as well.
For this tutorial we will use TemplateFields to customize the appearance of a list of employees. Specifically, we'll list all of the employees, but will display the employee's first and last names in one column, their hire date in a Calendar control, and a status column that indicates how many days they've been employed at the company.

Figure 1: Three TemplateFields are Used to Customize the Display (Click to view full-size image)

Step 1: Binding the Data to the GridView

In reporting scenarios where you need to use TemplateFields to customize the appearance, I find it easiest to start by creating a GridView control that contains just BoundFields first and then to add new TemplateFields or convert the existing BoundFields to TemplateFields as needed. Therefore, let's start this tutorial by adding a GridView to the page through the Designer and binding it to an ObjectDataSource that returns the list of employees. These steps will create a GridView with BoundFields for each of the employee fields.
Open the GridViewTemplateField.aspx page and drag a GridView from the Toolbox onto the Designer. From the GridView's smart tag choose to add a new ObjectDataSource control that invokes the EmployeesBLL class's GetEmployees() method.

Figure 2: Add a New ObjectDataSource Control that Invokes the GetEmployees() Method (Click to view full-size image)

Binding the GridView in this manner will automatically add a BoundField for each of the employee properties: EmployeeID, LastName, FirstName, Title, HireDate, ReportsTo, and Country. For this report let's not bother with displaying the EmployeeID, ReportsTo, or Country properties. To remove these BoundFields you can:

Use the Fields dialog box click on the Edit Columns link from the GridView's smart tag to bring up this dialog box. Next, select the BoundFields from the lower left list and click the red X button to remove the BoundField.
Edit the GridView's declarative syntax by hand from the Source view, delete the <asp:BoundField> element for the BoundField you wish to remove.

After you have removed the EmployeeID, ReportsTo, and Country BoundFields, your GridView's markup should look like:

<asp:GridView ID="GridView1" runat="server"     AutoGenerateColumns="False" DataKeyNames="EmployeeID"     DataSourceID="ObjectDataSource1">     <Columns>         <asp:BoundField DataField="LastName" HeaderText="LastName"             SortExpression="LastName" />         <asp:BoundField DataField="FirstName" HeaderText="FirstName"             SortExpression="FirstName" />         <asp:BoundField DataField="Title" HeaderText="Title"             SortExpression="Title" />         <asp:BoundField DataField="HireDate" HeaderText="HireDate"             SortExpression="HireDate" />     </Columns> </asp:GridView>

Take a moment to view our progress in a browser. At this point you should see a table with a record for each employee and four columns: one for the employee's last name, one for their first name, one for their title, and one for their hire date.

Figure 3: The LastName, FirstName, Title, and HireDate Fields are Displayed for Each Employee (Click to view full-size image)

Step 2: Displaying the First and Last Names in a Single Column

Currently, each employee's first and last names are displayed in a separate column. It might be nice to combine them into a single column instead. To accomplish this we need to use a TemplateField. We can either add a new TemplateField, add to it the needed markup and databinding syntax, and then delete the FirstName and LastName BoundFields, or we can convert the FirstName BoundField into a TemplateField, edit the TemplateField to include the LastName value, and then remove the LastName BoundField.
Both approaches net the same result, but personally I like converting BoundFields to TemplateFields when possible because the conversion automatically adds an ItemTemplate and EditItemTemplate with Web controls and databinding syntax to mimic the appearance and functionality of the BoundField. The benefit is that we'll need to do less work with the TemplateField as the conversion process will have performed some of the work for us.
To convert an existing BoundField into a TemplateField, click on the Edit Columns link from the GridView's smart tag, bringing up the Fields dialog box. Select the BoundField to convert from the list in the lower left corner and then click the "Convert this field into a TemplateField" link in the bottom right corner.

Figure 4: Convert a BoundField Into a TemplateField from the Fields Dialog Box (Click to view full-size image)

Go ahead and convert the FirstName BoundField into a TemplateField. After this change there's no perceptive difference in the Designer. This is because converting the BoundField into a TemplateField creates a TemplateField that maintains the look and feel of the BoundField. Despite there being no visual difference at this point in the Designer, this conversion process has replaced the BoundField's declarative syntax - <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" /> - with the following TemplateField syntax:

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">     <EditItemTemplate>         <asp:TextBox ID="TextBox1" runat="server"             Text='<%# Bind("FirstName") %>'></asp:TextBox>     </EditItemTemplate>     <ItemTemplate>         <asp:Label ID="Label1" runat="server"             Text='<%# Bind("FirstName") %>'></asp:Label>     </ItemTemplate> </asp:TemplateField>

As you can see, the TemplateField consists of two templates an ItemTemplate that has a Label whose Text property is set to the value of the FirstName data field, and an EditItemTemplate with a TextBox control whose Text property is also set to the FirstName data field. The databinding syntax - <%# Bind("fieldName") %> - indicates that the data field fieldName is bound to the specified Web control property.
To add the LastName data field value to this TemplateField we need to add another Label Web control in the ItemTemplate and bind its Text property to LastName. This can be accomplished either by hand or through the Designer. To do it by hand, simply add the appropriate declarative syntax to the ItemTemplate:

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">     <EditItemTemplate>         <asp:TextBox ID="TextBox1" runat="server"             Text='<%# Bind("FirstName") %>'></asp:TextBox>     </EditItemTemplate>     <ItemTemplate>         <asp:Label ID="Label1" runat="server"             Text='<%# Bind("FirstName") %>'></asp:Label>         <asp:Label ID="Label2" runat="server"             Text='<%# Bind("LastName") %>'></asp:Label>     </ItemTemplate> </asp:TemplateField>

To add it through the Designer, click on the Edit Templates link from the GridView's smart tag. This will display the GridView's template editing interface. In this interface's smart tag is a list of the templates in the GridView. Since we only have one TemplateField at this point, the only templates listed in the drop-down list are those templates for the FirstName TemplateField along with the EmptyDataTemplate and PagerTemplate. The EmptyDataTemplate template, if specified, is used to render the GridView's output if there are no results in the data bound to the GridView; the PagerTemplate, if specified, is used to render the paging interface for a GridView that supports paging.

Figure 5: The GridView's Templates Can Be Edited Through the Designer (Click to view full-size image)

To also display the LastName in the FirstName TemplateField drag the Label control from the Toolbox into the FirstName TemplateField's ItemTemplate in the GridView's template editing interface.

Figure 6: Add a Label Web Control to the FirstName TemplateField's ItemTemplate (Click to view full-size image)

At this point the Label Web control added to the TemplateField has its Text property set to "Label". We need to change this so that this property is bound to the value of the LastName data field instead. To accomplish this click on the Label control's smart tag and choose the Edit DataBindings option.

Figure 7: Choose the Edit DataBindings Option from the Label's Smart Tag (Click to view full-size image)

This will bring up the DataBindings dialog box. From here you can select the property to participate in databinding from the list on the left and choose the field to bind the data to from the drop-down list on the right. Choose the Text property from the left and the LastName field from the right and click OK.

Figure 8: Bind the Text Property to the LastName Data Field (Click to view full-size image)

Note: The DataBindings dialog box allows you to indicate whether to perform two-way databinding. If you leave this unchecked, the databinding syntax <%# Eval("LastName")%> will be used instead of <%# Bind("LastName")%>. Either approach is fine for this tutorial. Two-way databinding becomes important when inserting and editing data. For simply displaying data, however, either approach will work equally well. We'll discuss two-way databinding in detail in future tutorials.

Take a moment to view this page through a browser. As you can see, the GridView still includes four columns; however, the FirstName column now lists both the FirstName and LastName data field values.

Figure 9: Both the FirstName and LastName Values are Shown in a Single Column (Click to view full-size image)

To complete this first step, remove the LastName BoundField and rename the FirstName TemplateField's HeaderText property to "Name". After these changes the GridView's declarative markup should look like the following:

<asp:GridView ID="GridView1" runat="server"     AutoGenerateColumns="False" DataKeyNames="EmployeeID"     DataSourceID="ObjectDataSource1">     <Columns>         <asp:TemplateField HeaderText="Name" SortExpression="FirstName">             <EditItemTemplate>                 <asp:TextBox ID="TextBox1" runat="server"                     Text='<%# Bind("FirstName") %>'></asp:TextBox>             </EditItemTemplate>             <ItemTemplate>                 <asp:Label ID="Label1" runat="server"                     Text='<%# Bind("FirstName") %>'></asp:Label>                 <asp:Label ID="Label2" runat="server"                     Text='<%# Eval("LastName") %>'></asp:Label>             </ItemTemplate>         </asp:TemplateField>         <asp:BoundField DataField="Title" HeaderText="Title"             SortExpression="Title" />         <asp:BoundField DataField="HireDate" HeaderText="HireDate"             SortExpression="HireDate" />     </Columns> </asp:GridView>

Figure 10: Each Employee's First and Last Names are Displayed in One Colum (Click to view full-size image)

Step 3: Using the Calendar Control to Display the `HiredDate` Field

Displaying a data field value as text in a GridView is as simple as using a BoundField. For certain scenarios, however, the data is best expressed using a particular Web control instead of just text. Such customization of the display of data is possible with TemplateFields. For example, rather than display the employee's hire date as text, we could show a calendar (using the Calendar control) with their hire date highlighted.
To accomplish this, start by converting the HiredDate BoundField into a TemplateField. Simply go to the GridView's smart tag and click the Edit Columns link, bringing up the Fields dialog box. Select the HiredDate BoundField and click "Convert this field into a TemplateField."

Figure 11: Convert the HiredDate BoundField Into a TemplateField (Click to view full-size image)

As we saw in Step 2, this will replace the BoundField with a TemplateField that contains an ItemTemplate and EditItemTemplate with a Label and TextBox whose Text properties are bound to the HiredDate value using the databinding syntax <%# Bind("HiredDate")%>.
To replace the text with a Calendar control, edit the template by removing the Label and adding a Calendar control. From the Designer, select Edit Templates from the GridView's smart tag and choose the HireDate TemplateField's ItemTemplate from the drop-down list. Next, delete the Label control and drag a Calendar control from the Toolbox into the template editing interface.

Figure 12: Add a Calendar Control to the HireDate TemplateField's ItemTemplate (Click to view full-size image)

At this point each row in the GridView will contain a Calendar control in its HiredDate TemplateField. However, the employee's actual HiredDate value is not set anywhere in the Calendar control, causing each Calendar control to default to showing the current month and date. To remedy this, we need to assign each employee's HiredDate to the Calendar control's SelectedDate and VisibleDate properties.
From the Calendar control's smart tag, choose Edit DataBindings. Next, bind both SelectedDate and VisibleDate properties to the HiredDate data field.

Figure 13: Bind the SelectedDate and VisibleDate Properties to the HiredDate Data Field (Click to view full-size image)

Note: The Calendar control's selected date need not necessarily be visible. For example, a Calendar may have August 1^st, 1999 as the selected date, but be showing the current month and year. The selected date and visible date are specified by the Calendar control's SelectedDate and VisibleDate properties. Since we want to both select the employee's HiredDate and make sure that it's shown we need to bind both of these properties to the HireDate data field.

When viewing the page in a browser, the calendar now shows the month of the employee's hired date and selects that particular date.

Figure 14: The Employee's HiredDate is Shown in the Calendar Control (Click to view full-size image)

Note: Contrary to all the examples we've seen thus far, for this tutorial we did not set EnableViewState property to false for this GridView. The reason for this decision is because clicking the dates of the Calendar control causes a postback, setting the Calendar's selected date to the date just clicked. If the GridView's view state is disabled, however, on each postback the GridView's data is rebound to its underlying data source, which causes the Calendar's selected date to be set back to the employee's HireDate, overwriting the date chosen by the user.

For this tutorial this is a moot discussion since the user is not able to update the employee's HireDate. It would probably be best to configure the Calendar control so that its dates are not selectable. Regardless, this tutorial shows that in some circumstances view state must be enabled in order to provide certain functionality.

Step 4: Showing the Number of Days the Employee Has Worked for the Company

So far we have seen two applications of TemplateFields:

Combining two or more data field values into one column, and
Expressing a data field value using a Web control instead of text

A third use of TemplateFields is in displaying metadata about the GridView's underlying data. In addition to showing the employees' hire dates, for example, we might also want to have a column that displays how many total days they've been on the job.
Yet another use of TemplateFields arises in scenarios when the underlying data needs to be displayed differently in the web page report than in the format it's stored in the database. Imagine that the Employees table had a Gender field that stored the character M or F to indicate the sex of the employee. When displaying this information in a web page we might want to show the gender as either "Male" or "Female", as opposed to just "M" or "F".
Both of these scenarios can be handled by creating a formatting method in the ASP.NET page's code-behind class (or in a separate class library, implemented as a static method) that is invoked from the template. Such a formatting method is invoked from the template using the same databinding syntax seen earlier. The formatting method can take in any number of parameters, but must return a string. This returned string is the HTML that is injected into the template.
To illustrate this concept, let's augment our tutorial to show a column that lists the total number of days an employee has been on the job. This formatting method will take in a Northwind.EmployeesRow object and return the number of days the employee has been employed as a string. This method can be added to the ASP.NET page's code-behind class, but must be marked as protected or public in order to be accessible from the template.

protected string DisplayDaysOnJob(Northwind.EmployeesRow employee) {     // Make sure HiredDate is not null... if so, return "Unknown"     if (employee.IsHireDateNull())         return "Unknown";     else     {         // Returns the number of days between the current         // date/time and HireDate         TimeSpan ts = DateTime.Now.Subtract(employee.HireDate);         return ts.Days.ToString("#,##0");     } }

Since the HiredDate field can contain NULL database values we must first ensure that the value is not NULL before proceeding with the calculation. If the HiredDate value is NULL, we simply return the string "Unknown"; if it is not NULL, we compute the difference between the current time and the HiredDate value and return the number of days.
To utilize this method we need to invoke it from a TemplateField in the GridView using the databinding syntax. Start by adding a new TemplateField to the GridView by clicking on the Edit Columns link in the GridView's smart tag and adding a new TemplateField.

Figure 15: Add a New TemplateField to the GridView (Click to view full-size image)

Set this new TemplateField's HeaderText property to "Days on the Job" and its ItemStyle's HorizontalAlign property to Center. To call the DisplayDaysOnJob method from the template, add an ItemTemplate and use the following databinding syntax:
<%# DisplayDaysOnJob((Northwind.EmployeesRow) ((System.Data.DataRowView) Container.DataItem).Row) %> Container.DataItem returns a DataRowView object corresponding to the DataSource record bound to the GridViewRow. Its Row property returns the strongly-typed Northwind.EmployeesRow, which is passed to the DisplayDaysOnJob method. This databinding syntax can appear directly in the ItemTemplate (as shown in the declarative syntax below) or can be assigned to the Text property of a Label Web control.

Note: Alternatively, instead of passing in an EmployeesRow instance, we could just pass in the HireDate value using <%# DisplayDaysOnJob(Eval("HireDate")) %>. However, the Eval method returns an object, so we'd have to change our DisplayDaysOnJob method signature to accept an input parameter of type object, instead. We can't blindly cast the Eval("HireDate") call to a DateTime because the HireDate column in the Employees table can contain NULL values. Therefore, we'd need to accept an object as the input parameter for the DisplayDaysOnJob method, check to see if it had a database NULL value (which can be accomplished using Convert.IsDBNull(objectToCheck)), and then proceed accordingly.

Due to these subtleties, I've opted to pass in the entire EmployeesRow instance. In the next tutorial we'll see a more fitting example for using the Eval("columnName") syntax for passing an input parameter into a formatting method.
The following shows the declarative syntax for our GridView after the TemplateField has been added and the ------------------------------------------------------------------------
DisplayDaysOnJob method called from the ItemTemplate:

<asp:GridView ID="GridView1" runat="server"     AutoGenerateColumns="False" DataKeyNames="EmployeeID"     DataSourceID="ObjectDataSource1">     <Columns>         <asp:TemplateField HeaderText="Name" SortExpression="FirstName">             <EditItemTemplate>                 <asp:TextBox ID="TextBox1" runat="server"                     Text='<%# Bind("FirstName") %>'></asp:TextBox>             </EditItemTemplate>             <ItemTemplate>                 <asp:Label ID="Label1" runat="server"                     Text='<%# Bind("FirstName") %>'></asp:Label>                 <asp:Label ID="Label2" runat="server"                     Text='<%# Eval("LastName") %>'></asp:Label>             </ItemTemplate>         </asp:TemplateField>         <asp:BoundField DataField="Title" HeaderText="Title"             SortExpression="Title" />         <asp:TemplateField HeaderText="HireDate"             SortExpression="HireDate">             <EditItemTemplate>                 <asp:TextBox ID="TextBox2" runat="server"                     Text='<%# Bind("HireDate") %>'></asp:TextBox>             </EditItemTemplate>             <ItemTemplate>                 <asp:Calendar ID="Calendar1" runat="server"                     SelectedDate='<%# Bind("HireDate") %>'                     VisibleDate='<%# Eval("HireDate") %>'>             </asp:Calendar>             </ItemTemplate>         </asp:TemplateField>         <asp:TemplateField HeaderText="Days On The Job">             <ItemTemplate>                 <%# DisplayDaysOnJob((Northwind.EmployeesRow)                     ((System.Data.DataRowView) Container.DataItem).Row) %>             </ItemTemplate>             <ItemStyle HorizontalAlign="Center" />         </asp:TemplateField>     </Columns> </asp:GridView>

-------------------------------------------------------------------------------
Figure 16 shows the completed tutorial, when viewed through a browser.

Figure 16: The Number of Days the Employee Has Been on the Job is Displayed (Click to view full-size image)

Summary

The TemplateField in the GridView control allows for a higher degree of flexibility in displaying data than is available with the other field controls. TemplateFields are ideal for situations where:

Multiple data fields need to be displayed in one GridView column
The data is best expressed using a Web control rather than plain text
The output depends on the underlying data, such as displaying metadata or in reformatting the data

In addition to customizing the display of data, TemplateFields are also used for customizing the user interfaces used for editing and inserting data, as we'll see in future tutorials.
The next two tutorials continue exploring templates, starting with a look at using TemplateFields in a DetailsView. Following that, we'll turn to the FormView, which uses templates in lieu of fields to provide greater flexibility in the layout and structure of the data.
Happy Programming!

About the Author

Scott Mitchell, author of seven ASP/ASP.NET books and founder of 4GuysFromRolla.com, has been working with Microsoft Web technologies since 1998. Scott works as an independent consultant, trainer, and writer. His latest book is Sams Teach Yourself ASP.NET 2.0 in 24 Hours. He can be reached at http://library82.blogspot.com/ or via his blog, which can be found at http://ScottOnWriting.NET.

Special Thanks To

Standard ASP.NET Web Server Controls

2011-06-18T07:34:00.003-07:00

Standard ASP.NET Web Server Controls

Web Server Controls To simplify Web page development, you can use ASP.NET Web server controls. Web server controls provide familiar types of functionality for pages, such as displaying text boxes, buttons, check boxes, menus, and so on.

ASP DOT NET

Coding a Snake Game for Android

Validating ASP.NET Server Controls on Asp.Net !

Validating ASP.NET Server Controls on Asp.Net !

SQL Server 2008 SP3 and HP Database Enterprise Appliance on ASP.NET !

.NET LinkButton web control on ASP.NET !

Validate uploaded image content in ASP.NET www.aspdotnetweb.blogspot.com !

Upload picture, resize and save in SQL database www.aspdotnetweb.blogspot.com !

Uploading images via .NET www.aspdotnetweb.blogspot.com !

How to Upload an Image Using ASP.NET www.aspdotnetweb.blogspot.com !

Step 1:-

Step 2 :-

Step 3 :-

Google Plus +1 Button How to add Google +1 Button to a Website

How to write audio vedio converter code in asp.net (c#)

File Download in ASP.NET and Tracking the Status of Success/Failure of Download

Introduction

Background

Using the Code

ASP.NET 4.0 : Visualize Response.RedirectPermanent

Send E-Mail from .NET application

Validate uploaded image content in ASP.NET

CheckBox

CheckBox

DataSet Object in ADO.Net 2.0

DataSet Object in ADO.Net 2.0

Serialize dataSet as XML

Adding DataType info to the XML file

Serialize dataset as diffGram

Deserializing from a diffGram

ASP:Image

ASP:Image

DropDownList

DropDownList

Detailsview Control

Detailsview Control

DetailsView Fields in ASP.Net 2.0

Change the text describing each row

Formatting Data

Change the order the rows are displayed

Displaying a message when there is no data

EmptyDataText Property

EmptyDataTemplate

Paging Data with the DetailsView Control in ASP.Net 2.0

Paging with AJAX

Customize the DetailsView Paging Interface

Updating Data with the DetailsView Control in ASP.Net 2.0

Editing Details View control with Templates

Using TemplateFields in the GridView Control

Introduction

Step 1: Binding the Data to the GridView

Step 2: Displaying the First and Last Names in a Single Column

Step 3: Using the Calendar Control to Display the HiredDate Field

Step 4: Showing the Number of Days the Employee Has Worked for the Company

Summary

About the Author

Special Thanks To

Standard ASP.NET Web Server Controls

Step 3: Using the Calendar Control to Display the `HiredDate` Field