.NET World

Validating a range of dates using RangeValidator

2011-08-24T07:33:00.001-07:00

RangeValidator is a validation control provided by asp.net. This control can be used to validate a range of string, date, integer and double values. In this post, I will show how to use the RangeValidator to validate a range of date using today’s date as the maximum value.

The following is the RangeValidator markup.

RangeValidator markup
 <asp:TextBox ID="T1" runat="server"></asp:TextBox>
<asp:RangeValidator ID="RV1" runat="server" ControlToValidate="T1" Type="Date" MinimumValue="01/01/2000" ErrorMessage="*"></asp:RangeValidator>
<asp:Button ID="Button1" runat="server" Text="Button" />
 

The TextBox control is added where the users will enter the value. The Button control is added to test validation. The RangeValidator is added – its ControlToValidate property is set to TextBox’s id, data type is set to Date, the minimum value is set to an arbitrary date. The maximum value is set in the Page_Load event as shown below.

Page_Load event
 protected void Page_Load(object sender, EventArgs e)
{
    RV1.MaximumValue = DateTime.Today.ToShortDateString();
}
 

The maximum value expects a value of type string, so the string format of today’s date is passed as the MaximumValue.

Transform object to xml using linq

2011-07-27T09:11:00.001-07:00

Using Linq, it’s easily possible to query various types of data like sql database, xml, objects like DataTable, ArrayList. It’s also possible to transform data into other formats like xml using linq. In this article, I will demonstrate how to query an System.Collections.ArrayList collection and then to save the data in xml format.

At first, I will create an ArrayList object and add Person objects to it. The code to do is below.

Adding objects to ArrayList
 ArrayList list = new ArrayList();
list.Add(new Person { FirstName = "Scooby", LastName = "Doo", DateOfBirth= new DateTime(2000, 12, 31), Height=160 });
list.Add(new Person { FirstName = "Bugs", LastName = "Bunny", DateOfBirth = new DateTime(1999, 2, 7), Height = 170 });
list.Add(new Person { FirstName = "Peter", LastName = "Pan", DateOfBirth = new DateTime(2001, 10, 31), Height = 150 });
 

The Person class has 4 public properties of different data types – string, DateTime and int as shown below.

Person class
 using System;
namespace WebApplication1.CSClass
{
    public class Person
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime DateOfBirth { get; set; }
        public int Height { get; set; }
 
        public override string ToString()
        {
            return FirstName + " " + LastName;
        }
    }
}
 

Person objects are added to the ArrayList list which can be queried using linq as shown in my previous post on query ArrayList using Linq. While querying the list, System.Xml.Linq.XElement objects can be created which can be saved as xml using System.Xml.Linq.XDocument’s Save() method. The code to show this is below.

Transform ArrayList to xml
 private void TransformToXml()
{
    ArrayList list = new ArrayList();
    list.Add(new Person { FirstName = "Scooby", LastName = "Doo", DateOfBirth= new DateTime(2000, 12, 31), Height=160 });
    list.Add(new Person { FirstName = "Bugs", LastName = "Bunny", DateOfBirth = new DateTime(1999, 2, 7), Height = 170 });
    list.Add(new Person { FirstName = "Peter", LastName = "Pan", DateOfBirth = new DateTime(2001, 10, 31), Height = 150 });
 
    var q = from Person p in list
            orderby p.FirstName
            orderby p.LastName
            select p;
 
    var query = new XElement("Persons", from Person p in list
                                select new
                                XElement("Person",
                                new XElement("FirstName", p.FirstName),
                                new XElement("LastName", p.LastName),
                                new XElement("DateOfBirth", p.DateOfBirth),
                                new XElement("Height", p.Height)
                                )
                                );
 
    XDocument doc = new XDocument(query);
    doc.Save(Server.MapPath("transform.xml"));
 
    var query2 = new XElement("Persons", from Person p in list
                                select new
                                XElement("Person",
                                new XAttribute("FirstName", p.FirstName),
                                new XAttribute("LastName", p.LastName),
                                new XAttribute("DateOfBirth", p.DateOfBirth),
                                new XAttribute("Height", p.Height)
                                )
                                );
 
    XDocument doc2 = new XDocument(query2);
    doc2.Save(Server.MapPath("transform2.xml"));
}
 

As can be seen, the ArrayList object is queried for Person objects. This is not really needed for the code to work but is an example on how objects can be queried from ArrayList.

Using another query, “query”, XElement objects are created. The names of the XElement – that is, the names of the xml elements are arbitrary and the value of the elements are obtained from the Person object. The XElement objects are then added to XDocument object and saved as xml using XDocument.Save() method. The resultant xml looks like below.

Xml from Linq to ArrayList
 <?xml version="1.0" encoding="utf-8"?>
<Persons>
  <Person>
    <FirstName>Scooby</FirstName>
    <LastName>Doo</LastName>
    <DateOfBirth>2000-12-31T00:00:00</DateOfBirth>
    <Height>160</Height>
  </Person>
  <Person>
    <FirstName>Bugs</FirstName>
    <LastName>Bunny</LastName>
    <DateOfBirth>1999-02-07T00:00:00</DateOfBirth>
    <Height>170</Height>
  </Person>
  <Person>
    <FirstName>Peter</FirstName>
    <LastName>Pan</LastName>
    <DateOfBirth>2001-10-31T00:00:00</DateOfBirth>
    <Height>150</Height>
  </Person>
</Persons>
 

One thing to note is that the xml declaration is automatically added. DateTime field – DateOfBirth is automatically converted to its string representation.

The xml produced previously contains elements only. The Linq query could be easily updated to change the data to be the attributes of xml elements. This is shown in another query – “query2”. System.Xml.Linq.XAttribute objects are created similarly instead of XElement objects and added to XElement object which is then added to XDocument object and saved as xml. The resultant xml file looks like below.

Xml from Linq to ArrayList
 <?xml version="1.0" encoding="utf-8"?>
<Persons>
  <Person FirstName="Scooby" LastName="Doo" DateOfBirth="2000-12-31T00:00:00" Height="160" />
  <Person FirstName="Bugs" LastName="Bunny" DateOfBirth="1999-02-07T00:00:00" Height="170" />
  <Person FirstName="Peter" LastName="Pan" DateOfBirth="2001-10-31T00:00:00" Height="150" />
</Persons>
 

The data looks similar to the previous xml except that they are now attributes of “Person” element instead of child elements.

Create XML using Linq to XML

2011-06-27T03:40:00.001-07:00

Xml stands for eXtensible Markup Language that is designed to store and transfer data. An example xml file is below.

Sample Xml file
 <?xml version="1.0" encoding="utf-8" standalone="no"?>
