Xml based Dynamic Loading of content and Images with Ajax.Net 2.0

Posted Date: 27 Nov 2007	Resource Type: Articles	Category: ASP.NET/Web Applications
Author: sachin chandran	Member Level: Bronze
Rating:	Points: 10

<H2>Introduction</H2>
Let us make a website with a button labelled USA. If we click on it just below it some information about USA would be loaded. And Images related to USA would be loaded. As it would paginated we can traverse through all the images by clicking on the respective numbers. The website being AJAX enabled would hide postback.
Very simple and very useful. Lets gets started.

<H2>Content and Description of XML for dynamic feature </H2>
Firstly we will create an XML for the website with contents and images information.
Create an ajax enabled website, add an XML. Name it as CountryData.xml
This XML with have content and image path. Like here we have a node "usa" having an attribute "content" with the text related to USA. Likewise attribute "image path" under subnode "images" will have path for images related to USA. Refer code snippet CountryData.xml for the
XML structure:--


 <page>
       <usa content="Text Content Related to USA would be here">
      	 <images>
      		 <image path="~/usa_1.gif"/>
      		 <image path="~/usa_2.gif"/>
      	 </images>
        <uk
        .
        .
 <page>

<H2>Designing the aspx page</H2>
On website we will see a page say default.aspx with script manager on top of it. As we need to hide the postback we should put all the server controls inside update panel. In the design view add an update panel.This update panel will have all server controls inside it.

 
<asp:UpdatePanel id="UpdatePanel1" runat="server">
             <contenttemplate>

Add a link button label it as “usa”. Just below to link button add a label and clear its default contents.


<asp:LinkButton ID="LinkButton1" runat="server" Height="8px"
            OnClick="LinkButton1_Click" Width="292px">  </asp:LinkButton>
 <asp:Label ID="lblUsa" runat="server"> </asp:Label>

Now add a grid with ImageField in it. Be very sure about the DataImageUrlField which here actually
Gets the name of the field from the data source we are having.(XML). Our XML contains the values to bind to the ImageUrl property of each image in an ImageField object. The attribute "path" is linked to ImageField to populate images.
for more information on DataImageUrlField you can navigate to link below.
http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.imagefield.dataimageurlfield.aspx

 
 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            OnDataBinding="GridView1_DataBinding" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" AllowPaging="True" PageSize="1" Width="183px" ShowHeader="False" > 
 <Columns>
               
                 <asp:ImageField DataImageUrlField="path"> </asp:ImageField>
         </Columns>  </asp:GridView>

Now at last Add a XmlDataSource also select the “data file” and “Xpath” properties. Source would be like below.Check and set the properties of gridview and xmldatasource.

 
 <asp:XmlDataSource ID="XmlDataSourceUsa" runat="server" DataFile="~/ CountryData.xml"  XPath = "/pages/usa/images/image"  OnTransforming="XmlDataSource1_Transforming">
         </asp:XmlDataSource>
 </contenttemplate>
         </asp:UpdatePanel>

<H2>Server code behind link button</H2>
Create a separate mehod named " fXmlReader" which takes a string argument and returns a string. This function will parse to the related information from the XML. Basic code to read the attribute and element in an XML.

 
protected string fXmlReader(string sFilter)
    {
        string sData = string.Empty;
  XPathDocument doc = new         XPathDocument(Server.MapPath("CountryData.xml"));

        XPathNavigator nav = doc.CreateNavigator();

        XPathNodeIterator nodes = nav.Select(sFilter);

        foreach (XPathNavigator node in nodes)
        {
            sData = node.TypedValue.ToString();
            break;

        }
        return sData;
    }

Now add the following code behind the link button to it.

 


protected void LinkButton1_Click(object sender, EventArgs e)
    {
        string sFilter = "// usa //@ content";
        string sData = fXmlReader(sFilter);
        lblUsa.Text = sData;
        GridView1.DataSourceID = "XmlDataSourceUsa";

    }

Hope we all are up with an AJAX enabled website having contents and images being dynamically loaded from the XML.
HAPPY CODING !!!!!!!!!!!!!!!!!

Responses

Author: Lakul 27 Nov 2007 Member Level: Bronze Points : 0

Thanx Sachin,
i have never seen Article having such simple & easy explaination about dynamic image display using AJAX technology.

Thanx again,

Lakul
India

Author: Shipra Goyal 29 Nov 2007 Member Level: Bronze Points : 0

Your article is very good.It helps me a lot to know about showing the data dynamically via XML.
Done a great job..

All the best

Author: vijeta 29 Nov 2007 Member Level: Bronze Points : 0

Quick way of coupling AJAX and XML for dynamic data (image) loading. Too Gud! Keep it up!!

- Vijeta

Feedbacks

Popular Tags

What are tags ?

Search Tags

Xml . Dynamic Loading . Content and Images . Ajax.Net 2.0 .

Post Feedback

This is a strictly moderated forum. Only approved messages will appear in the site. Please use 'Spell Check' in Google toolbar before you submit.
You must Sign In to post a response.

	Next Resource: Useful Tips for Master Page
	Previous Resource: Crosshair effect in DataGrid control.
	Return to Discussion Resource Index
	Post New Resource
	Category: ASP.NET/Web Applications

Post resources and earn money!

Related Resources