atsung

Bing Maps v6.3 – Context Menu with jQuery Plugin

September 29, 2010 atsung Leave a comment

The tradition way to add a context menu for the Bing Map v6.3 is to attach event handler for “onclick” event and check if the right mouse button is clicked in the event handler. Please see Abhishek Sur‘s post for details.

There is another way to add a context menu – attach event handler for “oncontextmenu” event, but this is for Bing Map v4 (see this). The behavior is very similar to the “onclick” event in v6.3.

These two methods add some overhead in the event handling, and I found there are some glitches when handling “onclick” event – it’s better to check the right mouse button clicking in “onmouseup” event. Anyway, thanks to the jQuery Context Menu Plugin – it handles mouse and keyboard events very well and it makes adding context menus in Bing Map way easier.

Let’s check the source code of the demo page:

<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”ContextMenu.aspx.cs” Inherits=”BingMap.ContextMenu” %>
 2
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
 4
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; >
<head runat=”server”>
<title>Bing Map – Context Menu</title>
<script type=”text/javascript” src=”http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3″></script>
<script src=”JavaScript/jquery-1.4.2.min.js” type=”text/javascript”></script>
<script src=”JavaScript/jquery.contextMenu.js” type=”text/javascript”></script>
<link href=”CSS/jquery.contextMenu.css” rel=”stylesheet” type=”text/css” />
 12
<script type=”text/javascript”>
var map = null;
 15
jQuery(document).ready(function() {
InitMap();
});
 19
function InitMap() {
// Set and load map
map = new VEMap(“myMap”);
map.LoadMap(new VELatLong(49.260407, -123.114034), 15, VEMapStyle.Road);
 24
// Add context menu to the map
jQuery(“#myMap”).contextMenu({
menu: ‘myMapContextMenu’
},
function(action, src, pos) {
MapContextMenuHandler(action, src, pos);
});
 32
}
 34
function MapContextMenuHandler(action, src, pos) {
if (action == “add_shape”) {
// Add a new shape
var pixel = new VEPixel(pos.x + 5, pos.y + 5);
var shape = new VEShape(VEShapeType.Pushpin, map.PixelToLatLong(pixel));
shape.SetCustomIcon(“<img src=’/images/POI_dd-via.png’ />”);
map.AddShape(shape);
 42
// Add context menu to the map
var primitiveID = shape.Primitives[0].iid;
jQuery(“#” + primitiveID).contextMenu({
menu: ‘myShapeContextMenu’
},
function(action1, src1, pos1) {
ShapeContextMenuHandler(action1, src1, pos1);
});
}
}
 53
function ShapeContextMenuHandler(action, src, pos) {
if (action == “remove_shape”) {
// Remove the shape
var primitiveID = jQuery(src).attr(“id”);
var shape = map.GetShapeByID(primitiveID);
if (shape != null) {
map.DeleteShape(shape);
}
}
}
 64
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<div id=”myMap” style=”position: relative; width: 900px; height: 700px;“></div>
 71
<ul id=”myMapContextMenu” class=”contextMenu”>
<li class=”edit”><a href=”#add_shape”>Add Shape</a></li>
<li class=”quit separator”><a href=”#quit”>Close</a></li>
</ul>
 76
<ul id=”myShapeContextMenu” class=”contextMenu”>
<li class=”delete”><a href=”#remove_shape”>Remove Shape</a></li>
<li class=”quit separator”><a href=”#quit”>Close</a></li>
</ul>
</div>
</form>
</body>
</html>

The code is pretty self-explanatory. Here are some notes:

Include jQuery and jQuery Context Menu Plugin JavaScripts and jQuery Context Menu CSS file.
Two types of context menus:
- myMapContextMenu – this context menu shows up when right mouse button is clicked anywhere inside the map – except the shapes (green dots). Selecting “Add Shape” will add a shape at the point right button was clicked.
- myShapeContextMenu – this context menu shoes up when right mouse button is clicked on the shapes (green dots). Selecting “Remove shape” will remove the shape from the map.
Use jQuery ready() to initialize map.
Bind the myMapContextMenu to the map control and provide a callback named “MapContextMenuHandler”.
In the callback “MapContextMenuHandler”, create a new shape with custom icon (green dot), then bind the myShapeContextMenu to the newly created shape and provide the callback named “ShapeContextMenuHanlder”. The import thing is I use “Primitive” of the shape as the hook to the shape itself – shape.Primitives[0].iid.
In the callback “ShapeContextMenuHandler”, get back the primitive ID and find the shape with the primitive ID, then remove the shape from the map.

