Event Bubbling using LINQ to XML

 

This tutorial is to show you how you can communicate between a user control and a parent page without the user refreshing the parent page. Basically what it is does is, once we select a user or many users from the last names listbox in the user control page, our selection will be reflected in the parent page's last names listbox. Though trivial example, it illustrates many powerful concepts.

 

The code is self explanatory, so I will not comment much. However if you have any question, please write a comment and I will respond promptly.

 

Without further ado, let's get to it.

 

Preliminary files

 

LastName.css

.popup
{
visibility:hidden;
position:absolute;
border:1px solid gray;
padding:5px;
background-color:lightyellow;
color:black;
font-family:Times New Roman;
font-size:9pt;
width:360px;
height:380px;
overflow:auto;
z-index:1000;
}

LastNames.xml

<?xml version="1.0" encoding="utf-8"?>
<Names>
  <Name ID="1" LastName="Ezana" />
  <Name ID="2" LastName="Biruk" />
  <Name ID="3" LastName="Kibir" />
  <Name ID="4" LastName="Zeni" />
  <Name ID="5" LastName="Mesfin" />
  <Name ID="6" LastName="Bitsom" />
  <Name ID="7" LastName="Haimi" />
  <Name ID="8" LastName="Alem" />
</Names>

Now for the meat and potato of the article.

The user control

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="LastName.ascx.cs" Inherits="UserControl_LastName" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Label ID="lblView" runat="server" Text="Add" ForeColor="blue" ToolTip="Add" />
<asp:Panel ID="Panel1" runat="server" CssClass="popup" >

<ajax:UpdatePanel runat="server" ID="up1" >
<ContentTemplate>
<div style="text-align:right;">
<asp:LinkButton ID="lnkClose" runat="server" Text="X" OnClick="lnkClose_Click" ToolTip="Close" />
</div>
<table style="border:1px solid whitesmoke;">
<tr>
<td align="center" valign="top">
<h3 id="h3Title" runat="server" style="padding:5px; color:Black; border-bottom:1px solid gray;" />
</td>
</tr>
<tr>
<td>
<asp:ListBox ID="lstBox" runat="server" SelectionMode="Multiple" Rows="10" />
<br />
<asp:LinkButton ID="btnSelect" runat="server" Text="Select" OnClick="btnSelect_Click" />
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
</Triggers>
</ajax:UpdatePanel>
</asp:Panel>
<cc1:PopupControlExtender ID="PopupControlExtender1" runat="server"
TargetControlID="lblView"
PopupControlID="Panel1"
Position="right"
/>

The code behind for the user control

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Text;
using System.Xml;
using System.IO;
using System.Collections.Generic;
public partial class UserControl_LastName : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            ListAllNames();
        }
    }

    protected void ListAllNames()
    {
        if (File.Exists(Server.MapPath("LastNames.xml")))
        {
            XElement xmlName = XElement.Load(Server.MapPath("LastNames.xml"));
            var queryEmp = from xc in xmlName.Elements("Name")
                           orderby xc.Attribute("FirstName").Value.ToString() ascending
                           select xc.Attribute("FirstName").Value.ToString();
            foreach (var who in queryEmp)
            {
                lstBox.Items.Add(who.ToString());
            }
        }
    }

    protected void btnSelect_Click(object sender, EventArgs e)
    {
        if (File.Exists(Server.MapPath("Sures.xml")))
        {
            UpdateXML();
        }
        else
        {
            CreateXML();
        }
        OnRefreshClickClick(e);
    }

    protected void CreateXML()
    {
        List<String> strName = new List<string>();
        foreach (ListItem li in lstBox.Items)
        {
            if (li.Selected)
            {
                strName.Add(li.Text);
            }
        }

        var newName = new XElement("Sures", from last in strName
                                            select new XElement("Name", new XAttribute("LastName", last.ToString())));
        using (XmlWriter writer = XmlWriter.Create(Server.MapPath("Sures.xml")))
        {
            newName.WriteTo(writer);
        }
    }

    protected void UpdateXML()
    {
        XElement xmlName = XElement.Load(Server.MapPath("Sures.xml"));
        var att = from emp in xmlName.Elements("Name")
                  select emp.Attribute("LastName").Value.ToString();
        foreach (ListItem li in lstBox.Items)
        {
            if (li.Selected && !att.Contains(li.Text))
            {
                xmlName.Add(new XElement("Name", new XAttribute("LastName", li.Text)));
            }
        }
        xmlName.Save(Server.MapPath("Sures.xml"));
    }

    public event EventHandler RefreshClick;
    protected void OnRefreshClickClick(EventArgs e)
    {
        if (RefreshClick != null)
        {
            RefreshClick(this, e);
        }
    }

    protected void lnkClose_Click(object sender, EventArgs e)
    {
        lstBox.ClearSelection();
        PopupControlExtender1.Cancel();
    }
}

The parent page. parent.aspx

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Parent.aspx.cs" Inherits="Parent" %>
<%@ Register src="UserControl/LastName.ascx" tagname="LastName" tagprefix="uc1" %>
<!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 id="Head1" runat="server">
<title>Event Bubbling using LINQ with XML</title>
<link href="css/LastName.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<ajax:ScriptManager ID="SM1" runat="server" />
<ajax:UpdatePanel ID="UP" runat="server" UpdateMode="Always">
<ContentTemplate>
<div>
<asp:ListBox ID="lstBox" runat="server" Rows="10" Width="300px" />
<uc1:SelectName ID="LN" runat="server" />
</div>
</ContentTemplate>
</ajax:UpdatePanel>
</form>
</body>
</html>

Code behind for the parent page.

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Text;
using System.Xml;
using System.Collections.Generic;
using System.IO; 

public partial class Parent : System.Web.UI.Page
{
    protected void Page_Init(object sender, EventArgs e)
    {
        LN.RefreshClick += new EventHandler(UpdateListBox);
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            BindNames();
        }
    }

    private void UpdateListBox(object sender, EventArgs e)
    {
        BindNames();
    }

    protected void BindNames()
    {
        if (File.Exists(Server.MapPath("Sures.xml")))
        {
            XElement xmlName = XElement.Load(Server.MapPath("Sures.xml"));
            var queryEmp = from xc in xmlName.Elements("Name")
                           orderby xc.Attribute("LastName").Value.ToString() ascending
                           select xc.Attribute("LastName").Value.ToString();
            lstBox.Items.Clear();
            foreach (var who in queryEmp)
            {
                lstBox.Items.Add(who.ToString());
            }
        }
    }
}

Cheers!