Introduction
This article explains the binding of a XML file in a Grid View and how to do insert, update and delete operations in the XML file.
Use the following procedure to create an ASP.NET Web Application in which we add a XML file first and then we'll bind the XML file to a Grid View and perform the IUD (Insert, Update, Delete) operations.
Step 1: Open Visual Studio.
Step 2: Create a new ASP.NET Web Application with the Empty Project Template.
Step 3: Add an XML file named MyXmlFile.xml.
Step 4: Now create some content in the file as shown below:
<?xml version="1.0" standalone="yes"?>
<StudentDetails>
<Student>
<ID>101</ID>
<Name>Amit</Name>
<Course>MCA</Course>
<College>Skyline</College>
</Student>
<Student>
<ID>102</ID>
<Name>Nimit</Name>
<Course>MCA</Course>
<College>Abes</College>
</Student>
</StudentDetails>
Step 5: We'll now add a WebForm to our application by adding a new item to the project.
Step 6: Create a Grid View control in the body of your Web Form.
<table>
<tr>
<td>
<asp:GridView ID="XmlGridView" runat="server" AutoGenerateColumns="false"
Height="247px" Width="795px" BackColor="White" BorderColor="#999999"
BorderStyle="None" BorderWidth="1px" CellPadding="3"
GridLines="Vertical" ShowFooter="true"
OnRowCancelingEdit="XmlGridView_RowCancelingEdit" OnRowDeleting="XmlGridView_RowDeleting"
OnRowEditing="XmlGridView_RowEditing" OnRowUpdating="XmlGridView_RowUpdating">
<AlternatingRowStyle BackColor="#DCDCDC" />
<Columns>
<asp:TemplateField HeaderText="ID">
<ItemTemplate>
<asp:Label ID="LblStuID" runat="server" Text='<%# Bind("ID")%>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="TxtStuID" runat="server"></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="LblStuName" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TxtEditStuName" runat="server"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="TxtStuName" runat="server"></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Course">
<ItemTemplate>
<asp:Label ID="LblStuCourse" runat="server" Text='<%# Bind("Course") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TxtEditStuCourse" runat="server"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="TxtStuCourse" runat="server"></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="College">
<ItemTemplate>
<asp:Label ID="LblStuCollege" runat="server" Text='<%# Bind("College") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TxtEditStuCollege" runat="server"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="TxtStuCollege" runat="server"></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Operations">
<ItemTemplate>
<asp:Button ID="BtnEdit" runat="server" CommandName="Edit" Text="Edit" />
<asp:Button ID="BtnDelete" runat="server" CommandName="Delete" Text="Delete" />
</ItemTemplate>
<EditItemTemplate>
<asp:Button ID="BthUpdate" runat="server" CommandName="Update" Text="Update" />
<asp:Button ID="BtnCancel" runat="server" CommandName="Cancel" Text="Cancel" />
</EditItemTemplate>
<FooterTemplate>
<asp:Button ID="BtnInsert" runat="server" Text="Insert" OnClick="BtnInsert_Click" />
</FooterTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#0000A9" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#000065" />
</asp:GridView>
</td>
</tr>
</table>
Step 7: Press F7 to open the source code of the application.
Now, we need to bind the Grid View from our XML file to generate the data source. So, create a method named Get_Xml() and call the method in the Page_Load() event in your source code as shown below:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack == true)
{
Get_Xml();
}
}
void Get_Xml()
{
DataSet ds = new DataSet();
ds.ReadXml(Server.MapPath("~/MyXmlFile.xml"));
if (ds != null && ds.HasChanges())
{
XmlGridView.DataSource = ds;
XmlGridView.DataBind();
}
else
{
XmlGridView.DataBind();
}
}
Step 8: Press Ctrl+F5 to run the application.
Step 9: Now, we perform the insert event by executing the code as shown below:
protected void BtnInsert_Click(object sender, EventArgs e)
{
Insert_XML();
}
void Insert_XML()
{
TextBox Stu_Id = XmlGridView.FooterRow.FindControl("TxtStuID") as TextBox;
TextBox Stu_Name = XmlGridView.FooterRow.FindControl("TxtStuName") as TextBox;
TextBox Stu_Course = XmlGridView.FooterRow.FindControl("TxtStuCourse") as TextBox;
TextBox Stu_College = XmlGridView.FooterRow.FindControl("TxtStuCollege") as TextBox;
XmlDocument MyXmlDocument = new XmlDocument();
MyXmlDocument.Load(Server.MapPath("~/MyXmlFile.xml"));
XmlElement ParentElement = MyXmlDocument.CreateElement("Student");
XmlElement ID = MyXmlDocument.CreateElement("ID");
ID.InnerText = Stu_Id.Text;
XmlElement Name = MyXmlDocument.CreateElement("Name");
Name.InnerText = Stu_Name.Text;
XmlElement Course = MyXmlDocument.CreateElement("Course");
Course.InnerText = Stu_Course.Text;
XmlElement College = MyXmlDocument.CreateElement("College");
College.InnerText = Stu_College.Text;
ParentElement.AppendChild(ID);
ParentElement.AppendChild(Name);
ParentElement.AppendChild(Course);
ParentElement.AppendChild(College);
MyXmlDocument.DocumentElement.AppendChild(ParentElement);
MyXmlDocument.Save(Server.MapPath("~/MyXmlFile.xml"));
Get_Xml();
}
Step 10: Performing the Edit, Update and Delete operations:
- Edit
protected void XmlGridView_RowEditing(object sender, GridViewEditEventArgs e)
{
XmlGridView.EditIndex = e.NewEditIndex;
Get_Xml();
}
protected void XmlGridView_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
XmlGridView.EditIndex = -1;
Get_Xml();
}
Update
protected void XmlGridView_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
int id = XmlGridView.Rows[e.RowIndex].DataItemIndex;
TextBox Name = XmlGridView.Rows[e.RowIndex].FindControl("TxtEditStuName") as TextBox;
TextBox Course = XmlGridView.Rows[e.RowIndex].FindControl("TxtEditStuCourse") as TextBox;
TextBox College = XmlGridView.Rows[e.RowIndex].FindControl("TxtEditStuCollege") as TextBox;
XmlGridView.EditIndex = -1;
Get_Xml();
DataSet ds = XmlGridView.DataSource as DataSet;
ds.Tables[0].Rows[id]["Name"] = Name.Text;
ds.Tables[0].Rows[id]["Course"] = Course.Text;
ds.Tables[0].Rows[id]["College"] = College.Text;
ds.WriteXml(Server.MapPath("~/MyXmlFile.xml"));
Get_Xml();
}
Delete
protected void XmlGridView_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
Get_Xml();
DataSet ds = XmlGridView.DataSource as DataSet;
ds.Tables[0].Rows[XmlGridView.Rows[e.RowIndex].DataItemIndex].Delete();
ds.WriteXml(Server.MapPath("~/MyXmlFile.xml"));
Get_Xml();
}
Step 11: Now you can perform the Edit, Update and Delete operations with the events shown above.
Updated XML File
Summary
With this article you can bind a Grid View with the newly created XML file. You can also perform the Insert, Update and Delete operations in the Grid View as well as the changes made in the XML file also. Happy Coding!!