Dot Net Island

Thursday, 16 August 2012

Animation Extender Ajax

How to use Animation Extender in Asp.net Ajax

The AnimationExtender is a simple extender that allows you to utilize the powerful animation framework with existing pages in an easy, declarative fashion. It plays animations whenever a specific event like OnLoad, OnClick, OnMouseOver, or OnMouseOut is raised by the target control.

To implement this concept you need to follow the below steps

Step1:

Create a new Asp.net website in Visual Studio and write the following Source code in the design part of the Default.aspx page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style>

.flyOutDiv

{

display: none;

position: absolute;

width: 400px;

z-index: 3;

font-size: 14px;

border: solid 1px #CCCCCC;

background-color: #FFFFFF;

padding: 5px;

}

.flyOutDivCloseX

{

background-color: #666666;

color: #FFFFFF;

text-align: center;

font-weight: bold;

text-decoration: none;

border: outset thin #FFFFFF;

padding: 5px;

}

</style>

</head>

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<div>

<asp:LinkButton ID="lnkBtnColHelp" runat="server" Text="Click Here" OnClientClick="return false;" />

<asp:LinkButton ID="lnkBtnCloseColHelp" runat="server" Text="X" CssClass="flyOutDivCloseX" />

</div>

<p>

Microsoft Silverlight is an application framework for writing and running rich Internet applications, with features and

purposes similar to those of Adobe Flash.current versions support multimedia, graphics and animation, and give developers

support for CLI languages and development tools. Silverlight is also one of the two application development platforms for Windows Phone.

</p>

</div>

<div>

<asp:AnimationExtender ID="AnimationExtender1" runat="server"

TargetControlID="lnkBtnColHelp">

</Parallel>

</Parallel>

</Sequence>

</OnClick>

</Animations>

</asp:AnimationExtender>

</div>

<div>

<asp:AnimationExtender ID="AnimationExtender2" runat="server"

TargetControlID="lnkBtnCloseColHelp">

</Parallel>

</Sequence>

</OnClick>

</Animations>

</asp:AnimationExtender>

</div>

</form>

</body>

</html>

Step2:

Now build the Solution and Debug it for the output.

DEMO:

Tuesday, 26 June 2012

How to use Google Maps Asp.net || Search by Location in Google Map || Get Directions Between Locations in Google Map Using Asp.net

File -> Open-> New Website

AddNewItem->WebForm->Default.aspx

Default.aspx

var directionsDisplay;

var directionsService = new google.maps.DirectionsService();

function show() {

var tableid = document.getElementById('tbgetdirection');

tableid.style.display = 'block';

}

function InitializeMap() {

directionsDisplay = new google.maps.DirectionsRenderer();

var latlng = new google.maps.LatLng(17.425503, 78.47497);

var myOptions1 =

{

zoom: 13,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("map"), myOptions1);

directionsDisplay.setMap(map);

directionsDisplay.setPanel(document.getElementById('directionpanel'));

var control = document.getElementById('control');

control.style.display = 'block';

}

function calcRoute() {

InitializeMap();

var start = document.getElementById('startvalue').value;

var end = document.getElementById('endvalue').value;

var request = {

origin: start,

destination: end,

travelMode: google.maps.DirectionsTravelMode.DRIVING

};

directionsService.route(request, function (response, status) {

if (status == google.maps.DirectionsStatus.OK) {

directionsDisplay.setDirections(response);

}

});

}

function Button1_onclick() {

calcRoute();

window.onload = InitializeMap;

var directiondiv = document.getElementById('directionpanel');

directiondiv.style.display = 'block';

}

window.onload = InitializeMap;

var map;

var geocoder;

function InitializeMap1() {

var latlng = new google.maps.LatLng(17.425503, 78.47497);

var myOptions =

{

zoom: 13,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP,

disableDefaultUI: true

};

map = new google.maps.Map(document.getElementById("map"), myOptions);

}

function FindLocaiton() {

geocoder = new google.maps.Geocoder();

InitializeMap1();

var address = document.getElementById("addressinput").value;

geocoder.geocode({ 'address': address }, function (results, status) {

if (status == google.maps.GeocoderStatus.OK) {

map.setCenter(results[0].geometry.location);

var marker = new google.maps.Marker({

map: map,

position: results[0].geometry.location

});

}

else {

alert("Geocode was not successful for the following reason: " + status);

}

});

}

function Button2_onclick() {

FindLocaiton();

window.onload = InitializeMap1;

var tableid = document.getElementById('tbgetdirection');

tableid.style.display = 'none';

var directiondiv = document.getElementById('directionpanel');

directiondiv.style.display = 'none';

}

</script>

</head>

<body>

<table>

</td><td>

<br />

</td></tr>

</table>

<div>

</td></tr>

<tr>

<td>

</tr><tr>

</tr><tr>

</tr>

</table>

</td></tr>

<tr>

</td>

</td></tr>

</table>

</div>

</form>

</body>

</html>

DEMO:

Enter Search Location and click on search

To Get Directions click on get Direction you will find From and To

Enter From And To places and click on Go you can see the route map and also the directions