Tuesday 25 June 2013

AJAX Basic Introduction | Started with AJAX | What is AJAX


AJAX stands for Asynchronous JavaScript and XML. This is not a new programming language, but a new way to use existing standards.
AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.
AJAX is based on internet standards, and uses a combination of:

XMLHttpRequest object (to exchange data asynchronously with a server)
JavaScript/DOM (to display/interact with the information)
CSS (to style the data)
XML (often used as the format for transferring data)

AJAX Example Explained
The AJAX application above contains one div section and one button.

The div section will be used to display information returned from a server. The button calls a function named loadXMLDoc(), if it is clicked:
<!DOCTYPE html><html><body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div><button type="button" onclick="loadXMLDoc()">Change Content</button>
</body></html>


Next, add a <script> tag to the page's head section. The script section contains the loadXMLDoc() function:
<head><script>function loadXMLDoc(){.... AJAX script goes here ...}</script></head>



Sunday 23 June 2013

Show Multiple Markers on Google Map from Database using ASP.Net with JavaScript

In this article, I will explain how to show  or add multiple markers to Google maps from database in asp.net website using JavaScript or JavaScript Show multiple markers in Google maps using database in asp.net.

First you need create a new table in your database like as shown below:
Column Name
Data Type
Allow Nulls
PlaceID
int(set isidentity property=true)
No
PlaceName
varchar(50)
Yes
PlaceLatitude
numeric(12,6)
Yes
PlaceLongitude
numeric(12,6)
Yes
PlaceDescription
Varchar(250)
Yes

If table creation completed then enter some sample data such as follows..
PlaceID
PlaceName
PlaceLatitude
PlaceLongitude
PlaceDescription
1
Kolkata
22.5697
88.3697
This is Kolkata
2
Hyderabad
17.2667
78.5302
This is Hyderabad
3
Bangalore
12.8974
77.5195
This is Bangalore
4
Visakhapatnam
17.5183
83.3203
This is Visakhapatnam
5
Chennai
12.4974
83.3203
This is Chennai

Now write the following code in your aspx to show multiple markers in Google map from database like as shown below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show/Add multiple markers to Google Maps from database in asp.net website</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var markers = JSON.parse('<%=ConvertDataTabletoString() %>');
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
//  marker:true
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
(function(marker, data) {

// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
</head>
<body onload="initialize()">
<form id="form1" runat="server">
<div id="map_canvas" style="width: 500px; height: 400px"></div>
</form>
</body>
</html>


Now add following namespaces in code behind

C# Code

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
After that write the following code in code behind


// This method is used to convert datatable to json string
public string ConvertDataTabletoString()
{
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection("Data Source=localhost;Initial Catalog=positionmaster;Integrated Security=true"))
{
using (SqlCommand cmd = new SqlCommand("select title=PlaceName,lat=PlaceLatitude,lng=PlaceLongitude,PlaceDescription from LocationDetails", con))
{
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row;
foreach (DataRow dr in dt.Rows)
{
row = new Dictionary<string, object>();
foreach (DataColumn col in dt.Columns)
{
row.Add(col.ColumnName, dr[col]);
}
rows.Add(row);
}
return serializer.Serialize(rows);
}
}
}

VB.NET Code

Imports System.Collections.Generic
Imports System.Data
Imports System.Data.SqlClient
Partial Class Default3
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
End Sub
' This method is used to convert datatable to json string
Public Function ConvertDataTabletoString() As String
Dim dt As New DataTable()
Using con As New SqlConnection("Data Source=localhost;Initial Catalog=positionmaster;Integrated Security=true")
Using cmd As New SqlCommand("select title=PlaceName,lat=PlaceLatitude,lng=PlaceLongitude,PlaceDescription from LocationDetails", con)
con.Open()
Dim da As New SqlDataAdapter(cmd)
da.Fill(dt)
Dim serializer As New System.Web.Script.Serialization.JavaScriptSerializer()
Dim rows As New List(Of Dictionary(Of String, Object))()
Dim row As Dictionary(Of String, Object)
For Each dr As DataRow In dt.Rows
row = New Dictionary(Of String, Object)()
For Each col As DataColumn In dt.Columns
row.Add(col.ColumnName, dr(col))
Next
rows.Add(row)
Next
Return serializer.Serialize(rows)
End Using
End Using
End Function
End Class


Saturday 22 June 2013

Overview and Get Started with ASP.NET


ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript. ASP.NET supports three approaches to build web sites:
  • Web Pages ASP.NET Web Pages and the new Razor syntax provide a fast, approachable, and lightweight way to combine server code with HTML to create dynamic web content. Connect to databases, add video, link to social networking sites, and include many more features that let you create beautiful sites using the latest web standards. 
  • Web Forms: ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model. A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access. Visual Studio Express provides a free development tool that makes ASP.NET development easy.
  • MVC: ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that enables a clean separation of concerns and that gives you full control over markup for enjoyable, agile development. ASP.NET MVC includes many features that enable fast, TDD-friendly development for creating sophisticated applications that use the latest web standards.
   

You need to install the following:

  • Internet Information Services (IIS) 
  • An Advance web browser
  • Dot NET Framework 2.0 or higher
  • Dot NET Framework Software Development Kit (SDK)
  • Microsoft SQL Server 




Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More