I hope that helped
Ahmed
Today, I had to build a sample demo using Microsoft Virtual Earth to simulate vehicle tracking and geo fencing.
The term geo fencing was a little bit new to me, you can have a look here for more details.
My sample here consists of two parts, one is the live tracking of moving objects based on geospatial data [Longitude, Latitude], and the second part is about geo fencing a moving object to a limited geographic area.
During my research on how to calculate geospatial data for a specific point on the map, I came across the following sample which helped me a lot to get the test data for my sample.
Now, let’s have a look at our sample and how it works:
First, we need to build our default.aspx page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Vehicle Tracking System</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script language="javascript" type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>1:
2: <script language="javascript" type="text/javascript" src="scripts/Tracking.js"></script>
</head>
<body onload="GetMap();">
<table width="100%" border="0" cellpadding="0" cellspacing="10">
<tr>
<td id="tabsContainer">
<a onclick='StartTracking();'>Vechile Tracking Demo</a>
<a onclick='StartGeoFencing();'>Geo Fencing Demo</a>
<br />
<div id="traceArea"></div>
</td>
</tr>
<tr>
<td>
<div id="myMap"></div>
</td>
</tr>
</table>
</body>
</html>
Then, we need to build the Tracking.js which contains all the JavaScript code for our demo:
// The Map Object var map = null; function GetMap() { map = new VEMap('myMap'); var centerat = new VELatLong(29.511604, 47.6061625); map.LoadMap(centerat,12,VEMapStyle.Road ,false); map.SetZoomLevel(9); } function StartTracking() { // Vechile one // Create sperate layer for that vechile var layer = new VEShapeLayer(); map.AddShapeLayer(layer); // Add the intial position AddPushpin(29.791604, 47.7061625,'Vehicle 999001',"Time: " + new Date().toTimeString(),layer,'auto1.gif'); // Add the addtional positions window.setTimeout(function() { AddPushpin(29.807604, 47.7141625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},1000); window.setTimeout(function() { AddPushpin(29.803604, 47.7201625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},2000); window.setTimeout(function() { AddPushpin(29.801604, 47.7281625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},3000); window.setTimeout(function() { AddPushpin(29.830604, 47.7331625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},4000); window.setTimeout(function() { AddPushpin(29.870604, 47.7451625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},5000); window.setTimeout(function() { AddPushpin(29.890604, 47.7601625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},6000); // Vechile two var layer2 = new VEShapeLayer(); map.AddShapeLayer(layer2); AddPushpin(29.711604, 47.8061625,'Vehicle 999002',"Time: " + new Date().toTimeString(),layer2,'orange_car_icon.gif'); window.setTimeout(function() { AddPushpin(29.707604, 47.8141625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},1000); window.setTimeout(function() { AddPushpin(29.703604, 47.8201625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},2000); window.setTimeout(function() { AddPushpin(29.701604, 47.8281625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},3000); window.setTimeout(function() { AddPushpin(29.695604, 47.8331625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},4000); window.setTimeout(function() { AddPushpin(29.685604, 47.8451625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},5000); window.setTimeout(function() { AddPushpin(29.680604, 47.8601625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},6000); // Vechile three var layer3 = new VEShapeLayer(); map.AddShapeLayer(layer3); AddPushpin(29.660604, 47.6601625,'Vehicle 999003',"Time: " + new Date().toTimeString(),layer3,'shippingVechile.png'); window.setTimeout(function() { AddPushpin(29.670604, 47.6451625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},1000); window.setTimeout(function() { AddPushpin(29.685604, 47.6331625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},2000); window.setTimeout(function() { AddPushpin(29.701604, 47.6281625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},3000); window.setTimeout(function() { AddPushpin(29.703604, 47.6201625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},4000); window.setTimeout(function() { AddPushpin(29.707604, 47.6141625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},5000); window.setTimeout(function() { AddPushpin(29.711604, 47.6061625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},6000); } function StartGeoFencing() { // Load the map on the required location var centerat = new VELatLong(29.34524, 47.66744); map.LoadMap(centerat,12,VEMapStyle.Road ,false); map.SetZoomLevel(11); // Create the layer for the vechile var layer = new VEShapeLayer(); map.AddShapeLayer(layer); // Add the points AddPushpin(29.429, 47.48891,'Vehicle 999231',"Time: " + new Date().toTimeString(),layer,'car-icon.gif'); window.setTimeout(function() { AddPushpin(29.42541, 47.53011,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},1000); window.setTimeout(function() { AddPushpin(29.42182, 47.57543,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},2000); window.setTimeout(function() { AddPushpin(29.41943, 47.61526,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},3000); window.setTimeout(function() { AddPushpin(29.37516, 47.63036,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},4000); window.setTimeout(function() { AddPushpin(29.35841, 47.65233,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},5000); window.setTimeout(function() { AddPushpin(29.34524, 47.66744,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},6000); window.setTimeout("alert('The vehicle 999231 crossed to Al Jahra boundries');",6100); } function AddPushpin(pLat,pLong,title,desc,layer,imgName) { // Clear the layer shapes ClearLayer(layer); // Create the shape object var shape = new VEShape(VEShapeType.Pushpin, new VELatLong(pLat, pLong)); shape.SetCustomIcon("<img src='images/" + imgName +"'/>"); shape.SetTitle(title); shape.SetDescription(desc); layer.AddShape(shape); } function ClearLayer(layer) { // Delete all shapes in a layer layer.DeleteAllShapes(); }
As you see all the test data I got it from the Location Chooser sample.
Now. let’s see some screenshots from our demo:
The initial screen
The vechile tracking demo:
As you see the the vechiles images keep on moving according to the coordinates I gave to it from the JavaScript, sure you can retrieve these data from a database or a web service.
The next screen shot shows a moving vechile that suppose to not cross a specific boundary.
When the car cross that boundary which is [Al Jahra] boundary, an alert appears to the user to tell about that error.
We can use the sample basics to provide a near real time tracking for any moving objects.
The objects itself must use some technique like GPS to tell the application about its current location.
I’m working now on some more advanced geo fencing techniques using Microsoft Virtual Earth and ArcGIS, I’ll post about it soon.
You can download the sample code here.
I hope that helped
Ahmed
Many of us need use tabs to load multi view information to the user.
Using server side tabs which reload all the page to show a specific piece of information is not a desirable technique all the time.
jQuery has a very nice way to do so, which is the topic of that post.
In this sample I’m using the jQuery AJAX load function to get specific information from the server, based on query string using client side scripts.
First, let’s build the default.aspx page like the following:
<%@ Page Language="C#"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>JQuery AJAX Load Sample</title> <script language="javascript" type="text/javascript" src="Scripts/jquery-1.2.6.min.js"></script><script language="javascript" type="text/javascript" src="Scripts/Main.js"></script>
</head>
<body>
<div>
<h1>JQuery AJAX Load Sample</h1>
<div id="tabsContainer">
<a class="tab" onclick="GetSectionDetails('summery','detailsArea');">Summery</a>
<a onclick="GetSectionDetails('certificates','detailsArea');" >Certificats</a>
<a onclick="GetSectionDetails('contacts','detailsArea');">Contact details</a>
</div>
<div id="detailsArea"></div>
</div>
</body>
</html>
Second, let’s build the generic handler GetDetails.ashx, which will be used to retrieve the section details:
using System; using System.Collections; using System.Data; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Xml.Linq; namespace JQuery.Samples.AJAX.Handlers { /// <summary> /// Summary description for $codebehindclassname$ /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class GetDetails : IHttpHandler { public void ProcessRequest(HttpContext context) { // Just to let you see the loading effect System.Threading.Thread.Sleep(2000); // Getting the correct data according to the query string. // You can replace the static content with database retrieved data. switch (context.Request.QueryString["sectionId"].ToLower()) { case("summery"): context.Response.Write(@"Having +3 years of experience as a software developer specialized in design and implementation of web based applications using Microsoft technologies associated with strong analytic and design skills. <br/>Worked with both Waterfall and Agile project management methodologies and managed teams with Scrum. <br/>Holding a MCTS and MCPD in web development and had great knowledge dealing with web applications. <br/>Also had a good experience in the development with MOSS 2007, MCMS 2002 and beginning MS Dynamic CRM 4.0"); break; case ("certificates"): context.Response.Write(@"<h2>MCPD</h2> Enterprise Applications Developer, Visual Studio 2005 <br/>Web Developer, Visual Studio 2005 <h2>MCTS</h2> Microsoft Office SharePoint Server 2007 ― Application Development <br/>Distributed Applications Development, .NET Framework 2.0 <br/>Windows-Based Client Development, .NET Framework 2.0 <br/>Windows SharePoint Services 3.0 Application Development <br/>Web-Based Client Development, .NET Framework 2.0 <h2>MCP</h2> Application Development Foundation, .NET Framework 2.0 <h2>Bachelor of Science</h2> Mansoura University, Information Systems Department, 2005"); break; case("contacts"): context.Response.Write(@"<h2>Email</h2> shokr.ahmed@gmail.com <h2>MSN</h2> shokr.ahmed@hotmail.com <h2>Skype</h2> ahmed.shokr <h2>Mobile (Kuwait)</h2> +96565963141 <h2>Mobile (Egypt)</h2> +20104492755 <h2>Address</h2> Amman St., Salymia, Kuwait"); break; } } public bool IsReusable { get { return false; } } } }
Now, all what we need to do, is to retrieve the correct section information form the client script:
// The handler url var handlerUrl = 'Handlers/GetDetails.ashx'; // Load the first tab on the page load $(document).ready( function(){ GetSectionDetails('summery','detailsArea'); } ); // Loads the specified section details function GetSectionDetails(sectionId,detailsAreaId) { var detailArea = '#' + detailsAreaId; var getUrl = handlerUrl + '?sectionId=' + sectionId; $(detailArea).html("Loading...."); $(detailArea).load(FormatUrl(getUrl)); } // Format the url to include a random number to avoid caching // This is very important when dealing with dynamic data function FormatUrl(url) { var newUrl = url; newUrl += '&ver=' + Math.random().toString(); return newUrl; }
The sample in action:
The loading… effect:
The first section after loading:
Another section loaded by client side event:
You can play with the styles to make it more like tabs control, but I don’t like CSS so much so I’m leaving it to you 🙂
You can download the sample here.
I hope that helped
Ahmed
I just passed my MCTS MOSS Application Development, the exam was not that difficult, I had passed with 980 score out of 1000 🙂
The exam was just 32 questions and it covers the following areas:
This is the main topics, I can’t say any more information of course 🙂
It’s very nice to test your knowledge and get recognized as expert in the same time, thanks to MS for that 🙂
For who wants to see my full transcript please go to Microsoft certification transcript online
Use the following details to get the transcript:
I hope that helped
Ahmed
Using this method we simply add a required SOAP header to our web services calls.
We embed the SOAP header into our message and validate its contents on the server.
If the SOAP header validation done successfully, the web server sends the web service response to the consumer.
Pretty simple, right?
First we had our service declaration:
/// <summary> /// Summary description for SOAPHeaderService /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(Name = "TestService",ConformsTo = WsiProfiles.BasicProfile1_1)] public class SOAPHeaderService : System.Web.Services.WebService { // Visual studio will append a "UserCredentialsValue" property to the proxy class public UserCredentials consumer; public SOAPHeaderService() { //Uncomment the following line if using designed components //InitializeComponent(); }
Notice that the “WebServiceBinding” attribute has the “Name” argument set to “TestService”, I’ll explain this later.
Now, I write the custom SOAP header that I want to include in the SOAP message.
To do this I’ll create a class inherited from “System.Web.Services.Protocols.SoapHeader” , and I’ll but the required properties in it.
public class UserCredentials : System.Web.Services.Protocols.SoapHeader { public string userName; public string password; }
Let’s add instance from that header in our service
// Visual studio will append a "UserCredentialsValue" property to the proxy class public UserCredentials consumer;
Note that the visual studio will create a property in web service proxy called “UserCredentialsValue” which will map the “consumer” public property in the web service.
Now we had to write a “Web Method” that uses that header in messaging.
[WebMethod] [SoapDocumentMethod(Binding = "TestService")] [SoapHeader("consumer",Required=true)] public string GetBalance() { if (checkConsumer()) return consumer.userName + " had 10000000 credit"; else return "Error in authentication"; }
Note that I have added the “Binding” value to that I had used in declaring my service.
Also I declared the SOAP header that method will require when called, as long as declaring it with required.
Now, the only thing is remaining is to call the service with the SOAP header:
SOAPHeaderService.SOAPHeaderService service = new SOAPHeaderService.SOAPHeaderService(); SOAPHeaderService.UserCredentials user = new SOAPHeaderService.UserCredentials(); user.userName = "Ahmed"; user.password = "1234"; service.UserCredentialsValue = user; Console.WriteLine(service.GetBalance());
We just get reference to the service and the SOAP header, assign the SOAP header properties, attach it with the SOAP message and then make our call to the web method.
This is the console result after calling the service with username = “Ahmed” and password = “1234”
This one with other data
Securing their web services is a thing that many developers ignore while they are working; they relay that on that is a difficult and nasty task.
In the fact securing web service is all about understand the messaging layer and the protocols, you just need to go a little more deep and then you will find it is a very simple task.
I hope that helped
Ahmed
Rule based security is a very effective way to authorize your code, and code access security is a clean, easy to use and effective way to handle the security validation.
The Enterprise Library Security Application Block provides a configurable way to handle Rule based security.
In this article I’ll explain a solution to secure web applications using custom membership and role providers with the Enterprise Library Security Application Block and code access security.
You need the Enterprise Library installed.
First, we need to implement our custom membership provider, in this example I’ll just use static code to explain the provider [Not going to the database or anything].
For this sample I just need to implement the following method:
public override bool ValidateUser(string username, string password) { return true; }
Then, we need to implement our custom role provider.
I just need the following to implement methods:
public override string[] GetRolesForUser(string username) { return SecurityProvider.GetRolesForUser(username);} public override bool IsUserInRole(string username, string roleName) { return SecurityProvider.IsUserInRule(HttpContext.Current.User, roleName);}
Sure, you can build your own providers with a custom database.
Now, Let’s have a look on the [SecurityProvider] class:
public class SecurityProvider{ public static bool IsUserInRule(IPrincipal principal, string ruleName) { IAuthorizationProvider authorizationProvider = AuthorizationFactory.GetAuthorizationProvider(); return authorizationProvider.Authorize(principal, ruleName); } public static string[] GetRolesForUser(string username) { switch (username.ToLower()) { case ("admin"): return new string[] { "Admin" }; case ("manager"): return new string[] { "Manager" }; case ("user"): return new string[] { "User" }; default: return new string[] { "" }; } } }
I use the Enterprise Library Security Application Block to make the validation on the rules from the configuration file.
Then, we need to implement a custom CAS permission and attribute like the following [Not implemented functions removed from the next code section but is available in the source code]
public class RulesSecurityPermission : IPermission { private string _rule; public string Rule { get { return this._rule; } set { this._rule = value; } } public RulesSecurityPermission(string roleName) { _rule = roleName; } void IPermission.Demand() { if (!SecurityProvider.IsUserInRule(Thread.CurrentPrincipal, Rule)) throw new SecurityException(); } }
public class RulesSecurityPermissionAttribute : CodeAccessSecurityAttribute { public RulesSecurityPermissionAttribute(SecurityAction action) : base(action) { } public override IPermission CreatePermission() { return new RulesSecurityPermission(Rule); } private string _role; public string Rule { get { return this._role; } set { this._role = value; } } }
Now, let’s have a look on the configurations file:
<configuration> <configSections> <section name="securityConfiguration" type="Microsoft.Practices.EnterpriseLibrary.Security.Configuration.SecuritySettings, Microsoft.Practices.EnterpriseLibrary.Security, Version=3.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" /> </configSections> <securityConfiguration defaultAuthorizationInstance="RuleProvider" defaultSecurityCacheInstance=""> <authorizationProviders> <add type="Microsoft.Practices.EnterpriseLibrary.Security.AuthorizationRuleProvider, Microsoft.Practices.EnterpriseLibrary.Security, Version=3.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" name="RuleProvider"> <rules> <add expression="R:Admin" name="Administratoin" /> <add expression="R:Admin OR R:Manager" name="Management" /> <add expression="R:Manager OR R:User" name="Usage" /> </rules> </add> </authorizationProviders> </securityConfiguration> <system.web> <compilation debug="true" /> <authentication mode="Forms"> <forms loginUrl="~/Login.aspx" defaultUrl="~/Default.aspx"> </forms> </authentication> <authorization> <deny users="?"/> </authorization> <membership defaultProvider="CustomMembershipProvider"> <providers> <clear/> <add name="CustomMembershipProvider" type="Shokr.Security.RuleBasedSecurity.CustomMembershipProvider"/> </providers> </membership> <roleManager defaultProvider="CustomRolesProvider" enabled="true"> <providers> <clear/> <add name="CustomRolesProvider" type="Shokr.Security.RuleBasedSecurity.CustomRolesProvider" /> </providers> </roleManager> </system.web> </configuration>
In the above code, I had registered the [AuthorizationRuleProvider] from the Enterprise Library and configured our custom membership and roles providers.
Finally, this is the sample in action:
Navigate to the login page, and login with [admin] and any password.
You will be redirected to the default page:
Click on [Administrative function], you will see that the method executed successfully
Click on [User function], you will see security error:
I hope that helped
Ahmed
Silverlight is a rich framework that works in web browsers using a browser plug-in, just like Flash, but with it, you can interact more easily with .NET libraries. Silverlight has the same code-behind model that exists in ASP.NET, and operates under a modified light version from the .NET framework. With Silverlight, you can build Flash-like applications with full .NET server side code integration. Now, I’ll go through how to build a stock rates rotator with Silverlight and embed it into an ASPX page, step by step. First, you have to download the Silverlight Tools Beta 2 For Visual Studio 2008.
Open Visual Studio 2008, and open a new project, select the Silverlight node under Visual C#, and select Silverlight Application:
Click OK to proceed to the following screen:
Select the first option to add a new web site to test your Silverlight controls, and click OK.
Notice these files in you solution:
Now, I’ll start developing the email form in “Page.xaml”:
<canvas xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns="http://schemas.microsoft.com/client/2007"> <canvas.triggers> <eventtrigger routedevent="Canvas.Loaded"> <beginstoryboard> <storyboard repeatbehavior="Forever" storyboard.targetproperty="(Canvas.Left)" x:name="animation"> <doubleanimation duration="0:0:10" to="-820" from="0" storyboard.targetname="txtResult"> </doubleanimation> </storyboard> </beginstoryboard> </eventtrigger> <border opacity="1" background="Red"> <textblock text=" Updating stock rates ...... please wait " foreground="Wheat" x:name="txtLoading" /> </border> <textblock x:name="txtResult"> </textblock></canvas.triggers></canvas>
I made the animation to rotate the “txtResult
” textblock from right to left forever. This is a very simple animation; also, I added another textblock to simulate the loading effect. Now, I’ll code the web service which will provide the stock rates to the Silverlight control.
[WebMethod] public string GetStockData() { // Just to see the loading effect System.Threading.Thread.Sleep(2000); StringBuilder stockData = new StringBuilder(); Random randomRate = new Random(); stockData.Append("USD " + randomRate.NextDouble() + " | "); stockData.Append("KD " + randomRate.NextDouble() + " | "); stockData.Append("GBP " + randomRate.NextDouble() + " | "); stockData.Append("EGP " + randomRate.NextDouble() + " | "); stockData.Append("AUD " + randomRate.NextDouble()); return stockData.ToString(); }
It’s a very simple web method just to return the required string. Now, we must code calling the web service from the Silverlight control.
public partial class Page : UserControl { # region "Public members" DispatcherTimer timer; BasicHttpBinding bind; EndpointAddress endPoint; // Change this to your local URL const string WebServiceUrl = "http://localhost:11545/StockRotatorWeb/services/StockData.asmx"; WebServices.StockDataSoapClient stockService; # endregion public Page() { InitializeComponent(); // Initialize timer timer = new DispatcherTimer(); timer.Interval = new TimeSpan(0, 0, 10); timer.Tick += new EventHandler(timer_Tick); // Initialize the web service proxy and add the event handler bind = new BasicHttpBinding(); endPoint = new EndpointAddress(WebServiceUrl); stockService = new WebServices.StockDataSoapClient(bind, endPoint); stockService.GetStockDataCompleted += new EventHandler<stockrotator.webservices.getstockdatacompletedeventargs>( stockService_GetStockDataCompleted); stockService.GetStockDataAsync(); // Start the timer timer.Start(); } // Invoked when the calling completed or timed out void stockService_GetStockDataCompleted(object sender, StockRotator.WebServices.GetStockDataCompletedEventArgs e) { try { // Update the result txtResult.Visibility = Visibility.Visible; txtResult.Text = e.Result.ToString(); } catch (Exception ex) { // Display the error txtResult.Text = ex.InnerException.Message; } finally { // Hide the loading textbloxk and restart the timer txtLoading.Visibility = Visibility.Collapsed; timer.Start(); } } void timer_Tick(object sender, EventArgs e) { timer.Stop(); txtLoading.Visibility = Visibility.Visible; txtResult.Visibility = Visibility.Collapsed; // Make the async call to the web service stockService.GetStockDataAsync(); } }
And this is the test page in action:
And, this with the data displayed:
I hope that helped
Ahmed
jQuery is a fast, concise, JavaScript library that simplifies how you traverse HTML documents, handle events, perform animations, and add AJAX interactions to your web pages. jQuery is designed to change the way that you write JavaScript.
In this article, I’ll build a sliding JavaScript menu using jQuery.
First, you must reference the jQuery library which can be downloaded form here. Then, you can make the menu HTML page as in the following code:
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>JQuery Sample Menu</title> <link rel="Stylesheet" type="text/css" href="styles/navigation.css" /> <script type="text/javascript" language="javascript" src="scripts/jquery-1.2.3.js"/> <script type="text/javascript" language="javascript" src="scripts/CustomMenu.js"/> </head> <body> <h2>This is a sample menu using JQuery</h2> <h4>Try to click on the clickable items in the menu to see the animation</h4> <ul class="menu"> <li>- Parent item with no children</li> <li> - Item 1 with children <ul > <li>Nested item 1</li> <li>Nested item 2</li> </ul> </li> <li> - Item 2 with children <ul > <li>Nested item 1</li> <li>Nested item 2</li> <li>Nested item 3</li> <li>Nested item 4</li> </ul> </li> <li> - Item 3 with children <ul> <li>Nested item 1</li> <li>Nested item 2</li> <li>Nested item 3</li></ul> </li> </ul> </body> </html>
Now, for the JavaScript magic! Just use the following JavaScript piece of code:
$(function() // Register the menu { // Add the click event handler on the list item with sub list $('li:has(ul)') .click(function(event){ if (this == event.target) { // Hide all the children of the other lists $('li:has(ul)').children().hide('slow'); // Make the animation $(this).children().animate({opacity:'toggle',height:'toggle'},'slow'); } return false; } ) // Change the cusrsor. .css({cursor:'pointer'}) // Hide all the nested lists (on the first tinm only). .children().hide(); } );
Now you can have the sliding effect without so much JavaScript coding.
Menu at start:
Menu in action:
I hope that helped
Ahmed