<!--demo on how to create xml file-->
<root>
  <Country id="1" name="Australia" capital="Canberra">
    <state>New South Wales</state>
    <state>Victoria</state>
  </Country>
  <Country id="2" name="India" capital="New Delhi">
    <state>Maharashtra</state>
    <state>Rajasthan</state>
  </Country>
  <Country id="2" name="Bangladesh" capital="Dhaka"><![CDATA[Bangladesh doesn't have any states.]]></Country>
</root>
 

Xml file starts the xml declaration as in the first line. It supports comments similar to html comments as shown in line 2. It can have elements, can have attributes and can contain CData that is data that can be considered as plain text. Line 4 shows an example of element and attributes – Country is an element and id, name and capital are attributes. The value 1, Australia, etc are the values of the attributes.

In .NET, Linq to Xml makes it easy to create and parse xml documents. It’s easy to create xml, add declarations, add elements, attributes and also add data appropriately. The necessary classes are within the System.Xml.Linq namespace. Linq to Xml has XDocument class with xml documents can be created and loaded. XComment class can be used to add comments. XElement can be used to create elements and XAttribute classes can be used to add attributes to elements. XCData class can be used to add data in cdata format. An example on how to create xml using Linq to Xml is below.

Create xml using Linq
 private void CreateXml()
{
    XDocument doc = new XDocument(new XDeclaration("1.0", "utf-8", "no"));
 
    XComment comment = new XComment("demo on how to create xml file");
    doc.Add(comment);
 
    XElement el = new XElement("root");
    XElement p1 = new XElement("Country", new object[] { new XAttribute("id", "1"), new XAttribute("name", "Australia"), new XAttribute("capital", "Canberra") });
 
    XElement p1city1 = new XElement("state", "New South Wales");
    XElement p1city2 = new XElement("state", "Victoria");
 
    p1.Add(p1city1);
    p1.Add(p1city2);
 
    XElement p2 = new XElement("Country", new object[] { new XAttribute("id", "2"), new XAttribute("name", "India"), new XAttribute("capital", "New Delhi") });
 
    XElement p2city1 = new XElement("state", "Maharashtra");
    XElement p2city2 = new XElement("state", "Rajasthan");
 
    p2.Add(p2city1);
    p2.Add(p2city2);
 
    XElement p3 = new XElement("Country", new object[] { new XAttribute("id", "3"), new XAttribute("name", "Bangladesh"), new XAttribute("capital", "Dhaka") });
 
    p3.Add(new XCData("Bangladesh doesn't have any states."));
 
    el.Add(p1);
    el.Add(p2);
    el.Add(p3);
    doc.Add(el);
 
    doc.Save(Server.MapPath("country.xml"));            
}
 

As can be seen, once the XElement, XComment, XAttribute objects are created, they got to be added to parent object. Once the necessary data has been added, the xml file can be saved using XDocument’s Save method as in line 34 above.

Query DataTable using Linq

2011-06-16T06:39:00.001-07:00

In this example, I will show how to use Linq to query DataTable. A DataTable is a table of data stored in memory. Since Linq can query data of IEnumerable type, the data rows are declared as as IEnumerable so that Linq can query the data.

I have already setup the web application and have added a page. I will now define the schema of the DataTable and then create it. The code for creating the DataTable is below.

Create DataTable
 private DataTable GetDataTable()
{
    DataTable dt = new DataTable();
 
    //add columns
    dt.Columns.Add("ID", typeof (Int32));
    dt.Columns.Add("Name", typeof(string));
    dt.Columns.Add("DateOfBirth", typeof(DateTime));
 
    //add rows of data
    dt.Rows.Add(new object[] { 1, "Bugs Bunny", DateTime.Now});
    dt.Rows.Add(new object[] { 2, "Daffy Duck", DateTime.Now });
    dt.Rows.Add(new object[] { 3, "Scooby Doo", DateTime.Now });
    return dt;        
}
 

As can be seen, columns of type int, string and DateTime are added to the DataTable. Then, rows of data are added. This DataTable is later used for querying using Linq.

As mentioned earlier, to query DataTable using Linq, it has to be of type System.Collections.Generic.IEnumerable . To do this, DataTable’s AsEnumerable method can be used. This method converts the standard DataTable to a DataTable of IEnumerable type. The method for converting and querying the DataTable is below.

Query DataTable
 private void QueryDataTable(DataTable dt)
{
    var q = from DataRow row in dt.AsEnumerable()
            select row;
    
    int col = dt.Columns.Count;//no of columns
 
    foreach (DataRow row in q)
    {
        for (int i = 0; i < col; i++)
        {
            L1.Text += row[i].ToString() + "&nbsp;";
        }
        L1.Text += "<br/>";
    }
}
 

At first, I have converted the DataTable to of type IEnumerable and have selected all the rows. Then, I have queried each of the DataRow and retrieved the values for each of the columns. L1 is a Literal control that has been declared on the aspx page.

Please note that, I have simply added the values returned in string variables, ideally, a System.Text.StringBuilder object should be used to achieve this.

The above methods can then be called from Page_Load or other methods as shown below.

Page_Load event
 protected void Page_Load(object sender, EventArgs e)
{
    QueryDataTable(GetDataTable());
}
 

Access anchor link from code-behind

2011-06-04T20:24:00.001-07:00

Html anchor links are a way to navigate within a page. The anchor can be considered as a bookmark within a page, which when clicked takes the user to that section of a page. An anchor to a certain section of a page can be set in the following way.

 <a name=anchor></a><div>content</div>
 

The name attribute of the “a” element determines the anchor / bookmark to the page. The anchor can be accessed by setting the link like below.

 <a href=#anchor>Anchor</a>
 

However, the anchor link is a client side thing and cannot be accessed from server-side. In this post, I am going to show how the anchor link can be accessed from server-side using hidden field and javascript. The following is the code for the aspx page.

aspx page
 <body>
    <form id="form1" runat="server">
    <div>
    <a name="anchor"></a>
    <div>Some content <a href="#anchor" onclick="SetUrl('anchor')">click here</a></div>
    <asp:HiddenField ID="HF1" runat="server" />
    <asp:Button ID="B1" runat="server" Text="Check Anchor" OnClick="GetAnchor" />
    <asp:Literal ID="L1" runat="server"></asp:Literal>
    </div>
    <script type="text/javascript">
        SetUrl("");
    </script>
    </form>
</body>
 

The page is simple, contains a HiddenField, Button and Literal control to display the anchor, if any. At the bottom of the page, before the closing form tag is a javascript method, SetUrl(“”) that sets the anchor in the hidden field. The code for javascript method is below.

JavaScript code
 <script type="text/javascript">
    function SetUrl(val) {
        if (val == "" && location.href.indexOf("#") > -1) {
            document.getElementById('<%= HF1.ClientID %>').value = location.href; //set value of HiddenField
        }
        else if (val == "" && location.href.indexOf("#") == -1) {
            document.getElementById('<%= HF1.ClientID %>').value = "";
        }
        else {
            document.getElementById('<%= HF1.ClientID %>').value = val;
        }
        alert(val);
    }    
</script>
 

The javascript method, checks if there is a value for the anchor when the link is clicked. If not and if it does not contain the “#” character in the url, it does not set the value of the anchor in the HiddenField. Otherwise, it either sets the value when clicked or sets the url if it contains “#” character.

Once the HiddenField value is set, the value can be accessed from the server side. In this example, when the button is clicked, the value is obtained and set as the Text property of the Literal control. Here is the code for Button click event.

Button click event
     protected void GetAnchor(object sender, EventArgs e)
    {
        string anchor = HF1.Value;//get url from hidden field
        if (anchor.Contains("#"))//check if it an anchor
        {
            string[] list = anchor.Split(new char[] { '#' });
            L1.Text = "anchor name is :" + list[1];
        }
        else if (anchor != "")
            L1.Text = anchor;
        else
            L1.Text = string.Empty;
    }
}
 

The code finds the value of the HiddenField and displays it in the Literal control.

How to query an ArrayList with LINQ

2011-05-30T08:54:00.001-07:00

In this example, I will show how to query an ArrayList using Linq. Since ArrayList are non-generic IEnumerable collections, the type of variable in the collection must be explicitly declared in the linq query.

I already have a web application setup, so, I will just add a class called Person. This is a very simple class containing only 2 properties – FirstName and LastName. The code for the class is below.

Person Class
 namespace WebApplication1.CSClass
{
    public class Person
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
 
        public override string ToString()
        {
            return FirstName + " " + LastName;
        }
    }
}
 