Cool, eh?

Here are screenshots:

Right-click shows up a context menu and select “Add Shape”.

A shape is added to the map.

Right-click the newly created shape to show the context menu. Click “Remove Shape” to remove this shape from the map.

Categories: ASP.NET, Bing Map, jQuery, Uncategorized Tags: Bing Map, Context Menu, jQuery, jQuery Plugin

Change Background Color of Invalid Controls with ASP.NET Validators

July 16, 2010 atsung Leave a comment

Chris posted an excellent article explaining how to change background color of invalid controls (with ASP.NET Validators). In his article, the code loops through each validator in Page_Validators (it’s a global array in Javascript), finds the control to validate (ctrl.controltovalidate) of the validator, changes the background color of the control if the valiator is in invalid mode (ctrl.isvalid == false).

As the updates of validators only happens when the form is submitted, but I need a bit more – I want the updates trigger whenever the user makes change to the controls (type text in the text box, change option in the select box, etc). Using bind() function in jQuery will do the trick.

Here is the code:

<script type=”text/javascript”>

var g_BackgroundColor = “#FFAAAA”;


jQuery(document).ready(function() {
for (var i = 0; i < Page_Validators.length; i++) {
var validator = Page_Validators[i];

if (validator.controltovalidate) {
BindValidatorsForChecking(validator.controltovalidate);
}
}
});


function OnUpdateValidators() {
for (var i = 0; i < Page_Validators.length; i++) {
var validator = Page_Validators[i];

// *** For each validator, find its associated control, then check its valid status
if (validator.controltovalidate) {
var control = document.getElementById(validator.controltovalidate);
if (control != null) {
control.style.backgroundColor = CheckValidatorsForControl(control) ? ” : g_BackgroundColor;

// *** Bind to check valid status
BindValidatorsForChecking(validator.controltovalidate);
}
}
}
}


// *** Check all validators for a control
function CheckValidatorsForControl(control) {
for (var i = 0; i < control.Validators.length; i++) {
if (!control.Validators[i].isvalid) {
return false;
}
}
return true;
}


// *** Bind to check valid status
function BindValidatorsForChecking(controlID) {
jQuery(“#” + controlID).bind(“blur focus mouseout mouseleave”, function(e) {
this.style.backgroundColor = CheckValidatorsForControl(this) ? ” : g_BackgroundColor;
});
}
</script>

In the code behind, you will need to hook the updates when the form is submitted as well:

Page.ClientScript.RegisterOnSubmitStatement(this.GetType(), “OnUpdateValidators_Key”, “OnUpdateValidators();”);

Categories: AJAX, ASP.NET, C#, jQuery Tags: ASP.NET, jQuery, Validators

Using LINQ to parse XML

April 14, 2010 atsung Leave a comment

LINQ is cool. Using LINQ to parse XML is cool. I will show you how to use LINQ to parse XML and build a list of objects (I know I can use XML serialization/deserialization to do the same thing, but this is just a demonstration).

Here is my two XML files:

(1) member01.xml

<?xml version=“1.0“ encoding=“utf-8“ ?>
<Members>
<Member>
<MemberId>1</MemberId>
<Name>Marlon Brando</Name>
<Character>Don Vito Corleone</Character>
<IMDBLink>http://www.imdb.com/name/nm0000008/</IMDBLink>
</Member>
<Member>
<MemberId>2</MemberId>
<Name>Al Pacino</Name>
<Character>Michael Corleone</Character>
<IMDBLink>http://www.imdb.com/name/nm0000199/</IMDBLink>
</Member>
<Member>
<MemberId>3</MemberId>
<Name>James Caan</Name>
<Character>Santino ‘Sonny’ Corleone</Character>
<IMDBLink>http://www.imdb.com/name/nm0001001/</IMDBLink>
</Member>
</Members>

(2) member02.xml

<?xml version=“1.0“ encoding=“utf-8“ ?>
<Members>
<Member>
<MemberId>1</MemberId>
<Name>Marlon Brando</Name>
<Character>Don Vito Corleone</Character>
<IMDBLink>http://www.imdb.com/name/nm0000008/</IMDBLink>
</Member>
<Member>
<MemberId>2</MemberId>
<Name>Al Pacino</Name>
<Character>Michael Corleone</Character>
<IMDBLink>http://www.imdb.com/name/nm0000199/</IMDBLink>
</Member>
<Member>
<MemberId>3</MemberId>
<Name>James Caan</Name>
<Character>Santino ‘Sonny’ Corleone</Character>
<IMDBLink>http://www.imdb.com/name/nm0001001/</IMDBLink>
</Member>
<Member>
<MemberId>4</MemberId>
<Name>Robert Duvall</Name>
<Character>Tom Hagen</Character>
</Member>
</Members>

