This is a continuation of my post on making a simple asp.net website.
Make a new folder named css in your project folder and add bootstrap.css file in this folder. You can download bootstrap from here . It will help in designing the website. Next we will be adding Update and delete button. And an Image to view the Profile pic of student. Also a gridview with pagination to view the data present in the database and a button in gridview itself to be used. The page will be styled using bootstrap as mentioned before and it will be a responsive page meaning you can view the page on any screen you want.
So let’s get started. Open the Default.aspx and change it as following :
Default.aspx :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>Student Info</title>
<link href="Css/bootstrap.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body,h1
{
font-family: Calibri;
margin: 0;
margin-bottom:5px;
padding: 0;
}
html, body
{
margin: 0;
padding: 0;
}
td > span
{
background-color: #464646;
padding: 5px 10px;
color: White;
margin: 2px;
border-radius: 5px;
}
td > a
{
background-color: #f9575b;
padding: 5px 10px;
color: White;
margin: 2px;
border-radius: 5px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<h1 style="width: 100%; text-align: center; background-color: #3c3c3c; color: #fff;">
ASP.NET</h1>
<div class="row">
<div class="col-lg-4">
<table class="table table-condensed">
<tr>
<td align="right">
Student Id :
</td>
<td>
<asp:TextBox runat="server" ID="txtid" Enabled="false" />
</td>
</tr>
<tr>
<td align="right">
Student Name :
</td>
<td>
<asp:TextBox runat="server" ID="txtStudentname" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtstudentname" ErrorMessage="*" />
</td>
</tr>
<tr>
<td align="right">
Student Class :
</td>
<td>
<asp:TextBox runat="server" ID="txtstudentclass" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtstudentclass"
ErrorMessage="*" />
</td>
</tr>
<tr>
<td align="right">
Date of Birth :
</td>
<td>
<asp:TextBox runat="server" ID="txtdob" placeholder="MM/DD/YYYY" />
</td>
</tr>
<tr>
<td align="right">
Student Address :
</td>
<td>
<asp:TextBox runat="server" ID="txtaddress" TextMode="MultiLine" Height="100px" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtaddress"
ErrorMessage="*" />
</td>
</tr>
<tr>
<td align="right">
Roll No :
</td>
<td>
<asp:TextBox runat="server" ID="txtrollno" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtrollno"
ErrorMessage="*" />
</td>
</tr>
<tr>
<td align="right">
Student Image :
</td>
<td>
<asp:FileUpload runat="server" ID="fileuploadforimage" />
</td>
</tr>
<tr>
<td align="right">
Gender :
</td>
<td>
<asp:DropDownList runat="server" ID="ddgender">
<asp:ListItem Enabled="true" Text=" " Value=" " />
<asp:ListItem Enabled="true" Text="Female" Value="Female" />
<asp:ListItem Enabled="true" Text="Male" Value="Male" />
</asp:DropDownList>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<asp:Button runat="server" ID="btnadd" Text="Add" OnClick="btnadd_Click" CssClass="btn btn-success" />
<asp:Button runat="server" ID="btnupdate" Text="Update" OnClick="btnupdate_Click"
CssClass="btn btn-primary" />
<asp:Button runat="server" ID="btndelete" Text="Delete" OnClick="btndelete_Click"
CssClass="btn btn-danger" />
<asp:Button runat="server" ID="Button1" Text="Clear" OnClick="Button1_Click" CssClass="btn btn-default" />
</td>
</tr>
</table>
</div>
<div class="col-lg-8" style="overflow: scroll">
<div class="row">
<div class="col-lg-12" style="text-align: left">
<asp:Image runat="server" ID="proImg" Width="150px" Height="150px" />
<br />
</div>
</div>
<div class="row">
<div class="col-lg-12">
<br />
<h3>
Current Data in database :
</h3>
<hr />
<asp:GridView runat="server" ID="datagrid" UseAccessibleHeader="true" OnRowCommand="datagridview_RowCommand"
CssClass="table table-bordered" OnPageIndexChanging="datagridview_PageIndexChanging"
BorderWidth="1px" BorderColor="Black" AllowPaging="True" PageSize="4" PagerSettings-Mode="NumericFirstLast"
Font-Size="Smaller">
<Columns>
<asp:ButtonField ButtonType="Button" HeaderText="ClickHere" Text="ViewDetails" CommandName="ViewDetails"
ControlStyle-BackColor="#507CD1" ControlStyle-ForeColor="White" ControlStyle-Font-Size="15px">
<ControlStyle BackColor="#507CD1" Font-Size="15px" ForeColor="White"></ControlStyle>
</asp:ButtonField>
</Columns>
</asp:GridView>
</div>
</div>
</div>
<br />
</div>
<asp:Label runat="server" ID="lblinfo" />
</form>
</body>
</html>
And change the coding file as following :
Default.aspx.cs :
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.Data.SqlClient;
using System.Data.Sql;
using System.IO;
public partial class _Default : System.Web.UI.Page
{
static String connectionString = ConfigurationManager.ConnectionStrings["db_Connection"].ConnectionString.ToString();
SqlConnection con = new SqlConnection(connectionString);
SqlCommand cmd;
SqlDataAdapter dataAdapter;
SqlDataReader reader;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
DataGridFill();
}
public void DataGridFill()
{
try
{
cmd = new SqlCommand("Select * from StudentInfo", con);
if (con.State == ConnectionState.Closed)
con.Open();
dataAdapter = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
dataAdapter.Fill(ds, "StudentInfo");
datagrid.DataSource = ds.Tables[0];
datagrid.DataBind();
}
catch (Exception ex)
{
lblinfo.Text = ex.Message.ToString();
}
}
protected void datagridview_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
datagrid.PageIndex = e.NewPageIndex;
DataGridFill();
}
protected void datagridview_RowCommand(object sender, GridViewCommandEventArgs e)
{
try
{
if (e.CommandName == "ViewDetails")
{
int rowno = Int32.Parse(e.CommandArgument.ToString()); // It is the rowno of which the user as clicked
txtid.Text = datagrid.Rows[rowno].Cells[1].Text.ToString();
txtStudentname.Text = datagrid.Rows[rowno].Cells[2].Text.ToString();
txtstudentclass.Text = datagrid.Rows[rowno].Cells[3].Text.ToString();
txtdob.Text = datagrid.Rows[rowno].Cells[4].Text.ToString();
txtrollno.Text = datagrid.Rows[rowno].Cells[5].Text.ToString();
txtaddress.Text = datagrid.Rows[rowno].Cells[6].Text.ToString();
ddgender.Text = datagrid.Rows[rowno].Cells[7].Text.ToString();
proImg.ImageUrl = datagrid.Rows[rowno].Cells[8].Text.ToString();
}
}
catch (Exception ex)
{
lblinfo.Text = ex.Message.ToString();
}
}
protected void btnadd_Click(object sender, EventArgs e)
{
try
{
string strFileName = Path.GetFileName(fileuploadforimage.FileName); //fileupload1 is the <asp:fileupload ID
fileuploadforimage.SaveAs(Server.MapPath("~/UploadedImages/" + strFileName + ""));
String path = "~/UploadedImages/" + strFileName;
cmd = new SqlCommand("Insert into StudentInfo (StudentName,Class,DOB,StudentRollNo,StudentAddress,Gender
,StudentImage,OnDate) values (@StudentName,@Class,@DOB,@StudentRollNo,@StudentAddress,@Gender
,@StudentImage,@OnDate)", con);
cmd.Parameters.AddWithValue("@StudentName", txtStudentname.Text.ToString());
cmd.Parameters.AddWithValue("@Class", txtstudentclass.Text.ToString());
cmd.Parameters.AddWithValue("@DOB", txtdob.Text.ToString());
cmd.Parameters.AddWithValue("@StudentRollNo", txtrollno.Text.ToString());
cmd.Parameters.AddWithValue("@StudentAddress", txtaddress.Text.ToString());
cmd.Parameters.AddWithValue("@Gender", ddgender.Text.ToString());
cmd.Parameters.AddWithValue("@StudentImage", path);
cmd.Parameters.AddWithValue("@OnDate", System.DateTime.Now);
if (con.State == ConnectionState.Closed)
con.Open();
cmd.ExecuteNonQuery();
cmd.Dispose();
lblinfo.Text = "Added Successfully";
Clear();
DataGridFill();
}
catch (Exception ex)
{
lblinfo.Text = ex.Message.ToString();
}
}
protected void btnupdate_Click(object sender, EventArgs e)
{
try
{
cmd = new SqlCommand("Update StudentInfo set StudentName=@StudentName,Class=@Class,DOB=@DOB,
StudentRollNo=@StudentRollNo,StudentAddress=@StudentAddress,Gender=@Gender where Id = @Id",
con);
cmd.Parameters.AddWithValue("@Id", txtid.Text.ToString());
cmd.Parameters.AddWithValue("@StudentName", txtStudentname.Text.ToString());
cmd.Parameters.AddWithValue("@Class", txtstudentclass.Text.ToString());
cmd.Parameters.AddWithValue("@DOB", txtdob.Text.ToString());
cmd.Parameters.AddWithValue("@StudentRollNo", txtrollno.Text.ToString());
cmd.Parameters.AddWithValue("@StudentAddress", txtaddress.Text.ToString());
cmd.Parameters.AddWithValue("@Gender", ddgender.Text.ToString());
cmd.Parameters.AddWithValue("@OnDate", System.DateTime.Now);
if (con.State == ConnectionState.Closed)
con.Open();
cmd.ExecuteNonQuery();
cmd.Dispose();
lblinfo.Text = "Updated Successfully";
Clear();
DataGridFill();
}
catch (Exception ex)
{
lblinfo.Text = ex.Message.ToString();
}
}
public void Clear()
{
txtid.Text = "";
txtStudentname.Text = "";
txtstudentclass.Text = "";
txtdob.Text = "";
txtrollno.Text = "";
txtaddress.Text = "";
ddgender.SelectedIndex = 0;
fileuploadforimage.Dispose();
}
protected void btndelete_Click(object sender, EventArgs e)
{
try
{
cmd = new SqlCommand("Delete from StudentInfo where Id = @Id", con);
cmd.Parameters.AddWithValue("@Id", txtid.Text.ToString());
if (con.State == ConnectionState.Closed)
con.Open();
cmd.ExecuteNonQuery();
cmd.Dispose();
lblinfo.Text = "Deleted Successfully";
Clear();
DataGridFill();
}
catch (Exception ex)
{
lblinfo.Text = ex.Message.ToString();
}
}
protected void Button1_Click(object sender, EventArgs e)
{
Clear();
}
}
On doing this you will be making page look like below :
