In this ASP.NET article i will show you, How to edit picture using FormView control. We all know that when FormView bind from SqlDataSource control then image have display on label control bydefault. First of all change label control with the image control. If you see the source code then you find that a label control bind with the image column using Eval("column name") method in embedded code block (<%# %> ). If you have to change label text with imageUrl then image will display on that place. Similarly in edit section take a fileupload control for picking file from local computer. Find it (Fileupload control) from Form View control in code file also save file in project folder. Lets see the example :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:FormView ID="FormView1" runat="server" AllowPaging="True" DataKeyNames="Id" DataSourceID="SqlDataSource1">
<EditItemTemplate>
Id:
<asp:Label ID="IdLabel1" runat="server" Text='<%# Eval("Id") %>' />
<br />
name:
<asp:TextBox ID="nameTextBox" runat="server" Text='<%# Bind("name") %>' />
<br />
ImageUrl:
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Save image</asp:LinkButton>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("ImageUrl") %>'></asp:Label>
<br />
<asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="Update" />
<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel" />
</EditItemTemplate>
<InsertItemTemplate>
name:
<asp:TextBox ID="nameTextBox" runat="server" Text='<%# Bind("name") %>' />
<br />
ImageUrl:
<asp:TextBox ID="ImageUrlTextBox" runat="server" Text='<%# Bind("ImageUrl") %>' />
<br />
<asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert" Text="Insert" />
<asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel" />
</InsertItemTemplate>
<ItemTemplate>
Id:
<asp:Label ID="IdLabel" runat="server" Text='<%# Eval("Id") %>' />
<br />
name:
<asp:Label ID="nameLabel" runat="server" Text='<%# Bind("name") %>' />
<br />
ImageUrl:
<asp:Image ID="Image1" runat="server" Height="119px" ImageUrl='<%# Eval("ImageUrl") %>' Width="113px" />
<br />
<asp:LinkButton ID="EditButton" runat="server" CausesValidation="False" CommandName="Edit" Text="Edit" />
<asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False" CommandName="Delete" Text="Delete" />
</ItemTemplate>
</asp:FormView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" DeleteCommand="DELETE FROM [emp] WHERE [Id] = @Id" InsertCommand="INSERT INTO [emp] ([name], [ImageUrl]) VALUES (@name, @ImageUrl)" SelectCommand="SELECT * FROM [emp]" UpdateCommand="UPDATE [emp] SET [name] = @name, [ImageUrl] = @ImageUrl WHERE [Id] = @Id">
<DeleteParameters>
<asp:Parameter Name="Id" Type="Int32" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="name" Type="String" />
<asp:Parameter Name="ImageUrl" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="name" Type="String" />
<asp:Parameter Name="ImageUrl" Type="String" />
<asp:Parameter Name="Id" Type="Int32" />
</UpdateParameters>
</asp:SqlDataSource>
</form>
</body>
</html>
using System;
using System.Web.UI.WebControls;
public partial class Default9 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void LinkButton1_Click(object sender, EventArgs e)
{
FileUpload fle = (FileUpload)FormView1.FindControl("FileUpload1") as FileUpload;
if (fle.HasFile)
{
fle.SaveAs(Server.MapPath("~/image/" + fle.FileName));
Label l1 = (Label)FormView1.FindControl("Label1") as Label;
l1.Text = "~/image/" + fle.FileName;
}
}
}