As you can see in the member02.xml, the last member does not have <IMDBLink> element.

I build an entity class to represent the member object:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text;
 6
namespace FrameworkTestBed
{
[Serializable]
public class Member
{
public int MemberId { get; set; }
public string Name { get; set; }
public string Character { get; set; }
public string IMDBLink { get; set; }
 16
public override string ToString()
{
StringBuilder sb = new StringBuilder();
sb.Append(string.Format(“MemberId: {0}, “, MemberId));
sb.Append(string.Format(“Name: {0}, “, Name));
sb.Append(string.Format(“Character: {0}, “, Character));
sb.Append(string.Format(“IMDBLink: {0}”, IMDBLink));
return sb.ToString();
}
}
}

Here is the ASPX page which allows me to upload the XML file:

<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”LinqParseXml.aspx.cs” Inherits=”FrameworkTestBed.LinqParseXml” %>
 2
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
 4
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; >
<head runat=”server”>
<title>Linq Parse Xml</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<p>
<b>XML file:</b>
<asp:FileUpload ID=”fileXml” runat=”server” />
<asp:Button ID=”btnUploadXmlFile” runat=”server” Text=”Upload Xml File” OnClick=”btnUploadXmlFile_Click” />
</p>
<p>
<asp:Label ID=”lblContent” runat=”server” />
</p>
</div>
</form>
</body>
</html>

Here is the code-behind using LINQ to parse the uploaded XML file:

using System;
using System.Collections.Generic;
using System.Linq;
using System.IO;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.Xml.Linq;
 10
namespace FrameworkTestBed
{
public partial class LinqParseXml : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
 18
protected void btnUploadXmlFile_Click(object sender, EventArgs e)
{
if (fileXml.HasFile)
{
if (fileXml.PostedFile.ContentType == “text/xml”)
{
using (StreamReader reader = new StreamReader(fileXml.PostedFile.InputStream))
{
XDocument xdoc = XDocument.Parse(reader.ReadToEnd());
 28
List<Member> members =
(
from item in xdoc.Descendants(“Member”)
select new Member
{
MemberId = Convert.ToInt32(item.Element(“MemberId”).Value),
Name = item.Element(“Name”).Value,
Character = item.Element(“Character”).Value,
IMDBLink = item.Element(“IMDBLink”).Value,
}
).ToList<Member>();
 40
 41
StringBuilder sb = new StringBuilder();
foreach (var member in members)
{
sb.Append(string.Format(“{0}<br/>”, member));
}
lblContent.Text = sb.ToString();
}
}
}
}
}
}

The MemberId property is an integer type, we convert the element from string to integer with Convert.ToInt32().

Let’s upload member01.xml first:

Let’s upload member02.xml:

Crap, I got an exception – it’s because the missing XML element <IMDBLink>!

So I have to do something to prevent this from happening – check if the element exists before using its value. Let’s use the new features from C# 3.0 – Extension Methods:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Xml.Linq;
 6
namespace FrameworkTestBed
{
public static class XElementExtensions
{
public static T GetValue<T>(this XElement element, string name)
{
if (element.Element(name) == null)
{
return default(T);
}
 17
try
{
return (T)Convert.ChangeType(element.Element(name).Value, typeof(T));
}
catch
{
return default(T);
}
}
}
}

I added one extension method on top of System.Xml.Linq.XElement: returns default generic type if the conversion fails.

Now let’s change the code-behind to use the new extension method:

using System;
using System.Collections.Generic;
using System.Linq;
using System.IO;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.Xml.Linq;
 10
namespace FrameworkTestBed
{
public partial class LinqParseXml : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
 18
protected void btnUploadXmlFile_Click(object sender, EventArgs e)
{
if (fileXml.HasFile)
{
if (fileXml.PostedFile.ContentType == “text/xml”)
{
using (StreamReader reader = new StreamReader(fileXml.PostedFile.InputStream))
{
XDocument xdoc = XDocument.Parse(reader.ReadToEnd());
 28
List<Member> members =
(
from item in xdoc.Descendants(“Member”)
select new Member
{
MemberId = item.GetValue<int>(“MemberId”),
Name = item.GetValue<string>(“Name”),
Character = item.GetValue<string>(“Character”),
IMDBLink = item.GetValue<string>(“IMDBLink”),
}
).ToList<Member>();
 40
 41
StringBuilder sb = new StringBuilder();
foreach (var member in members)
{
sb.Append(string.Format(“{0}<br/>”, member));
}
lblContent.Text = sb.ToString();
}
}
}
}
}
}

