About .net,iphone,ipad,c#,ajax,asp.net

Wednesday, December 21, 2011

kendoUI - adding menu using web service

kendoUI is still in the beginning stages. Eventhough they have a commercial version there is quite a bit of functionalities needed before it can be fully used for a large application.

I am not sure what is the best practice for using each control and I would like to know this myself from @Telerik. But here is an example of how to populate the kendoMenu dynamically using a web-service.

General approach is that each control/widget on the page should get the data from web-service. That way there is no server request. Now, our web-service can internally get the data from anywhere (database, xml file or any other appropriate way.) There will be a question about menu based on user-rights. But let's save that for later.

#1 - for now, let's assume that we have a web-service that has a function like following to return the menu details.

[WebService] //(Namespace = "http://WebService/")
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List GetMenu()
{
List items = new List();
items.Add(new MenuItem() { ParentTitle = "", Title = "Home", Link = "default.aspx" });
items.Add(new MenuItem() { ParentTitle = "", Title = "Edit", Link = "edit.aspx" });
items.Add(new MenuItem() { ParentTitle = "", Title = "View", Link = "view.aspx" });
items.Add(new MenuItem() { ParentTitle = "Home", Title = "Login", Link = "view.aspx" });
items.Add(new MenuItem() { ParentTitle = "Home", Title = "Profile", Link = "view.aspx" });
items.Add(new MenuItem() { ParentTitle = "Home", Title = "Meetings", Link = "view.aspx" });
items.Add(new MenuItem() { ParentTitle = "Home", Title = "Logout", Link = "view.aspx" });
items.Add(new MenuItem() { ParentTitle = "Edit", Title = "Cut", Link = "view.aspx" });
items.Add(new MenuItem() { ParentTitle = "Edit", Title = "Copy", Link = "view.aspx" });
items.Add(new MenuItem() { ParentTitle = "Edit", Title = "Paste", Link = "view.aspx" });
return items;
}
}

#2 - we can declare our MenuItem class having all possible properties that we want to make use of in the front-end. We may want to have some unique id, or type of menu etc. but below is a simpler form of such menu item class.
public class MenuItem
{
public string ParentTitle { get; set; }
public string Title { get; set; }
public string Link { get; set; }
public string IconUrl { get; set; }
}

#3 - the html can be as simple as

#4 - let's declare a separate javascript file that can contain the javascript code for jQuery and the interface for the web-service. Here is a default ajaxSetup method that contains all default values - that way we don't have to specify it everytime we make a web-service call via jQuery. Please note the contentType - if this is missed then parser error will be raised by jQuery.

