ASP.Net Nova

Jquery : Multiple version of Jquery in single Page

2009-12-18T03:34:00.000-08:00

This article explains about Jquery and the usage of Multiple version of jquery in a single page.

This article has some screen shots of page and using Jquery 1.3.2 and Jquery 1.2.6 versions.

Using 2 versions of jquery in a single page.

It explains the usage of $.noConflict(true);

Jquery needs no introduction now to the Web developers either for php or Asp.net. As we know there are different versions of jquery is present. And there are innumerable plugins available online. Almost all the jquery plugins I came across are all interesting and fascinating .

To download jquery and different version check here : www.Jquery.com

Let us consider 2 versions of Jquery a.) Jquery1.2.6 and b) Jquery.1.3.2

I specially selected one plugin which will work for jquery1.3.2 version and which will not work for jquery 1.2.6.

the plugin is "TimePicker"

Please visit Timepicker tutorial and Demo of Timepicker.

which is

Note: When you change the jquery from 1.3.2 to 1.2.6.. you will not be able to see the same.

Now suppose you have an another plugin

Eg: Rounded corner which will work only for Jquery1.2.6 version but not jquery 1.3.2. (which i have) jquery.corner.js

which is Curvy corners Demo

So here comes the problem:

How to use the multiple versions of Jquery in a single page?

here which is jquery.1.2.6.js and Jquery.1.3.2.js

$.noConflict(true);

will come to rescue us from this problem.

It is very simple.

What we need is to give the souce of both jquery. and to avoid any conflict between the version we need to put


<script

src="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js"

type="text/javascript"></script>
<script type="text/javascript">
    //create this naming for Jquery 1.3.2 version
    var jQuery_1_3_2 = $.noConflict(true);
</script>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"

 type="text/javascript"></script>

Source code (pure html)


<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>Timepicker Example Page</title>
   <link type="text/css"

href="http://milesich.com/tpdemo/css/ui-lightness/jquery-ui-1.7.2.custom.css"

rel="stylesheet" /> 
   <style type="text/css">       
       .round
           {
               background-color:#f6f6f6;   
                width:100%;
                height:100%;
           }
       </style>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"

 type="text/javascript"></script>
   <script type="text/javascript"

 src="http://milesich.com/tpdemo/js/jquery-ui-1.7.2.custom.min.js"></script>
   <script type="text/javascript"

 src="http://milesich.com/tpdemo/js/timepicker.js"></script>
   <script type="text/javascript">
       //create this naming for Jquery 1.3.2 version
       var jQuery_1_3_2 = $.noConflict(true);
   </script>
   <script

src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"

 type="text/javascript"></script>
   <script type="text/javascript"

