Googlemaps javaScript API with Ext.NET and Web Forms

Googlemaps API is a desktop and mobile web mapping service application and technology provided by Google, offering satellite imagery, street maps, and Street View perspectives, as well as functions such as a route planner for traveling by foot, car, bicycle (beta test), or with public transportation.

You can use it embed in your web pages. Here you can find some documentation on how-to register for use and some examples: https://developers.google.com/maps/documentation/javascript/tutorial

This is an example showing a map with the localization for a given shop:

The first step to use is to obtain a key.

Next you need to add a script in web page in order to allow access to googlemap, using the key previously obtained:

Next step is to add a script to the page used to load the map with the position needed. in my case I use a marker to mark the desired position:

In the aps.net page we need to include an element, could be a div, or a panel, with the name map_canvas to draw the map on it.

In my page I am using a TabPanel, and I use the Panel map_canvas to draw the map. To access this element inside the DOM is important to take care about the real name used. For this a launch the pagem and then using Inspect Element a obtain the real name. In my case was 'cpMainContent_map_canvas-body'. This is becacuse I  am using Masterpages, and then the panel is nested with another panels, and ContentPlaceHolder.

 To load the correct map a use a Listener associated to the loading of the tab page having the map. This listener use initializeMap taking the longitude, latitude and name parameter from text fields inside the page.

Also I have added a few functionalities to the map, allowing to reposition the marker doing click over the map and reloading latitude and longitude data to web fields. And finally you could also make click over the marker to make zoom and center the position to this marker.

Ext.NET ComboBox samples

Combobox loading data from store which uses an SqldataSource. It shows Name field, and returns SportID field value:

The method in code behind could be as follows:

protected void Store2_ReadData(object sender, StoreReadDataEventArgs e)
{
  using (var db = new ClubSiteContext())
  {
     Store store = this.cbxDeportes.GetStore();
     store.DataSource = from s in db.Sports select new { s.SportID, s.Name };
     store.DataBind();
  }
}

In this case is important to perform an initial load for the data when the page is loaded.

Other way to load data is using a SqlDataSource like this:

Once we have data loaded into the combobox, we could select an item, or select the empty item described using the tag EmptyText as follows:

if (aRaceType.SportID == 0)
                cbxDeportes.Value = "";
            else
            {
                object SportID = aRaceType.SportID;
                cbxDeportes.Select(SportID);
            }

If we want to perform some kind of action when user selects a value from combobox we could use Direct Events an a method in code behind like this:

And this is the method implemented in code behind:

protected void cbRaceTypesChangeValue(object sender, DirectEventArgs e)
{
     txbxPoints.Text = "Escribe algo";
}

More combobox samples here  http://examples.ext.net/#/Form/ComboBox/Overview/

ASP.NET/Ajax ToolKit: SlideShowExtender en Master Pages

You can use the Ajax Toolkit component to create an image slider. It´s a very easy component to use. You only need an image, an a SlideShowExtender pointing to this image. Also you will need a method in the code behind of the page to load the images into the slider.

If you try to do this into a master page then you need to create a Web Service to store the method needed to load the images.

This is the code into the markup to create the slider. This page is a master page called Site.Master

and this is the code for the web service, including a method called GetSlides to load the slides into the Slider component: