Consume C# Code from WinJS in Metro Style Apps - Day 4

Niladri.Biswas
Posted by in Windows Metro category on for Beginner level | Points: 250 | Views : 5227 red flag

In this article we will look into as how can we consume a functionality being written in C# library from WinJS environment.Here we will see as how to convert a class library file to a Windows MetaDataFile (WinMD) and invoke followed by consuming the same via WinJS.


 Download source code for Consume C# Code from WinJS in Metro Style Apps - Day 4

Introduction

In this article we will look into as how can we consume a functionality being written in C# library from WinJS environment.Here we will see as how to convert a class library file to a Windows MetaDataFile (WinMD) and invoke followed by consuming the same via WinJS.

Straight To Experiment

Step 1:

Let us fire up a VS 2012 project and choose "Class Library (Metro Style Apps)" from the "Windows Metro Style" Template available under the Visual C# umbrella.

Step 2:

Rename the class from "Class1.cs" to "MyMathClass.cs" and write the below piece of code

namespace MyClassLibrary
{
    public class MyMathClass
    {
        public int Add(int a, int b)
        {
            return a + b;
        }

        public int Subtract(int a, int b)
        {
            return a - b;
        }

        public int Multiply(int a, int b)
        {
            return a * b;
        }

        public int Divide(int a, int b)
        {
            return a / b;
        }
    }
}

Step 3:

Now compile.Right click on the Project and choose "Properties". Change the "Output" Type from "Class Library" to "WinMD File ".Save the project.

Step 4:

Now the project again.But this time we will encounter an error

The error says that "Exporting unsealed types is not supported".That is we need to mark our class as "Sealed".So let us do that and compile again.This time it complied.

Step 5:

Next open up a WinJs project.

Step 6:

Once the project comes up, click on the "Add Reference" and browse the "MyClassLibrary.winmd".Add it to the project

Step 7:

Let us design our page.The default.html will look as

<table>
	<!-- For Input -->
	<tr>
		<table border="1">
			<tr>
				<td>Enter First Value:</td>
				<td>
					<input id="textValue1" type="text" /></td>
			</tr>
			<tr>
				<td>Enter Second Value:</td>
				<td>
					<input id="textValue2" type="text" /></td>
			</tr>
			<tr>
				<td>Result:</td>
				<td>
					<input id="txtResult" type="text" /></td>
			</tr>
		</table>
	</tr>
	<!-- For Operations -->
	<tr>
		<td>
			<button id="btnAdd">Add</button>
			<button id="btnSubtract">Subtract</button>
			<button id="btnMultiply">Multiply</button>
			<button id="btnDivide">Divide</button>
		</td>
	</tr>
</table>

Step 8:

Now go to the default.js file and declare an object of the "MyMathClass" that sits inside the "MyClassLibrary" namespace as under

So once done, next add the click event handler for all the buttons

Lastly, implement the function "DoCalculation" and invoke the functions being exposed from the class library

Step 9:

Now run the application, and the output is as under

Conclusion

So in this we learnt as how to invoke a C# library from Win JS.Hope you enjoyed.Sample application is attached.Thanks for reading

Page copy protected against web site content infringement by Copyscape

About the Author

Niladri.Biswas
Full Name: Niladri Biswas
Member Level: Platinum
Member Status: Member
Member Since: 10/25/2010 11:04:24 AM
Country: India
Best Regards, Niladri Biswas
http://www.dotnetfunda.com
Technical Lead at HCL Technologies

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)