google

Newest Post

Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

Convert DataSet or DataTable into JSON in C#

| Tuesday, June 10, 2014
Read more »
 public string ConvertToJSON(DataSet ds)  
 {  
 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 = null;  
     foreach (DataRow dr in ds.Tables[0].Rows)  
     {  
       row = new Dictionary<string, object>();  
       foreach (DataColumn col in ds.Tables[0].Columns)  
       {  
         row.Add(col.ColumnName.Trim(), dr[col]);  
       }  
       rows.Add(row);  
     }  
     return serializer.Serialize(rows);  
 }  

Convert DataSet or DataTable into JSON in C#

Posted by : Stranger
Date :Tuesday, June 10, 2014
With 0comments

Dynamic Menu using HTML and CSS in ASP.Net

| Tuesday, March 25, 2014
Read more »
In this article we will create nested dynamic menus and submenus using CSS and HTML which all browsers support.
  
Let's start by creating a website as:
  1. Start - All Programs - Microsoft Visual Studio
  2. File - New Website - C# - Empty website (to avoid adding a master page)
  3. Give the web site a name such as NestedSubmenu or whatever you wish and specify the location
  4. Then right-click on Solution Explorer - Add New Item - Default.aspx page
Open the source view and use the list tag to create the Menu and Submenu. The source code 
<body> tag should be as in the following:

 <body bgcolor="#c0c0c0">  
   <form id="form2" runat="server">  
   <ulid="Ul1">  // for horizontal Main Menu Tab  
 <li><ahref="#" title ="Homepage" class="selected">About Us</a ></li >  
 <li ><a href ="#" title ="About us">Authors</ a ></li >  //for submenu  
 <li ><a href ="#" title ="Projects">Articles</a >  
 <ul>  
 <li ><a href ="#" title="Older projects">Older Articles</a > //for submenu  
 <ul>  
 <li> <a href ="#" title ="">ASP.Net </ a ></ li >// for Nested subemenu and <a> tag is used to pass URL address  
 <li> <a href ="#" title ="">Silverlight</a ></ li >  
 <li> <a href ="#" title ="">Ajax</a ></ li >  
 </ ul >  
 </ li >  
  <li> <a  href ="#" title ="Active projects">New Articles</a > //for submenu  
 <ul>  
 <li> <a href ="" title ="Excel FIle">File Upload</a ></ li > // for Nested subemenu  
 <li> <a href ="" title ="ConvertNoToString">Convert Number</a ></li >  
 <li> <a href ="" title ="Stored Procedure">Stored Procedure</a ></ li >  
 </ ul >  
 </ li >  
 </ ul >  
 </ li >  
 <li> <a href ="#" title ="Contact">Contact Us</a ></ li >  
 </ul >  
   </form>  
 </body>  

In the above source code the <li> tag is used to create a horizontal Main Menu and the <ul> list tag is used to create the submenu, again under the <ul> used and another <ul> tag to create a nested submenu.
Applying effects to the Menu using CSS
 
To apply the effects to the menu use the following CSS classes:

 #menu, #menu ul  /*for main menu *\  
  {  
 list-style:none;  
 padding:0;  
 margin:0;  
 }  
 /* SHOW SUBMENU 1 */  
 #menu li:hover ul, #menu li.over ul   
 {  
 display:block;  
 }  
 #menu li:hover ul ul, #menu li.over ul ul   
 {  
 display:none;  
 }  
 /* SHOW SUBMENU 2 */  
 #menu ul li:hover ul, #menu ul li.over ul   
 {  
 display:block;  
 }  
 /* for mouse hover */  
 #menu a:hover   
 {  
 background-color:#5798B4;  
 color:#fff;  
 }  

The output in the browser will be:

nestedmenu.jpg


Dynamic Menu using HTML and CSS in ASP.Net

Posted by : Stranger
Date :Tuesday, March 25, 2014
With 0comments