I will then add a web form where I will add an ArrayList, add Person objects to the collection and then query the collection using Linq. The code for this is below.

Query ArrayList with LINQ
 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;
using WebApplication1.CSClass;
 
namespace WebApplication1
{
    public partial class LinqText : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            GetList();
        }
 
        private void GetList()
        {
            ArrayList list = new ArrayList();
            list.Add(new Person { FirstName = "Scooby", LastName="Doo" });
            list.Add(new Person { FirstName = "Bugs", LastName = "Bunny" });
            list.Add(new Person { FirstName = "Peter", LastName = "Pan" });
 
            var q = from Person p in list
                    orderby p .FirstName
                    orderby p.LastName
                    select p;
 
            string br = "<br/>";
            foreach (Person p in q)
            {
                L1.Text += p.ToString() + br;
            }
 
        }
    }
}
 

Note that, in the linq query, the object type is specified. The query will not work unless it is specified.

Device Filtering In Asp.Net

2011-05-06T04:41:00.001-07:00

Asp.Net allows customization of properties of web server controls depending on the browser that is rendering the control. Well, this can be done by using javascript and css as well, by detecting the browser using javascript and then applying the correct css styles. Asp.Net makes it very easy to do without creating javascript or css.

The attributes of the controls need to contain the browser name to allow device filtering. For example, to customize the ForeColor property in Internet Explorer, the attribute need to be renamed to ie:ForeColor. For Mozilla, it will be Mozilla:ForeColor and for Pocket Internet Explorer, it’s PIE:ForeColor.

The following is sample code showing the attributes in a Label and TextBox control.

Sampele code
 <asp:Label ID="L1" runat="server" ie:Text="Internet explorer" Mozilla:Text="mozilla" ie:BackColor="Red" Mozilla:BackColor="Green" ie:ForeColor="White"></asp:Label>
<asp:TextBox ID="T3" runat="server" ie:Text="IE" Mozilla:Text="mozilla" ie:BackColor="Gray" Mozilla:BackColor="Black" ForeColor="White"></asp:TextBox>
 

As can be seen, even the Text property can be customized. That is, the text on the controls would be different depending on the browser.

One important to note is that these properties can also be set declaratively meaning the properties cannot be accessed and / or modified from code behind.

Creating a Captcha Control – Part 5

2011-03-22T01:46:00.001-07:00

In the previous articles, I showed how to create the captcha control. In this post, I will write about the handler that generates the image based on the dynamic random text generated by the GetRandomText method of the CaptchaControl usercontrol.

To generate the image, the handler needs to send its output as an image type. To get random text, it needs to access the value from the Session. The handler uses the System.Drawing.Bitmap class to create the image. The width of the image is dynamically based on the number of characters of the random text. The handler uses the background image path property to set the background image and uses the font colour, font size and font family to write the text on the image. The RotateTransform method of the System.Drawing.Graphics class is used to slightly rotate the text on the image. the yPos method is used to randomly position the characters. The output image is then send through the stream.

The code for the class is below and can also be downloaded from CodePlex at http://captchadotnet.codeplex.com/ .

CaptchaHandler
 using System;
using System.Web;
using System.Drawing;
 
namespace CaptchaApp
{
    /// <summary>
    /// Summary description for CaptchaHandler
    /// </summary>
    public class CaptchaHandler : IHttpHandler, System.Web.SessionState.IReadOnlySessionState
    {
 
        private Captcha cc;
 
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "image/jpeg";
 
            if (context.Session != null)
            {
                if (context.Session["CaptchaClass"] != null)
                {
                    cc = (Captcha)context.Session["CaptchaClass"];
                }
                else
                {
                    cc = new Captcha();
                }
            }           
 
            string text = string.Empty;
            if(context.Session["captcha"] !=null)
                text = (string)context.Session["captcha"];
 
            int imageWidth = Convert.ToInt32(((cc.FontSize + 8) * text.Length));
            int imageHeight = Convert.ToInt32(cc.FontSize * 2.5);
 
 
            Bitmap bmp = new Bitmap(imageWidth, imageHeight);
            var Grph = Graphics.FromImage(bmp);
            Grph.FillRectangle(new SolidBrush(Color.Lavender), 0, 0, bmp.Width, bmp.Height);
 
            var grp = Graphics.FromImage(bmp);
            Image background = Image.FromFile(HttpContext.Current.Server.MapPath(cc.BackgroundImagePath));
            grp.DrawImage(background, new Rectangle(0, 0, bmp.Width, bmp.Height));
 
 
            Grph.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
            Grph.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
            int xPos = 10;
 
            Font f = cc.GetFont();
 
            char[] textArray = text.ToCharArray();
            int yPosition = 0;
            Random r = new Random();
 
            for (int i = 0; i < textArray.Length; i++)
            {
                if (i % 2 == 0)
                    Grph.RotateTransform(5);
                else
                    Grph.RotateTransform(-5);
 
                yPosition = (int)(r.NextDouble() * 10);
 
                Grph.DrawString(textArray[i].ToString(), f, new SolidBrush(Color.FromName(cc.TextColor)), xPos, yPosition);
                xPos += 20;
 
            }
            
            bmp.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
 
        }
 
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
 
 
        private int yPos()
        {
            Random r = new Random();
            return (int)(r.NextDouble() * 10);
        }                
    }
}
 

The handler also implements the System.Web.SessionState.IReadOnlySessionState interface beside the IHttpHandler. This is necessary so that the handler can access the Session of the current context.

Creating a Captcha Control – Part 4

2011-03-22T00:59:00.001-07:00

In one of the previous posts – Creating a Captcha Control – Part 2 – I was talking about Captcha class that contains some of the properties of the control like text colour, font size, font family and background image path. The class basically defines the setter and the getter for few of the properties. The code for the class is below.

Captcha Class
 using System;
 
namespace CaptchaApp
{
    public class Captcha
    {
 
 
        public string FontFamily
        {
            get { return fontFamily; }
            set
            {
                if (value != string.Empty && value != null)
                    this.fontFamily = value;
                else
                    this.fontFamily = "Arial";
            }
        }
 
        public double FontSize
        {
            get { return fontSize; }
            set
            {
                try
                {
                    if (value <= 10 || value >= 24)
                        this.fontSize = 16;
                    else
                        this.fontSize = value;
                }
                catch (Exception ex)
                {
                    this.fontSize = 16;
                }
            }
        }
 
        public string TextColor
        {
            get { return textColor; }
            set
            {
                if (value == string.Empty || value == null)
                    this.textColor = "Black";
                else
                    this.textColor = value;
            }
        }
 
        public string BackgroundImagePath
        {
            get { return backgroundImagePath; }
            set
            {
                this.backgroundImagePath = value;
            }
        }
 
        public System.Drawing.Font GetFont()
        {
            return new System.Drawing.Font(FontFamily, (float)FontSize);
        }
 
 
        private double fontSize;
        private string fontFamily;
        private string backgroundImagePath;
        private string textColor;
    }
 
 
}
 

The full code for the control can be downloaded from CodePlex at http://captchadotnet.codeplex.com/

Creating a Captcha Control – Part 3

2011-03-16T04:12:00.001-07:00

Adding Audio

In my previous 2 articles – Creating a Captcha Control – Part 1 and Creating a Captcha Control – Part 2 – I have created the user control for the captcha control. The control also allows functionality to play audio to read the text on the captcha.

