Microsoft Dot Net: August 2013

Wednesday, August 28, 2013

JQuery Ajax using AngularJS example (AngularJS Jquery Ajax)

In this example I will call the webservice http://itunes.apple.com/search using jquery ajax to search itunes. This application will be built using angularJS.

The entire app can be downloaded here

This is how the page would look like after the search.

The folder that contains the html looks like this

This is what is inside the scripts folder

If you just open the html by double clicking, it should work.

The angularjs version I used was v1.0.7. The code for other files are shown below.

iTunesSearch.html

<!DOCTYPE html>

<head>

</head>

<body>

<button type="button" ng-click="Search()">iTunes Search</button>

</div>

</body>

</html>

App.js

var iTunesSearchApp = angular.module('iTunesSearchApp', []);

SearchController.js

iTunesSearchApp.controller('SearchController', function SearchController($scope, searchService) {

$scope.Search = function () {

$scope.searchResults = "Please Wait";

var searchFor = $scope.searchTerm;

searchService.CallWebService(searchFor,function (results) {

$scope.$apply(function() {

$scope.searchResults = results;

});

};

}

);

SearchService.js

var factory = iTunesSearchApp.factory('searchService', function () {

return {

CallWebService: function (searchTerm,callBack) {

var webMethod = "http://itunes.apple.com/search?term=" + searchTerm;

var displayHTML = "<br/>";

$.ajax({

type: "GET",

url: webMethod,

contentType: "application/x-www-form-urlencoded",

dataType: "jsonp",

success: function (msg) {

$.each(msg.results, function () {

$.each(this, function (key, value) {

displayHTML = displayHTML + key + ":" + value + "<br/>";

});

displayHTML = displayHTML + "<br/><br/>";

});

callBack(displayHTML);

}, //success function ends here

error: function (xhr, msg) {

callBack(msg);

}

}); //ajax function ends here

}

};

});

AngularJS tutorial for beginners (Introduction to angularjs)

What is AngularJS?
AngularJS is an opensource javascript library built and maintained by google that helps us develop the front end (HTML/javascript/css) part of a web application in a declarative way. As a developer I myself see AngularJS as a higher level programming language for the client side.

The UI built using the angular framework applies MVC architecture at the client side. What I mean by that is if you build say the google search page using AngularJS, then you will have a mvc application running in the client's browser that posts back to a webserver which itself may or may not implement mvc.

A simple example

I will show you a simple AngularJS app that says hello world

Paste this into notepad and save the file as .html. Then open that file in chrome

<!DOCTYPE html>

<head>

</head>

<body>

<div ng-controller="TestCtrl">{{message}}</div>

function TestCtrl($scope) {

$scope.message= "Hello World";

}

</script>

</body>

</html>

Things to note:

1>Inside the html tag notice the attribute ng-app. This declares the html tag as the root element of the application.

2>In the div has tag the attribute ng-controller tells the angular framework that this tag is associated with the controller TestCtrl (defined inside a script tag below)

3>The text {{message}}inside double curly braces is a property on the $scope object (defined below).

4>I am using google content delivery network to get the angular.min.js javascript file.

5>The function TestCtrl accepts a parameter $scope. This is a special parameter used by angular to pass data between controller and the view. You can set properties on this parameter which can be read in the view (HTML markup).

Check this out for a more advanced example on angularJS.

Wednesday, August 14, 2013

c# Deep Copy List

In the example below I will take a List of Dog and copy it into another List of Dog. To do that, I will use DataContractSerializer to serialize the original object into an XML and the deserialize it from the XML back into an object.

To follow the example, add a reference to the System.Runtime.Serialization dll as shown in the image on the right.

using System.Collections.Generic;
using System.IO;
using System.Runtime.Serialization;
 
namespace ConsoleApplication29
{
    class Program
    {
 
        static void Main(string[] args)
        {
            var dogs = new List<Dog> {new Dog {Age = 2, IsBig = true}, new Dog {Age = 3, IsBig = false}};
 
            List<Dog> dogsCopy;
 
            var ds = new DataContractSerializer(typeof(List<Dog>));
 
            using (var s = File.Create("Dog.xml"))
            {
                ds.WriteObject(s, dogs);//Serialize into an xml file
            }
 
            using (var s = File.OpenRead("Dog.xml"))
            {
                dogsCopy = (List<Dog>)ds.ReadObject(s);//Deserialize from an xml file and cast into an object
            }
        }
 
    }
 
    public class Dog  
    {
        public int Age { get; set; }
        public bool IsBig { get; set; }
 
    }
}

C# deep copy object

using System.IO;

using System.Runtime.Serialization;

namespace ConsoleApplication29

{

class Program

{

static void Main(string[] args)

{

var dog = new Dog { Age = 2, IsBig = true };

Dog dogCopy;

var ds = new DataContractSerializer(typeof(Dog));

using (var s = File.Create("Dog.xml"))

{

ds.WriteObject(s, dog);//Serialize into an xml file

}

using (var s = File.OpenRead("Dog.xml"))

{

dogCopy = (Dog)ds.ReadObject(s);//Deserialize from an xml file and cast into an object

}

public class Animal

{

public int Age { get; set; }

}

public class Dog : Animal

{

public bool IsBig { get; set; }

}