In this article, we will learn how to display a username along with his/her photo stored in the database after successful login. Before doing this we will add details of the employee with an image and display it in a GridView. Here the image will be stored in the application folder. We can also edit, update, delete and cancel the details of the employee in the GridView.

Table Creation

Image 1.jpg

Stored Procedure

  1. CREATE PROCEDURE insert_employee
  2. (
  3. @UserName varchar(50),
  4. @Password varchar(50),
  5. @address varchar(50),
  6. @image varchar(50)
  7. )
  8. AS
  9. Insert into employee values(@UserName,@Password,@address,@image)
  11. CREATE PROCEDURE update_employee
  12. (
  13. @id int,
  14. @UserName varchar(50),
  15. @address varchar(50)
  16. )
  17. AS
  18. update employee set UserName=@UserName,address=@address where id=@id
  19. CREATE PROCEDURE delete_employee
  20. (@id int)
  21. AS
  22. Delete from employee where id=@id
Default.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Display_image_username_after_login._Default" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" >
  4. <head runat="server">
  5. <title>Untitled Page</title>
  6. </head>
  7. <body>
  8. <form id="form1" runat="server">
  9. <div>
  10. <table>
  11. <tr>
  12. <td>
  13. Name</td>
  14. <td>
  15. <asp:TextBox ID="txt_name" runat="server" Width="150px"></asp:TextBox>
  16. <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
  17. ControlToValidate="txt_name" ErrorMessage="Please enter the name"></asp:RequiredFieldValidator>
  18. </td>
  19. </tr>
  20. <tr>
  21. <td>
  22. Password</td>
  23. <td>
  24. <asp:TextBox ID="txt_password" runat="server" TextMode="Password" Width="150px"></asp:TextBox>
  25. <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server"
  26. ControlToValidate="txt_password" ErrorMessage="Please enter the password"></asp:RequiredFieldValidator>
  27. </td>
  28. </tr>
  29. <tr>
  30. <td>
  31. Address</td>
  32. <td>
  33. <asp:TextBox ID="txt_address" runat="server" Width="150px"></asp:TextBox>
  34. <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
  35. ControlToValidate="txt_address" ErrorMessage="Please enter the address"></asp:RequiredFieldValidator>
  36. </td>
  37. </tr>
  38. <tr>
  39. <td>
  40. Image</td>
  41. <td>
  42. <asp:FileUpload ID="FileUpload1" runat="server" />
  43. <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server"
  44. ControlToValidate="FileUpload1" ErrorMessage="Please browse the image"></asp:RequiredFieldValidator>
  45. </td>
  46. </tr>
  47. <tr>
  48. <td>
  49. </td>
  50. <td>
  51. <asp:Button ID="btn_insert" runat="server" onclick="btn_insert_Click"
  52. Text="Insert" />
  53. </td>
  54. </tr>
  55. <tr>
  56. <td colspan="2">
  57. <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
  58. onrowcancelingedit="GridView1_RowCancelingEdit"
  59. onrowdeleting="GridView1_RowDeleting" onrowediting="GridView1_RowEditing"
  60. onrowupdating="GridView1_RowUpdating" onselectedindexchanging="GridView1_SelectedIndexChanging"
  61. BackColor="#CC3300" ForeColor="Black">
  62. <Columns>
  63. <asp:TemplateField HeaderText="Name">
  64. <EditItemTemplate>
  65. <asp:TextBox ID="txt_name" runat="server"
  66. Text='<%# Eval("UserName") %>'></asp:TextBox>
  67. <asp:Label ID="Label4" runat="server" Text='<%# Eval("id") %>' Visible="False"></asp:Label>
  68. </EditItemTemplate>
  69. <ItemTemplate>
  70. <asp:Label ID="Label1" runat="server" Text='<%# Eval("UserName") %>'></asp:Label>
  71. <asp:Label ID="Label2" runat="server" Text='<%# Eval("id") %>' Visible="False"></asp:Label>
  72. </ItemTemplate>
  73. </asp:TemplateField>
  74. <asp:TemplateField HeaderText="Address">
  75. <EditItemTemplate>
  76. <asp:TextBox ID="txt_address" runat="server" Text='<%# Eval("address") %>'></asp:TextBox>
  77. </EditItemTemplate>
  78. <ItemTemplate>
  79. <asp:Label ID="Label3" runat="server" Text='<%# Eval("address") %>'></asp:Label>
  80. </ItemTemplate>
  81. </asp:TemplateField>
  82. <asp:TemplateField HeaderText="Image">
  83. <ItemTemplate>
  84. <img alt ="" src ='images/<%#Eval("image") %>' height="50px" width="50px"/>
  85. </ItemTemplate>
  86. </asp:TemplateField>
  87. <asp:TemplateField HeaderText="Edit">
  88. <EditItemTemplate>
  89. <asp:LinkButton ID="LinkButton3" runat="server" CausesValidation="False" CommandName="Update">Update</asp:LinkButton>
  90. <asp:LinkButton ID="LinkButton4" runat="server" CausesValidation="False" CommandName="Cancel">Cancel</asp:LinkButton>
  91. </EditItemTemplate>
  92. <ItemTemplate>
  93. <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False"
  94. CommandName="Edit">Edit</asp:LinkButton>
  95. </ItemTemplate>
  96. </asp:TemplateField>
  97. <asp:TemplateField HeaderText="Delete">
  98. <ItemTemplate>
  99. <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"
  100. CommandName="Delete"
  101. onclientclick="return confirm('Are you sure you want to delete this record')">Delete</asp:LinkButton>
  102. </ItemTemplate>
  103. </asp:TemplateField>
  104. </Columns>
  105. <HeaderStyle BackColor="#FF9933" />
  106. <AlternatingRowStyle BackColor="#FFCC00" />
  107. </asp:GridView>
  108. </td>
  109. </tr>
  110. </table>
  111. </div>
  112. <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Login.aspx">Login</asp:HyperLink>
  113. </form>
  114. </body>
  115. </html>