To achieve the audio feature, I have used a COM library – Microsoft Speech Object Library. To add the COM library, I added a reference to Microsoft Speech Object Library (%Windir%\System32\Speech\Common\Sapi.dll). To add a reference, right-click on the Reference folder, click Add Reference, click COM tab and add the library.

Once the reference is added, the SpeechLib namespace is imported as shown below.

Adding reference to SpeechLib
 using SpeechLib;
 

Then, the Speak method in SpVoice class is used to play the audio as per below.

ReadCaptcha method
 protected void ReadCaptcha(object sender, EventArgs e)
{
    SpVoice voice = new SpVoice();
 
    char[] text = ((string)ViewState["captcha"]).ToCharArray();
    
 
    for (int i = 0; i < text.Length; i++)
    {
        voice.Speak(text[i].ToString(), SpeechVoiceSpeakFlags.SVSFDefault);
    }
}
 

As can be seen, I am reading out each of the text and not all the text at once. The reason is, SpVoice class will try to read it as a word instead of individual characters otherwise.

In the following article, I will show how to create and use the handler to generate the image. The whole code for the captcha control can be downloaded from CodePlex at http://captchadotnet.codeplex.com/

Creating a Captcha Control – Part 2

2011-03-16T03:17:00.001-07:00

In my last article – Creating a Captcha Control – Part 1, I discussed on the front end of the user control that creates the captcha. In this article, I will discuss on the code-behind of the control – that is, what properties are set and how and what methods are used.

The following code shows the properties that are used.

User Control - Properties
 #region field initialisation
 
public Captcha cc;
private int captchaLength;
private double fontSize;
private string fontFamily;
private string backgroundImagePath;
private string textColor;
private string successMessage;
private string errorMessage;
private string characterSet;
 
#endregion
 

Then, the setters and getters for these properties are created as per below.

User Control - Setter / Getter
 #region GetterSetter
public string TestButtonText
{
    get { return B1.Text; }
    set { B1.Text = value; }
}
 
public string SpeakButtonText
{
    get { return BSpeak.Text; }
    set { BSpeak.Text = value; }
}
 
public string ReLoadButtonText
{
    get { return B2.Text; }
    set { B2.Text = value; }
}
 
public string SuccessMessage
{
    get { return successMessage; }
    set { successMessage = value; }
}
 
public string ErrorMessage
{
    get { return errorMessage; }
    set { errorMessage = value; }
}
 
public int CaptchaLength
{
    get { return captchaLength; }
    set
    {
        try
        {
            int k = Convert.ToInt32(value);
            if (k < 5 || k > 10)
                captchaLength = 6;
            else
                captchaLength = k;
        }
        catch (Exception ex)
        {
            captchaLength = 6;
        }
    }
}
 
public string FontFamily
{
    get { return fontFamily; }
    set
    {
        if (value != string.Empty && value != null)
            fontFamily = value;
        else
            fontFamily = "Arial";
    }
}
 
public double FontSize
{
    get { return fontSize; }
    set
    {
        try
        {
            fontSize = Convert.ToInt32(value);
            if (fontSize <= 10 && fontSize >= 24)
                fontSize = 16;
        }
        catch (Exception ex)
        {
            fontSize = 16;
        }
    }
}
 
public string BackgroundImagePath
{
    get { return backgroundImagePath; }
    set
    {
        if (System.IO.File.Exists(Server.MapPath(value)))
            backgroundImagePath = value;
        else
            backgroundImagePath = System.Configuration.ConfigurationManager.AppSettings["defaultImagePath"];
    }
}
 
public string TextColor
{
    get { return textColor; }
    set
    {
        if (value == string.Empty || value == null)
            textColor = "Black";
        else
            textColor = value;
    }
}
 
public string CharacterSet
{
    get { return characterSet; }
    set
    {
        if (value == "" || value == null)
            characterSet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789";
        else
            characterSet = value;
    }
}
 
#endregion
 

The setters and getters are quite straight forward. The captcha length property defaults to 6 in case the value entered is not a number and if the value is less than 6 or greater than 10.

The default font family is set to Arial.

The default font size is set to 16. If fonts are too small – less than 10px – or too large – greater than 24px – the font is automatically set to 16.

The default colour is set to black.

The default character set consists of all letters in uppercase and number from 1 to 9. I have not included lower case letters and 0 as these are sometimes confusing.

The default background image is set within the web.config file. Note that the background image is expected to be within the solution and would require “~” notation to work properly.

Now, in the Page_Load event shown below, I am setting the default values and loading the captcha.

Page_Load event
 protected void Page_Load(object sender, EventArgs e)
{
 
    B1.Text = TestButtonText;
    B2.Text = ReLoadButtonText;
    BSpeak.Text = SpeakButtonText;
    
    SetValues();
 
    cc = GetCaptchaClass();
 
    if (!IsPostBack)
    {
        LoadCaptcha();
    }
}
 

As can be seen, the Button’s text are set a SetValues method is called which sets values for other properties and the method – LoadCaptcha is called if it is not a postback. Another class Captcha is set to method GetCaptchaClass which initiates a Captcha object. I will talk about the Captcha object in a little while.

The SetValues method is below.

SetValues method
 private void SetValues()
{
    if (CharacterSet == null)
        CharacterSet = "";
    if(CaptchaLength == 0)
        CaptchaLength = 6;
 
    if(BackgroundImagePath == null)
        BackgroundImagePath = "";
    
    if(FontFamily == null)
        FontFamily = "";            
    
    if(FontSize == 0)
        FontSize = 0.0;
 
    if(TextColor == null)
        TextColor = "";
}
 

The LoadCaptcha method is interesting – it creates random text and adds it ViewState and Session, adds the Captcha object to Session and sets the path of the Image control to CaptchaHandler.ashx handler. The code for this method is below.

LoadCaptcha method
 private void LoadCaptcha()
{
    string text = GetRandomText();
    
    ViewState.Add("captcha", text);
    Session.Add("CaptchaClass", cc);//add captcha object to Session
    Session.Add("captcha", text);//add captcha text to session
    Im1.ImageUrl = "CaptchaHandler.ashx";
}
 

The random text for the captcha is generated by GetRandomText method which basically creates random text based on the CharacterSet property. The code for this method is below.

GetRandomText  method
 private string GetRandomText()
{
    char[] letters = CharacterSet.ToCharArray();
    string text = string.Empty;
    Random r = new Random();
    int num = -1;
 
    for (int i = 0; i < this.CaptchaLength; i++)
    {
        num = (int)(r.NextDouble() * (letters.Length - 1));
        text += letters[num].ToString();
    }
    return text;
}
 

The Captcha class basically properties for the captcha text. The GetCaptchaClass method initiates the Captcha class and set its properties. The code for this method is below.

GetCaptchaClass  method
 private Captcha GetCaptchaClass()
{
    if (Session["CaptchaClass"] != null)
        cc = (Captcha)Session["CaptchaClass"];
    else
        cc = new Captcha();
 
    cc.FontSize = this.FontSize;
    cc.FontFamily = this.FontFamily;
    cc.BackgroundImagePath = this.BackgroundImagePath;
    cc.TextColor = this.TextColor;
    return cc;
}
 

That’s pretty much all the methods for the user control. When the Reload Button is clicked the LoadAnother method is run that simply calls the LoadCaptcha method as per below.

LoadAnother method
 protected void LoadAnother(object sender, EventArgs e)
{
    LoadCaptcha();
}
 

When the Test button is clicked, the ValidateCaptcha method is run that compares the text entered with the text in the ViewState. The code is below.

ValidateCaptcha method
 protected void ValidateCaptcha(object sender, EventArgs e)
{
    string text = T1.Text;
    if (text == (string)ViewState["captcha"])
        LStatus.Text = SuccessMessage;
    else
        LStatus.Text = ErrorMessage;
}
 

