Read XML file in WinJS Project using Windows Runtime Component

Kishor Bikram Oli
8y
4.1k
0
0

Article

As we know, WinJS applications are built using HTML/JS/CSS. And for a complete application, we will need async operations like SQL database operations, web-service calls, and other native XML read-write, File read-write which cannot be done directly in WinJS applications.

So we have to use Windows Runtime Component to access native C# methods as discussed in my previous article: WinJS application with Windows Runtime Component to access Native C# Code.

In this article, I will show you how to read XML file using Windows Runtime Component and display its content in HTML page.

Step 1

Firstly, create a WinJS project.

Step 2

We need to do the following things as discussed in my previous article.

Add a Windows Runtime Component project and name it ‘WinRuntimes’
Delete default class ‘Class1.cs’
Add a new class and name it ‘Service’
Add WinRuntimes reference in WinJS project
Build the project.

Step 3

Let us add an xml file in solution explorer folder. Right click on project and add a new item and select xml file.

file

XML file content

<?xml version="1.0" encoding="UTF-8"?>
<AllUsers Account="admin" Number="100" DateTime="20160423_081710">
<User>
<UserId>105</UserId>
<UserName>Kishor</UserName>
</User>
</AllUsers>

Step 4

In Service class, we have IAsyncOperation for ReadXML() where we read the file from Installed location i.e. Solution Explorer. Here we load the xml file content in the XmlDocument and get the root and its attributes. Also we select the Nodes and its values. Finally, we create a JSON Object and return it as string.

Complete Code for Service class

using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.ApplicationModel;
using Windows.Data.Xml.Dom;
using Windows.Foundation;
using Windows.Storage;
namespace WinRuntimes
{
public sealed class Service
{
public IAsyncOperation < string > ReadXML()
{
return ReadXMLHelper().AsAsyncOperation();
}
private async Task < string > ReadXMLHelper()
{
try {
StorageFile xmlFile = await Package.Current.InstalledLocation.GetFileAsync("test.xml");
string xmlFileContent = await FileIO.ReadTextAsync(xmlFile);
JObject obj = new JObject();
// XML Read Operation
XmlDocument doc = new XmlDocument();
doc.LoadXml(xmlFileContent);
XmlElement root = doc.DocumentElement;
string account = root.GetAttribute("Account");
string number = root.GetAttribute("Number");
string dateTime = root.GetAttribute("DateTime");
XmlNodeList nodes = root.SelectNodes("User");
foreach(XmlElement item in nodes) {
var UserId = item.SelectNodes("UserId")[0].InnerText;
var UserName = item.SelectNodes("UserName")[0].InnerText;
obj.Add("UserId", UserId);
obj.Add("UserName", UserName);
}
return obj.ToString();
} catch (Exception ex)
{
return "";
}
}
}
}

Step 5

Add a script.js file and reference it in default.html:

Now in default.html, lets add the following things:

Button with click event to read xml file
Two input fields to show the xml contents.

Complete html code snippet for default.html is,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WinJS_XML</title>
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<p>WinJS XML operaions</p> <button onclick="readXML()">Read XML file</button> <input id="userId" /> <input id="userName" /> </body>
</html>

Step 6

In script.js, we create a service object of Service class and call the readXML function. Here we have used the function to achieve asynchronous programming.

We parse the xml content that is obtained from native C# part and display it in our html.

Complete code snippet for script.js is,