Integrate Linked In JavaScript API with ASP.NET

| Monday, March 11, 2013
Read more »
This page on Linked - In developer website explains the method to integrate JavaScript API with ASP.NET.
There are various ways Linked-In can be integrated in an ASP.NET website. I will explain the JavaScript API integration in this article.

Following are the steps of the Linked-In JS API integration.

1. Register yourself as developer on the linked-in website.
2. Create a new application or use an existing one. API Key and Secret Key of the application will be used for this integration.
3. Most Important - Make sure to specify the domain or list of domains for which above API key will be used, in "JavaScript API Domains" as in this screenshot:

JavaScript API Domains
4.Add following script in the <head> section of the html or aspx page to access the Linked-In API framework.
 <script type="text/javascript" src="http://platform.linkedin.com/in.js">  
  api_key: your_api_key_goes_here  
 </script>  

5. Add the following HTML to the body of your document to display the Linked-In Sign In button.
 <script type="in/Login">  
 </script>  



6. On clicking the above button, it should popup an authorization window asking you to Sign In to LinkedIn and grant API permission to your application. By default this pop up will ask for "Basic Profile Permissions" only.
Sign In and grant API permission
7. Test the page by reloading the page a few times. Notice that the login button reappears every time, even though you have already logged into the app and granted permission.Configure the authorize parameter in the framework script tag:
 <script type="text/javascript" src="http://platform.linkedin.com/in.js">  
  api_key: your_api_key_goes_here   
  authorize: true  
 </script>  

So far we have done integrating the LinkedIn Sign In and API permissions. In the next part I will explain how to display the details from the LinkedIn Profile.

LinkedIn JavaScript API uses REST services as back end. Lets rewrite the code above.

1. Introduce two parameters while importing the JS API framework.
 <script type="text/javascript" src="http://platform.linkedin.com/in.js">  
     api_key: your api key  
     onLoad: onLinkedInLoad  
     authorize: true  
   </script>  

The onLoad parameter tells the framework to wait until it's finished loading and then invoke a JavaScript function of your choosing. In this example, the function's name is onLinkedInLoad.
As discussed previously, setting authorize to true automatically authenticates any viewers who have previously granted your site permission using the JavaScript API.

2.The IN Object- The IN object is your way to hook into the LinkedIn JavaScript API. It's what the framework script tag inserts into the page. All the JavaScript API functions will begin with IN..
 function onLinkedInLoad() {  
       IN.Event.on(IN, "auth", onLinkedInAuth);  
     }  

In.Events. Events listen for activities, and run code when they happen. This line says to listen for the auth event, which triggers when someone signs in, and execute the onLinkedInAuth() function afterwards. Events are covered in more detail in the JavaScript API Reference.

3. Add the following HTML to the body of your document to display the Linked-In Sign In button.
 <script type="in/Login">  
 </script>  




4. Fetching profile information
 function onLinkedInAuth() {  
       IN.API.Profile("me")  
       .result(displayProfiles);  
     }  

The first part, IN.API.Profile("me"), makes a request to the LinkedIn API servers for the profile belonging to the signed-in user. The keyword "me" is a special short-hand way of referring to the signed-in member.
After it successfully retrieves data, the JavaScript framework sends the information to a callback function you specify in the result() method. In this case, it's a reference to the displayProfiles() function which we'll define below.
The In.API.Profile() method supports three of ways to identify a member: "me", member ids (like 4KoRHzE6GO), and public profile URLs.

5. Add controls in the body of the page to display profile details.
 Hello  
   <asp:Label ID='lblName' runat="server"></asp:Label>  

6. Results from the Profile API come grouped under one parameter.The displayProfiles() function receives a parameter which is the complete JSON-formatted result of the underlying call. By default the data is always in a values array. Since this is the Profile API call, values contains profile data. In this case, there's only one profile for the signed-in member, me, so it's in values[0]. The fields and field names returned for a profile are : id, firstName, lastName, headline, and pictureUrl.

 function displayProfiles(profiles) {  
     member = profiles.values[0];  
      document.getElementById("lblName").innerHTML = member.firstName + " " + member.lastName;  
 }  