In my next article, I will explain how the reading out the captcha text works. The captcha control is also available for download from CodePlex at http://captchadotnet.codeplex.com/

Creating a Captcha Control – Part 1

2011-03-16T02:22:00.000-07:00

The word CAPTCHA means “Completely Automated Public Turing to tell Computers and Humans Apart”.Captcha is commonly used in registration forms and other forms to disallow spiders and / or bots to automatically submit a form. Captcha is usually some text on an image that can be read by humans but unreadable by computers. An example image of a captcha is below.

Creating a captcha controls involves dynamically generating some text, converting the text into an image, passing the image to the client, pass on the text in some other format so it could be tested against. In this particular instance, I have created a captcha control through which we control properties like font size, colour, background image, character set to choose the characters from and number of characters to display. It will also control additional properties for setting text for various buttons like Test button, Reload button and success and error message. The control also contains option for reading out the text for accessibility reasons.

The control could be used like below:

Using the control
 <uc1:CaptchaControl ID="CaptchaControl1" runat="server" TestButtonText="Try" BackgroundImagePath="~/images/captcha2.png" 
ErrorMessage="Try Another Image" SuccessMessage="good job" CaptchaLength="10" CharacterSet="ABCDEFG123456" 
ReLoadButtonText="Reload" FontSize="20" FontFamily="Trebuchet MS" TextColor="Blue" />
 

After a new project is setup in Visual Studio, a user control is added to the project. The user control simply contains an Image control for displaying captcha, a TextBox control where a user would enter text for comparison, a Label control that displays status – correct or incorrect text entered, three Button controls – one for testing the user, one for reloading the captcha text in case the text cannot be read by the user and another button for reading out the captcha text. It’s important that the text could be read out as it helps visually impaired users to enter the information.

Code for the user control is below.

User Control - aspx
 <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CaptchaControl.ascx.cs" Inherits="CaptchaApp.CaptchaControl" %>
<asp:Image ID="Im1" runat="server" />
<asp:TextBox ID="T1" runat="server"></asp:TextBox>
<asp:Button ID="B1" runat="server" Text="Test" OnClick="ValidateCaptcha" />
<asp:Label ID="LStatus" runat="server"></asp:Label><br /><br />
<asp:Button ID="B2" runat="server" Text="Load Another Image" OnClick="LoadAnother" />
<asp:Button ID="BSpeak" runat="server" Text="Speak" OnClick="ReadCaptcha" />
 

As can be seen, the ImageUrl property for the Image control is not set. It will be set from code-behind.

In my next post, I will discuss how I have created the various properties of the control through the code-behind of this user control.

The source code of the captcha control can be downloaded from CodePlex at http://captchadotnet.codeplex.com/

Asp.Net, JavaScript & Meta Redirects

2011-02-23T04:28:00.000-08:00

There are few different ways to redirect a web page to another page in asp.net. Redirection can be achieved by using JavaScript, meta tags and by using asp.net methods as well. In this blog post, I will show how to setup redirection using each method and what are the pros and cons of it.

JavaScript:

Adding redirect using JavaScript involves only one line of code. The following is the code added in a content page.

Redirect using JavaScript
 <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Redirection.aspx.cs" Inherits="WebApplication1.Redirection" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
   <script type="text/javascript">
    window.location = "default.aspx";
</script>
 
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
</asp:Content>
 

When the page is run, content from the master page is loaded first and then the page redirects to new page using HTTP status code of 200. The HttpFox report from FireFox is below.

As can be seen from Http watch report, the page is loaded first and then the page is redirected. The problem with this approach is that redirect would not work if JavaScript is disabled by the user and also search engines are fooled to think that the page is ok when it is not.

META Tags:

Secondly, meta tags can be used to redirect pages. An example code is below.

Redirect using Meta tags
 <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Redirection.aspx.cs" Inherits="WebApplication1.Redirection" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<meta http-equiv="refresh" content="0;url=default.aspx" /> 
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
</asp:Content>
 

The Http watch report is below.

As can be seen, the css file is loaded first and then the page redirects using Http status code of 200. Similar to the JavaScript approach, the problems are that someone can stops meta refreshes from browser settings and search engines are fooled to think that the page is valid.

ASP.Net Redirect

In asp.net, pages can be redirected using 2 methods. The first method is by using the method – Response.Redirect(string url). Example code is below.

Response.Redirect(string url)
 namespace WebApplication1
{
    public partial class Redirection : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Redirect("default.aspx");
        }
    }
}
 

Http watch report is below.

As can be seen from the code, the page is redirected straight way using http status code of 302. This is a server side redirect and cannot be controlled by the browser. Well, a user may stop loading the page by clicking the Stop button in the browser but I am not counting that.

The main drawback of this approach is that it uses a 302 redirect. This means it is a temporary redirect which is bad for SEO.

Previously, asp.net redirect could be used differently to allow 301 redirect. 301 http status codes means the page has moved permanently and is search engine friendly. Here is a sample code.

asp.net 301 redirect
 namespace WebApplication1
{
    public partial class Redirection : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Status = "301 Moved Permanently";
            Response.AddHeader("Location", "default.aspx");
        }
    }
}
 

Http watch report is below.

In the new release of .NET 4.0, Microsoft has added a new method Response.RedirectPermanent(string url). This method also allows for 301 redirects. Sample code is below.

RedirectPermanent(string url)
 namespace WebApplication1
{
    public partial class Redirection : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.RedirectPermanent("default.aspx");
        }
    }
}
 

The http watch report produced when the page is run is below.

Textbox & TextArea – Max number of words

2010-12-31T21:55:00.001-08:00

In this post, I have demonstrated how to calculate the number of words using both JavaScript and C# code and also how to restrict a TextArea or a multiline TextBox control to contain the specified number of words. One of the challenge in writing this article is to determine what a word is. For the purpose of this post, I have considered any text to be a word that is separated by a space. The words may contain symbols but must contain alphabets. For example, work’s is a word but ;’; is not.

On aspx page, a multiline TextBox control and a span element is first declared. The text to be manipulated will be obtained from the TextBox and the span will display the status. The code is below.

aspx
 <asp:TextBox ID="T2" runat="server" TextMode="MultiLine" Rows="3" onkeyup="WordCount()"></asp:TextBox>
<span id="T2Status" style="color:Red;">5 word(s) remaining.</span>
 

The TextBox contain a KeyUp event. This is a JavaScript event that checks the number of words entered in the TextBox control and updates the status in the span element. The JavaScript code is below.

JavaScript - TextBox max words
 <script type="text/javascript">
    function WordCount() {
        var text = document.getElementById('<%= T2.ClientID %>').value;
        var list = text.split(" ");
 
        var x; var upper; var lower;
        var count = 0;
        var max = 5;
 
        //Use the following to count the number of words
        /*for (x in list) {
            if (list[x].toUpperCase() != list[x].toLowerCase()) {
                count = count +1;
            }
        }*/
 
        var val = "";
 
        for (x in list) {
            if (list[x].toUpperCase() != list[x].toLowerCase()) {
                if (count +1 <= max) {
                    count = count + 1;
                    val += list[x];
                    //alert("val: " + val + " list: " + list[x]);
                }
            }
            else {
                if (count <= max) {
                    val += list[x];
                    //alert("val: " + val + " list: " + list[x]);
                }
            }
            if (x != list.length -1) {
                val += " ";
            }
        }
 
        document.getElementById('<%= T2.ClientID %>').value = val;
        document.getElementById('T2Status').innerHTML = max - count + " words remaining";
    }
 
