Monday, November 8, 2010

Using Query Strings

A lot of options are available for state management in Asp.net. In this post i will show you how to use query strings to transfer data from one web form to another. I will be using Visual Web developer 2010 express.

Query Strings?
 Query string is client based state management tool. It is passed with the URL from one page to another. The query string variable starts after a '?' ;
Note: 
Its not a great idea to use query strings to contain sensitive information like password or other private stuff.
Some browsers have blogged very large URL's so its good to keep your query string as short as possible.

Lets Do it:
As I mentioned earlier that i will be using visual web developer 2010. If you are using a previous version it does not really matter. 
So in this example we will take the name, age and email address of the user and simply display it on the other page using query strings. 
In the design view of your default.aspx page drag and drop three text boxes. change the id if you want i'm going to change them to something understandable.

here is my source:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
        .style2
        {
            width: 166px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <table class="style1">
        <tr>
            <td class="style2">
                Name:</td>
            <td>
                <asp:TextBox ID="Text_name" runat="server" Height="22px" Width="139px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="style2">
                Age:</td>
            <td>
                <asp:TextBox ID="Text_age" runat="server" Height="22px" Width="137px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="style2">
                Email:</td>
            <td>
                <asp:TextBox ID="Text_email" runat="server" Height="22px" Width="134px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="style2">
                <asp:Button ID="Button1" runat="server" Height="26px" onclick="Button1_Click" 
                    Text="Button" Width="61px" />
            </td>
            <td>
                &nbsp;</td>
        </tr>
    </table>
    </form>
</body>
</html>


Now my design view looks something like this:


Now double click on the button, and lets write the c# code for the button click even:

here goes:

//code start

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        string url = "page2.aspx?";
        string name = Text_name.Text; //from name text box 
        string age = Text_age.Text;  //from name text box
        string email = Text_email.Text;  //from name text box

        url += "name=" + name + "&" + "age=" + age + "&" + "email=" + email; //three query string variables used

        Response.Redirect(url);


    } 
}

//code end-------------------------------------------

Now I created added another web form by name "page2.aspx" lets check. In the design view i have drag dropped three label controls and my page source looks something like this:


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        Name:
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    
    </div>
    <p>
        Age:
        <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
    </p>
    <p>
        Email:
        <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
    </p>
    </form>
</body>
</html>


Now the C# code behind for requesting the query string data:

//code goes here:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class page2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text = Request.QueryString["name"];
        Label2.Text = Request.QueryString["age"];
        Label3.Text = Request.QueryString["email"];
    }
}
//code ends

Thats all there is!! enjoy!!
Output:

Page 1:









Thursday, November 4, 2010

Send mail in asp.net

Sending automated mails is very important for almost any web site. It can be used for newsletters or a simple contact us page. In this example i will make a contact us page and send information over an smtp server.
I will be using google's smtp server known as: smtp.google.com because its free. You need to have a gmail account for this.

Now lets check out the page layout:

Now the code:


using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Net.Mail;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
string mail_to = "viper_451@yahoo.com";
string mail_from = "fareedahmed512@gmail.com";
System.Net.Mail.MailMessage mail = new MailMessage(); //initiate
mail.To.Add(mail_to);
mail.From = new MailAddress(mail_from,"WEBMASTER",System.Text.Encoding.UTF8);
mail.Subject = "Mail from client";
mail.SubjectEncoding = System.Text.Encoding.UTF8;
mail.Body = "Name: " + TextBox1.Text + " ||Email: " + TextBox2.Text + " ||Comments: " + TextBox3.Text;
mail.BodyEncoding = System.Text.Encoding.UTF8;
mail.IsBodyHtml = true;

mail.Priority = MailPriority.High;

///////Working on smtp client:::::

SmtpClient cl = new SmtpClient();

cl.Credentials = new System.Net.NetworkCredential(mail_from,"Your_password_here");
cl.Port = 587; // gmail uses this port
cl.Host = "smtp.gmail.com";
cl.EnableSsl = true;

try
{
cl.Send(mail);
Response.Write("Thank you!!");
}

catch(Exception exp) {
Response.Write("Sorry try again :(");

   }
  }
}

--------------------------------END OF CODE--------------------------------------

 

Sunday, October 31, 2010

How to Use CSS for page layout:

As mentioned in my last post there is one more way to set your page layout and that is using CSS.
Now if you have a CSS file you can use it and embedd it in your asp.net web application.
Now how do we do that?
Lets make a simple CSS file in visual studio and link it in our default.aspx page:
Steps:
1. In the solution's explorer write click on your website solution> select add new item> select stylesheet>rename it if you want.







Now that you have created a new CSS file lets add something in it..
I have created a style sheet and named it style1.css. and in this CSS file I have written some code, to change the background colour to grey and the text color to white. 
One important thing to note here is that Visual Studio's "intelllisence" features pops up and helps you out with commands if you have forgotten any.



Instead of writing code you can also write click between the braces and select bulid style and choose the style of your choice. Now how to add the CSS file to your default.aspx page or your master page?
simple..go to the source view and press and hold the your CSS file from the solution explorer and drag drop it between the head tag, right below the title tag:




And thtz it!!

Tutorial: Somthing about the page Layout..

There are actually two ways by which you can design your page layout.
1. Using tables.
2. Using CSS.

lets use these two ways one by one:

Tables:
A table can be used to set a layout for your Web application. using a table is very simple:
In your web application in the defaulft page or your current web form:
do this:


    The table properties will apear and you can select some as per your requirements eg: rows, cols etc.

Well Look at CSS in the next post...