Hi all,
All the developer need to work with the Gridview often in the project. so here I am giving you the idea how to do CRUD operation in Gridview.
First I have bind the data from the database using linq then I am editing the row using Gridview's EditItemTemplate to edit the data into the Gridview itself.
Second we can edit the data using popup window, so I have used fancybox to do so.
Here is the code with requried Javascript.
The Code file
Now the code for Popup File
Code file of Popup
All the developer need to work with the Gridview often in the project. so here I am giving you the idea how to do CRUD operation in Gridview.
First I have bind the data from the database using linq then I am editing the row using Gridview's EditItemTemplate to edit the data into the Gridview itself.
Here is the code with requried Javascript.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Styles/Style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.hovercard.js" type="text/javascript"></script>
<script src="fancybox/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<link href="fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function ChangeStatus(ID) {
// To make Active User Inactive and vice a versa
$.ajax({
type: "POST",
url: "Default.aspx/ChangeStatus",
data: '{"UserID": "' + ID + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () {
window.location = "Default.aspx";
}
});
}
</script>
<script type="text/javascript">
$(document).ready(function () {
GridOperate();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(GridOperate);
$(".opendialog").fancybox({
'titlePosition': 'inside',
'transitionIn': 'none',
'transitionOut': 'none',
enableEscapeButton: false,
hideOnOverlayClick: false,
titleShow: false
});
});
function GridOperate(sender, args) {
// To check and uncheck all checkbox of grid
$("#<%=Gv.ClientID%> input[id*='chkSelectAll']:checkbox").click(function () {
if ($(this).is(':checked'))
$("#<%=Gv.ClientID%> input[id*='CheckSelect']:checkbox").attr('checked', true);
else
$("#<%=Gv.ClientID%> input[id*='CheckSelect']:checkbox").attr('checked', false);
});
//To Create Hover popup in the grid
$(".customer-number,.number_hover").hover(function () {
$(this).parent().find(".number_hover").show();
}, function () {
$(".number_hover").hide();
});
// To apply proper style to Hover popup
$('.contentTable td').each(function () {
$(this).find('.downarrow_customer_tooltip').css('left', ($(this).width() / 2) - 10 + 'px');
$(this).find('.number_hover p').css('width', ($(this).width()) + 'px');
$(this).find('.number_hover').css('width', ($(this).width()) - 14 + 'px');
})
}
function OpenDialog(ID) {
var returnpath = window.location;
$(".frmPass").attr('src', 'EditUser.aspx?UserID=' + ID + '&ReturnPath=' + returnpath);
$(".OpenDialog").width(900);
$.fancybox.center();
$(".OpenDialog").fancybox();
}
</script>
<style type="text/css">
upload.scroll {
height: 200px;
width: 300px;
overflow: auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="Gv" />
</Triggers>
<ContentTemplate>
<div>
<table class="contentTable login_table" style="margin-top: 0px; width: 100%">
<tbody>
<tr><td><asp:Button ID="btnDelete" runat="server" Text="Delete Selected" style="background-color:#990000;color:White;font-weight:bold;"
onclick="btnDelete_Click" OnClientClick="JavaScript:return confirm('Are you sure want to delete the selected items');" /></td></tr>
<tr>
<td>
<asp:GridView ID="Gv" runat="server" Width="100%" AutoGenerateColumns="False" RowStyle-HorizontalAlign="Center"
AllowPaging="True" onpageindexchanging="Gv_PageIndexChanging" PageSize="4"
AllowSorting="True" onrowediting="Gv_RowEditing" onsorting="Gv_Sorting"
onrowupdating="Gv_RowUpdating" onrowcancelingedit="Gv_RowCancelingEdit"
onrowdeleting="Gv_RowDeleting" ShowFooter="True"
FooterStyle-HorizontalAlign="Center" onrowcommand="Gv_RowCommand"
onrowdatabound="Gv_RowDataBound" CssClass="Itemgrid" CellPadding="4"
ForeColor="#333333" GridLines="None" BorderWidth="2" >
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="" Visible="true" ItemStyle-Width="25px">
<HeaderStyle CssClass="leftcorner" />
<HeaderTemplate>
<div class="gk" style="margin-left: 0px">
<input type="checkbox" id="chkSelectAll" name="chkSelectAll" runat="server" style="-webkit-appearance: checkbox;
cursor: pointer;" class="styled headercheck" />
</div>
</HeaderTemplate>
<ItemTemplate>
<div style="margin-left: 0px">
<asp:CheckBox ID="CheckSelect" runat="server" />
<asp:HiddenField ID="hdnId" runat="server" Value='<%# Eval("ID") %>' />
</div>
</ItemTemplate>
<ItemStyle Width="25px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Sr No" Visible="true" ItemStyle-Width="50px">
<ItemTemplate>
<%#Container.DataItemIndex + 1 %>
</ItemTemplate>
<ItemStyle Width="50px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" CssClass="searchStoreCol04" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<FooterTemplate>
<asp:TextBox ID="txtAddFirstName" runat="server"></asp:TextBox>
</FooterTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtFirstName" runat="server" Text='<%# Eval("FirstName") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<div class="cust_number">
<asp:Label CssClass="customer-number" ID="lblFirstName" runat="server" Text='<%# Eval("FirstName") %>'></asp:Label>
<%# Convert.ToString(Eval("FirstName")) != "" ? "<div class=\"number_hover cf matched_tool\"><em>First Name</em><p>" + Eval("FirstName") + "<br /></p><span class=\"downarrow_customer_tooltip\"></span></div>" : ""%>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="LastName" SortExpression="LastName">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" CssClass="searchStoreCol04" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<EditItemTemplate>
<asp:TextBox ID="txtLastName" runat="server" Text='<%# Eval("LastName") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtAddLastName" runat="server"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<div class="cust_number">
<asp:Label CssClass="customer-number" ID="lblLastName" runat="server" Text='<%# Eval("LastName") %>'></asp:Label>
<%# Convert.ToString(Eval("LastName")) != "" ? "<div class=\"number_hover cf matched_tool\"><em>Last Name</em><p>" + Eval("LastName") + "<br /></p><span class=\"downarrow_customer_tooltip\"></span></div>" : ""%>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Address" SortExpression="Address">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" CssClass="searchStoreCol04" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<EditItemTemplate>
<asp:TextBox ID="txtAddress" runat="server" Text='<%# Eval("Address") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtAddAddress" runat="server"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<div class="cust_number">
<asp:Label CssClass="customer-number" ID="lblAddress" runat="server" Text='<%# Eval("Address") %>'></asp:Label>
<%# Convert.ToString(Eval("Address")) != "" ? "<div class=\"number_hover cf matched_tool\"><em>Address</em><p>" + Eval("Address") + "<br /></p><span class=\"downarrow_customer_tooltip\"></span></div>" : ""%>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ContactNo" SortExpression="ContactNo">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" CssClass="searchStoreCol04" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<EditItemTemplate>
<asp:TextBox ID="txtContactNo" runat="server" Text='<%# Eval("ContactNo") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtAddContactNo" runat="server"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<div class="cust_number">
<asp:Label CssClass="customer-number" ID="lblContactNo" runat="server" Text='<%# Eval("ContactNo") %>'></asp:Label>
<%# Convert.ToString(Eval("ContactNo")) != "" ? "<div class=\"number_hover cf matched_tool\"><em>ContactNo</em><p>" + Eval("ContactNo") + "<br /></p><span class=\"downarrow_customer_tooltip\"></span></div>" : ""%>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Image" SortExpression="Image">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="110px" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<EditItemTemplate>
<asp:FileUpload ID="fupEditImage" runat="server" />
</EditItemTemplate>
<FooterTemplate>
<asp:FileUpload ID="fupAddImage" runat="server" Width="100px" style="width:100px;" />
</FooterTemplate>
<ItemTemplate>
<div class="cust_number">
<asp:Image ID="imgImage" runat="server" Height="100" Width="100" ImageUrl='<%# "ImageHandler.ashx?ID="+ Eval("ID") %>' />
<%# Convert.ToString(Eval("Image")) != "" ? "<div class=\"number_hover cf matched_tool\"><em>Image</em><p>" + Eval("Image") + "<br /></p><span class=\"downarrow_customer_tooltip\"></span></div>" : ""%>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Status" SortExpression="Status">
<HeaderStyle Width="11%" VerticalAlign="Middle" HorizontalAlign="Center" CssClass="searchStoreCol08" />
<ItemStyle VerticalAlign="Middle" HorizontalAlign="Center" />
<ItemTemplate>
<div class="cust_number">
<a id="a_status" class="customer-number" title="Status" onclick="javascript: ChangeStatus('<%# Eval("ID") %>');">
<%# Convert.ToBoolean(Eval("Status")) == true ? "<span style='color:Green;'>Active</span>" : "<span style='color:red;'>Inactive</span>"%>
</a>
<%# Convert.ToString(Eval("Status")) == "1" ? "<div class=\"number_hover cf matched_tool\"><em>Status</em><p>Active<br /></p><span class=\"downarrow_customer_tooltip\"></span></div>" : ""%>
<%# Convert.ToString(Eval("Status")) == "2" ? "<div class=\"number_hover cf matched_tool\"><em>Status</em><p>InActive<br /></p><span class=\"downarrow_customer_tooltip\"></span></div>" : ""%>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action">
<HeaderStyle Width="11%" HorizontalAlign="Center" VerticalAlign="Middle" CssClass="searchStoreCol08 rightcorner" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<FooterTemplate>
<center><asp:ImageButton ID="imgAdd" runat="server" ImageUrl="~/Images/add_blue.jpg" Height="20px" Width="20px" CommandName="Add" /></center>
</FooterTemplate>
<ItemTemplate>
<div class="cust_number">
<%--<asp:ImageButton ID="imgEdit" runat="server" ImageUrl="~/Images/edit_blue.jpg" Height="20px" Width="20px" OnClientClick='javascript: OpenDialog();' />--%>
<a href="#upload" class="opendialog">
<input type="image" id="imgEdit" class="imgedit" src="Images/edit_blue.jpg" style ="Height:20px;Width:20px;" onclick='javascript: OpenDialog("<%# Eval("ID") %>");' /></a>
<asp:ImageButton ID="imgDelete" runat="server" ImageUrl="~/Images/delete_blue.jpg" Height="20px" Width="20px" OnClientClick="return confirm('Are you sure you want to delete?')" CommandName="DeleteButton" CommandArgument='<%#Eval("ID") %>'/>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowEditButton="True" />
<asp:CommandField ShowDeleteButton="True" />
</Columns>
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White"
HorizontalAlign="Center" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<PagerTemplate>
<div class="carrier_pagination alignright" style="padding-top:18px">
<div class="arrows alignright">
<asp:LinkButton ID="lnkFirst" CommandName="Page" CommandArgument="First" ToolTip="First Page"
runat="server" CssClass="prev">First</asp:LinkButton>
<asp:LinkButton ID="lnkPrevious" CommandName="Page" CommandArgument="Prev" ToolTip="Previous Page"
runat="server" CssClass="prev">Prev</asp:LinkButton>
<asp:LinkButton ID="lnkNext" CommandName="Page" CommandArgument="Next" ToolTip="Next Page" runat="server"
CssClass="next">Next</asp:LinkButton>
<asp:LinkButton ID="lnkLast" CommandName="Page" CommandArgument="Last" ToolTip="Last Page"
runat="server" CssClass="Last">Last</asp:LinkButton>
<asp:LinkButton ID="LnkAll" OnClick="LnkAll_Click" CssClass="viewall" ToolTip="view All"
runat="server">View All</asp:LinkButton>
</div>
<span class="alignright">Page <em>
<%= Gv.PageIndex + 1%></em> of
<%= Gv.PageCount%></span>
</div>
</PagerTemplate>
<RowStyle HorizontalAlign="Center" BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<SortedAscendingCellStyle BackColor="#FDF5AC" />
<SortedAscendingHeaderStyle BackColor="#4D0000" />
<SortedDescendingCellStyle BackColor="#FCF6C0" />
<SortedDescendingHeaderStyle BackColor="#820000" />
</asp:GridView>
<div class="arrows alignright " style="width: auto; ">
<asp:LinkButton ID="LnkViewAll" Text="View Paging" Visible="false" runat="server" OnClick="LnkViewAll_Click"
CssClass="viewall" ></asp:LinkButton>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<!-- Code for the modal popup -->
<div style="display: none;">
<div id="upload" class="statusmodal">
<iframe id="frm" runat="server" class="frmPass" width="400px" height="504px" scrolling="no"
frameborder="0" style="border: 0;"></iframe>
</div>
</div>
<!-- Code for the modal popup -->
</form>
</body>
</html>
<head runat="server">
<title></title>
<link href="Styles/Style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.hovercard.js" type="text/javascript"></script>
<script src="fancybox/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<link href="fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function ChangeStatus(ID) {
// To make Active User Inactive and vice a versa
$.ajax({
type: "POST",
url: "Default.aspx/ChangeStatus",
data: '{"UserID": "' + ID + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () {
window.location = "Default.aspx";
}
});
}
</script>
<script type="text/javascript">
$(document).ready(function () {
GridOperate();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(GridOperate);
$(".opendialog").fancybox({
'titlePosition': 'inside',
'transitionIn': 'none',
'transitionOut': 'none',
enableEscapeButton: false,
hideOnOverlayClick: false,
titleShow: false
});
});
function GridOperate(sender, args) {
// To check and uncheck all checkbox of grid
$("#<%=Gv.ClientID%> input[id*='chkSelectAll']:checkbox").click(function () {
if ($(this).is(':checked'))
$("#<%=Gv.ClientID%> input[id*='CheckSelect']:checkbox").attr('checked', true);
else
$("#<%=Gv.ClientID%> input[id*='CheckSelect']:checkbox").attr('checked', false);
});
//To Create Hover popup in the grid
$(".customer-number,.number_hover").hover(function () {
$(this).parent().find(".number_hover").show();
}, function () {
$(".number_hover").hide();
});
// To apply proper style to Hover popup
$('.contentTable td').each(function () {
$(this).find('.downarrow_customer_tooltip').css('left', ($(this).width() / 2) - 10 + 'px');
$(this).find('.number_hover p').css('width', ($(this).width()) + 'px');
$(this).find('.number_hover').css('width', ($(this).width()) - 14 + 'px');
})
}
function OpenDialog(ID) {
var returnpath = window.location;
$(".frmPass").attr('src', 'EditUser.aspx?UserID=' + ID + '&ReturnPath=' + returnpath);
$(".OpenDialog").width(900);
$.fancybox.center();
$(".OpenDialog").fancybox();
}
</script>
<style type="text/css">
upload.scroll {
height: 200px;
width: 300px;
overflow: auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="Gv" />
</Triggers>
<ContentTemplate>
<div>
<table class="contentTable login_table" style="margin-top: 0px; width: 100%">
<tbody>
<tr><td><asp:Button ID="btnDelete" runat="server" Text="Delete Selected" style="background-color:#990000;color:White;font-weight:bold;"
onclick="btnDelete_Click" OnClientClick="JavaScript:return confirm('Are you sure want to delete the selected items');" /></td></tr>
<tr>
<td>
<asp:GridView ID="Gv" runat="server" Width="100%" AutoGenerateColumns="False" RowStyle-HorizontalAlign="Center"
AllowPaging="True" onpageindexchanging="Gv_PageIndexChanging" PageSize="4"
AllowSorting="True" onrowediting="Gv_RowEditing" onsorting="Gv_Sorting"
onrowupdating="Gv_RowUpdating" onrowcancelingedit="Gv_RowCancelingEdit"
onrowdeleting="Gv_RowDeleting" ShowFooter="True"
FooterStyle-HorizontalAlign="Center" onrowcommand="Gv_RowCommand"
onrowdatabound="Gv_RowDataBound" CssClass="Itemgrid" CellPadding="4"
ForeColor="#333333" GridLines="None" BorderWidth="2" >
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="" Visible="true" ItemStyle-Width="25px">
<HeaderStyle CssClass="leftcorner" />
<HeaderTemplate>
<div class="gk" style="margin-left: 0px">
<input type="checkbox" id="chkSelectAll" name="chkSelectAll" runat="server" style="-webkit-appearance: checkbox;
cursor: pointer;" class="styled headercheck" />
</div>
</HeaderTemplate>
<ItemTemplate>
<div style="margin-left: 0px">
<asp:CheckBox ID="CheckSelect" runat="server" />
<asp:HiddenField ID="hdnId" runat="server" Value='<%# Eval("ID") %>' />
</div>
</ItemTemplate>
<ItemStyle Width="25px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Sr No" Visible="true" ItemStyle-Width="50px">
<ItemTemplate>
<%#Container.DataItemIndex + 1 %>
</ItemTemplate>
<ItemStyle Width="50px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" CssClass="searchStoreCol04" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<FooterTemplate>
<asp:TextBox ID="txtAddFirstName" runat="server"></asp:TextBox>
</FooterTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtFirstName" runat="server" Text='<%# Eval("FirstName") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<div class="cust_number">
<asp:Label CssClass="customer-number" ID="lblFirstName" runat="server" Text='<%# Eval("FirstName") %>'></asp:Label>
<%# Convert.ToString(Eval("FirstName")) != "" ? "<div class=\"number_hover cf matched_tool\"><em>First Name</em><p>" + Eval("FirstName") + "<br /></p><span class=\"downarrow_customer_tooltip\"></span></div>" : ""%>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="LastName" SortExpression="LastName">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" CssClass="searchStoreCol04" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<EditItemTemplate>
<asp:TextBox ID="txtLastName" runat="server" Text='<%# Eval("LastName") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtAddLastName" runat="server"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<div class="cust_number">
<asp:Label CssClass="customer-number" ID="lblLastName" runat="server" Text='<%# Eval("LastName") %>'></asp:Label>
<%# Convert.ToString(Eval("LastName")) != "" ? "<div class=\"number_hover cf matched_tool\"><em>Last Name</em><p>" + Eval("LastName") + "<br /></p><span class=\"downarrow_customer_tooltip\"></span></div>" : ""%>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Address" SortExpression="Address">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" CssClass="searchStoreCol04" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<EditItemTemplate>
<asp:TextBox ID="txtAddress" runat="server" Text='<%# Eval("Address") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtAddAddress" runat="server"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<div class="cust_number">
<asp:Label CssClass="customer-number" ID="lblAddress" runat="server" Text='<%# Eval("Address") %>'></asp:Label>
<%# Convert.ToString(Eval("Address")) != "" ? "<div class=\"number_hover cf matched_tool\"><em>Address</em><p>" + Eval("Address") + "<br /></p><span class=\"downarrow_customer_tooltip\"></span></div>" : ""%>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ContactNo" SortExpression="ContactNo">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" CssClass="searchStoreCol04" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<EditItemTemplate>
<asp:TextBox ID="txtContactNo" runat="server" Text='<%# Eval("ContactNo") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtAddContactNo" runat="server"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<div class="cust_number">
<asp:Label CssClass="customer-number" ID="lblContactNo" runat="server" Text='<%# Eval("ContactNo") %>'></asp:Label>
<%# Convert.ToString(Eval("ContactNo")) != "" ? "<div class=\"number_hover cf matched_tool\"><em>ContactNo</em><p>" + Eval("ContactNo") + "<br /></p><span class=\"downarrow_customer_tooltip\"></span></div>" : ""%>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Image" SortExpression="Image">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="110px" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<EditItemTemplate>
<asp:FileUpload ID="fupEditImage" runat="server" />
</EditItemTemplate>
<FooterTemplate>
<asp:FileUpload ID="fupAddImage" runat="server" Width="100px" style="width:100px;" />
</FooterTemplate>
<ItemTemplate>
<div class="cust_number">
<asp:Image ID="imgImage" runat="server" Height="100" Width="100" ImageUrl='<%# "ImageHandler.ashx?ID="+ Eval("ID") %>' />
<%# Convert.ToString(Eval("Image")) != "" ? "<div class=\"number_hover cf matched_tool\"><em>Image</em><p>" + Eval("Image") + "<br /></p><span class=\"downarrow_customer_tooltip\"></span></div>" : ""%>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Status" SortExpression="Status">
<HeaderStyle Width="11%" VerticalAlign="Middle" HorizontalAlign="Center" CssClass="searchStoreCol08" />
<ItemStyle VerticalAlign="Middle" HorizontalAlign="Center" />
<ItemTemplate>
<div class="cust_number">
<a id="a_status" class="customer-number" title="Status" onclick="javascript: ChangeStatus('<%# Eval("ID") %>');">
<%# Convert.ToBoolean(Eval("Status")) == true ? "<span style='color:Green;'>Active</span>" : "<span style='color:red;'>Inactive</span>"%>
</a>
<%# Convert.ToString(Eval("Status")) == "1" ? "<div class=\"number_hover cf matched_tool\"><em>Status</em><p>Active<br /></p><span class=\"downarrow_customer_tooltip\"></span></div>" : ""%>
<%# Convert.ToString(Eval("Status")) == "2" ? "<div class=\"number_hover cf matched_tool\"><em>Status</em><p>InActive<br /></p><span class=\"downarrow_customer_tooltip\"></span></div>" : ""%>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action">
<HeaderStyle Width="11%" HorizontalAlign="Center" VerticalAlign="Middle" CssClass="searchStoreCol08 rightcorner" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<FooterTemplate>
<center><asp:ImageButton ID="imgAdd" runat="server" ImageUrl="~/Images/add_blue.jpg" Height="20px" Width="20px" CommandName="Add" /></center>
</FooterTemplate>
<ItemTemplate>
<div class="cust_number">
<%--<asp:ImageButton ID="imgEdit" runat="server" ImageUrl="~/Images/edit_blue.jpg" Height="20px" Width="20px" OnClientClick='javascript: OpenDialog();' />--%>
<a href="#upload" class="opendialog">
<input type="image" id="imgEdit" class="imgedit" src="Images/edit_blue.jpg" style ="Height:20px;Width:20px;" onclick='javascript: OpenDialog("<%# Eval("ID") %>");' /></a>
<asp:ImageButton ID="imgDelete" runat="server" ImageUrl="~/Images/delete_blue.jpg" Height="20px" Width="20px" OnClientClick="return confirm('Are you sure you want to delete?')" CommandName="DeleteButton" CommandArgument='<%#Eval("ID") %>'/>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowEditButton="True" />
<asp:CommandField ShowDeleteButton="True" />
</Columns>
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White"
HorizontalAlign="Center" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<PagerTemplate>
<div class="carrier_pagination alignright" style="padding-top:18px">
<div class="arrows alignright">
<asp:LinkButton ID="lnkFirst" CommandName="Page" CommandArgument="First" ToolTip="First Page"
runat="server" CssClass="prev">First</asp:LinkButton>
<asp:LinkButton ID="lnkPrevious" CommandName="Page" CommandArgument="Prev" ToolTip="Previous Page"
runat="server" CssClass="prev">Prev</asp:LinkButton>
<asp:LinkButton ID="lnkNext" CommandName="Page" CommandArgument="Next" ToolTip="Next Page" runat="server"
CssClass="next">Next</asp:LinkButton>
<asp:LinkButton ID="lnkLast" CommandName="Page" CommandArgument="Last" ToolTip="Last Page"
runat="server" CssClass="Last">Last</asp:LinkButton>
<asp:LinkButton ID="LnkAll" OnClick="LnkAll_Click" CssClass="viewall" ToolTip="view All"
runat="server">View All</asp:LinkButton>
</div>
<span class="alignright">Page <em>
<%= Gv.PageIndex + 1%></em> of
<%= Gv.PageCount%></span>
</div>
</PagerTemplate>
<RowStyle HorizontalAlign="Center" BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<SortedAscendingCellStyle BackColor="#FDF5AC" />
<SortedAscendingHeaderStyle BackColor="#4D0000" />
<SortedDescendingCellStyle BackColor="#FCF6C0" />
<SortedDescendingHeaderStyle BackColor="#820000" />
</asp:GridView>
<div class="arrows alignright " style="width: auto; ">
<asp:LinkButton ID="LnkViewAll" Text="View Paging" Visible="false" runat="server" OnClick="LnkViewAll_Click"
CssClass="viewall" ></asp:LinkButton>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<!-- Code for the modal popup -->
<div style="display: none;">
<div id="upload" class="statusmodal">
<iframe id="frm" runat="server" class="frmPass" width="400px" height="504px" scrolling="no"
frameborder="0" style="border: 0;"></iframe>
</div>
</div>
<!-- Code for the modal popup -->
</form>
</body>
</html>
The Code file
#region Data Members
Entities db = new Entities();
UserService Users = new UserService();
#endregion
#region Properties
public string SortDirection
{
get
{
if (ViewState["SortDirection"] == null)
ViewState["SortDirection"] = " ASC";
return (string)ViewState["SortDirection"];
}
set { ViewState["SortDirection"] = value; }
}
public string SortExpression
{
get
{
if (ViewState["SortExpression"] == null)
ViewState["SortExpression"] = "Name";
return (string)ViewState["SortExpression"];
}
set { ViewState["SortExpression"] = value; }
}
#endregion
#region Events
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindGrid("");
}
}
protected void LnkViewAll_Click(object sender, EventArgs e)
{
Gv.AllowPaging = true;
//Gv.PageSize = 10;
LnkViewAll.Visible = false;
BindGrid("");
}
protected void LnkAll_Click(object sender, EventArgs e)
{
Gv.AllowPaging = false;
LnkViewAll.Visible = true;
BindGrid("");
}
protected void Gv_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
if (e.NewPageIndex != -1)
{
Gv.PageIndex = e.NewPageIndex;
}
BindGrid("");
}
protected void Gv_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Add")
{
string FirstName, LastName, Address, ContactNo;
GridViewRow gvr = (GridViewRow)(((ImageButton)e.CommandSource).NamingContainer);
TextBox TbFirstName = (TextBox)(gvr.FindControl("txtAddFirstName"));
TextBox TbLastName = (TextBox)(gvr.FindControl("txtAddLastName"));
TextBox TbAddress = (TextBox)(gvr.FindControl("txtAddAddress"));
TextBox TbContactNo = (TextBox)(gvr.FindControl("txtAddContactNo"));
FileUpload FupImage = (FileUpload)(gvr.FindControl("fupAddImage"));
//--Start Code to convert image to byte
int Length = FupImage.PostedFile.ContentLength;
byte[] Image = new byte[Length];
HttpPostedFile ImageFile = FupImage.PostedFile;
ImageFile.InputStream.Read(Image, 0, Length);
// --End Code
FirstName = TbFirstName.Text;
LastName = TbLastName.Text;
Address = TbAddress.Text;
ContactNo = TbContactNo.Text;
User NewUser = new User();
NewUser.FirstName = FirstName;
NewUser.LastName = LastName;
NewUser.Address = Address;
NewUser.ContactNo = ContactNo;
NewUser.Image = Image;
NewUser.Status = true;
db.AddToUsers(NewUser);
db.SaveChanges();
BindGrid("");
}
else if (e.CommandName == "DeleteButton")
{
GridViewRow gvr = (GridViewRow)(((ImageButton)e.CommandSource).NamingContainer);
HiddenField HdnId = (HiddenField)(gvr.FindControl("hdnId"));
long Id = Convert.ToInt64(HdnId.Value);
User Userdata = db.Users.Where(u => u.ID == Id).SingleOrDefault();
db.DeleteObject(Userdata);
db.SaveChanges();
BindGrid("");
}
}
protected void Gv_Sorting(object sender, GridViewSortEventArgs e)
{
if (ViewState["Sorting"] == null)
{
ViewState["Sorting"] = e.SortDirection;
BindGrid(e.SortExpression + " Asc");
}
else if (ViewState["Sorting"].ToString() == "Ascending")
{
ViewState["Sorting"] = "Descending";
BindGrid(e.SortExpression + " Desc");
}
else
{
ViewState["Sorting"] = "Ascending";
BindGrid(e.SortExpression + " Asc");
}
}
protected void Gv_RowEditing(object sender, GridViewEditEventArgs e)
{
Gv.EditIndex = e.NewEditIndex;
BindGrid("");
}
protected void Gv_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
string FirstName, LastName, Address, ContactNo;
long Id;
try
{
TextBox TbFirstName = (TextBox)(Gv.Rows[e.RowIndex].FindControl("txtFirstName"));
TextBox TbLastName = (TextBox)(Gv.Rows[e.RowIndex].FindControl("txtLastName"));
TextBox TbAddress = (TextBox)(Gv.Rows[e.RowIndex].FindControl("txtAddress"));
TextBox TbContactNo = (TextBox)(Gv.Rows[e.RowIndex].FindControl("txtContactNo"));
FileUpload FupImage = (FileUpload)(Gv.Rows[e.RowIndex].FindControl("fupEditImage"));
//--Start Code to convert image to byte
int Length = FupImage.PostedFile.ContentLength;
byte[] Image = new byte[Length];
HttpPostedFile ImageFile = FupImage.PostedFile;
ImageFile.InputStream.Read(Image, 0, Length);
// --End Code
HiddenField HdnId = (HiddenField)(Gv.Rows[e.RowIndex].FindControl("hdnId"));
FirstName = TbFirstName.Text;
LastName = TbLastName.Text;
Address = TbAddress.Text;
ContactNo = TbContactNo.Text;
Id = Convert.ToInt64(HdnId.Value);
User Userdata = db.Users.Where(u => u.ID == Id).SingleOrDefault();
Userdata.FirstName = FirstName;
Userdata.LastName = LastName;
Userdata.Address = Address;
Userdata.ContactNo = ContactNo;
Userdata.Image = Image;
db.SaveChanges();
Gv.EditIndex = -1;
BindGrid("");
}
catch (Exception)
{
}
}
protected void Gv_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
Gv.EditIndex = -1;
BindGrid("");
}
protected void Gv_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
try
{
long Id;
HiddenField HdnId = (HiddenField)(Gv.Rows[e.RowIndex].FindControl("hdnId"));
Id = Convert.ToInt64(HdnId.Value);
User Userdata = db.Users.Where(u => u.ID == Id).SingleOrDefault();
db.DeleteObject(Userdata);
db.SaveChanges();
BindGrid("");
}
catch (Exception)
{
}
}
protected void Gv_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
try
{
LinkButton delbutton = (LinkButton)e.Row.Cells[10].Controls[0];
delbutton.OnClientClick = string.Format("return confirm('Are you sure want to delete');");
}
catch (ArgumentOutOfRangeException) { }
}
}
protected void btnDelete_Click(object sender, EventArgs e)
{
foreach (GridViewRow row in Gv.Rows)
{
CheckBox chk = (CheckBox)row.FindControl("CheckSelect");
HiddenField hdnID = (HiddenField)row.FindControl("hdnId");
if (chk != null && chk.Checked)
{
long id = Convert.ToInt64(hdnID.Value);
User a = db.Users.Where(u => u.ID == id).SingleOrDefault();
db.DeleteObject(a);
db.SaveChanges();
}
}
BindGrid("");
}
#endregion
#region Methods
public void BindGrid(string SortExp)
{
Gv.DataSource = Users.GetUsers();
if (SortExp != "")
{
DataView dv = new DataView(Helper.ListToDataTable(Users.GetUsers().ToList()));
dv.Sort = SortExp;
Gv.DataSource = dv;
}
Gv.DataBind();
}
[WebMethod]
public static string ChangeStatus(long UserID)
{
try
{
Entities db = new Entities();
UserService Users = new UserService();
User Userdata = db.Users.Where(u => u.ID == UserID).SingleOrDefault(); // Users.GetUserById(Convert.ToInt64(UserID));
Userdata.Status = Userdata.Status == true ? Userdata.Status = false : Userdata.Status = true;
//Users.UpdateUser(Userdata);
db.SaveChanges();
return "Success";
}
catch (Exception)
{
return "Error";
}
}
#endregion
Entities db = new Entities();
UserService Users = new UserService();
#endregion
#region Properties
public string SortDirection
{
get
{
if (ViewState["SortDirection"] == null)
ViewState["SortDirection"] = " ASC";
return (string)ViewState["SortDirection"];
}
set { ViewState["SortDirection"] = value; }
}
public string SortExpression
{
get
{
if (ViewState["SortExpression"] == null)
ViewState["SortExpression"] = "Name";
return (string)ViewState["SortExpression"];
}
set { ViewState["SortExpression"] = value; }
}
#endregion
#region Events
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindGrid("");
}
}
protected void LnkViewAll_Click(object sender, EventArgs e)
{
Gv.AllowPaging = true;
//Gv.PageSize = 10;
LnkViewAll.Visible = false;
BindGrid("");
}
protected void LnkAll_Click(object sender, EventArgs e)
{
Gv.AllowPaging = false;
LnkViewAll.Visible = true;
BindGrid("");
}
protected void Gv_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
if (e.NewPageIndex != -1)
{
Gv.PageIndex = e.NewPageIndex;
}
BindGrid("");
}
protected void Gv_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Add")
{
string FirstName, LastName, Address, ContactNo;
GridViewRow gvr = (GridViewRow)(((ImageButton)e.CommandSource).NamingContainer);
TextBox TbFirstName = (TextBox)(gvr.FindControl("txtAddFirstName"));
TextBox TbLastName = (TextBox)(gvr.FindControl("txtAddLastName"));
TextBox TbAddress = (TextBox)(gvr.FindControl("txtAddAddress"));
TextBox TbContactNo = (TextBox)(gvr.FindControl("txtAddContactNo"));
FileUpload FupImage = (FileUpload)(gvr.FindControl("fupAddImage"));
//--Start Code to convert image to byte
int Length = FupImage.PostedFile.ContentLength;
byte[] Image = new byte[Length];
HttpPostedFile ImageFile = FupImage.PostedFile;
ImageFile.InputStream.Read(Image, 0, Length);
// --End Code
FirstName = TbFirstName.Text;
LastName = TbLastName.Text;
Address = TbAddress.Text;
ContactNo = TbContactNo.Text;
User NewUser = new User();
NewUser.FirstName = FirstName;
NewUser.LastName = LastName;
NewUser.Address = Address;
NewUser.ContactNo = ContactNo;
NewUser.Image = Image;
NewUser.Status = true;
db.AddToUsers(NewUser);
db.SaveChanges();
BindGrid("");
}
else if (e.CommandName == "DeleteButton")
{
GridViewRow gvr = (GridViewRow)(((ImageButton)e.CommandSource).NamingContainer);
HiddenField HdnId = (HiddenField)(gvr.FindControl("hdnId"));
long Id = Convert.ToInt64(HdnId.Value);
User Userdata = db.Users.Where(u => u.ID == Id).SingleOrDefault();
db.DeleteObject(Userdata);
db.SaveChanges();
BindGrid("");
}
}
protected void Gv_Sorting(object sender, GridViewSortEventArgs e)
{
if (ViewState["Sorting"] == null)
{
ViewState["Sorting"] = e.SortDirection;
BindGrid(e.SortExpression + " Asc");
}
else if (ViewState["Sorting"].ToString() == "Ascending")
{
ViewState["Sorting"] = "Descending";
BindGrid(e.SortExpression + " Desc");
}
else
{
ViewState["Sorting"] = "Ascending";
BindGrid(e.SortExpression + " Asc");
}
}
protected void Gv_RowEditing(object sender, GridViewEditEventArgs e)
{
Gv.EditIndex = e.NewEditIndex;
BindGrid("");
}
protected void Gv_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
string FirstName, LastName, Address, ContactNo;
long Id;
try
{
TextBox TbFirstName = (TextBox)(Gv.Rows[e.RowIndex].FindControl("txtFirstName"));
TextBox TbLastName = (TextBox)(Gv.Rows[e.RowIndex].FindControl("txtLastName"));
TextBox TbAddress = (TextBox)(Gv.Rows[e.RowIndex].FindControl("txtAddress"));
TextBox TbContactNo = (TextBox)(Gv.Rows[e.RowIndex].FindControl("txtContactNo"));
FileUpload FupImage = (FileUpload)(Gv.Rows[e.RowIndex].FindControl("fupEditImage"));
//--Start Code to convert image to byte
int Length = FupImage.PostedFile.ContentLength;
byte[] Image = new byte[Length];
HttpPostedFile ImageFile = FupImage.PostedFile;
ImageFile.InputStream.Read(Image, 0, Length);
// --End Code
HiddenField HdnId = (HiddenField)(Gv.Rows[e.RowIndex].FindControl("hdnId"));
FirstName = TbFirstName.Text;
LastName = TbLastName.Text;
Address = TbAddress.Text;
ContactNo = TbContactNo.Text;
Id = Convert.ToInt64(HdnId.Value);
User Userdata = db.Users.Where(u => u.ID == Id).SingleOrDefault();
Userdata.FirstName = FirstName;
Userdata.LastName = LastName;
Userdata.Address = Address;
Userdata.ContactNo = ContactNo;
Userdata.Image = Image;
db.SaveChanges();
Gv.EditIndex = -1;
BindGrid("");
}
catch (Exception)
{
}
}
protected void Gv_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
Gv.EditIndex = -1;
BindGrid("");
}
protected void Gv_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
try
{
long Id;
HiddenField HdnId = (HiddenField)(Gv.Rows[e.RowIndex].FindControl("hdnId"));
Id = Convert.ToInt64(HdnId.Value);
User Userdata = db.Users.Where(u => u.ID == Id).SingleOrDefault();
db.DeleteObject(Userdata);
db.SaveChanges();
BindGrid("");
}
catch (Exception)
{
}
}
protected void Gv_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
try
{
LinkButton delbutton = (LinkButton)e.Row.Cells[10].Controls[0];
delbutton.OnClientClick = string.Format("return confirm('Are you sure want to delete');");
}
catch (ArgumentOutOfRangeException) { }
}
}
protected void btnDelete_Click(object sender, EventArgs e)
{
foreach (GridViewRow row in Gv.Rows)
{
CheckBox chk = (CheckBox)row.FindControl("CheckSelect");
HiddenField hdnID = (HiddenField)row.FindControl("hdnId");
if (chk != null && chk.Checked)
{
long id = Convert.ToInt64(hdnID.Value);
User a = db.Users.Where(u => u.ID == id).SingleOrDefault();
db.DeleteObject(a);
db.SaveChanges();
}
}
BindGrid("");
}
#endregion
#region Methods
public void BindGrid(string SortExp)
{
Gv.DataSource = Users.GetUsers();
if (SortExp != "")
{
DataView dv = new DataView(Helper.ListToDataTable(Users.GetUsers().ToList()));
dv.Sort = SortExp;
Gv.DataSource = dv;
}
Gv.DataBind();
}
[WebMethod]
public static string ChangeStatus(long UserID)
{
try
{
Entities db = new Entities();
UserService Users = new UserService();
User Userdata = db.Users.Where(u => u.ID == UserID).SingleOrDefault(); // Users.GetUserById(Convert.ToInt64(UserID));
Userdata.Status = Userdata.Status == true ? Userdata.Status = false : Userdata.Status = true;
//Users.UpdateUser(Userdata);
db.SaveChanges();
return "Success";
}
catch (Exception)
{
return "Error";
}
}
#endregion
Now the code for Popup File
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
div.scroll {
height: 200px;
width: 300px;
overflow: auto;
}
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".FileUpload").change(function (e) {
var img = document.getElementById('<%=imgView.ClientID %>');
img.src = e.value;
alert(img.src);
});
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imgView').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
function RedirectParent(URL) {
parent.window.location = URL;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="border:2px solid black;padding-bottom:21px;">
<h1 align="center">
Edit User</h1>
<table align="center" bgcolor="silver" cellspacing="5px">
<tr>
<td>
First Name
</td>
<td>
:
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Last Name
</td>
<td>
:
<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Address
</td>
<td>
:
<asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Contact No.
</td>
<td>
:
<asp:TextBox ID="txtContactNo" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Image
</td>
<td>
:
<asp:FileUpload ID="fupEditImage" runat="server" CssClass="FileUpload1" onchange="readURL(this);" /><div id="dv"></div>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Image ID="imgView" runat="server" Height="200px" Width="200px" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Update" onclick="btnSubmit_Click" />
<asp:Button ID="btnReset" runat="server" Text="Reset" onclick="btnReset_Click" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
<head runat="server">
<title></title>
<style type="text/css">
div.scroll {
height: 200px;
width: 300px;
overflow: auto;
}
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".FileUpload").change(function (e) {
var img = document.getElementById('<%=imgView.ClientID %>');
img.src = e.value;
alert(img.src);
});
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imgView').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
function RedirectParent(URL) {
parent.window.location = URL;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="border:2px solid black;padding-bottom:21px;">
<h1 align="center">
Edit User</h1>
<table align="center" bgcolor="silver" cellspacing="5px">
<tr>
<td>
First Name
</td>
<td>
:
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Last Name
</td>
<td>
:
<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Address
</td>
<td>
:
<asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Contact No.
</td>
<td>
:
<asp:TextBox ID="txtContactNo" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Image
</td>
<td>
:
<asp:FileUpload ID="fupEditImage" runat="server" CssClass="FileUpload1" onchange="readURL(this);" /><div id="dv"></div>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Image ID="imgView" runat="server" Height="200px" Width="200px" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Update" onclick="btnSubmit_Click" />
<asp:Button ID="btnReset" runat="server" Text="Reset" onclick="btnReset_Click" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Code file of Popup
Entities db = new Entities();
string UserId, ReturnURL;
protected void Page_Load(object sender, EventArgs e)
{
UserId = Request.QueryString["UserID"].ToString();
ReturnURL = Request.QueryString["ReturnPath"].ToString();
if (!Page.IsPostBack)
{
SendData(Convert.ToInt64(UserId));
}
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
string FirstName, LastName, Address, ContactNo;
long Id;
FirstName = txtFirstName.Text;
LastName = txtLastName.Text;
Address = txtAddress.Text;
ContactNo = txtContactNo.Text;
//--Start Code to convert image to byte
int Length = fupEditImage.PostedFile.ContentLength;
byte[] Image = new byte[Length];
HttpPostedFile ImageFile = fupEditImage.PostedFile;
ImageFile.InputStream.Read(Image, 0, Length);
// --End Code
Id = Convert.ToInt64(UserId);
User Userdata = db.Users.Where(u => u.ID == Id).SingleOrDefault();
Userdata.FirstName = FirstName;
Userdata.LastName = LastName;
Userdata.Address = Address;
Userdata.ContactNo = ContactNo;
Userdata.Image = Image;
db.SaveChanges();
this.ClientScript.RegisterStartupScript(this.GetType(), Guid.NewGuid().ToString(), "javascript: RedirectParent('" + ReturnURL + "'); " , true);
}
public void SendData(long Id)
{
User EditUser = db.Users.Where(u => u.ID == Id).FirstOrDefault();
txtFirstName.Text = EditUser.FirstName;
txtLastName.Text = EditUser.LastName;
txtAddress.Text = EditUser.Address;
txtContactNo.Text = EditUser.ContactNo;
if (EditUser.Image != null)
{
//imgView.ImageUrl = String.Format("ImageHandler.ashx?ID={0}", Id);
imgView.ImageUrl = "ImageHandler.ashx?ID=" + Id;
}
}
public void ResetData()
{
txtFirstName.Text = "";
txtLastName.Text = "";
txtAddress.Text = "";
txtContactNo.Text = "";
}
protected void btnReset_Click(object sender, EventArgs e)
{
ResetData();
}
string UserId, ReturnURL;
protected void Page_Load(object sender, EventArgs e)
{
UserId = Request.QueryString["UserID"].ToString();
ReturnURL = Request.QueryString["ReturnPath"].ToString();
if (!Page.IsPostBack)
{
SendData(Convert.ToInt64(UserId));
}
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
string FirstName, LastName, Address, ContactNo;
long Id;
FirstName = txtFirstName.Text;
LastName = txtLastName.Text;
Address = txtAddress.Text;
ContactNo = txtContactNo.Text;
//--Start Code to convert image to byte
int Length = fupEditImage.PostedFile.ContentLength;
byte[] Image = new byte[Length];
HttpPostedFile ImageFile = fupEditImage.PostedFile;
ImageFile.InputStream.Read(Image, 0, Length);
// --End Code
Id = Convert.ToInt64(UserId);
User Userdata = db.Users.Where(u => u.ID == Id).SingleOrDefault();
Userdata.FirstName = FirstName;
Userdata.LastName = LastName;
Userdata.Address = Address;
Userdata.ContactNo = ContactNo;
Userdata.Image = Image;
db.SaveChanges();
this.ClientScript.RegisterStartupScript(this.GetType(), Guid.NewGuid().ToString(), "javascript: RedirectParent('" + ReturnURL + "'); " , true);
}
public void SendData(long Id)
{
User EditUser = db.Users.Where(u => u.ID == Id).FirstOrDefault();
txtFirstName.Text = EditUser.FirstName;
txtLastName.Text = EditUser.LastName;
txtAddress.Text = EditUser.Address;
txtContactNo.Text = EditUser.ContactNo;
if (EditUser.Image != null)
{
//imgView.ImageUrl = String.Format("ImageHandler.ashx?ID={0}", Id);
imgView.ImageUrl = "ImageHandler.ashx?ID=" + Id;
}
}
public void ResetData()
{
txtFirstName.Text = "";
txtLastName.Text = "";
txtAddress.Text = "";
txtContactNo.Text = "";
}
protected void btnReset_Click(object sender, EventArgs e)
{
ResetData();
}