</script>
 

In JavaScript code, I am first getting the string from the TextBox and then splitting it into an array. Then, I am converting each string in the array into both upper and lower case. Then, I am comparing the converted strings. If the string match, it’s a word, otherwise, not. At the same time, I am creating another string based on the values in the array till it hits the max number of words. This string is then used to populate the TextBox.

The same can be achieved using C# code but this will cause unnecessary postbacks to the server. However, it is advisable to check the data using C# to avoid a user submitting the data from a browser with JavaScript disabled.

I have written two methods – one to do a word count and want to limit the string to a maximum number of words. In this first method to do a word count, I have broken the string into a string array using space - “ “ - as the delimiter. Then, I have check if a particular string on the array contains an English letter. If it does, the counter is updated. The code for this method is below.

C# - WordCount() method
 private int WordCount(string s)
{
    int c = 0;
    string[] split = {" "};
 
 
    string[] list = s.Split(split, StringSplitOptions.RemoveEmptyEntries);
 
    char[] ch = {'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
                'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'};
 
 
    string val = string.Empty;
 
    for (int i = 0; i < list.Count(); i++)
    {
        if (list[i].IndexOfAny(ch) >= 0)
            c++;                             
    }
 
    return c;
}
 

In the next method, I have reconstructed a string to limit it to maximum number of words specified. It uses the same logic as to count the number of words. A new string is created based on the values in the string array. The code for the method is below.

C# - String, max words
 private string MaxWord(string s, int max)
{
    int c = 0;
    string[] split = { " " };
 
 
    string[] list = s.Split(split, StringSplitOptions.RemoveEmptyEntries);
 
    char[] ch = {'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
                'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'};
 
 
    string val = string.Empty;
 
    for (int i = 0; i < list.Count(); i++)
    {
        if (list[i].IndexOfAny(ch) >= 0)
                c++;
        if (c <= max)
            val += list[i] + " ";
    }
 
    return val;              
}
 

Max length of multiline TextBox and TextArea

2010-12-29T04:17:00.001-08:00

It is a common scenario to have a textarea element or multiline TextBox control in a html / asp.net page and the challenge is to limit the number of characters that can be entered and to display the remaining number of characters that can be entered. The textarea unlike the TextBox control does not support the maxlength property and thus cannot be limited. The solution is to use javascript to limit the number of characters.

In this example, I have added a TextBox control and added the onkeyup event for the control. The code for the page is below.

aspx
 <asp:TextBox ID="T1" runat="server" TextMode="MultiLine" Rows="3" onkeyup="T1_KeyUp()"></asp:TextBox>
<span id="T1Status" style="color:Red;">50 character(s) remaining.</span>
 

The span element in the page will display the number of remaining characters that can be entered in the TextBox.

The JavaScript code is below. The code sets the max length of the TextBox to 50 characters.

JavaScript function
 <script type="text/javascript">
    function T1_KeyUp() {
        var text = document.getElementById('<%= T1.ClientID %>').value;
        var len = text.length;
        var max = 50;
        if (len > max) {
            text = text.substring(0, max);
            len = 50;
            document.getElementById('<%= T1.ClientID %>').value = text;
        }
        document.getElementById('T1Status').innerHTML = max - len + " character(s) remaining.";
    
    }
</script>
 

Server side could also be used for this but it will cause unnecessary postbacks to the server. However, the actual text entered should be validated from the server end as JavaScript can be easily disabled by a user.

Retrieve line break from TextBox and TextArea control

2010-12-29T02:45:00.001-08:00

It is a common issue to recognise line breaks inside a textarea. Text is entered in a textarea or an asp.net multiline TextBox control and Enter key is pressed to add a new line to the text. This situation may arise when entering, for example, address or feedback in a textarea and the user wants to separate some text from the other.

When the text is obtained from code behind or from JavaScript, the line break needs to be obtained by checking the string entered in the textbox. This is needed as the browser fails to display the line break and instead requires a “<br/>” tag.

In this example, I have added a multiline TextBox control and used both JavaScript and server side code to replace the line break with a “<br/>” tag and to replace the carriage return with “  ”. The code for the page is below.

aspx page
  <asp:TextBox ID="TextBox1" runat="server" Rows="3" TextMode="MultiLine"></asp:TextBox>
 <br />
 Server Click: <asp:Label ID="Label1" runat="server"></asp:Label>
 Js Click: <span id="SpanJs"></span>
 <br />
 <asp:Button ID="Button1" runat="server" onclick="Button1_Click" 
     Text="Continue" />
 
 <asp:Button ID="Button2" runat="server" onclientclick="JsClick()" Text="JS" />
 

The code for JavaScript function JsClick() is below. The function retrieves the text from the TextBox control, performs string manipulation and displays the text in a span element.

JavScript function
 <script type="text/javascript">
    function JsClick() {
        var text = document.getElementById('<%= TextBox1.ClientID %>').value;
        text = text.replace("\n", "<br/>");
        text = text.replace("\r", "&nbsp;nbsp;");
 
        document.getElementById('SpanJs').innerHTML = text;
    }
</script>
 

The code for Button’s OnClick event is below. Like JavaScript function, the method retrieves text from TextBox control, performs string manipulation and outputs the text in a Label control.

Code-behind
 protected void Button1_Click(object sender, EventArgs e)
{
    string text = TextBox1.Text;
    text = text.Replace("\n", "<br/>");
    text = text.Replace("\r", "&nbsp;&nbsp;");
    Label1.Text = text;
}
 

Create and Access Dynamic Controls in asp.net

2010-12-22T06:31:00.001-08:00

In asp.net, controls like Label, TextBox can be dynamically created. Controls are typically added to the page on Page_Load method.Dynamically created controls need to be recreated on each postback. Otherwise, the controls will be lost and cannot be accessed from code behind.
In this example, I will create dynamically add a TextBox and a Label control to the form an then access the values of these controls on Button click.
Code for aspx page is below.

aspx page
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="AccessDynamicControl.aspx.cs" Inherits="WebApplication1.AccessDynamicControl" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:Button ID="Button1" runat="server" Text="Continue" onclick="Button1_Click" />
</asp:Content>

A Label and a TextBox control are created on Page_Load method. As can be seen, the controls are added, each time the Page_Load method is run.

Page_Load method
protected void Page_Load(object sender, EventArgs e)
{
    Label l = new Label();
    l.ID = "Label1";
    l.Text = "some text";
 
    TextBox t = new TextBox();
    t.ID = "TB1";
 
    this.Form.Controls.Add(l);
    this.Form.Controls.Add(t);
}

When the Button is clicked, dynamically created Label and TextBox controls are accessed and the Text value of these controls are displayed on the page.

OnClick event
protected void Button1_Click(object sender, EventArgs e)
{
    Label l2 = (Label)this.Form.FindControl("Label1");
    TextBox t2 = (TextBox)this.Form.FindControl("TB1");
    Response.Write("Label" + l2.Text + " TextBox: " + t2.Text);
}

Load ListBox items based on another ListBox’s selected item

2010-11-28T00:00:00.001-08:00

In many web applications we want to load a control based on what is selected in another control. For example, loading a ListBox control or a DropDownList control based on what is selected in another ListBox or DropDownList control. The situation is not limited to only these controls but could also use RadioButtonList, CheckBoxList controls, etc.