$.ajaxSetup({

type: 'POST',

contentType: "application/json; charset=utf-8",

dataType: "json",

data: "{}",

success: function(msg) {

console.log(msg.d);

error: function(xhr, desc, ex) {

console.log(xhr.responseText);

console.log(desc);

console.log(ex);

}

});

#5 - I owe following code to http://elegantcode.com/2011/01/26/basic-javascript-part-8-namespaces/

Its better to keep things in a namespace as a good practice.

function namespace(namespaceString) {

var parts = namespaceString.split('.'),

parent = window,

currentPart = '';

for (var i = 0, length = parts.length; i < length; i++) {

currentPart = parts[i];

parent[currentPart] = parent[currentPart] || {};

parent = parent[currentPart];

}

return parent;

}

var myajax = namespace('myajax');

#6 - now its better to keep the web-service method calls in its own javascript class (singleton). That way we can call it easily w/o knowing about all the ajax overhead (of specifying url etc)

//Type.registerNamespace('myajax');

myajax.WebService = {

Url: '/WebService.asmx/',

_Ajax: function(url, callback) {

$.ajax({

url: url,

success: callback

});

GetMenu: function(callback) {

var url = this.Url + 'GetMenu';

this._Ajax(url, callback);

}

};

You can expand above function to add new web-service methods when your service supports more methods. as you can see _Ajax function takes care of using jQuery internally to make the call and GetMenu function takes care of which Url should be used to call it. This is more like the code that is generated by .Net Script Manager for the web-service script references.

#7 - now in your html following script is required to actually add the menu items.

$(document).ready(function() {

$("#menu").kendoMenu();

myajax.WebService.GetMenu(function(menulist) {

var menu = $("#menu").kendoMenu().data("kendoMenu");

var parentItem = null;

//jQuery.each(menulist.d, function(rec) {

$(menulist.d).each(function(rec) {

var parentItem = menu.element.children("li:contains('" + this.ParentTitle + "')");

if (this.ParentTitle == '' || parentItem.length == 0) {

menu.append({ text: this.Title });

}

else

menu.append([{ text: this.Title}], parentItem);

});

Here, we indicate that we want to convert

the callback function receives the json list of MenuList class that was declared in the web-service. so callback method goes through each record of MenuList and appends an item using kendoMenu object's methods. It tries to find the parent using "title" of the menu item - you could change this to use any different method of finding the parent.

Notes:

This is just a sample of how we can create menu based on web-service return values. I believe there should be better way.
Question that I would raise here in terms of better practice is - should the menu 'html' be already rendered when the page renders or should it be loaded using javascript as above?
Telerik ASP.Net Rad Controls has a much richer objects for RadMenu and RadMenuItem to support a rich set of functionalities for images/checkboxes/finding menu item by text or parent etc. KendoUI still lacks all that
Here we have to look for parent using .element.children("li:contains") - this is kind of hodge podge of object oriented coding with html elements - and no serious developer would prefer that. kendoUI must support some methods like 'findMenuByText' to get the element we need.
Also append() should be allowed at menu-item level rather than at 'menu' level only.

Tuesday, December 20, 2011

calling asp.net (asmx) web service from jquery .ajax()

There is lot of information out there on this very topic but I got errors while implementing it and finally fixed it. So I wanted to post my findings with example. 1) When you create .Net ASMX Web Service, it will look like following:

[WebService] //(Namespace = "http://WebService/")
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]

public class WebService : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
}

Here the attribute in bold is very important. That indicates that this service can be called from the Javascript+ajax methods.

You may see [ScriptMethod(ResponseFormat = ResponseFormat.Json)] attribute used for the Web-methods but this may not be necessary. At least when I ran the example I could run it successfully with and and without this attribute. Because the response format of the method will be determined based on the content-type used by the caller. Hence its important to set the 'content-type' from caller as below:

$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: 'http://localhost:1197/WebService.asmx/HelloWorld',
dataType: "json",
data: "{}",
success: function(msg) {
console.log(msg.d);
},
error: function(xhr, desc, ex) {
console.log(xhr.responseText);
console.log(desc);
console.log(ex);
}
});

I was trying above example w/o 'contentType' and error function was called with 'parser error'. So having contentType in above is really important.

Passing "{}" for data is not that important when your functions do not have any parameters. I could successfully call function w/o it, but if you get errors, you can try that.

Same for dataType: "json" - I commented it out and returned value was still interpreted as "json". I believe - again this is due to the contentType.

Tuesday, April 20, 2010

$telerik not found in IIS 7 windows server 2008

Of course, I don't understand Spanish. But following blog was helpful when I got the error installing a asp.net-telerik-web app on IIS 7, Windows Server 2008. The App was running fine in IIS 6, windows server 2003. When installed on 2008, on the client side, got javascript error that '$telerik' not defined, Type not defined etc.

http://msmvps.com/blogs/lalfaro/archive/2009/12/08/error-telerik-is-undefined-bajo-windows-2008-server-amp-iis-7.aspx

From above blog, I found that the entry under the system.webserver/handlers need preCondition="integratedMode,runtimeVersion2.0" for the Telerik entry. Once I added that the application ran fine.

Wednesday, March 17, 2010

Hotmail is painful

I still keep using Hotmail. But its very painful to use it:

- I wanted to delete some old email addresses - but in the contact list it will only show the name and not the email address. Hence you have to open the contact and then delete it; cant delete them from the list itself.

- when you type any email address in the [To] or [CC,BCC] boxes they are converted into some box with [x] next to it. You can't copy them any more and move it to one to another places like To->CC->Bcc etc. Also you cant simply use keyboard and update any addresses you have to use mouse to edit it.

Wednesday, March 3, 2010

Maps of War - Progress of Religion and War over time

Maps of War - Progress of Religion and War over time... very interesting flash graphics...
http://mapsofwar.com/images/Religion.swf

will iPad be Windows Killer

Here is a thought from young enterpreneurs that iPad could be Windows Killer.
http://ycombinator.com/rfs6.html

Rather than being Windows Killer, iPad will replace Windows machines for your day-to-day use. But Windows machines will still coexist mainly for business applications and much of the development. Businesses will keep using Windows Servers to host their applications. Developers will continue building their apps using .Net and such Microsoft platforms and Windows will remain favorite platform for development purpose.

With iPad people will be more interested in using web-baesd applications then iPad based applications. And to develop web-based applications you don't have to have Mac based systems. You can develop application in Windows and keep Windows/IIS/SQL Server as your back-end.

iPad will put a dent in Windows PCs market share, but the Microsoft will still make profit out of iPad. People will prefer to use Outlook Calendar and synching with Outlook on their iPad. Microsoft will develop Office tools (iOffice) for iPad which will sell more than iWork. iOffice should be made cheaper and should not be 100$ it should be like 10$ and may be free for a lighter version. Even Office Live with iPad can be a big hit.

And Microsoft will loose some customers in the beginning but will come back with iPad like tablets that run on entirely different OS rather than Windows. Microsoft has to realize that "Innovation takes place at Apple", but Apple has to realize that "Bussiness takes place at Microsoft".

Monday, February 15, 2010

Story of Steve Jobs (Jobes) - new moses, saviour, prophet

(This story was written in late 21st century and read first time in early 28th century)

In the late 20th century there was a great kingdom of Sillicon Valley (Egypt) in the western america - hollyland as we know today was known as Hollywood then. There were two princes growing up in the kingdom - known as Gates (Ramsays) and Jobes (Moses). Jobes was very popular among the kingdom as the creative, genius, mercyful prince and Gates was notorious for his arrogant attitude.

Jobes knew how to create the great pyramid called windows and use mouse. People welcomed him as the new heir to the throne when he first show-cased his Windows pyramids.

But Gates did not like it. He stole the pyramid and the people Jobes had.
Gates wanted to inherit the kingdom and create his own empire with Windows like Pyramids. He made the people of hollyland his slaves to make his own big pyramids and he created windows 3.1, 95, NT, 2000 etc.

Gates threw Jobes out of his kingdom and Jobes went into exile to learn new tactics and to gain more power.

Gates built many pyramids with all the slaves and monkeys that he had hired. There were many bugs in his pyramids and many of them fell to the earth like Millenium and Vista. He kept building service packs to hold the pyramids high but people were disappointed. They were helpless against the empire.

Jobes came back and told all the people that they do not have to follow Gates. They can all free themselves from the bondage and he will take them to the hollyland where they can build their own little pyramids. They wont called slaves anymore and will call them developers. He told them this is what the God has decided and they should follow the path of God and not of Gates.

Gates called upon Jobes to show his own magic if God was really with him. Jobes took out his iPod and then iPhone. People liked both. iPhone had fight with Gates' windows and iPhone won.

People followed Jobes and asked him what does God wants them to do now. Jobes went on to the Mount Sinai to get the commandments from God. God gave him iPad and asked Jobes to give it to all the freedom loving people who are against Gates.

On the way Jobes dropped the iPad and its camera and USB slot fell off. But he still showed it to the people without Camera and USB slot.

People kept waiting to see the fallen parts, and still today in 28th century, there are romours that our pads will have camera and usb slots. Many prophet came and left us after Jobes (Moses) - they gave new testament of iPad and koran - but none gave us those missing pieces from God.

King of Greece was so mad one time that he crucified one of the prophet for not being able to install camera in his iPad.

Meanwhile, the people of far east invented parallelism (polytheism, multiple Gods) and can run multiple programs on their gPad (Google Pads).

Followers of Koran and New Testament are still fighting with eastern people for multiple-gods. they only like single god and so be it on iPad - that's what the Jobes had said - if you want to run multiple programs on your iPad then start believing in multiple gods.

Google was considered Pagan then because it allowed everything free. They enjoyed largest empire on earth then, they could not afford it anymore and all citizens of that kingdom started creating their own Pads and it went out of control.

There still followers of Gates who roam around this earth stealing your iPads so keep them safe, otherwise, they will install the viruses on your iPads and it will install Windows on it.