Default.aspx.cs

  1. using System;
  2. using System.Collections;
  3. using System.Configuration;
  4. using System.Data;
  5. using System.Linq;
  6. using System.Web;
  7. using System.Web.Security;
  8. using System.Web.UI;
  9. using System.Web.UI.HtmlControls;
  10. using System.Web.UI.WebControls;
  11. using System.Web.UI.WebControls.WebParts;
  12. using System.Xml.Linq;
  13. using System.Data.SqlClient;
  14. using System.IO;
  15. namespace Display_image_username_after_login
  16. {
  17. public partial class _Default : System.Web.UI.Page
  18. {
  19. string strConnString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
  20. string s1;
  21. string path;
  22. SqlConnection cnn = new SqlConnection();
  23. SqlCommand com = new SqlCommand();
  24. SqlDataAdapter sqlda;
  25. DataTable dt;
  26. int id;
  27. string name;
  28. string address;
  29. string image;
  30. protected void Page_Load(object sender, EventArgs e)
  31. {
  32. if (!IsPostBack)
  33. {
  34. bindgrid();
  35. }
  36. }
  37. protected void btn_insert_Click(object sender, EventArgs e)
  38. {
  39. if (FileUpload1.PostedFile.ContentLength > 0)
  40. {
  41. s1 = Path.GetFileName(FileUpload1.FileName);
  42. path = Server.MapPath("images") + "/" + s1;
  43. FileUpload1.SaveAs(path);
  44. }
  45. SqlConnection con = new SqlConnection(strConnString);
  46. con.Open();
  47. SqlCommand com = new SqlCommand("insert_employee", con);
  48. com.CommandType = CommandType.StoredProcedure;
  49. com.Connection = con;
  50. com.Parameters.AddWithValue("@UserName", txt_name.Text);
  51. com.Parameters.AddWithValue("@Password", txt_password.Text);
  52. com.Parameters.AddWithValue("@address", txt_address.Text);
  53. com.Parameters.AddWithValue("@image", s1);
  54. com.ExecuteNonQuery();
  55. com.Dispose();
  56. bindgrid();
  57. con.Close();
  58. clear();
  59. }
  60. private void clear()
  61. {
  62. txt_name.Text = "";
  63. txt_password.Text = "";
  64. txt_address.Text = "";
  65. }
  66. private void bindgrid()
  67. {
  68. SqlConnection con = new SqlConnection(strConnString);
  69. con.Open();
  70. sqlda = new SqlDataAdapter("SELECT * FROM employee ", con);
  71. dt = new DataTable();
  72. sqlda.Fill(dt);
  73. sqlda.Dispose();
  74. GridView1.DataSource = dt;
  75. GridView1.DataBind();
  76. con.Close();
  77. }
  78. protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
  79. {
  80. SqlConnection con = new SqlConnection(strConnString);
  81. con.Open();
  82. try
  83. {
  84. id = Convert.ToInt32(((Label)(GridView1.Rows[e.RowIndex].FindControl("label2"))).Text);
  85. SqlCommand com = new SqlCommand("delete_employee", con);
  86. com.CommandType = CommandType.StoredProcedure;
  87. com.Connection = con;
  88. com.Parameters.Add("@id", SqlDbType.Int).Value = id;
  89. SqlDataAdapter sqlda = new SqlDataAdapter("select * from employee where id=@id", con);
  90. sqlda.SelectCommand.Parameters.Add("@id", SqlDbType.Int).Value = id;
  91. DataSet ds = new DataSet();
  92. sqlda.Fill(ds);
  93. try
  94. {
  95. image = Convert.ToString(ds.Tables[0].Rows[0]["image"]);
  96. File.Delete(Server.MapPath("images") + "\\" + image);
  97. }
  98. catch (Exception)
  99. {
  100. }
  101. com.ExecuteNonQuery();
  102. com.Dispose();
  103. bindgrid();
  104. }
  105. catch (Exception)
  106. {
  107. }
  108. }
  109. protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
  110. {
  111. GridView1.EditIndex = -1;
  112. bindgrid();
  113. }
  114. protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
  115. {
  116. GridView1.EditIndex = e.NewEditIndex;
  117. bindgrid();
  118. }
  119. protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
  120. {
  121. SqlConnection con = new SqlConnection(strConnString);
  122. con.Open();
  123. id = Convert.ToInt32(((Label)(GridView1.Rows[e.RowIndex].FindControl("label4"))).Text);
  124. name = (((TextBox)(GridView1.Rows[e.RowIndex].FindControl("txt_name"))).Text);
  125. address = (((TextBox)(GridView1.Rows[e.RowIndex].FindControl("txt_address"))).Text);
  126. SqlCommand com = new SqlCommand("update_employee", con);
  127. com.CommandType = CommandType.StoredProcedure;
  128. com.Connection = con;
  129. com.Parameters.Add("@id", SqlDbType.Int).Value = id;
  130. com.Parameters.Add("@UserName", SqlDbType.VarChar, 50).Value = name;
  131. com.Parameters.Add("@address", SqlDbType.VarChar, 50).Value = address;
  132. com.ExecuteNonQuery();
  133. com.Dispose();
  134. con.Close();
  135. GridView1.EditIndex = -1;
  136. bindgrid();
  137. }
  138. protected void GridView1_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)
  139. {
  140. GridView1.PageIndex = e.NewSelectedIndex;
  141. bindgrid();
  142. }
  143. }
  144. }