In this example, I have created a page that populates ListBox control with States value based on what Country is selected in another ListBox. I have added 2 ListBox controls – for State and Country, a Button and a Label control to the page. From code-behind page, I have created a DataTable that holds the country and corresponding state values. When an item is selected from Country ListBox, the State ListBox is populated. The AutoPostBack property for Country ListBox is set to true and SelectedIndexChanged event is implemented.

When the Button is clicked, the Label control’s Text property is populated to display the state and country that has been selected from the ListBox controls. The code for the aspx page and code-behind is below.

aspx page
 <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="LoadListboxFromDatatable.aspx.cs" Inherits="WebApplication1.LoadListboxFromDatatable" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
 
    <asp:ListBox ID="ListBoxCountry" runat="server" AutoPostBack="True" 
        onselectedindexchanged="ListBoxCountry_SelectedIndexChanged">
        <asp:ListItem>Select:</asp:ListItem>
        <asp:ListItem>Australia</asp:ListItem>
        <asp:ListItem>US</asp:ListItem>
        <asp:ListItem>India</asp:ListItem>
    </asp:ListBox>
    <asp:ListBox ID="ListBoxState" runat="server"></asp:ListBox>
    <br />
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Show" />
    <asp:Label ID="LStatus" runat="server"></asp:Label>
 
</asp:Content>
 

Code-behind
 using System;
using System.Data;
 
namespace WebApplication1
{
    public partial class LoadListboxFromDatatable : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
 
        }
 
        protected void ListBoxCountry_SelectedIndexChanged(object sender, EventArgs e)
        {
            string country = ListBoxCountry.SelectedValue;
            ListBoxState.Items.Clear();
 
            foreach (DataRow rows in GetStates().Rows)
            {
                if (rows[0].ToString() == country)
                    ListBoxState.Items.Add(rows[1].ToString());
            }
        }
 
        private DataTable GetStates()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("Country", typeof(string));
            dt.Columns.Add("State", typeof(string));
 
            dt.Rows.Add(new object[] { "US", "Los Angeles" });
            dt.Rows.Add(new object[] { "US", "Virginia" });
            dt.Rows.Add(new object[] { "US", "Ohio" });
            dt.Rows.Add(new object[] { "Australia", "NSW" });
            dt.Rows.Add(new object[] { "Australia", "Victoria" });
            dt.Rows.Add(new object[] { "Australia", "Tasmania" });
            dt.Rows.Add(new object[] { "India", "Maharastra" });
            dt.Rows.Add(new object[] { "India", "West Bengal" });
            dt.Rows.Add(new object[] { "India", "Assam" });
 
            return dt;
        }
 
        protected void Button1_Click(object sender, EventArgs e)
        {
            LStatus.Text = "Country: " + ListBoxCountry.SelectedValue + "; State: " + ListBoxState.SelectedValue;
        }
    }
}
 

Asp.Net FileUpload control – use and configuration

2010-11-20T19:27:00.001-08:00

The asp.net FileUpload control allows a user to browse and upload files to the web server. From developers perspective, it is as simple as dragging and dropping the FileUpload control to the aspx page. An extra control, like a Button control, or some other control is needed, to actually save the file.

aspx page
 <asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="B1" runat="server" Text="Save" OnClick="B1_Click" />
 

By default, the FileUpload control allows a maximum of 4MB file to be uploaded and the execution timeout is 110 seconds. These properties can be changed from within the web.config file’s httpRuntime section. The maxRequestLength property determines the maximum file size that can be uploaded. The executionTimeout property determines the maximum time for execution.

web.config file
 <httpRuntime maxRequestLength="8192" executionTimeout="220"/>
 

From code behind, the mime type, size of the file, file name and the extension of the file can be obtained. The maximum file size that can be uploaded can be obtained and modified using the System.Web.Configuration.HttpRuntimeSection class.

Files can be alternatively saved using the System.IO.HttpFileCollection class. This collection class can be populated using the Request.Files property. The collection contains HttpPostedFile class which contains a reference to the class.

Code behind
 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Configuration;
using System.Web.Configuration;
 
namespace WebApplication1
{
    public partial class WebControls : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
 
        //Using FileUpload control to upload and save files
        protected void B1_Click(object sender, EventArgs e)
        {
            if (FileUpload1.HasFile && FileUpload1.PostedFile.ContentLength > 0)
            {
                //mime type of the uploaded file
                string mimeType = FileUpload1.PostedFile.ContentType;
 
                //size of the uploaded file
                int size = FileUpload1.PostedFile.ContentLength; // bytes
 
                //extension of the uploaded file
                string extension = System.IO.Path.GetExtension(FileUpload1.FileName);
                
                //save file
                string path = Server.MapPath("path");                
                FileUpload1.SaveAs(path + FileUpload1.FileName);
                
            }
            //maximum file size allowed
            HttpRuntimeSection rt = new HttpRuntimeSection();
            rt.MaxRequestLength = rt.MaxRequestLength * 2;
            int length = rt.MaxRequestLength;
       
            //execution timeout
            TimeSpan ts = rt.ExecutionTimeout;
            double secomds = ts.TotalSeconds;
 
        }
 
        //Using Request.Files to save files
        private void AltSaveFile()
        {
            HttpFileCollection coll = Request.Files;
            for (int i = 0; i < coll.Count; i++)
            {
                HttpPostedFile file = coll[i];
 
                if (file.ContentLength > 0)
                    ;//do something
            }
        }
    }
}
 

Custom Validation Summary in Asp.Net

2010-11-19T16:50:00.001-08:00

The Validation Summary control in asp.net displays error messages when the button is clicked. The other validation controls, like Required Field Valuators or Compare Valuators controls displays error messages when the controls it’s validating loses focus or changes. There is no built in control that displays a summary of all validation errors in a separate controls.

In this blog post, I will create a asp.net page, add couple of controls – Textbox and DropDownList and add validation controls for these. I will also add custom javascript that checks the validation controls are displaying error messages and populates the custom validation control accordingly.

From the javascript, I have checked whether the validation controls are showing any messages and populated the validation summary section. Also, OnBlur event of Textbox and onchange event of Dropdownlist is used to check for the errors.

Code Snippet
 <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Validation.aspx.cs" Inherits="WebApplication1.Validation" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
    function ShowError() {
        var msg = document.getElementById("spanError");
        var reqV = document.getElementById('<%= RequiredFieldValidator1.ClientID %>');
        var comV = document.getElementById('<%= CompareValidator1.ClientID %>');
 
        msg.innerHTML = "";
 
        if (reqV.style.visibility == "visible")
            msg.innerHTML += "Textbox1 is required" + "<br/>";
 
        if (comV.style.visibility == "visible")
            msg.innerHTML += "Drop down list is required";
                         
    }
 
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
 
 
    <asp:TextBox ID="TextBox1" runat="server" onblur="ShowError()"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
        ControlToValidate="TextBox1" ErrorMessage="*"></asp:RequiredFieldValidator>
    <br />
    <asp:DropDownList ID="DropDownList1" runat="server" onchange="ShowError()">
        <asp:ListItem>Select:</asp:ListItem>
        <asp:ListItem>1</asp:ListItem>
    </asp:DropDownList>
    <asp:CompareValidator ID="CompareValidator1" runat="server" 
        ControlToValidate="DropDownList1" ErrorMessage="*" 
        Operator="NotEqual" ValueToCompare="Select:"></asp:CompareValidator>
    <br />
    <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="ShowError()" />
 
    <div>Validation Summary:<br />
    <span id="spanError"></span>
    </div>
 
</asp:Content>
 

Custom handler in asp.net using C#

2010-11-15T04:40:00.001-08:00

Http handlers in asp.net implement the System.Web.IHTTPHandler interface and provides low level Request and Response API to respond to the incoming Http requests. Using this method, we can setup a different file extension instead of .aspx to handle the request.

