i need to Filter and display Google Map Markers from database based on DropDownList selection. for that I need to pass the selected value of DropDownList to the query.
What should i do in the following code to do the above task?
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
namespace trial2
{
public partial class explore : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DropDownList1.DataBind();
ListItem liMainArea = new ListItem("Select", "-1");
DropDownList1.Items.Insert(0, liMainArea);
DropDownList2.DataBind();
ListItem liSubArea = new ListItem("Select", "-1");
DropDownList2.Items.Insert(0, liSubArea);
DropDownList3.DataBind();
ListItem liAmenities = new ListItem("Select", "-1");
DropDownList3.Items.Insert(0, liAmenities);
DropDownList2.Enabled = false;
DropDownList3.Enabled = false;
}
if(!this.IsPostBack)
{
DataTable dt = this.GetData("select [Name], [Latitude], [Longitude] from [MAIN AREA]");
rptMarkers.DataSource = dt;
rptMarkers.DataBind();
}
}
private DataTable GetData(string query)
{
string conString = ConfigurationManager.ConnectionStrings["gisConnectionString"].ConnectionString;
SqlCommand cmd = new SqlCommand(query);
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
return dt;
}
}
}
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
if (DropDownList1.SelectedIndex == 0)
{
DropDownList2.Enabled = false;
DropDownList2.DataBind();
ListItem liSubArea = new ListItem("Select", "-1");
DropDownList2.Items.Insert(0, liSubArea);
DropDownList3.Enabled = false;
DropDownList3.DataBind();
ListItem liAmenities = new ListItem("Select", "-1");
DropDownList3.Items.Insert(0, liAmenities);
}
else
{
DropDownList2.Enabled = true;
DropDownList2.DataBind();
ListItem liSubArea = new ListItem("Select", "-1");
DropDownList2.Items.Insert(0, liSubArea);
DropDownList3.SelectedIndex = 0;
DropDownList3.Enabled = false;
}
}
protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
{
if (DropDownList2.SelectedIndex == 0)
{
DropDownList3.Enabled = false;
DropDownList3.DataBind();
ListItem liAmenities = new ListItem("Select", "-1");
DropDownList3.Items.Insert(0, liAmenities);
}
else
{
DropDownList3.Enabled = true;
DropDownList3.DataBind();
ListItem liAmenities = new ListItem("Select", "-1");
DropDownList3.Items.Insert(0, liAmenities);
}
}
protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e)
{
}
}
}
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="explore.aspx.cs" Inherits="trial2.explore" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<div>
Area:<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" DataSourceID="SqlDataSource2" DataTextField="NAME" DataValueField="MAIN AREA ID" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" Width="150px">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:gisConnectionString %>" SelectCommand="SELECT DISTINCT * FROM [MAIN AREA] ORDER BY [NAME]">
</asp:SqlDataSource>
Subarea:
<asp:DropDownList ID="DropDownList2" runat="server" DataSourceID="SqlDataSource1" DataTextField="NAME" DataValueField="ID" AutoPostBack="True" Width="150px" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:gisConnectionString %>" SelectCommand="SELECT * FROM [subarea] WHERE ([MAIN AREA ID] = @MAIN_AREA_ID) ORDER BY [NAME]">
<SelectParameters>
<asp:ControlParameter ControlID="DropDownList1" Name="MAIN_AREA_ID" PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
Amenities:
<asp:DropDownList ID="DropDownList3" runat="server" AutoPostBack="True" DataSourceID="SqlDataSource3" DataTextField="Categories" DataValueField="AID" OnSelectedIndexChanged="DropDownList3_SelectedIndexChanged" Width="150px">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:gisConnectionString %>" SelectCommand="SELECT * FROM [Amenities] ORDER BY [Categories]"></asp:SqlDataSource>
</div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
var markers = [
<asp:Repeater ID="rptMarkers" runat="server">
<ItemTemplate>
{
"title": '<%# Eval("Name") %>',
"lat": '<%# Eval("Latitude") %>',
"lng": '<%# Eval("Longitude") %>'
}
</ItemTemplate>
<SeparatorTemplate>
,
</SeparatorTemplate>
</asp:Repeater>
];
</script>
<script type="text/javascript">
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
//var infoWindow = new google.maps.InfoWindow();
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) {
// google.maps.event.addListener(marker, "click", function (e) {
// infoWindow.setContent(data.description);
// infoWindow.open(map, marker);
// });
//})(marker, data);
}
}
</script>
<div id="dvMap" style="width: 1050px; height: 800px">
</div>
</asp:Content>