7. To fetch additional profile details, fields() method can be used. Change the "onLinkedInAuth" method to include fields() method.

 function onLinkedInAuth() {  
       IN.API.Profile("me")  
       .fields("firstName", "lastName", "industry", "location:(name)", "picture-url", "headline", "summary")  
       .result(displayProfiles);  
     }  

8. Change the "displayProfiles" method as follows and add additional control in the body of the page to display more details.

 function displayProfiles(profiles) {  
       member = profiles.values[0];  
       alert(JSON.stringify(member));  
       member.lastName + "<br/> Location is " + member.location.name + " </p>";  
       document.getElementById("lblName").innerHTML = member.firstName + " " + member.lastName;  
       document.getElementById("imgProfile").src = member.pictureUrl;  
       document.getElementById("lblSummary").innerHTML = "<pre>" + member.summary + "</pre>";  
       document.getElementById("lblIndustry").innerHTML = member.industry;  
 }  

Please note
 alert(JSON.stringify(member)); 

This will display the JSON string returned by the LinkedIn API call.

LinkedIn contains many other useful resources beyond member profiles. The JavaScript API allows you access to every part of LinkedIn exposed through REST APIs. For a complete list read out REST APIs documentation.
The commonly used resources have high-level wrapper classes to help you access them (IN.API.Profile is one such wrapper). Currently, these are:
  • IN.API.Connections
  • IN.API.MemberUpdates
  • IN.API.NetworkUpdates
  • IN.API.PeopleSearch
  • IN.API.Profile
9. Handling errors:  The JavaScript API will inspect the REST response on your behalf and if an error occurred (the API returns an HTTP non-200 status code), the framework will notify you. You can specify a special error handler for using the optional error() method:

 function onLinkedInAuth() {  
       IN.API.Profile("me")  
       .fields("firstName", "lastName", "industry", "location:(name)", "picture-url", "headline")  
       .result(displayProfiles)  
       .error(displayProfilesErrors);  
     }  

Add a div in the body to display the errors.

 <div id="profiles">  
   </div>  

Display error message in the above div as follows:

 function displayProfilesErrors(error) {  
       profilesDiv = document.getElementById("profiles");  
       profilesDiv.innerHTML = error.message;  
       console.log(error);  
     }  

LinkedIn Members publish a variety of information about themselves on their member profile. Check out the link to view list of Profile Fields.

By default the API call processes "BasicPofile" permissions vide r_basicprofile.

To access email address fields, API requires r_emailaddress member permission.
To access profile related fields which are not covered under basic profile permissions like three-current-positions, date-of-birth etc, the API request requires r_fullprofile member permission.
To access contact information fields, API requires r_contactinfo member permission.
To access connection fields, API requires r_networkmember permission.
To access group membership fields, API requires rw_groupsmember permission.
To access network update fields, API requires rw_nusmember permission.

Scope parameter is added in the framework request to access fields other than basic profile.

 <script type="text/javascript" src="http://platform.linkedin.com/in.js">  
     api_key: your api key  
     scope: r_basicprofile r_emailaddress r_fullprofile  
     onLoad: onLinkedInLoad  
     authorize: true  
   </script>  

All basic, email and full profile fields can be accessed with above permissions.

 function onLinkedInAuth() {  
       IN.API.Profile("me")  
       .fields("firstName", "lastName", "industry", "location:(name)", "picture-url", "headline", "summary", "num-connections", "public-profile-url", "distance", "positions", "email-address", "educations", "date-of-birth")  
       .result(displayProfiles)  
       .error(displayProfilesErrors);  
     }  


Leave comments if anything in above code doesn't work. I have working code with me. Drop me your email id to get same.