Login.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Display_image_username_after_login.Login" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" >
  4. <head runat="server">
  5. <title>Untitled Page</title>
  6. </head>
  7. <body>
  8. <form id="form1" runat="server">
  9. <div>
  10. <asp:Label ID="lb1" runat="server" Font-Bold="True" ForeColor="#FF3300"></asp:Label><br />
  11. <asp:Label ID="Label1" runat="server" Text="UserName" Font-Bold="True"
  12. Width="100px" BackColor="#FFFF66" ForeColor="#FF3300"></asp:Label>
  13. <asp:TextBox ID="TextBox_user_name" runat="server" ForeColor="#993300" Width="100px"></asp:TextBox>
  14. <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
  15. ControlToValidate="TextBox_user_name" ErrorMessage="Please enter the UserName"></asp:RequiredFieldValidator>
  16. <br />
  17. <asp:Label ID="Label2" runat="server" Text="Password" Font-Bold="True"
  18. Width="100px" BackColor="#FFFF66" ForeColor="#FF3300"></asp:Label>
  19. <asp:TextBox ID="TextBox_password" runat="server" ForeColor="#CC6600"
  20. TextMode="Password" Width="100px"></asp:TextBox>
  21. <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
  22. ControlToValidate="TextBox_password" ErrorMessage="Please enter the Password"></asp:RequiredFieldValidator>
  23. <br />
  24. <asp:Button ID="btn_login" runat="server" Text="Login" Font-Bold="True"
  25. BackColor="#CCFF99" onclick="btn_login_Click" /><br />
  26. </div>
  27. </form>
  28. </body>
  29. </html>

