|
|
Home > ASP : ASP.net FormView EditItemTemplate And InsertItemTemplate Tutorial
| Article |
By: Saqib Khan
Date: 1/7/2009
|
ASP.net FormView EditItemTemplate And InsertItemTemplate Tutorial
|
|
A better & new version of this tutorial is available Here
To understand how this code works, please read my comment below. ASPX Page: <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Controls_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>FormView</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FormView runat=server ID="frm1">
<ItemTemplate>
<asp:Label ID="a1" Text="<%# Bind("State") %>" runat=server></asp:Label>
<asp:Button CommandName="Edit" runat=server Text="Edit me" ID="Btn1" />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="lblstate" Text="<%# Bind("State") %>" runat=server></asp:TextBox>
<asp:Button CommandName="Save" runat=server Text="Save" ID="Btn1" />
</EditItemTemplate>
<InsertItemTemplate>
<asp:Button CommandName="insert" runat=server Text="Click me" ID="Btn1" />
</InsertItemTemplate>
</asp:FormView>
<br /><br />
</div>
</form>
</body>
</html>
Code Behind: Imports System.Data
Partial Class Controls_Default
Inherits System.Web.UI.Page Private Function GetStates() As DataTable
" This Function Can Return Anything, Such as Results from DB,XML etc Dim tbl As New DataTable
Dim Col As New DataColumn
Dim row As DataRow Col.DataType = Type.GetType("System.String")
Col.ColumnName = "State"
tbl.Columns.Add(Col) row = tbl.NewRow
row("State") = "NY"
tbl.Rows.Add(row) row = tbl.NewRow
row("State") = "WA"
tbl.Rows.Add(row)
GetStates = tbl
End Function Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not Page.IsPostBack Then
" Make sure you do this, Otherwise ItemCommand or other Events for FormView will NEVER Fire
frm1.DataSource = Me.GetStates
frm1.DataBind()
End If End Sub Protected Sub frm1_ItemCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.FormViewCommandEventArgs) Handles frm1.ItemCommand " Upon Click of any button, Very First event the FormView Calls is ItemCommand
" But do make sure your Button has CommandName Attribute If (e.CommandName = "Edit") Then
frm1.ChangeMode(FormViewMode.Edit)
frm1.DataSource = Me.GetStates
frm1.DataBind()
End If If (e.CommandName = "Save") Then
Dim nv As String
nv = CType(frm1.FindControl("lblstate"), TextBox).Text " Newly Typed Value
" Insert Statement Here
MsgBox(nv & " Saved")
End If
End Sub
Protected Sub frm1_ModeChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.FormViewModeEventArgs) Handles frm1.ModeChanging
" This Event is Must, say if you want to examine what"s been updated or you want to cancel a update
End Sub
End Class
|
|
|
| Comments. |
| Comment/Solution Posted By: Saqib Khan Date: 1/7/2009 5:33:00 PM |
Here is the explaination of above Code.
Many people when they try to implement Formview, they dont see any results within heir ASPX page (for Edit & Readonly Template). if thats the case then MAKE certain that you are doing a DataBinding on the FormView within Page_Load Event.
Now here is another problem, when you do databinding in Page_Load event then none of the formview events will fire. if thats the case then make sure you do databinding only within the FIRST PAGE load. which means use the "if not Page.isPostBack" event and then do the data binding for the FormView.
Any button that you want to use to raise an event within Formview, Must have a "CommandName" Attribute, Thats bacuase the very first event (after DataBinding) Formview executes is "ItemCommand Event", so you can read the value of CommandName and then apply the apporiate action.
Any other questions, please let me know. |
| Comment/Solution Posted By: Saqib Khan Date: 1/7/2009 5:42:00 PM |
Here is Full Code, if you want to do INSERT with FormView As Well.
code behind:
Imports System.Data
Partial Class Controls_Default
Inherits System.Web.UI.Page
Private Function GetStates() As DataTable
' This Function Can Return Anything, Such as Results from DB,XML etc
Dim tbl As New DataTable
Dim Col As New DataColumn
Dim row As DataRow
Col.DataType = Type.GetType("System.String")
Col.ColumnName = "State"
tbl.Columns.Add(Col)
row = tbl.NewRow
row("State") = "NY"
tbl.Rows.Add(row)
row = tbl.NewRow
row("State") = "WA"
tbl.Rows.Add(row)
GetStates = tbl
End Function
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
' Make sure you do this, Otherwise ItemCommand or other Events for FormView will NEVER Fire
frm1.DataSource = Me.GetStates
frm1.DataBind()
End If
End Sub
Protected Sub frm1_ItemCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.FormViewCommandEventArgs) Handles frm1.ItemCommand
' Upon Click of any button, Very First event the FormView Calls is ItemCommand
' But do make sure your Button has CommandName Attribute
If (e.CommandName = "Edit") Then
frm1.ChangeMode(FormViewMode.Edit)
frm1.DataSource = Me.GetStates
frm1.DataBind()
End If
If (e.CommandName = "Save") Then
Dim nv As String
nv = CType(frm1.FindControl("lblstate"), TextBox).Text ' Newly Typed Value
' Insert Statement Here
MsgBox(nv & " Saved")
End If
If (e.CommandName = "Insert") Then
frm1.ChangeMode(FormViewMode.Insert)
End If
If e.CommandName = "insertrecord" Then
Dim nv As String
nv = CType(frm1.FindControl("lblstatei"), TextBox).Text ' Newly Typed Value
MsgBox(nv)
End If
End Sub
Protected Sub frm1_ItemInserting(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.FormViewInsertEventArgs) Handles frm1.ItemInserting
End Sub
Protected Sub frm1_ModeChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.FormViewModeEventArgs) Handles frm1.ModeChanging
' This Event is Must, say if you want to examine what's been updated or you want to cancel a update
End Sub
End Class
ASPX:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Controls_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>FormView</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FormView runat=server ID="frm1">
<ItemTemplate>
<asp:Label ID="a1" Text='<%# Bind("State") %>' runat=server></asp:Label>
<asp:Button CommandName="Edit" runat=server Text="Edit me" ID="Btn1" />
<asp:Button CommandName="Insert" runat=server Text="Add New" ID="Button1" />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="lblstate" Text='<%# Bind("State") %>' runat=server></asp:TextBox>
<asp:Button CommandName="Save" runat=server Text="Save" ID="Btn1" />
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="lblstatei" runat=server></asp:TextBox>
<asp:Button CommandName="insertrecord" runat=server Text="Add New Value" ID="Btn1" />
</InsertItemTemplate>
</asp:FormView>
</div>
</form>
</body>
</html>
|
| Comment/Solution Posted By: Saqib Khan Date: 1/7/2009 5:56:00 PM |
I was going Crazy about understand how events work in FormView. and here is the information that i was not able to find on any site (Besdies MSDN)
if your Button's CommandName Attribute has a value of "Update" or "Insert", Then you MUST have corresponding event handlers in the code behind file.
if you look at my InsertitemTemplate example, you will see i am using "frm1_ItemInserting" Sub to handle Inserting, While in my Update Example, I am not using Any events, that's because to Edit my CommandName Attribute was named "Edit" not "Update" and for Insert i used reserved value "Insert". |
| Comment/Solution Posted By: Saqib Khan Date: 1/7/2009 5:57:00 PM |
Full Simplified Version:
ASPX:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Controls_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>FormView</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FormView runat=server ID="frm1">
<ItemTemplate>
<asp:Label ID="a1" Text='<%# Bind("State") %>' runat=server></asp:Label>
<asp:Button CommandName="Edit" runat=server Text="Edit me" ID="Btn1" />
<asp:Button CommandName="InsertV" runat=server Text="Add New" ID="Button1" />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="lblstate" Text='<%# Bind("State") %>' runat=server></asp:TextBox>
<asp:Button CommandName="Save" runat=server Text="Save" ID="Btn1" />
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="lblstatei" runat=server></asp:TextBox>
<asp:Button CommandName="insertrecord" runat=server Text="Add New Value" ID="Btn1" />
</InsertItemTemplate>
</asp:FormView>
</div>
</form>
</body>
</html>
Code Behind:
Imports System.Data
Partial Class Controls_Default
Inherits System.Web.UI.Page
Private Function GetStates() As DataTable
' This Function Can Return Anything, Such as Results from DB,XML etc
Dim tbl As New DataTable
Dim Col As New DataColumn
Dim row As DataRow
Col.DataType = Type.GetType("System.String")
Col.ColumnName = "State"
tbl.Columns.Add(Col)
row = tbl.NewRow
row("State") = "NY"
tbl.Rows.Add(row)
row = tbl.NewRow
row("State") = "WA"
tbl.Rows.Add(row)
GetStates = tbl
End Function
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
' Make sure you do this, Otherwise ItemCommand or other Events for FormView will NEVER Fire
frm1.DataSource = Me.GetStates
frm1.DataBind()
End If
End Sub
Protected Sub frm1_ItemCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.FormViewCommandEventArgs) Handles frm1.ItemCommand
' Upon Click of any button, Very First event the FormView Calls is ItemCommand
' But do make sure your Button has CommandName Attribute
If (e.CommandName = "Edit") Then
frm1.ChangeMode(FormViewMode.Edit)
frm1.DataSource = Me.GetStates
frm1.DataBind()
End If
If (e.CommandName = "Save") Then
Dim nv As String
nv = CType(frm1.FindControl("lblstate"), TextBox).Text ' Newly Typed Value
' Insert Statement Here
MsgBox(nv & " Saved")
End If
If (e.CommandName = "InsertV") Then
frm1.ChangeMode(FormViewMode.Insert)
End If
If e.CommandName = "insertrecord" Then
Dim nv As String
nv = CType(frm1.FindControl("lblstatei"), TextBox).Text ' Newly Typed Value
MsgBox(nv)
End If
End Sub
Protected Sub frm1_ModeChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.FormViewModeEventArgs) Handles frm1.ModeChanging
' This Event is Must, say if you want to examine what's been updated or you want to cancel a update
End Sub
End Class
|
| Comment/Solution Posted By: Jason Date: 2/4/2009 1:03:00 PM |
Thank You,Great Information.
Also make sure your commandName attribute does not have prebuilt/Reserved Names, otherwise FormView will never look into your ItemCommand Event. |
| Comment/Solution Posted By: Saqib Date: 6/24/2009 3:57:00 PM |
To see a better tutorial on FormView / Gridview please visit:
http://knowlegezone.com/documents/70/ASPNET-Formview--GridView-Coltrol-Insert-Update-Paging-And-Delete/ |
|
|
|
|
|
|