Reference Links

Integrate Linked In JavaScript API with ASP.NET

Posted by : Stranger
Date :Monday, March 11, 2013
With 9comments

Calculate Age from Date of Birth Using Java Script.

| Saturday, March 2, 2013
Read more »
Calculate Age from Date of Birth Using Java Script.: In my previous posts, I explained jQuey .toggleClass() Example in ASp.Net , jQuery Draggable Div Example in ASP.Net , Disable cut, copy and...

Calculate Age from Date of Birth Using Java Script.

Posted by : Stranger
Date :Saturday, March 2, 2013
With 0comments

Google Maps in asp.net website with dynamic addresses from database.

| Monday, February 18, 2013
Read more »
Add following javascript in the head section of the page to access the google maps API.
 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>  

Add following javascript code in the head section of the page to access the google api functions to display the map on the page.

 <script>  
     var geocoder;  
     var map;  
     function initialize() {  
       geocoder = new google.maps.Geocoder();  
       var latlng = new google.maps.LatLng(-34.397, 150.644);  
       var mapOptions = {  
         zoom: 8,  
         center: latlng,  
         mapTypeId: google.maps.MapTypeId.ROADMAP  
       }  
       map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  
     }  
     function codeAddress() {  
       var address = document.getElementById('<%= hdnAddress.ClientID %>').value;  
       //alert(address);  
       geocoder.geocode({ 'address': address }, function (results, status) {  
         if (status == google.maps.GeocoderStatus.OK) {  
           map.setCenter(results[0].geometry.location);  
           var marker = new google.maps.Marker({  
             map: map,  
             position: results[0].geometry.location  
           });  
         } else {  
           alert("Geocode was not successful for the following reason: " + status);  
         }  
       });  
     }  
   </script>  

Above functions can be called "onload" by adding the "onload" attribute to the body tag as follows

 <body onload='initialize();'>  

Also this javascript can be called from the server side by registering the script in "Page_Load" event of the class.

 ClientScript.RegisterStartupScript(GetType(), "show", "initialize();", true);  
 ClientScript.RegisterStartupScript(GetType(), "show1", "codeAddress();", true);  

An ASP.NET hidden control is used to store the address of the location obtained from the database. Value to "hdnAddress" can be assigned from server side or client side as per the functionality of the page.

Following "div" element is added on the page to display the map on the webpage.

 <div id="map_canvas" style="width: 285px; height: 275px;"></div>  
  </div>  

The output on the browser will be
Size of the div with id "map_canvas" can be altered by changing the "height" and "width" attributes of the div element.

Try and Enjoy Coding!

Note - Please provide your feedback and let me know if there is any problem with above code.

Google Maps in asp.net website with dynamic addresses from database.

Posted by : Stranger
Date :Monday, February 18, 2013
With 3comments

Simple jQuery Image Slideshow Example with Text Overlay in Asp.net

|
Read more »
Simple jQuery image slideshow example with text overlay or Simple jQuery image slideshow with caption or jQuery image slideshow with content or jQuery image slideshow with links in asp.net.

 
Simple jQuery Image Slideshow Example with Text Overlay in Asp.net

Show Message Bar at the top of the page using HTML and jQuery

| Wednesday, February 13, 2013
Read more »
Download Code

This article will focus on displaying notifications or messages at the top of the website page using HTML and jQuery.

Links to required jQuery files will be added in the head section of the page.

  <script src="jquery.js" type="text/javascript"></script> 
 <script src="juery.topbar.js" type="text/javascript"></script>  


The source code includes 4 types of demonstrations of the top message bar.Following script will be included in the head section of the page


  <script type="text/javascript" language="javascript"> 