Login.aspx.cs

  1. using System;
  2. using System.Collections;
  3. using System.Configuration;
  4. using System.Data;
  5. using System.Linq;
  6. using System.Web;
  7. using System.Web.Security;
  8. using System.Web.UI;
  9. using System.Web.UI.HtmlControls;
  10. using System.Web.UI.WebControls;
  11. using System.Web.UI.WebControls.WebParts;
  12. using System.Xml.Linq;
  13. using System.Data.SqlClient;
  14. namespace Display_image_username_after_login
  15. {
  16. public partial class Login : System.Web.UI.Page
  17. {
  18. string strConnString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
  19. string str;
  20. SqlCommand com;
  21. protected void btn_login_Click(object sender, EventArgs e)
  22. {
  23. object obj = null;
  24. SqlConnection con = new SqlConnection(strConnString);
  25. con.Open();
  26. str = "select count(*) from employee where UserName=@UserName and Password =@Password";
  27. com = new SqlCommand(str, con);
  28. com.CommandType = CommandType.Text;
  29. Session["UserName"] = TextBox_user_name.Text;
  30. com.Parameters.AddWithValue("@UserName", Session["UserName"]);
  31. com.Parameters.AddWithValue("@Password", TextBox_password.Text);
  32. obj = com.ExecuteScalar();
  33. if ((int)(obj) != 0)
  34. {
  35. Response.Redirect("Welcome.aspx");
  36. }
  37. else
  38. {
  39. lb1.Text = "Invalid User name and Password";
  40. clear();
  41. }
  42. con.Close();
  43. }
  44. private void clear()
  45. {
  46. TextBox_user_name.Text = "";
  47. TextBox_password.Text = "";
  48. }
  49. }
  50. }

Welcome.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Welcome.aspx.cs" Inherits="Display_image_username_after_login.Welcome" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" >
  4. <head runat="server">
  5. <title>Untitled Page</title>
  6. </head>
  7. <body>
  8. <form id="form1" runat="server">
  9. <div>
  10. <asp:Label ID="lb1" runat="server" Text="Label"></asp:Label>
  11. <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
  12. BackColor="#CC3300" ForeColor="Black" ShowHeader="False" >
  13. <Columns>
  14. <asp:TemplateField>
  15. <ItemTemplate>
  16. <img alt ="" src ='images/<%#Eval("image") %>' height="50px" width="50px"/>
  17. </ItemTemplate>
  18. </asp:TemplateField>
  19. </Columns>
  20. </asp:GridView>
  21. </div>
  22. </form>
  23. </body>
  24. </html>

Welcome.aspx.cs

  1. using System;
  2. using System.Collections;
  3. using System.Configuration;
  4. using System.Data;
  5. using System.Linq;
  6. using System.Web;
  7. using System.Web.Security;
  8. using System.Web.UI;
  9. using System.Web.UI.HtmlControls;
  10. using System.Web.UI.WebControls;
  11. using System.Web.UI.WebControls.WebParts;
  12. using System.Xml.Linq;
  13. using System.Data.SqlClient;
  14. namespace Display_image_username_after_login
  15. {
  16. public partial class Welcome : System.Web.UI.Page
  17. {
  18. string strConnString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
  19. string str;
  20. SqlDataAdapter sqlda;
  21. DataTable dt;
  22. protected void Page_Load(object sender, EventArgs e)
  23. {
  24. lb1.Text = "<b><font color=Brown>" + "WELLCOME :: " + "</font>" + "<b><font color=red>" + Session["UserName"] + "</font>";
  25. if (!IsPostBack)
  26. {
  27. bindgrid();
  28. }
  29. }
  30. private void bindgrid()
  31. {
  32. string UserName = (string)Session["UserName"];
  33. SqlConnection con = new SqlConnection(strConnString);
  34. con.Open();
  35. str = "select image from employee where UserName='" + UserName + "'";
  36. sqlda = new SqlDataAdapter(str, con);
  37. dt = new DataTable();
  38. sqlda.Fill(dt);
  39. sqlda.Dispose();
  40. GridView1.DataSource = dt;
  41. GridView1.DataBind();
  42. con.Close();
  43. }
  44. }
  45. }

Output

Image 2.jpg

Click login link and provide a correct username and password:

Image 3.jpg

After successful login:

Image 4.jpg