Hi itsjayshah,
I have created a sample which full fill your requirement you need to modify the code according to your need.
SQL
CREATE TABLE [Users](
[UserId] [int] IDENTITY(1,1) NOT NULL,
[Name] [nvarchar](500) NOT NULL,
[Email] [nvarchar](500) NULL,
[UserName] [nvarchar](200) NULL,
[Password] [nvarchar](500) NOT NULL,
[ImageName] [nvarchar](505) NULL
)
INSERT [Users] VALUES (N'John Hammond', N'John@gmail.com', N'John1', N'John@356', N'John')
INSERT [Users] VALUES (N'Suzanne', N'Suzanne@gmail.com', N'Suzanne@2', N'Suzanne@125', N'Suzanne')
INSERT [Users] VALUES (N'Robert Schidner', N'Robert@gmail.com', N'Rob@564', N'Rob@1478', N'Robert')
INSERT [Users] VALUES (N'Mathews', N'Mathews@gmail.com', N'Mathews@415', N'Math@758', N'Mathews')
INSERT [Users] VALUES (N'Luke', N'Luke@gmail.com', N'Luke123', N'Luke@369', N'Luke')
INSERT [Users] VALUES (N'Lokesh', N'Lokesh@gmail.com', N'Lokesh785', N'Lok@0231', N'Lokesh')
INSERT [Users] VALUES (N'Ronny', N'Ronny@gmail.com', N'Ronny2451', N'Ron3654', N'Ronny')
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
.modal
{
}
</style>
<script type="text/javascript">
$(function () {
$('[id*=login]').click(function () {
$('[id*=loginModal]').modal('show');
});
$('[id*=imgUser]').click(function () {
var isValid = $('[id*=hfValidLogin]').val() == "true" ? true : false;
if (isValid) {
var userName = $(this).closest('tr').find('[id*=lblName]').html();
$('[id*=lblUser]').html(userName);
$('[id*=userImage]').attr('src', $(this).attr('src'));
$('[id*=feedbackModal]').modal('show');
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField ID="hfValidLogin" runat="server" />
<div class="pull-right">
<div id="dvLogIn" class="input-group" runat="server" visible="true">
<span class="input-group-addon"><i class="fa fa-lock"></i><a id="login" href="javascript:;">
Login</a> </span>
</div>
<div id="dvLogOut" class="input-group" runat="server" visible="false">
<span class="input-group-addon">
<asp:Label ID="lblUserName" Text="Mudassar" runat="server" />
<asp:LinkButton Text=" LogOut" ID="btnLogOut" OnClick="LogOut" CssClass="fa fa-unlock-alt"
runat="server" />
</span>
</div>
</div>
<div id="loginModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">
Login</h4>
</div>
<div class="modal-body">
<div>
UserName
<asp:TextBox ID="txtUserName" CssClass="form-control" Width="200px" runat="server"></asp:TextBox>
</div>
<div>
Password
<asp:TextBox ID="txtPassword" CssClass="form-control" Width="200px" runat="server" />
</div>
<div>
<br />
<asp:Label ID="lblMessage" ForeColor="Red" Visible="false" class="fa fa-times-circle fa-fw"
Width="200px" Text=" InValid UserName or Password!!" runat="server" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close</button>
<asp:Button ID="btnLogin" OnClick="Login" CssClass="btn btn-primary" Text="Log In"
runat="server" />
</div>
</div>
</div>
</div>
<div id="feedbackModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">
FeedBack
</h4>
</div>
<div class="modal-body">
<div>
<asp:Label ID="lblUser" Font-Bold="true" runat="server" />
<br />
<img id="userImage" src="" style="width: 100px; height: 100px;" alt="" />
<br />
</div>
<div>
Please share your thoughts
<asp:TextBox ID="txtFeedBack" CssClass="form-control" Width="200px" runat="server"></asp:TextBox>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close</button>
<asp:Button ID="btnFeedBack" CssClass="btn btn-primary" Text="Submit" OnClick="SaveFeedBack"
runat="server" />
</div>
</div>
</div>
</div>
<div id="messageModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<span class="text-info">Your FeedBack is Saved Successfully !! </span>
</div>
</div>
</div>
</div>
</div>
<div align="center">
<br />
<asp:GridView ID="gvUsers" AutoGenerateColumns="false" runat="server">
<Columns>
<asp:TemplateField HeaderText="UserId">
<ItemTemplate>
<asp:Label ID="lblUserId" Text='<%# Eval("UserId") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblName" Text='<%# Eval("Name") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Email">
<ItemTemplate>
<asp:Label ID="lblEmail" Text='<%# Eval("Email") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="UserName">
<ItemTemplate>
<asp:Label ID="lblUserName" Text='<%# Eval("UserName") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Images">
<ItemTemplate>
<a href="javascript:;">
<img id="imgUser" src='<%# string.Format("images/{0}.jpg", Eval("ImageName")) %>'
style="width: 100px; height: 100px;" alt='<%# Eval("ImageName") %>' />
</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
C#
static string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
SqlConnection con = new SqlConnection(constr);
protected void Page_Load(object sender, EventArgs e)
{
bool valid = !string.IsNullOrEmpty(hfValidLogin.Value) ? Convert.ToBoolean(hfValidLogin.Value) : false;
if (valid)
{
dvLogIn.Visible = false;
dvLogOut.Visible = true;
}
else
{
dvLogIn.Visible = true;
dvLogOut.Visible = false;
}
if (!IsPostBack)
{
gvUsers.DataSource = BindData();
gvUsers.DataBind();
}
}
protected void Login(object sender, EventArgs e)
{
lblMessage.Visible = false;
SqlCommand cmd = new SqlCommand("SELECT UserName FROM Users WHERE UserName = @UserName AND Password = @Password", con);
cmd.Parameters.AddWithValue("@UserName", txtUserName.Text.Trim());
cmd.Parameters.AddWithValue("@Password", txtPassword.Text.Trim());
con.Open();
SqlDataReader sdr = cmd.ExecuteReader();
if (sdr.HasRows)
{
sdr.Read();
lblUserName.Text = sdr["UserName"].ToString();
hfValidLogin.Value = "true";
dvLogOut.Visible = true;
dvLogIn.Visible = false;
txtPassword.Text = "";
txtUserName.Text = "";
}
else
{
txtPassword.Text = "";
txtUserName.Text = "";
hfValidLogin.Value = "false";
lblMessage.Visible = true;
ClientScript.RegisterStartupScript(this.GetType(), "Alert", "$(function(){ $('[id*=loginModal]').modal('show');}); ", true);
}
con.Close();
}
protected void LogOut(object sender, EventArgs e)
{
lblUserName.Text = "";
hfValidLogin.Value = "false";
dvLogIn.Visible = true;
dvLogOut.Visible = false;
txtPassword.Text = "";
txtUserName.Text = "";
}
protected void SaveFeedBack(object sender, EventArgs e)
{
//Your Saving Code.
ClientScript.RegisterStartupScript(this.GetType(), "Alert", "$(function(){ $('[id*=messageModal]').modal('show'); setTimeout(function() {$('[id*=messageModal]').modal('hide');}, 4000);}); ", true);
}
private DataTable BindData()
{
SqlCommand cmd = new SqlCommand("SELECT UserId,Name,Email,UserName,ImageName FROM Users", con);
SqlDataAdapter sda = new SqlDataAdapter();
sda.SelectCommand = cmd;
DataTable dt = new DataTable();
sda.Fill(dt);
return dt;
}
VB.Net
Shared constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Private con As New SqlConnection(constr)
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
Dim valid As Boolean = If(Not String.IsNullOrEmpty(hfValidLogin.Value), Convert.ToBoolean(hfValidLogin.Value), False)
If valid Then
dvLogIn.Visible = False
dvLogOut.Visible = True
Else
dvLogIn.Visible = True
dvLogOut.Visible = False
End If
If Not IsPostBack Then
gvUsers.DataSource = BindData()
gvUsers.DataBind()
End If
End Sub
Protected Sub Login(sender As Object, e As EventArgs)
lblMessage.Visible = False
Dim cmd As New SqlCommand("SELECT UserName FROM Users WHERE UserName = @UserName AND Password = @Password", con)
cmd.Parameters.AddWithValue("@UserName", txtUserName.Text.Trim())
cmd.Parameters.AddWithValue("@Password", txtPassword.Text.Trim())
con.Open()
Dim sdr As SqlDataReader = cmd.ExecuteReader()
If sdr.HasRows Then
sdr.Read()
lblUserName.Text = sdr("UserName").ToString()
hfValidLogin.Value = "true"
dvLogOut.Visible = True
dvLogIn.Visible = False
txtPassword.Text = ""
txtUserName.Text = ""
Else
txtPassword.Text = ""
txtUserName.Text = ""
hfValidLogin.Value = "false"
lblMessage.Visible = True
ClientScript.RegisterStartupScript(Me.[GetType](), "Alert", "$(function(){ $('[id*=loginModal]').modal('show');}); ", True)
End If
con.Close()
End Sub
Protected Sub LogOut(sender As Object, e As EventArgs)
lblUserName.Text = ""
hfValidLogin.Value = "false"
dvLogIn.Visible = True
dvLogOut.Visible = False
txtPassword.Text = ""
txtUserName.Text = ""
End Sub
Protected Sub SaveFeedBack(sender As Object, e As EventArgs)
'Your Saving Code.
ClientScript.RegisterStartupScript(Me.[GetType](), "Alert", "$(function(){ $('[id*=messageModal]').modal('show'); setTimeout(function() {$('[id*=messageModal]').modal('hide');}, 4000);}); ", True)
End Sub
Private Function BindData() As DataTable
Dim cmd As New SqlCommand("SELECT UserId,Name,Email,UserName,ImageName FROM Users", con)
Dim sda As New SqlDataAdapter()
sda.SelectCommand = cmd
Dim dt As New DataTable()
sda.Fill(dt)
Return dt
End Function
ScreenShot