Here is the result of parsing the member02.xml:

Now it works well with the extension method.

As I said, this is just a demonstration. We can use XML serialization/deserialization to achieve the same thing. Using LINQ to parse XML with the help of extension methods is just cool

Categories: ASP.NET, C#, LINQ, XML Tags: Extension Methods, LINQ, XML

Wishlist for Velocity (CPT4?)

June 4, 2009 atsung Leave a comment

I went to Rob‘s presentation on Velocity tonight, it’s a great presentation and a lot of information shared with audience.

I prepare a wishlist for Velocity (CPT4 or next beta release) and hope the Velocity team can take my wishlist into consideration.

A new method: bool DataCache.ContainsRegion(string region).
- This method checks if the region exists in the named cache or not.
- See my previous post for details.
Update the method DataCache.GetObjectsByAnyTag(List<DataCacheTag> tags, string region) so the keys of returned cache items are unique.
- Make sure the cache key is not contained in the keys, then add the item into the collection.
- See my previous post for example.
Make sure the default region name is not arbitratry.
- DataCache.GetCacheItem Method – Gets a DataCacheItem object to retrieve all information associated with your cached object in the cluster.
- DataCache.GetCacheItem (String) -> Gets a DataCacheItem object to retrieve all information associated with your cached object in the cluster.
- DataCache.GetCacheItem (String, String) -> Gets a DataCacheItem object to retrieve all information associated with your cached object in the cluster. For objects stored in regions.
- When using the DataCache.GetCacheItem (String) method (without region specified), the return object’s property -RegionName – is kind of arbitrary.
A new commad for administrators to create region in PowerShell.
- New-CacheRegion [-CacheName] <CacheName> [-RegionName] <RegionName>
- Example 1:
  - New-CacheRegion -CacheName Products -RegionName MyRegion -> this creates a region “MyRegion” in the named cache “Products”.
- Example 2:
  - New-CacheRegion -RegionName MyRegion -> this creates a region “MyRegion” in the default cache “default”

Categories: ASP.NET, C#, Distribued Cache, Velocity Tags: Distributed Cache, Velocity

Visual Studio 2008 (SP1) Team System Profiler causes blue screen on Intel Core i7 processor

June 2, 2009 atsung Leave a comment

Yesterday I used the VS2008 (SP1) Team System Profiler to test the performance of the web application at work, it caused blue screen three times. I didn’t know what happen but I suspect it’s a hardware conflict, so I did a search and found the Knowledge Base from Microsoft:

http://code.msdn.microsoft.com/KB958842

Symptoms
You may experience a stop error or a crash on the operating system when you profile an application by using Microsoft Visual Studio 2008 Service Pack 1 (SP1). The problem occurs when the following conditions are true:
• You use the sampling profiling method.
• The computer is running on the Intel Nehalem processor.

Cause
This problem occurs because the sampling profiler uses drivers in operating system. However, the Intel Nehalem processor was created after the 2008 version of the profiler.

Additional Information about the issue resolved by this Hotfix can be found in its Knowledge Base article at http://support.microsoft.com/kb/958842

Additional Hotfixes
Search the list of all other publicly available Visual Studio and .NET Framework Hotfixes at http://code.msdn.microsoft.com/Project/ProjectDirectory.aspx?TagName=Hotfix&ProjectSearchText=Hotfix*

Categories: Visual Studio 2008 Tags: Team System Profiler, Visual Studio 2008

Velocity (CTP3) – DataCache.GetObjectsByAnyTag Method

June 1, 2009 atsung 1 comment

I was writing some code to experiment the Tag search in Velocity CTP3 and I found there is some small bug in one of the get objects by tag methods – DataCache.GetObjectsByAnyTag.

The definition of the method of DataCache.GetObjectsByAnyTag is:

Gets an enumerable list of all cached objects in the specified region that have any of the same tags in common.

For example I have 3 cache items:

Item 1: key = “111″, content = “aaa”, tag = “a”

Item 2: key = “222″, content = “bbb”, tag = “b”