In this example, I will create a simple handler and use .example as the extension to call the page. First, I will add a class that implements the IHTTPHandler class as below.

Code Snippet
 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text;
 
namespace WebApplication1
{
    public class CustomHandler : IHttpHandler
    {
        public bool IsReusable
        {
            get { return false; }
        }
 
        public void ProcessRequest(HttpContext context)
        {
            HttpRequest request = context.Request;
            HttpResponse response = context.Response;
            response.Write(Html());
        }
 
        public string Html()
        {
            StringBuilder sb = new StringBuilder();
            sb.Append("<html><head><title>Custom Handler</title></head>");
            sb.Append("<body>Test page to demonstrate custom handler</body></html>");
            return sb.ToString();        
        }
    }
}
 

The IsReusable() and ProcessRequest(HttpContext context) methods need to be implemented as part of implementing the interface. The HttpContext class contains reference to the Request and Response objects. To send custom html as the response, another method Html() is written that return some html content as string.

To be able to use this code and use .example as the file extension, the <system.web> section of web.config file needs to be updated. The code is shown below.

Code Snippet
 <httpHandlers>
  <add verb="*" path="*.example" type="WebApplication1.CustomHandler"/>
</httpHandlers>
 

When any page with file name, for example, example.example is called on the browser, custom html is returned as defined in ProcessRequest method in CustomHandler class.

Using asp.net AdRotator control

2010-11-13T21:57:00.001-08:00

The asp.net AdRotator control is used to dynamically display advertisements on the web page. Advertisements are basically images that can be clicked and changes when page is refreshed. The AdRotator control requires an xml file to be used as the data source. The following properties can be specified for the control.

ImageUrl – Source URL of the image.
NavigateUrl – URL to which the page will be redirected once the image is clicked.
AlternateText – The text that will be used as the alt attribute for the image.
Impressions – A number that determines the number of times that the image will be displayed.
Keyword – The category for the advertisements.
Height – Height of the image.
Width – Width of the image.

The following is a sample code that is used to display the ads dynamically.

On .aspx page,

Code Snippet
 <asp:AdRotator ID="AdRotator1" runat="server" DataSourceID="XmlDataSource1" />
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/Ads.xml">
</asp:XmlDataSource>
 

Sample code for the xml is below.

Code Snippet
 <?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
  <Ad>
    <ImageUrl>images/ad1.png</ImageUrl>
    <NavigateUrl>Default.aspx</NavigateUrl>
    <AlternateText>Ad1</AlternateText>
    <Impressions>60</Impressions>
    <Keyword>Ad1 Ad1</Keyword>
  </Ad>
  <Ad>
    <ImageUrl>images/ad2.png</ImageUrl>
    <NavigateUrl>Default2.aspx</NavigateUrl>
    <AlternateText>Ad2</AlternateText>
    <Impressions>40</Impressions>
    <Keyword>Ad2 Ad2</Keyword>
  </Ad>
</Advertisements>
 

Monitor file system in .NET using C#

2010-11-09T04:10:00.001-08:00

The System.IO.FileSystemWatcher class can be used to monitor a particular path/directory for any modification to the files. The modification includes creation, deletion, renaming, file name changes and file size changes in the particular directory or to any sub-directory. The EnableRaisingEvents property of FileSystemWatcher class must be set to true.

The properties of the file that needs to be monitored can be set by using the NotifyFilter class. The IncludeSubdirectories property needs to be set to true if sub-directories needs to be monitored.

The Changed, Created and Deleted events can be handled by the FileSystemEventHandler and the Renamed event can be handled by the RenamedEventHandler. It is a good idea to decide want what to monitor as otherwise the log file will keep growing.

In this particular example, I will monitor the App_Data folder in a web application and write the logs in a text file. The code is written in Global.asax file.

Code Snippet
 void Application_Start(object sender, EventArgs e)
{
    // Code that runs on application startup
    string path = Server.MapPath("App_Data");
    FileSystemWatcher fs = new FileSystemWatcher(path);
 
    fs.EnableRaisingEvents = true; // must be set to true
    fs.IncludeSubdirectories = true;
    //fs.NotifyFilter = NotifyFilters.FileName | NotifyFilters.Size;
 
    fs.Changed += new FileSystemEventHandler(fs_Changed);
    fs.Renamed += new RenamedEventHandler(fs_Renamed);
    fs.Created += new FileSystemEventHandler(fs_Changed);
    fs.Deleted += new FileSystemEventHandler(fs_Changed);
 
    Application.Add("watcher", fs);            
}
 
public static void fs_Renamed(object sender, RenamedEventArgs e)
{
    string path = @"C:\Users\username\Desktop\lognet.txt";
    File.AppendAllText(path, e.Name + "-" + e.ChangeType);
}
 
public void fs_Changed(object sender, FileSystemEventArgs e)
{
    string path = @"C:\Users\username\Desktop\lognet.txt";
    File.AppendAllText(path, e.Name + " - " + e.ChangeType);
}
 

List files and pictures in directories using C#

2010-09-25T05:44:00.001-07:00

It is quite simple to list all files in a directory in C# using the System.IO.Directory class. This class contains the GetFiles(string path) method that returns all filenames as a string array within the path specified. It also contains the overloaded GetFiles(string path, string match) method that returns all filenames in a string array in the path and criteria (match) specified.

In the following example, I have demonstrated how to get all files in a directory and how to get all pictures from a particular directory.

Code Snippet
 public class DirectoryListing
{
    string path = @"C:\Users\shahed.kazi\Desktop";
 
    //Get all files in desktop
    public string[] GetAllFiles()
    {
        return Directory.GetFiles(path);
    }
 
    //Get pictures from desktop
    public string[] GetAllPictures()
    {
        List<string[]> list = new List<string[]>();
        list.Add(Directory.GetFiles(path, "*.bmp"));
        list.Add(Directory.GetFiles(path, "*.png"));
        list.Add(Directory.GetFiles(path, "*.gif"));
        list.Add(Directory.GetFiles(path, "*.jpg"));
        list.Add(Directory.GetFiles(path, "*.jpeg"));
 
 
        List<string> filename = new List<string>();
 
        for (int i = 0; i < list.Count; i++)
        {
            foreach (string s in list[i])
                filename.Add(s);
        }
        return filename.ToArray();
    }
}
 

Get Drive Information in Windows Using C#

2010-09-23T02:52:00.001-07:00

It is easy to get the drive information using C#. Information like available free space, name and volume label of the drive, total size of the drive can be easily obtained. Below is a sample code to demonstrate how the drive information can be obtained. System.IO.DriveInfo class has been used to retrieve drive information. Please note that the code is written within a try-catch block since exceptions may arise while using IO.

Code Snippet
 foreach (DriveInfo di in DriveInfo.GetDrives())
            {
                string br = "<br/>";
                try
                {
                    Response.Write("available free space: " + di.AvailableFreeSpace + br);
                    Response.Write("drive format: " + di.DriveFormat + br);
                    Response.Write("drive type: " + di.DriveType + br);
                    Response.Write("is ready: " + di.IsReady + br);
                    Response.Write("name: " + di.Name + br);
                    Response.Write("root directory: " + di.RootDirectory + br);
                    Response.Write("total free space: " + di.TotalFreeSpace + br);
                    Response.Write("total size: " + di.TotalSize + br);
                    Response.Write("volume label: " + di.VolumeLabel + br);
                }
                catch (Exception ex)
                {
                    Response.Write(ex.Message);
                }
            }
 