src="http://jquery.malsup.com/corner/jquery.corner.js"></script>    
   <script type="text/javascript">
       // for version Jquery 1.3.2
       jQuery_1_3_2(function() {
           jQuery_1_3_2('#datetime').datepicker({
               duration: '',
               showTime: true,
               constrainInput: false
           });
       });
       // By default it is set to version 1.2.6 here
       $(function() {           
           $('#username_warning').blur(function() {
               $("#username_warning").val("this is from

later query version here : Jquery 1.2.6");
           });          
       });
       $(function() { $("#div").corner(); });
</script>    
   <style type="text/css">
   body{ font: 80%  Calibri,"Trebuchet MS", sans-serif; margin: 50px;}
</style>
</head>
<body>  
   <div  id="div" class="round" style="background-color:#661111;

 color:White;" >
     This round corner will work only on the jquery 1.2.6 but not on jquery 1.3.2 
     <br /><br /><br /><br />
     By using $.noConflict(true); we are able to use multiple jquery versions. 
    </div>
    <p><input type="text" name="datetime" id="datetime"

 value=""/>This timepicker works for jquery 1.3.2</p>
   <input type="text" id="username_warning" value=""/>
</body>
</html>

So this solves issue of using multiple versions in the single page.

Linq : Case conditions in Asp.net c#

2009-11-27T14:40:00.000-08:00

 public object GetAllImageDetailsByMasterId(int masterkey)  {    GeneralDataContext db = new GeneralDataContext();    var objImgDetail = from p in db.ImageDetails    where p.ImageMasterKey == masterkey                        select new {                                                           LargeImagePath = p.LargeImagePath,                                                        SmallImagePath =                        (                       p.SmallImagePath ==     null ? p.LargeImagePath :                      p.SmallImagePath == 
         "" ? p.LargeImagePath : p.SmallImagePath)                                                                                                       };             return objImgDetail.ToList();         }

Asp.net Linq Sql : Multiple left join with Paging c#

2009-11-27T14:20:00.000-08:00

Left out Join implementation in Linq.. hmm first I have no idea how to proceed.

Almost in all the attempt the syntax errors used to appear... and there is no

relevant information available online from google search.

After giving a long try and error finally i was able to use Linq for

 Left outer join and implemented Page indexing too.

The screen shot explains of "Sales" object has many relations with other tables and

 the function given below will explain the how is implement left join.


public static List<Object> GetSaleList(int pageIndex, int pageSize)
{   
GeneralDataContext db = new GeneralDataContext();
var ObjSale = (from S in db.Sales
   join Prop in db.Properties on S.PropertyId equals Prop.PropertyId

   into tempProp from PROP in tempProp.DefaultIfEmpty()

       join ImgD in db.ImageDetails on S.ShowImageID equals ImgD.Id

   into tempImg from IMGD in tempImg.DefaultIfEmpty()
   join Countries in db.Countries on S.TargetCountry equals Countries.ID

   into tempCountry from COUNTRIES in tempCountry.DefaultIfEmpty()
   join Curr in db.Currencies on S.Currency equals Curr.Id

   into tempCurrency from CURRENCIES in tempCurrency.DefaultIfEmpty()                       
select new { S.Id,S.PropertyId,S.Link,S.ImageId,S.TargetCountry,S.Currency,

     S.SellingPrice,S.Sell,S.Rent,S.Lease,
     PROP.PropertyType,IMGD.SmallImagePath, COUNTRIES.COUNTRY1,

       CURRENCIES.CurrencySign
     });

 ObjSale = ObjSale.Skip((pageIndex - 1) * pageSize).Take(pageSize);
 return ObjSale.ToList();


}

Database search MSSQL

2009-11-24T03:22:00.000-08:00


set ANSI_NULLS ON
set QUOTED_IDENTIFIER ON
go


ALTER PROCEDURE [dbo].[proc_KeySearch] 
(
 
    @keyword                    varchar(256)
)
AS

 


DECLARE @SearchStr nvarchar(100)   
   SET @SearchStr = @keyword      
   CREATE TABLE #Results (ColumnName nvarchar(370), ColumnValue nvarchar(3630))    
   SET NOCOUNT ON  
   DECLARE @TableName nvarchar(256), @ColumnName nvarchar(128), @SearchStr2 nvarchar(110)    
   SET  @TableName = ''  
   SET @SearchStr2 = QUOTENAME('%' + @SearchStr + '%','''')    
   WHILE @TableName IS NOT NULL  
   BEGIN  
         SET @ColumnName = ''    
         SET @TableName =   
         (  
               SELECT MIN(QUOTENAME(TABLE_SCHEMA) + '.' + QUOTENAME(TABLE_NAME))  
               FROM INFORMATION_SCHEMA.TABLES  
               WHERE       TABLE_TYPE = 'BASE TABLE'  
                     AND   QUOTENAME(TABLE_SCHEMA) + '.' + QUOTENAME(TABLE_NAME) > @TableName  
                     AND   OBJECTPROPERTY(  
                                 OBJECT_ID(  
                                       QUOTENAME(TABLE_SCHEMA) + '.' + QUOTENAME(TABLE_NAME)  
                                        ), 'IsMSShipped'  
                                        ) = 0  
         )    
         WHILE (@TableName IS NOT NULL) AND (@ColumnName IS NOT NULL)  
         BEGIN  
               SET @ColumnName =  
               (  
                     SELECT MIN(QUOTENAME(COLUMN_NAME))  
                     FROM INFORMATION_SCHEMA.COLUMNS  
                     WHERE       TABLE_SCHEMA      = PARSENAME(@TableName, 2)  
                           AND   TABLE_NAME  = PARSENAME(@TableName, 1)  
                           AND   DATA_TYPE IN ('char', 'varchar', 'nchar', 'nvarchar',  
                           'numeric','decimal', 'double', 'money')  
                           AND   QUOTENAME(COLUMN_NAME) > @ColumnName  
               )  
  
               IF @ColumnName IS NOT NULL  
               BEGIN  
                     INSERT INTO #Results  
                     EXEC  
                     (  
                           'SELECT ''' + @TableName + '.' + @ColumnName + ''', LEFT(' + @ColumnName + ', 3630)   
                           FROM ' + @TableName + ' (NOLOCK) ' +  
                           ' WHERE ' + @ColumnName + ' LIKE ' + @SearchStr2  
                     )  
               END  
         END     
   END    
   SELECT ColumnName, ColumnValue FROM #Results    
DROP TABLE #Results

ReSharper 5.0 and Visual Studio 2010

2009-11-16T00:00:00.000-08:00

Resharper for VS 2010 is about to come soon. Like me many of programmers are not using VS2010 because of Resharper.

More about Resharper pulgin

Resharper from wikipedia
From JetBrain Blog
For Resharper benefits go through these demo
Demos

iframe 100% height width in javascript

2009-11-13T04:02:00.000-08:00

JavaScript


function resize_iframe(frameid) {
       if (frameid != null && frameid != 'undefined') {
           var height = window.innerWidth; //Firefox
           if (document.body.clientHeight) {
               height = document.body.clientHeight; //IE
           }           
           document.getElementById(frameid).style.height = parseInt(height - document.getElementById(frameid).offsetTop - 8) + "px";         
       }
   }

   // this will resize the iframe every
   // time you change the size of the window.
   window.onresize = resize_iframe;



 HTML :



                                                     
   width="100%" onload="resize_iframe('IframeHome')"  >

Src : http://guymal.com/mycode/100_percent_iframe/

Google Area chart in Asp.net

2009-11-10T22:36:00.001-08:00

Stunning charts on the web page makes the user to stare on the screen for long time and use it more often. Yes charts really convey many messages in one shot.

To implement charts in Asp.net we have 2 best options.
1. Microsoft Charts
2. Google Chart API.

Microsoft Charts :
* Advantages:
1. Easy to use.
2. No third party components.
3. Attractive and pleasing.
4. Quality of charts are superb.
5. Offcourse it is free. :-) and no lic prob for this chart controls.
6. Supports complex charting and drill down charts and reports.

* Disadvantages
1. For more complex charts Server side code is complex and difficult.
2. Comparatively slow but the slowness is worth for the information and UI.

You can have more info from here on MS Charts Installing MS chart adding into vs 2008 toolbox and using MS chart with sample code

Google Charts :
Reference links : Google Chart Reference

*Advantages:
1. Very simple to design for simple charts
2. Light weighted and faster
3. Code is easy to understand and attributes are less to customize.
4. No installation setup is required works on javascript.
5. It is free.
* Disadvantages:
1. Since api works on online javascript so browser should be javascript enabled.
2. Presence of internet is a must.

Both has its own advantages and shortcomings but as a developer we must know what is required for us is the best.

Before generating a chart and displaying it was a nightmare and those who like to choose to develop or spend time on charts was used to called a "Hero of Developers" no matter whether it is a 3rd party component or develop by using HTML, tr, td, images, div and css combinations.

Google Chart Api like Google map api has a made a chart development tremendously easier and faster which almost a fresh student also can make it.

Here I am showing a simple Area graph using Google Chart API. It is so easy that anybody will feel no need of explanation on the html. It requires no serverside code only javascript.

Happy coding "Hero of Developers".


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



<html>

  <head>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>

    <script type="text/javascript">

      google.load("visualization", "1", {packages:["areachart"]});

      google.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = new google.visualization.DataTable();

        data.addColumn('string', 'Year');

        data.addColumn('number', 'Actual Targets achieved');

        data.addColumn('number', 'Projected Targets');



        data.addRows(9);

        data.setValue(0, 0, '2000');

        data.setValue(0, 1, 2);

        data.setValue(0, 2, 0);

       

        data.setValue(1, 0, '2001');

        data.setValue(1, 1, 30);

        data.setValue(1, 2, 25);



        data.setValue(2, 0, '2002');

        data.setValue(2, 1, 45);

        data.setValue(2, 2, 70);





        data.setValue(3, 0, '2003');

        data.setValue(3, 1, 85);

        data.setValue(3, 2, 80);



        data.setValue(4, 0, '2004');

        data.setValue(4, 1, 100);

        data.setValue(4, 2, 0);



        data.setValue(5, 0, '2005');

        data.setValue(5, 1, 20);

        data.setValue(5, 2, 0);

        

        data.setValue(6, 0, '');

        data.setValue(6, 1, 20);

        data.setValue(6, 2, 0);

        

        data.setValue(7, 0, '');

        data.setValue(7, 1, 20);

        data.setValue(7, 2, 0);

        

        data.setValue(8, 0, '');

        data.setValue(8, 1, 20);

        data.setValue(8, 2, 0);

         

        

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));

        chart.draw(data, { width: 600, height: 340, legend: 'bottom', title: ' Performance ' });

      }

    </script>

  </head>



  <body style="font-family:Calibri;">

    <div id="chart_div"></div>

  </body>

</html>

Server side variable in databinding

2009-11-08T21:07:00.000-08:00

Jquery Ajax Message reading techniques

2009-11-06T12:00:00.000-08:00

It is a time where almost every Asp.net web developer is aware of Jquery, its usage and ajax.

Using Jquery Ajax in Asp.net with JSON is no more a hot topic.

This is one of the ajax example below.


function LoadDropDown() {           
           $.ajax({
               type: "POST",
               url:  "http://localhost/Line/JqueryMethods/JqueryAjax.aspx/LoadCountries",
               data: "{}",
               contentType: "application/json; charset=utf-8",
               dataType: "json",
               success: function(msg) {
               $("<option value='0'>Select</option>").appendTo('#<%=ddlCountries.ClientID %>');
               $('#<%=imgCountry.ClientID %>').attr("Src", ("Common/_assets/img/flags/XX.png"));
           for (var i = 0; i <= msg.d.length - 1; i++) {
              $("<option value='" + msg.d[i].ID + "'>" +

  msg.d[i].COUNTRY1 + ":" + msg.d[i].TLD + "</option>").appendTo('#<%=ddlCountries.ClientID %>');

here I want to show how to read the return value of the server side method.

I had a big issue once with asp.net 2.0 , 3.5 and different version of jquery.

so if any one have issues on how to read the return values then here is below

note: above example is reading a List<> object.

1. msg

function(msg) {

$('#Divid').html(eval(msg)) ;

2. msg.d

function(msg) {

$('#Divid').html(eval(msg.d)) ;

3. eval('(' + msg + ')').d

function(msg) {

$('#Divid').html(eval('(' + msg + ')').d)

I spent more than 4 hrs on this ways because of no clue, whether using 3.5 sp1, or different versions of jquery. But just using "debugger;" we can easily findout which is suitable.

Happy coding ;)

Tree structure in MSSQL 2005 Hierarchy.( Comment child lists )

2009-10-12T03:07:00.000-07:00

Here comes another approach to build the tree structure - hierarchial flow of information. This is an simple and raw approach but effective to show the structure of hierarchy.

Let us create the database now....



GO
/****** Object:  Table [dbo].[Comments]    Script Date: 10/12/2009 14:06:05 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Comments](
   [ID] [int] IDENTITY(1,1) NOT NULL,
   [Type] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
   [Comment] [varchar](800) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
   [Title] [varchar](30) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
   [CreatedBy] [uniqueidentifier] NULL,
   [CreateTime] [datetime] NULL,
   [ModifiedBy] [uniqueidentifier] NULL,
   [Modifiedtime] [datetime] NULL,
   [IPAddress] [varchar](18) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
   [RefComment] [int] NULL,
   [Blocked] [bit] NULL,
   [Rating] [int] NULL,
   [ImageURL] [varchar](200) COLLATE SQL_Latin1_General_CP1_CI_AS NULL CONSTRAINT [DF_Comments_ImageURL]  DEFAULT ('a'),
CONSTRAINT [PK_Comments] PRIMARY KEY CLUSTERED
(
   [ID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

GO
SET ANSI_PADDING OFF

Now Stored Procedure.


set ANSI_NULLS ON
set QUOTED_IDENTIFIER ON
go

ALTER PROC [dbo].[ShowComments]
(
   @Root int
)
AS
BEGIN
   SET NOCOUNT ON
   DECLARE @ID int, @Comments varchar(2800)   
   --SET @Comments = (SELECT id+'*Comments*'+Comment+'*CreatedBy*'+CreatedBy+'*CreateTime*'+CreateTime+'*IPAddress*'+IPAddress+'*Rating*'+Rating+'*ImageURL*'+ImageURL FROM comments WHERE ID = @Root)
  
  --SET @Comments = (SELECT '<root><id>'+CAST(id as varchar(10))+'</id><comment>'+Comment+'</comment><createdby>'+CAST(CreatedBy as varchar(36))+'</createdby><createdtime>'+CAST(CreateTime as varchar(15))+'</createdtime><ip>'+CAST(IPAddress as varchar(15)) +'<ip><image>'+ ImageURL +'</image><rating>'+CAST(Rating as varchar(15))+'</rating></root>' FROM comments  WHERE ID = @Root)
SET @Comments = (SELECT '<root><id>'+CAST(id as varchar(10))+'</id><comment>'+Comment+'</comment><createdby>'+CAST(CreatedBy as varchar(36))+'</createdby><createdtime>'+Convert(nvarchar,CreateTime,103)+' '+Convert(nvarchar,CreateTime,114) +'</createdtime><ip>'+CAST(IPAddress as varchar(15)) +'<ip><image>'+ ImageURL +'</image><rating>'+CAST(Rating as varchar(15))+'</rating></root>' FROM comments  WHERE ID = @Root)
PRINT REPLICATE('-', @@NESTLEVEL * 4) + @Comments
   SET @ID = (SELECT MIN(ID) FROM comments WHERE RefComment = @Root )
   WHILE @ID IS NOT NULL
   BEGIN   
       EXEC ShowComments @ID
   SET @ID = (SELECT MIN(ID) FROM comments WHERE RefComment = @Root AND ID > @ID )
   END
END

MSSql Hierarchial- Comment like tree structure.

2009-10-12T02:50:00.001-07:00

Approach 1:


USE [StudentInfo]
GO
/****** Object:  Table [dbo].[Testcomments]    Script Date: 10/12/2009 13:51:08 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Testcomments](
[Id] [int] IDENTITY(1,1) NOT NULL,
[DeviceType] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
[ParentId] [int] NULL,
CONSTRAINT [PK_Testcomments] PRIMARY KEY CLUSTERED
(
[Id] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

GO
SET ANSI_PADDING OFF

INSERT [dbo].[Testcomments] ([Id], [DeviceType], [ParentId]) VALUES (1, N'Object ', NULL)
INSERT [dbo].[Testcomments] ([Id], [DeviceType], [ParentId]) VALUES (2, N'WebServer', 4)
INSERT [dbo].[Testcomments] ([Id], [DeviceType], [ParentId]) VALUES (3, N'Database Server', 4)
INSERT [dbo].[Testcomments] ([Id], [DeviceType], [ParentId]) VALUES (4, N'Server', 1)
INSERT [dbo].[Testcomments] ([Id], [DeviceType], [ParentId]) VALUES (5, N'File Server', 4)
INSERT [dbo].[Testcomments] ([Id], [DeviceType], [ParentId]) VALUES (6, N'Mail Server ', 4)
INSERT [dbo].[Testcomments] ([Id], [DeviceType], [ParentId]) VALUES (7, N'IIS web server', 2)
INSERT [dbo].[Testcomments] ([Id], [DeviceType], [ParentId]) VALUES (8, N'Virtual servers', 4)
INSERT [dbo].[Testcomments] ([Id], [DeviceType], [ParentId]) VALUES (9, N'V S Guest OS', 8)
INSERT [dbo].[Testcomments] ([Id], [DeviceType], [ParentId]) VALUES (10, N'VS Hosts', 8)
INSERT [dbo].[Testcomments] ([Id], [DeviceType], [ParentId]) VALUES (11, N'New master', NULL)
INSERT [dbo].[Testcomments] ([Id], [DeviceType], [ParentId]) VALUES (12, N'new master child', 11)
INSERT [dbo].[Testcomments] ([Id], [DeviceType], [ParentId]) VALUES (13, N'new child1', 12)
INSERT [dbo].[Testcomments] ([Id], [DeviceType], [ParentId]) VALUES (14, N'new child2', 13)
INSERT [dbo].[Testcomments] ([Id], [DeviceType], [ParentId]) VALUES (15, N'new child4', 11)
INSERT [dbo].[Testcomments] ([Id], [DeviceType], [ParentId]) VALUES (16, N'new child5', 12)
INSERT [dbo].[Testcomments] ([Id], [DeviceType], [ParentId]) VALUES (17, N'new child6', 12)
INSERT [dbo].[Testcomments] ([Id], [DeviceType], [ParentId]) VALUES (19, N'new child7', 13)

Stored procedure


set ANSI_NULLS ON
set QUOTED_IDENTIFIER ON
go

-- this can be used when we know the last child node of the tree

alter PROC [dbo].[TestHierar]
AS
BEGIN
 declare @ID int
 set @ID = 19;
--SET @ID = (SELECT max(ID) FROM dbo.TestComments )
with Hierarchy(ParentID,ID,level,Devicetype,Sort) As
 (

     Select ParentId,Id,0,DeviceType,cast(DeviceType as nvarchar(1024))
     from testcomments
where  Id= @ID
     union all
    select dt.ParentId, dt.ID, level+1,dt.DeviceType , cast(Sort +'|'+dt.Devicetype as nvarchar(1024))
    from TestComments dt inner join hierarchy h on dt.Id = h.parentId
)
,HierarchyReverse(ParentID,ID, level, DeviceType, Sort) as

(
select parentId, Id, 0, DeviceType, Cast(DeviceType as nvarchar(1024))
from hierarchy
where parentId is null
union all
Select h.parentId,h.id,hr.LEVEL+1, h.deviceType, cast(hr.Sort + '|' +h.sort as nvarchar(1024))
from Hierarchy h inner join HierarchyReverse hr on h.ParentId = hr.ID
)
select Id, ParentId, DeviceType, Level,Sort
from HierarchyReverse
order by sort


END

Key Points:

This approach is easy and very helpful to display the hierarchy either in treeview or any div structure using Jquery. Unfortunately it is helpful only when you have the last child id.

In stored proc for @ID you need to send the last child id.

There is an another approach of simple hierarchial structure in MSSQL 2005 in my next article.

Extract Internal and External CSS into a string using Javascript

2009-09-24T01:30:00.000-07:00

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

2009-09-02T00:18:00.002-07:00

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

iTextsharp simple Image to PDF c#

2009-08-27T03:12:00.000-07:00

Very simple code.


public void ImagetoPDF()
   {
       string pdfpath = Server.MapPath("PDFs");
       string imagepath = Server.MapPath("Images");
       Document doc = new Document();
       try
       {
           PdfWriter.GetInstance(doc, new FileStream(pdfpath + "/Images.pdf", FileMode.Create));
           doc.Open();        
           iTextSharp.text.Image png = iTextSharp.text.Image.GetInstance(Server.MapPath("") + "/testasp3.gif");
           png.ScaleToFit(475f, 1500f);
           doc.Add(png);
       }
       catch (DocumentException dex)
       {
           Response.Write(dex.Message);
       }
       catch (IOException ioex)
       {
           Response.Write(ioex.Message);
       }
       catch (Exception ex)
       {
           Response.Write(ex.Message);
       }
       finally
       {
           doc.Close();
           Response.Redirect("PDFs/Images.pdf");
       }
   }

Wireless Zero Configuration auto start on boot

2009-08-26T12:24:00.000-07:00

Start > Run > sc config wzcsvc start= auto&sc start wzcsvc

Done. :)

UserControl Javascript Worst problem and Best Solution

2009-08-26T09:36:00.001-07:00

Working on Jquery is fun and exciting. Same time it makes us to scratch our head countless times. :)

I was making a User Control which will have a dropdown and a image control, in which dropdown which loads countries.
On selecting a country in dropdown it has to show selected country flag image and the tooltip is to show the details of the country yes without any postback and using Jquery.

It was simple and used this...


protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.ddlCountries.Attributes.Add("onchange", "getCountryDescription()");
}
}

and ASPX:


<script type="text/javascript">
function getCountryDescription() {
$.ajax({
type: "POST",
url: "http://localhost/OnActionC/JqueryMethods/JqueryAjax.aspx/LoadFlag",
data: "{'StrCountryText':'" + $("#<%=ddlCountries.ClientID %> option:selected").text() + "', 'StrCountryValue':'" + $('#<%=ddlCountries.ClientID %>').val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {   
    $('#<%=imgCountry.ClientID %>').attr("Src", (msg.d[0]));
    $('#<%=imgCountry.ClientID %>').attr("title", (msg.d[1]));
}
});
}
</script>


<div>
<asp:DropDownList ID="ddlCountries"  class="grey"  ForeColor="#FAFAFA" style="font-size:0.8em; background-color:#414141;"   runat="server"  >
</asp:DropDownList>
<a href="#"  runat="server" id="countrytooltip" >
<img id="imgCountry" runat="server" alt=""  />
</a>
</div>

This was pretty good and I used this user control in a screen which has 2 seperate controls in a single page...

Ohh!! there is a problem...i found.. we are calling a single function getCountryDescription

for both controls, even though the contorlid of individual are different it was causing the problem since one control was refereing to other...

So the possible solutions are :

1. Better create as many as functions as we use the user control in a single page.

Ohhh!! no... I cant do this... I cant afford to deal with this messy issue.

2. So the next idea was to make the function dynamic , yes so each control will refer to its corresponding function only, so the possible way is to play with ClientId.

then I made the following changes.


function getCountryDescription<%=ddlCountries.ClientID %>() {
     $.ajax({
         type: "POST",
         url: "http://localhost/OnActionC/JqueryMethods/JqueryAjax.aspx/LoadFlag",
         data: "{'StrCountryText':'" + $("#<%=ddlCountries.ClientID %> option:selected").text() + "', 'StrCountryValue':'" + $('#<%=ddlCountries.ClientID %>').val() + "'}",
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         success: function(msg) {            
             $('#<%=imgCountry.ClientID %>').attr("Src", (msg.d[0]));
             $('#<%=imgCountry.ClientID %>').attr("title", (msg.d[1]));
         }
     });
 }

and


protected void Page_Load(object sender, EventArgs e)
  {
      if (!IsPostBack)
      {
          this.ddlCountries.Attributes.Add("onchange", "getCountryDescription"+this.ddlCountries.ClientID+"()");
      }
  }

in c#.

Yes now i am able to use as many as user controls as i wish...

Happy coding.

Jquery javascript Dropdown selected value , Text

2009-08-26T01:29:00.000-07:00

How to get the selected value of the dropdown in Jquery

var StrCountryValue = $('#<%=ddlCountries.ClientID %>').val();

to get selected text of the dropdown

var StrCountryText = $("#<%=ddlCountries.ClientID %> option:selected").text();

Infinity Scrolling

2009-08-21T14:06:00.000-07:00

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

<!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 id="Head1" runat="server">
<title>Untitled Page</title>

<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
var pageIndex = 1; // page number (if set to -1 no additional calls will be made)
var pageSize = 10; // number of records to display per page
var count = 20; // total counter

// function OnDivScroll() {
$('#content').scroll(function() {
// if there is more to show

if (pageIndex != -1) {
// get content
var content = document.getElementById('<%=content.ClientID %>');

if (content.scrollTop < content.scrollHeight - 500)
return;

// leave this method if loading is in progress
var indicator = document.getElementById('indicator');
if (indicator.style.display == '')
return;
// Get data for next page
pageIndex += 1;
indicator.style.display = '';
// CountryWS.GetMoreCountriesObject(pageIndex, pageSize, HandleRetrievedData);
var abdd = '';

debugger;
alert('going to ajax');
$.ajax({
type: "POST",
data:"{}",
url: "http://localhost/OnActionC/Common/UserControls/Lab/InfiniteScroll.aspx/a",
// data: "pageIndex=" + pageIndex + "&pageSize=" + pageSize,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
alert(msg.d);
//$("#ya").attr("value", msg.d);

}
});

}
});
});

function HandleRetrievedData(result) {
var indicator = document.getElementById('indicator');
var content = document.getElementById('<%=content.ClientID %>');

// Parse if web service returned data, otherwise stop calling it
if (result.length > 0) {
// calculate and show total number of items
count += result.length;
document.getElementById('divCount').innerHTML = count + " countries loaded."

// iterate through result set and create a div for each item
for (var i = 0; i <= result.length - 1; i++) {
indicator.style.display = 'none';
content.innerHTML += "<div class='entry'><b>" +
result[i].CountryName + "</b> (" + result[i].Symbol + ") - " +
result[i].InternetUsers + " internet user(s)</div>";
}
}
else {
pageIndex = -1;
document.getElementById('divCount').innerHTML += " All items has been loaded.";
indicator.style.display = 'none';
}
}

</script>

</head>
<body>
<form id="form1" runat="server">
<%--<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/CountryWS.asmx" />
</Services>
</asp:ScriptManager>--%>
<div>
<div class="header">
<b>List of countries having more than a million internet users</b></div>
<div class="container">
<div id="content" runat="server" >
<%--Items will be rendered here--%>
</div>
<div id="indicator" style="display: none;">
Loading more items...
</div>
</div>
<div id="divCount">
20 countries loaded.
</div>
</div>
</form>
</body>
</html>

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Collections.Generic;

public partial class Common_UserControls_Lab_InfiniteScroll : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{
CountryClass a = new CountryClass();
this.GetAllCountryDetails(1, 20);

//string newItems = "";
//for (int i = 0; i < countries.Count; i++)
//{
// newItems += "

" + countries[i].CAPITAL + " (" + countries[i].COUNTRY1+ ") - " + countries[i].CURRENCY + "

";
//}
//content.InnerHtml = newItems;

}

[System.Web.Services.WebMethod]
public static void a()
{
}
// [System.Web.Services.WebMethod]
public void GetAllCountryDetails(int PageIndex, int PageSize)
{
GeneralDataContext db = new GeneralDataContext();

var objCountry = from p in db.Countries// orderby p.COUNTRY1
select p;// select new { p.ID, p.CAPITAL, p.COUNTRY1, p.CURRENCY, p.ISO2, p.ISO3, p.POPULATION, p.REGIONS, p.TLD };
objCountry = objCountry.Skip((PageIndex - 1) * PageSize).Take(PageSize);
// List objCountryList = new List();
List countries= objCountry.ToList();

string newItems = "";
for (int i = 0; i < countries.Count; i++)
{
newItems += "

" + countries[i].CAPITAL + " (" + countries[i].COUNTRY1 + ") - " + countries[i].CURRENCY + "

";
}
content.InnerHtml = newItems;

}
}

System.InvalidOperationException: Cannot serialize the DataTable.

2009-08-06T01:55:00.000-07:00

I cracked my head on this problem

System.InvalidOperationException: Cannot serialize the DataTable. to get a datatable as return from a webservice.

The solution is simple:

Just give a name to the datatable then you will be able to call the datatable object .

Enjoy coding. :)

Google chrome OS Vs Microsoft OS

2009-07-08T12:13:00.000-07:00

oogle Chrome OS is the new Open source project. Google Chrome OS is lightweight operating system with Speed, simplicity and security as key aspects. Google Chrome OS will be available for consumers in the second half of 2010.

Expected Features of Google Chrome OS

1. Speed, simplicity and security

2. Fast and lightweight, to start up and get you onto the web in a few seconds

3. Minimum Users Interface

4. Google Chrome OS will run on both x86 as well as ARM chips

5. All web-based applications will automatically work

6. It's Linux-based.

7. The whole package will be open source.

8. Chrome OS is not a traditional desktop operating system

9. How much will it cost me?

It is priceless ha ha.. yes Nothing it will be free.

Google Chrome OS is being created for people who spend most of their time on the web, and is being designed to power computers ranging from small netbooks to full-size desktop systems.

Unable to attach to application 'WebDev.WebServer.EXE

2009-07-06T23:54:00.000-07:00

Solution :

stop this.

Firefox Proxy Server Refused Connection Problem

2009-06-18T02:36:00.000-07:00

Simple solution:

Tools > Options > Advanced > Network > Settings. Then simply tick a ‘No Proxy’.

done.

Jquery slide,show,hide problem in masterpage

2009-06-12T02:45:00.000-07:00

   1:  <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="Common_UserControls_MasterPage" %>

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

   3:  <%@ Register Src="~/Common/UserControls/Login.ascx" TagPrefix="UC" TagName="Login" %>

4:

5:

   6:  <html xmlns="http://www.w3.org/1999/xhtml">

   7:  <head runat="server">

8:

   9:   <title></title>

10:

  11:      <link href="../_assets/css/style.css" rel="stylesheet" type="text/css" />

  12:      <link href="../_assets/css/slide.css" rel="stylesheet" type="text/css" />

  13:      <link href="../../JqueryUI/themes/base/ui.all.css" rel="stylesheet" type="text/css" />

  14:      <link href="../../JqueryUI/themes/redmond/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" />

  15:       <script type="text/javascript"  src='<%=ResolveUrl("../Scripts/jQuery/jquery-1.3.2.min.js")%>'>  </script>

  16:       <script type="text/javascript"  src='<%=ResolveUrl("../Scripts/slide.js")%>'> </script>

  17:       <script type="text/javascript" src='<%=ResolveUrl("../../JqueryUI/ui/ui_demos.js")%>'></script>

  18:      <link href="../_assets/css/jquery.notice.css" rel="stylesheet" type="text/css" />

  19:       <script type="text/javascript" src='<%=ResolveUrl("../Scripts/jQuery/jquery.notice.js")%>'></script>

  20:       <script type="text/javascript" charset="utf-8">

  21:           $(document).ready(function() {

  22:               //Page Flip on hover

  23:               $("#pageflip").hover(function() {

  24:                   $("#pageflip img , .msg_block").stop()

  25:              .animate({

  26:                  width: '307px',

  27:                  height: '319px'

  28:              }, 500);

  29:               }, function() {

  30:                   $("#pageflip img").stop()

  31:              .animate({

  32:                  width: '50px',

  33:                  height: '52px'

  34:              }, 220);

  35:                   $(".msg_block").stop()

  36:              .animate({

  37:                  width: '50px',

  38:                  height: '50px'

  39:              }, 200);

  40:               });

  41:           });

  42:  </script>

43:

44:

  45:      <script type="text/javascript" src='<%=ResolveUrl("../Scripts/jQuery/jquery.lazyload.mini.js")%>'></script>

  46:      <script src="../Scripts/jQuery/jquery-1.2.6-vsdoc.js" type="text/javascript"></script>

  47:       <script type="text/javascript" charset="utf-8">

  48:           $(function() {

  49:               $("img").lazyload({ threshold: 200 });

  50:           });

51:

  52:    </script>

  53:   <script type="text/javascript" src='<%=ResolveUrl("../Scripts/mint.js")%>'></script>

  54:   <script type="text/javascript" src='<%=ResolveUrl("../Scripts/ui.core.js")%>'></script>

  55:   <script type="text/javascript" src='<%=ResolveUrl("../Scripts/ui.notificationmsg.js")%>'></script>

  56:  <%-- <script type="text/javascript" src='<%=ResolveUrl("../Scripts/firebug-lite-compressed.js")%>'></script>--%>

57:

  58:        <script type="text/javascript">

  59:            $(document).ready(function() {

60:

  61:                $('#msg1').notificationmsg({ period: 2500 });

  62:                $('#btnfade').click(onClick);

  63:                $('#btnslide').click(onClick);

  64:                $('#btnslidethru').click(onClick);

  65:                $('#closebutton').click(function() { $('#msg1').notificationmsg('hide'); });

  66:                Center();

  67:                function onClick(e) {

  68:                    debugger;

  69:                    var animStyle = 'slide'

  70:                    if (e.srcElement) {

  71:                        if (e.srcElement.id === 'btnfade') {

  72:                            animStyle = 'fade';

  73:                        }

  74:                        else if (e.srcElement.id === 'btnslide') {

  75:                            animStyle = 'slide';

  76:                        }

  77:                        else {

  78:                            animStyle = 'slidethru';

  79:                        }

  80:                    }

  81:                    else {

  82:                        if (e.target.id === 'btnfade') {

  83:                            animStyle = 'fade';

  84:                        }

  85:                        else if (e.target.id === 'btnslide') {

  86:                            animStyle = 'slide';

  87:                        }

  88:                        else {

  89:                            animStyle = 'slidethru';

  90:                        }

  91:                    }

  92:                    $.ajax({

  93:                        type: "POST",

  94:                        url: "http://localhost/onactiond/Default.aspx/GetMessages",

  95:                        data: "{}",

  96:                        contentType: "application/json; charset=utf-8",

  97:                        dataType: "json",

  98:                        success: function(msg) {

  99:                            debugger;

 100:                            $("#modalbody").text("(" + msg.d + ")");

 101:                            $('#msg1').notificationmsg({ animation: animStyle });

 102:                            $('#msg1').notificationmsg('show');

 103:                        },

 104:                        error: function(xhr, msg, e) {

 105:                            debugger;

 106:                            alert(msg);

 107:                        }

 108:                    });

 109:                }

 110:                function Center() {

 111:                    var width = document.documentElement.clientWidth + document.documentElement.scrollLeft;

 112:                    var height = document.documentElement.clientHeight + document.documentElement.scrollTop;

 113:

 114:                    var top = ((height + document.documentElement.scrollTop) / 2) - ($('#centerdiv').height() / 2) + "px";

 115:

 116:                    var left = (width / 2) - ($('#centerdiv').width() / 2) + "px";

 117:                    $('#centerdiv').css({ position: "absolute", top: top, left: left });

 118:                }

 119:

 120:                $('button.add').click(function() {

 121:                    var abdd = '';

 122:                    $.ajax({

 123:                        type: "POST",

 124:                        url: "http://localhost/onactiond/Simple.aspx/GetTime",

 125:                        data: "{}",

 126:                        contentType: "application/json; charset=utf-8",

 127:                        dataType: "json",

 128:                        success: function(msg) {

 129:                            //$("#ya").attr("value", msg.d);

 130:                            jQuery.noticeAdd({

 131:                                text: msg.d,

 132:                                stay: true

 133:                            });

 134:                        }

 135:                    });

 136:                });

 137:

 138:                $('button.add2').click(function() {

 139:                    jQuery.noticeAdd({

 140:                        text: 'This is a notification that does not stay',

 141:                        stay: false

 142:                    });

 143:                });

 144:

 145:                $('button.remove').click(function() {

 146:                    jQuery.noticeRemove($('.notice-item-wrapper'), 400);

 147:                });

 148:

 149:            });

 150:      </script>

 151:

 152:  <style type="text/css">

 153:  img { behavior: url(iepngfix.htc) }

 154:  #pageflip {

 155:      position: relative;

 156:      right: 0; top: 0;

 157:      float: right;

 158:  }

 159:  #pageflip img {

 160:      width: 50px; height: 52px;

 161:      z-index: 99;

 162:      position: absolute;

 163:      right: 0; top: 0;

 164:      -ms-interpolation-mode: bicubic;

 165:  }

 166:

 167:  #pageflip .msg_block {

 168:      width: 50px; height: 50px;

 169:      overflow: hidden;

 170:      position: absolute;

 171:      right: 0; top: 0;

 172:

 173:  background-color:Gray;

 174:   background-image : url(../AppImage/icon-woman.gif);

 175:  }

 176:

 177:  </style>

 178:          <asp:ContentPlaceHolder id="head" runat="server">

 179:          </asp:ContentPlaceHolder>

 180:

 181:  </head>

 182:

 183:

 184:      <%-- <script type="text/javascript"  language="javascript" >

 185:       $(document).ready(function()

 186:        {

 187:           $("a[href$='.pdf']").before("<img src='../_assets/img/icon_pdf.gif'/>");

 188:         })

 189:       </script>--%>

 190:  <body>

 191:   <img src='<%=ResolveUrl("tracker.aspx")%>'  width="1px" height="1px" alt=""/>

 192:

 193:      <form id="form1" runat="server">

 194:     <div>

 195:          <div  style="width:100%";>

 196:      <div id="pageflip">

 197:          <a><img src='<%=ResolveUrl("../_assets/img/page_flip.png")%>' alt="" /></a>

 198:          <div class="msg_block"></div>

 199:      </div>

 200:      </div>

 201:        <UC:Login runat="server" id="uclogin"></UC:Login>

 202:       <div>

 203:              <div id="centerdiv" style="display:inline; text-align:center">

 204:                  <input id="btnfade" type="button" value="Get Messages [Fade]" /><br />

 205:                  <input id="btnslide" type="button" value="Get Messages [Slide]" /><br />

 206:                  <input id="btnslidethru" type="button" value="Get Messages [SlideThru]" />

 207:              </div>

 208:              <div id="msg1">

 209:                  <div id="modal">

 210:                      <div class="modaltop">

 211:                          <div class="modaltitle">My Inbox</div>

 212:                          <span id="closebutton" style="CURSOR: hand">

 213:                              <img alt="Hide Popup" src="styles/img/close_vista.gif" border="0" />

 214:                          </span>

 215:                      </div>

 216:                      <div class="modalbody">

 217:                          You received <strong><span id="modalbody"></span></strong>&nbsp;Email(s).

 218:                      </div>

 219:                  </div>

 220:              </div>

 221:          </div>

 222:          <asp:ContentPlaceHolder id="ContentPlaceHolder1"  runat="server">

 223:          </asp:ContentPlaceHolder>

 224:           <p class="clearfix">

 225:                  <button class="add">Add sticky notice</button>

 226:                  <button class="add2">Add normal notice</button>

 227:                  <button class="remove">Revome all notices</button>

 228:              </p>

 229:           <asp:ContentPlaceHolder id="ContentPlaceHolderFooter" runat="server">

 230:          </asp:ContentPlaceHolder>

 231:      </div>

 232:      </form>

 233:  </body>

 234:  </html>

Jquery slide,show,hide problem in masterpage

2009-06-12T02:15:00.000-07:00

   1:  <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="Common_UserControls_MasterPage" %>

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

   3:  <%@ Register Src="~/Common/UserControls/Login.ascx" TagPrefix="UC" TagName="Login" %>

4:

5:

   6:  <html xmlns="http://www.w3.org/1999/xhtml">

   7:  <head runat="server">

8:

   9:   <title></title>

10:

  11:      <link href="../_assets/css/style.css" rel="stylesheet" type="text/css" />

  12:      <link href="../_assets/css/slide.css" rel="stylesheet" type="text/css" />

  13:      <link href="../../JqueryUI/themes/base/ui.all.css" rel="stylesheet" type="text/css" />

  14:      <link href="../../JqueryUI/themes/redmond/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" />

  15:       <script type="text/javascript"  src='<%=ResolveUrl("../Scripts/jQuery/jquery-1.3.2.min.js")%>'>  </script>

  16:       <script type="text/javascript"  src='<%=ResolveUrl("../Scripts/slide.js")%>'> </script>

  17:       <script type="text/javascript" src='<%=ResolveUrl("../../JqueryUI/ui/ui_demos.js")%>'></script>

  18:      <link href="../_assets/css/jquery.notice.css" rel="stylesheet" type="text/css" />

  19:       <script type="text/javascript" src='<%=ResolveUrl("../Scripts/jQuery/jquery.notice.js")%>'></script>

  20:       <script type="text/javascript" charset="utf-8">

  21:           $(document).ready(function() {

  22:               //Page Flip on hover

  23:               $("#pageflip").hover(function() {

  24:                   $("#pageflip img , .msg_block").stop()

  25:              .animate({

  26:                  width: '307px',

  27:                  height: '319px'

  28:              }, 500);

  29:               }, function() {

  30:                   $("#pageflip img").stop()

  31:              .animate({

  32:                  width: '50px',

  33:                  height: '52px'

  34:              }, 220);

  35:                   $(".msg_block").stop()

  36:              .animate({

  37:                  width: '50px',

  38:                  height: '50px'

  39:              }, 200);

  40:               });

  41:           });

  42:  </script>

43:

44:

  45:      <script type="text/javascript" src='<%=ResolveUrl("../Scripts/jQuery/jquery.lazyload.mini.js")%>'></script>

  46:      <script src="../Scripts/jQuery/jquery-1.2.6-vsdoc.js" type="text/javascript"></script>

  47:       <script type="text/javascript" charset="utf-8">

  48:           $(function() {

  49:               $("img").lazyload({ threshold: 200 });

  50:           });

51:

  52:    </script>

  53:   <script type="text/javascript" src='<%=ResolveUrl("../Scripts/mint.js")%>'></script>

  54:   <script type="text/javascript" src='<%=ResolveUrl("../Scripts/ui.core.js")%>'></script>

  55:   <script type="text/javascript" src='<%=ResolveUrl("../Scripts/ui.notificationmsg.js")%>'></script>

  56:  <%-- <script type="text/javascript" src='<%=ResolveUrl("../Scripts/firebug-lite-compressed.js")%>'></script>--%>

57:

  58:        <script type="text/javascript">

  59:            $(document).ready(function() {

60:

  61:                $('#msg1').notificationmsg({ period: 2500 });

  62:                $('#btnfade').click(onClick);

  63:                $('#btnslide').click(onClick);

  64:                $('#btnslidethru').click(onClick);

  65:                $('#closebutton').click(function() { $('#msg1').notificationmsg('hide'); });

  66:                Center();

  67:                function onClick(e) {

  68:                    debugger;

  69:                    var animStyle = 'slide'

  70:                    if (e.srcElement) {

  71:                        if (e.srcElement.id === 'btnfade') {

  72:                            animStyle = 'fade';

  73:                        }

  74:                        else if (e.srcElement.id === 'btnslide') {

  75:                            animStyle = 'slide';

  76:                        }

  77:                        else {

  78:                            animStyle = 'slidethru';

  79:                        }

  80:                    }

  81:                    else {

  82:                        if (e.target.id === 'btnfade') {

  83:                            animStyle = 'fade';

  84:                        }

  85:                        else if (e.target.id === 'btnslide') {

  86:                            animStyle = 'slide';

  87:                        }

  88:                        else {

  89:                            animStyle = 'slidethru';

  90:                        }

  91:                    }

  92:                    $.ajax({

  93:                        type: "POST",

  94:                        url: "http://localhost/onactiond/Default.aspx/GetMessages",

  95:                        data: "{}",

  96:                        contentType: "application/json; charset=utf-8",

  97:                        dataType: "json",

  98:                        success: function(msg) {

  99:                            debugger;

 100:                            $("#modalbody").text("(" + msg.d + ")");

 101:                            $('#msg1').notificationmsg({ animation: animStyle });

 102:                            $('#msg1').notificationmsg('show');

 103:                        },

 104:                        error: function(xhr, msg, e) {

 105:                            debugger;

 106:                            alert(msg);

 107:                        }

 108:                    });

 109:                }

 110:                function Center() {

 111:                    var width = document.documentElement.clientWidth + document.documentElement.scrollLeft;

 112:                    var height = document.documentElement.clientHeight + document.documentElement.scrollTop;

 113:

 114:                    var top = ((height + document.documentElement.scrollTop) / 2) - ($('#centerdiv').height() / 2) + "px";

 115:

 116:                    var left = (width / 2) - ($('#centerdiv').width() / 2) + "px";

 117:                    $('#centerdiv').css({ position: "absolute", top: top, left: left });

 118:                }

 119:

 120:                $('button.add').click(function() {

 121:                    var abdd = '';

 122:                    $.ajax({

 123:                        type: "POST",

 124:                        url: "http://localhost/onactiond/Simple.aspx/GetTime",

 125:                        data: "{}",

 126:                        contentType: "application/json; charset=utf-8",

 127:                        dataType: "json",

 128:                        success: function(msg) {

 129:                            //$("#ya").attr("value", msg.d);

 130:                            jQuery.noticeAdd({

 131:                                text: msg.d,

 132:                                stay: true

 133:                            });

 134:                        }

 135:                    });

 136:                });

 137:

 138:                $('button.add2').click(function() {

 139:                    jQuery.noticeAdd({

 140:                        text: 'This is a notification that does not stay',

 141:                        stay: false

 142:                    });

 143:                });

 144:

 145:                $('button.remove').click(function() {

 146:                    jQuery.noticeRemove($('.notice-item-wrapper'), 400);

 147:                });

 148:

 149:            });

 150:      </script>

 151:

 152:  <style type="text/css">

 153:  img { behavior: url(iepngfix.htc) }

 154:  #pageflip {

 155:      position: relative;

 156:      right: 0; top: 0;

 157:      float: right;

 158:  }

 159:  #pageflip img {

 160:      width: 50px; height: 52px;

 161:      z-index: 99;

 162:      position: absolute;

 163:      right: 0; top: 0;

 164:      -ms-interpolation-mode: bicubic;

 165:  }

 166:

 167:  #pageflip .msg_block {

 168:      width: 50px; height: 50px;

 169:      overflow: hidden;

 170:      position: absolute;

 171:      right: 0; top: 0;

 172:

 173:  background-color:Gray;

 174:   background-image : url(../AppImage/icon-woman.gif);

 175:  }

 176:

 177:  </style>

 178:          <asp:ContentPlaceHolder id="head" runat="server">

 179:          </asp:ContentPlaceHolder>

 180:

 181:  </head>

 182:

 183:

 184:      <%-- <script type="text/javascript"  language="javascript" >

 185:       $(document).ready(function()

 186:        {

 187:           $("a[href$='.pdf']").before("<img src='../_assets/img/icon_pdf.gif'/>");

 188:         })

 189:       </script>--%>

 190:  <body>

 191:   <img src='<%=ResolveUrl("tracker.aspx")%>'  width="1px" height="1px" alt=""/>

 192:

 193:      <form id="form1" runat="server">

 194:     <div>

 195:          <div  style="width:100%";>

 196:      <div id="pageflip">

 197:          <a><img src='<%=ResolveUrl("../_assets/img/page_flip.png")%>' alt="" /></a>

 198:          <div class="msg_block"></div>

 199:      </div>

 200:      </div>

 201:        <UC:Login runat="server" id="uclogin"></UC:Login>

 202:       <div>

 203:              <div id="centerdiv" style="display:inline; text-align:center">

 204:                  <input id="btnfade" type="button" value="Get Messages [Fade]" /><br />

 205:                  <input id="btnslide" type="button" value="Get Messages [Slide]" /><br />

 206:                  <input id="btnslidethru" type="button" value="Get Messages [SlideThru]" />

 207:              </div>

 208:              <div id="msg1">

 209:                  <div id="modal">

 210:                      <div class="modaltop">

 211:                          <div class="modaltitle">My Inbox</div>

 212:                          <span id="closebutton" style="CURSOR: hand">

 213:                              <img alt="Hide Popup" src="styles/img/close_vista.gif" border="0" />

 214:                          </span>

 215:                      </div>

 216:                      <div class="modalbody">

 217:                          You received <strong><span id="modalbody"></span></strong>&nbsp;Email(s).

 218:                      </div>

 219:                  </div>

 220:              </div>

 221:          </div>

 222:          <asp:ContentPlaceHolder id="ContentPlaceHolder1"  runat="server">

 223:          </asp:ContentPlaceHolder>

 224:           <p class="clearfix">

 225:                  <button class="add">Add sticky notice</button>

 226:                  <button class="add2">Add normal notice</button>

 227:                  <button class="remove">Revome all notices</button>

 228:              </p>

 229:           <asp:ContentPlaceHolder id="ContentPlaceHolderFooter" runat="server">

 230:          </asp:ContentPlaceHolder>

 231:      </div>

 232:      </form>

 233:  </body>

 234:  </html>

Simple Jquery Ajax : Server side Autocomplete and Server side data fetching

2009-06-11T01:50:00.000-07:00

Simple way of using the jquery ajax is here.

I tried to make use the [webMethod] calls of Jquery ajax on the same aspx page and to fetch the database data.

In this article will learn:

Here you will find simple solutions on

1. How to use jquery

2. How to use Jquery ajax.

3. How to use jquery to call server side method.

4. How to use Jqeury ajax to call aspx methods and update the controls on the page.

5. Learn Autocomplete implementation and Server side data fetching (even from database)

without any postback.

Source code below.

1. ASPX code

   1:  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Simple.aspx.cs" Inherits="Simple" %>

2:

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

4:

   5:  <html xmlns="http://www.w3.org/1999/xhtml">

   6:  <head runat="server">

   7:      <title></title>

8:

   9:      <link href="Common/_assets/css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />

  10:      <link href="Common/_assets/css/MyMessage.css" rel="stylesheet" type="text/css" />

  11:      <script src="Common/Scripts/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>

  12:      <script src="Common/Scripts/jQuery/jquery.autocomplete.js" type="text/javascript"></script>

13:

  14:      <script language="javascript" type="text/javascript">

  15:          var data = "";

  16:          $(document).ready(function() {

  17:              $("#Result").click(function() {

  18:                  $.ajax({

  19:                      type: "POST",

  20:                      url: "Simple.aspx/GetTime",

  21:                      data: "{}",

  22:                      contentType: "application/json; charset=utf-8",

  23:                      dataType: "json",

  24:                      success: function(msg) {

  25:                              $("#ya").attr("value", msg.d);

  26:                      }

  27:                  });

  28:              });

29:

30:

  31:              $.ajax({

  32:                  type: "POST",

  33:                  url: "Simple.aspx/LoadData",

  34:                  data: "{}",

  35:                  contentType: "application/json; charset=utf-8",

  36:                  dataType: "json",

  37:                  success: function(msg) {

  38:                      data = msg.d.split(" ");

  39:                      $("#ya").autocomplete(data);

  40:                  }

  41:              });

  42:          });

  43:      </script>

  44:  </head>

  45:  <body>

  46:      <form id="form1" autocomplete="true" runat="server">

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

  48:      </asp:ScriptManager>

  49:      <div>

  50:      Autocomplete text box : type a,b,c<input type="text" style="width:300px;" name="searchQuery"   id="ya" />

  51:      <input type="button" id="Result"  value="Get Server time now " name="Result"/>

  52:      <asp:Label runat="server" ID="lblinfo" ></asp:Label>

  53:      <div visible="false">

  54:      </div>

  55:      </div>

  56:      </form>

  57:  </body>

  58:  </html>

2 ASPX.CS Code

1: using System;

2: using System.Collections.Generic;

3: using System.Linq;

4: using System.Web;

5: using System.Web.UI;

6: using System.Web.UI.WebControls;

7:

8: public partial class Simple : System.Web.UI.Page

9: {

10: protected void Page_Load(object sender, EventArgs e)

11: {

12: }

13:

14: [System.Web.Services.WebMethod]

15: public static string GetTime()

16: {

17: return DateTime.Now.ToString();

18: //this.lblinfo.Text = "";

19: }

20:

21: #region "AutoComplete"

22: [System.Web.Services.WebMethod]

23: public static string LoadData()

24: {

25: // this function can fetch data from database

26: return "Aeroplane Apple Ambulance Border Crops Desalination Elephants Parrot ";

27: }

28: #endregion

29:

30: }

Screen shot and code is straight forward. if you problem to understand, I will be glad to help.