C# Tutorials and offshore development in India
    Tutorials   Resources   Forum   Reviews   Communities   Interview   Jobs   Projects   Training   Your Ad Here    
Silverlight Games | Mentor | Code Converter | Articles | Code Factory | Computer Jokes | Members | Peer Appraisal | IT Companies | Bookmarks | Polls | Revenue Sharing | Lobby | Gift Shop |


Prizes & Awards
My Profile



Active Members
TodayLast 7 Days more...






Resources » Articles » ASP.NET/Web Applications »

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 chandranMember Level: Bronze    
Rating: 1 out of 5Points: 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 2007Member 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 2007Member 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 2007Member 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  
Sign In to add 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



dotNet Slackers

About Us    Contact Us    Privacy Policy    Terms Of Use