ASP.Net Nova: September 2009

While looking to generate HTML to PDF, i came across how to create PDF exactly as HTML using its stylesheet.

After working out for nearly 4 hrs I found something from Stackoverflow which extract inline and external css beautifully.

limitation: Right now this function extracts from current page...I need a dynamic rul where defining the url we can create PDF according to the stytle-sheet... Code is given below..

Ref:http://stackoverflow.com/questions/641221/how-to-use-jquery-or-similar-to-extract-all-of-the-css/1470384#1470384


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ExtractStyleSheet.aspx.cs" Inherits="Common_UserControls_Lab_HtmltoPDF_ExtractStyleSheet" %>

<!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></title>
   <link href="../../../_assets/css/addressbook.css" rel="stylesheet" type="text/css" />
   <link href="../../../_assets/css/CleanForm.css" rel="stylesheet" type="text/css" />
   <style type="text/css">   
   .grid
{
   font-family:Arial;
   font-size:12px;
   width:800px;
}
/* gridview styles */
.grid .gridview
{
   width:100%;
   border:solid 2px #5E8CC6;
   empty-cells:show;
   border-top-width:1px;
}
   </style>
   <script type="text/javascript" >
       function getStyles() {           
           if (!document.styleSheets) return false; // return false if browser sucks
           var rules = new Array();
           for (var i = 0; i < document.styleSheets.length; i++) {
               var x = 0;
               styleSheet = document.styleSheets[i];
               if (styleSheet.cssText) { // if this is IE, get the rules directly
                   rules.push(styleSheet.cssText);
               } else {
                   // otherwise get them individually
                   do {
                       cssRule = styleSheet.cssRules[x];
                       if (cssRule) rules.push(cssRule.cssText);
                       x++;
                   } while (cssRule);
               }
           }
           var compositeCSS = '';
           debugger;
           for (i = 0; i < rules.length ; i++) {
               compositeCSS += rules[i];
           }
           return compositeCSS;
       }
   </script>
</head>
<body>
   <form id="form1" runat="server">
   <div>
       <asp:Button ID="Button1" runat="server" OnClientClick="getStyles()" Text="Button" />
   </div>
   </form>
</body>
</html>

Simple Asp.net -Google map by address without Geocode using Jquery

Using google map in Asp.net is not a new stuff to rise your eye brow.

But yes a simple way of coding, understandable code and dynamic google map will definetly attract attention of a developer.

Since 2 months I was trying so many options, user controls which are bulk and difficult to understand. So since yesterday i thought let me make a simple one which i can use for dynamic address on google map and not with geocode or langitude or latitude.

Here we go...

Parent page (any page, html or aspx)

Let us assume we have an anchor, which will have href directed to a google map page ,

so we better send address by query string. like below

<a  href="javascript: window.open('http://localhost/Test/common/usercontrols/Generalmap.aspx?address=Banagalore,INDIA&id=4','Window1','menubar=no,width=550,height=550,toolbar=no');"  title="pageSlide Demo">Click for a pageSlide demo.</a>

where  address=Banagalore,INDIA is a dynamic address.

on clicking this anchor it will open a pop-up screen. so in our pop-up screen we must have..

1. a Jquery ref script

2. Google map api reference.... For this we need google api key.

For localhost you can use the same api key which i have used.

for other domain you can get api key here :

http://code.google.com/apis/maps/signup.html

Now back to code, on ready func() we need to read the querystring (address).

Follow this code you will understand.



<div id="map"   style="width:550px;height:550px;"></div> 
<script src="../Scripts/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAIKI1RJamIEvP7_Du5ZGi6xS4M_PhMYp3D1A5cqeLLIOnkUYWYhS8jdwSdUjZxBwswqHipWYzfju7fA"
      type="text/javascript"></script> 
<script type="text/javascript">
    $(document).ready(function() {
        var originaladdress = null; // global variable to store address
        qs();
        var qsParm = new Array();
        function qs() {
            var query = window.location.search.substring(1);
            var parms = query.split('&');
            for (var i = 0; i < parms.length; i++) {
                var pos = parms[i].indexOf('=');
                if (pos > 0) {
                    var key = parms[i].substring(0, pos);
                    var val = parms[i].substring(pos + 1);
                    if (key == 'address') {  // fill only the adddress
                        originaladdress = val;
                    }
                }
            }
        }
        var geocoder;
        var map;
        map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(34, 0), 1);
        geocoder = new GClientGeocoder();       
        var location = originaladdress; //$("#location").val();            
        var address = location;
        geocoder.getLocations(address, addAddressToMap);
        // addAddressToMap() is called when the geocoder returns an
        // answer.  It adds a marker to the map with an open info window
        // showing the nicely formatted version of the address and the country code.
        function addAddressToMap(response) {
            map.clearOverlays();
            if (!response || response.Status.code != 200) {
                alert("Sorry, we were unable to geocode that address");
            }
            else {
                place = response.Placemark[0];        // marking a label on the address.
                point = new GLatLng(place.Point.coordinates[1],
                                        place.Point.coordinates[0]);
                marker = new GMarker((point), 8);
                map.addOverlay(marker);
                marker.openInfoWindowHtml(place.address);
                // optional for zooming purpose
                ne = new GLatLng(place.Point.coordinates[1] + 0.05, place.Point.coordinates[0] + 0.05);  // zooming the location
                bound = new GLatLngBounds(point, ne);
                map.setZoom(map.getBoundsZoomLevel(bound));
                map.panTo(bound.getCenter());
            }
        }
        return false;      
    });
      </script>

Thats it, you got ur simple google map in your Asp.net application.

Happy coding

ASP.Net Nova

Thursday, September 24, 2009

Extract Internal and External CSS into a string using Javascript

Wednesday, September 2, 2009

Simple Asp.net -Google map by address without Geocode

Total Pageviews