Authenticate, Search And Add Records In GridView In ASP.Net

Hanif Hefaz
8y
8.5k
0
4

Article

Today, I am going to show you how to create a website project that's able to authenticate login and add and search data in DataGridViews, in ASP.NET and using C#.

Introduction

The ProDatabase is a website project created in ASP.NET based on C# language (Visual Studio 2010). This project is just an example of something used in the Ministry of Education in Afghanistan, in the field of procurement. I have not included the registration form because if someone wants to use it, he/she should write an application letter for a username and password; then, the administrator can assign him/her access. However, you can add your registration form.

NOTE: If you want to download the project, then you can easily do that. But, you have to create an empty C# website project first and then select and copy all the files from what you have downloaded and paste them in your project.

Let’s start.

1. Open Visual Studio and select new C# ASP.NET website (not an empty website at this stage). So, you have two pages named as Default.aspx and About.aspx and four folders named Accounts, App_Data, Scripts and styles along with a master page with web.config file and Global.asax. For the moment, forget about these things. Just select the Account and App_Data folders and delete them. Good, no problem.

2. Now, click on your website and add a new item, a web form. Name it as login.aspx ( do not select its master page option, because here we use it to avoid the access to the other pages. Thus it should be an empty form). Now, add two textboxes (TextBox1, and TextBox2), a button (Button1), and a label to give you the right message. Of course, make this page as default start page, so that it loads first. For this, right click on it (in Solution Explorer) and make it the Start Page, like this:

Have you done it? If not, here is the source code for designing such a form:

<%@ Page Title="Login" Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.style1
{
text-align: center;
height: 39px;
}
.style2
{
font-size: xx-large;
color: #FFFFFF;
}
</style>
</head>
<body style="width: 535px; height: 221px; margin-left: 400px; margin-top: 174px; margin-bottom: 45px">
<p class="style1"
style="width: 543px; margin-bottom: 19px; background-color: #006699; margin-right: 0px;">
<span class="style2">Login</span><br />
</p>
<form id="form1" runat="server">
<div class="style1"
style="border-style: 0; border-width: 1px; border-color: #008000; width: 543px;">
Username
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<br />
Password
<asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>
<br />
<br />
<asp:Button ID="Button1" runat="server" style="margin-left: 64px; height: 26px;"
Text="Login" onclick="Button1_Click" />
<asp:Label ID="Label1" runat="server"></asp:Label>
<br />
<p style="height: 25px; background-color: #006699"></p><br />
</div>
</form>
</body>
</html>

3. Very smart !! Now, add another item, a SQL database and name it database.mdf. This will automatically create a folder named App_Data and will settle there. Double click on it and the Server Explorer will open. Now, make a new table in the db and name it UserData. This table should have two fields, UserName and Password. (It will be better to click on the table and select show table data and add a user or two, because we don’t have registration system.)

4. Now, click on the login page code side and write this code.

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
public partial class Login : System.Web.UI.Page
{
protected void Button1_Click(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["regConnectionString"].ConnectionString);
con.Open();
SqlCommand cmd = new SqlCommand("select COUNT(*)FROM UserData WHERE UserName='" + TextBox1.Text + "' and Password='" + TextBox2.Text + "'");
cmd.Connection = con;
int OBJ = Convert.ToInt32(cmd.ExecuteScalar());
if (OBJ > 0)
{
Session["name"] = TextBox1.Text;
Response.Redirect("default.aspx");
}
else
{
Label1.Text = "Invalid username or password";
}
}
}

5. Now, go to the Master page and try to make it something like this, or as per your preference. I have added two extra menu items and a footer. I guess there is no need for its source code.

6. Was that hard to understand? If not, then let's continue. Well, add another form and name it as Projects.aspx. This is the form that we use for adding the projects to our database (from now on, all our new forms should inherit our Master page. So, select its Master page option). Very simple! Just add a table with two columns, eight rows, some textboxes and a GridView. Try to make something like the following:

If you have not done it yet, don’t worry. Here is the source code:

<%@ Page Title="Projects" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Projects.aspx.cs" Inherits="Projects" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<p>Please Enter all the required fields to the textboxes and click ADD</p>
<table align="left" cellspacing="1" class="style7">
<tr>
<td class="style10">
ID</td>
<td class="style11">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style10">
Name</td>
<td class="style11">
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style10">
Price</td>
<td class="style11">
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style10">
Company</td>
<td class="style11">
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style10">
Recieve Date</td>
<td class="style11">
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style12">
Sent Date</td>
<td class="style13">
<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style12">
Budget</td>
<td class="style13">
<asp:TextBox ID="TextBox7" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style12">
Remarks</td>
<td class="style13">
<asp:TextBox ID="TextBox8" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style12">
</td>
<td class="style13">
<br />
<asp:Button ID="Button1" runat="server" style="margin-left: 36px" Text="ADD"
Width="53px" onclick="Button1_Click1" />
<br />
<br />
<br />
</td>
</tr>
</table>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
AutoGenerateColumns="False" BackColor="#CCCCCC" BorderColor="#999999"
BorderStyle="Solid" BorderWidth="3px" CellPadding="4" CellSpacing="2"
DataKeyNames="ID" DataSourceID="SqlDataSource1" ForeColor="Black"
Height="131px" style="text-align: center" Width="668px">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True"
SortExpression="ID" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="Price" HeaderText="Price" SortExpression="Price" />
<asp:BoundField DataField="Company" HeaderText="Company"
SortExpression="Company" />
<asp:BoundField DataField="Rdate" HeaderText="Rdate" SortExpression="Rdate" />
<asp:BoundField DataField="Sdate" HeaderText="Sdate" SortExpression="Sdate" />
<asp:BoundField DataField="Budget" HeaderText="Budget"
SortExpression="Budget" />
<asp:BoundField DataField="Files" HeaderText="Files" SortExpression="Files" />
</Columns>
<FooterStyle BackColor="#CCCCCC" />
<HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#CCCCCC" ForeColor="Black" HorizontalAlign="Left" />
<RowStyle BackColor="White" />
<SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#808080" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#383838" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:regConnectionString %>"
SelectCommand="SELECT * FROM [projects]"></asp:SqlDataSource>
</asp:Content>

Great! Now, click on the code side of the page and write this code: 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
using System.Drawing;
public partial class Projects: System.Web.UI.Page
{
protected void Button1_Click(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["regConnectionString"].ConnectionString);
con.Open();
String str = "insert into projects values('" + TextBox1.Text + "','" + TextBox2.Text + "','" + TextBox3.Text + "','" + TextBox4.Text + "','" + TextBox5.Text + "','" + TextBox6.Text + "','" + TextBox7.Text + "','" + TextBox8.Text + "')";
SqlCommand cmd = new SqlCommand(str, con);
cmd.ExecuteNonQuery();
Response.Redirect("projects.aspx");
con.Close();
}
}

7. That's it! Now, add another empty web form and name it as search.aspx. This is the form used for searching for a specific record based on the company name in our database (select its Master page option). This time, add one textbox, a button, and a GridView. Try to make it something similar to this:  

Hmm, you need the source code? Here it is:

<%@ Page Title="Search" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Search.aspx.cs" Inherits="Search" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<p>
Please enter the name of the company
<asp:TextBox ID="txtSearch" runat="server" />
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Search" />
<hr />
<asp:GridView ID="GridView1" runat="server" BackColor="#CCCCCC"
BorderColor="#999999" BorderStyle="Solid" BorderWidth="3px" CellPadding="4"
CellSpacing="2" ForeColor="Black" style="text-align: center">
<FooterStyle BackColor="#CCCCCC" />
<HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#CCCCCC" ForeColor="Black" HorizontalAlign="Left" />
<RowStyle BackColor="White" />
<SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#808080" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#383838" />
</asp:GridView>
</p>
</asp:Content>

And, here is the code for the code side of the page:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
using System.Text.RegularExpressions;
public partial class Search : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.BindGrid();
}
}
private void BindGrid()
{
string constr = ConfigurationManager.ConnectionStrings["regConnectionString"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "SELECT * FROM projects WHERE Company LIKE '%' + @Company + '%'";
cmd.Connection = con;
cmd.Parameters.AddWithValue("@Company", txtSearch.Text.Trim());
DataTable dt = new DataTable();
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
sda.Fill(dt);
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
}
}
protected void OnPageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
this.BindGrid();
}
protected void Button1_Click(object sender, EventArgs e)
{
this.BindGrid();
}
}

Are you really looking for the 8th step? It is all done. Just run your project and enjoy using it.