$(function () { 
$("#ex01").click(function () { 
$('#ex01-body').showTopbarMessage(); 
}); 
$("#ex02").click(function () { 
 $('#ex02-body').showTopbarMessage({ close: 2000 }); 
 }); 
$("#ex03").click(function () { 
 $('#ex03-body').showTopbarMessage({ background: "#043", close: 2000 }); 
 }); 
$("#ex04").click(function () { 
 $('#ex04-body').showTopbarMessage({ height: "180px", close: 2000 }); 
 }); 
 }); 
</script>  


Following types of demonstrations are there:

1. Simple

  <p> 
<a href="javascript:void(0)" id="ex01">Simple</a>     </p> 
<pre>$("#ex01").click(function () { 
 $('#ex01-body').showTopbarMessage();   });</pre> 
 <div id="ex01-body" style="display: none;"> 
 This is a simple demo 
 <span style="font-size: small; cursor: pointer">(click to close)</span> 
 </div>  

2. Automatic close after some time.

  <p> 
 <a href="javascript:void(0)" id="ex02">Automatic close after some time</a> 
 </p>     <pre>$("#ex02").click(function () { 
 $('#ex02-body').showTopbarMessage({ close: 2000 });   });</pre> 
 <div id="ex02-body" style="display: none;"> 
 Automatic close after some time     </div>  

3. With custom background

  <p> 
 <a href="javascript:void(0)" id="ex03">With Custom background</a> 
 </p>     <pre>$("#ex03").click(function () { 
 $('#ex03-body').showTopbarMessage({ background: "#043", close: 2000 }); 
 });</pre>     <div id="ex03-body" style="display: none;"> 
 With Custom background     </div>  

4. Custom height with long text

 <p> 
 <a href="javascript:void(0)" id="ex04">Custom height with long text</a> 
 </p>     <pre>$("#ex04").click(function () { 
 $('#ex04-body').showTopbarMessage({ height: "180px", close: 2000 });   });</pre> 
 <div id="ex04-body" style="display: none;"> 
 Custom height with long text.<br /> 
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum 
 </div>  


Show Message Bar at the top of the page using HTML and jQuery

Posted by : Stranger
Date :Wednesday, February 13, 2013
With 0comments

Create Tooltips, Modal Windows, Notice Messages using MooTools mBox library

| Tuesday, February 12, 2013
Read more »

mBox 0.2

mBox is a powerful library, helping you to easily create tooltips, modal windows, notice messages and more.
Styling is stress free with css and there are many options to customize position, appearance, events etc.

Check this out - mBox



Create Tooltips, Modal Windows, Notice Messages using MooTools mBox library

Posted by : Stranger
Date :Tuesday, February 12, 2013
With 0comments

jQuery Star Rating Plugin v3.14

| Saturday, February 9, 2013
Read more »

jQuery Star Rating Plugin v3.14

Posted by : Stranger
Date :Saturday, February 9, 2013
With 0comments

Javascript to refresh page after a specific time

| Tuesday, January 8, 2013
Read more »

This Script refreshes the page automatically after a specific time. Copy and paste this code in the <head> section of your page.
<script>
<!--

//enter refresh time in "minutes:seconds" Minutes should range from 0 to inifinity. Seconds should range from 0 to 59

var limit="0:50"
if (document.images)
{
var parselimit=limit.split(":")
parselimit=parselimit[0]*60+parselimit[1]*1
}

function beginrefresh()
{
if (!document.images)
 return
if (parselimit==1)
 window.location.reload()
else
{ parselimit-=1
curmin=Math.floor(parselimit/60)
cursec=parselimit%60
if (curmin!=0)
curtime=curmin+" minutes and "+cursec+" seconds left until page refresh!"
else
curtime=cursec+" seconds left until page refresh!"
window.status=curtime setTimeout("beginrefresh()",1000)
}
}

window.onload=beginrefresh
//-->
</script>


Change the time for each refresh by configuring variable "limit" in the script.

Javascript to refresh page after a specific time

Posted by : Stranger
Date :Tuesday, January 8, 2013
With 0comments
Prev
▲Top▲