Wednesday, December 30, 2015

How to create photo album in asp.net – Part III

This article is the last part of implement photo album functionality in asp.net website.  In this article I am going to explain how to create image gallery in asp.net

How to create photo album in asp.net – Part III


Description:
 Here we have to option to view the gallery, 1st click on album page and we are redirects to gallery page. 2nd click on view gallery button (upload image page). When we click on image, it open in popup and we can see the entire images here via using forward and backward button. I am using the Colorbox jquery plugin to open images in popup.

Tuesday, December 29, 2015

how to create photo album in asp.net – Part II OR how to upload or add photo to album in asp.net

This article is the 2nd part of create photo album application. In this part I am going to explain how to upload or add photo to album in asp.net

In the first part I have explained how to create photo album in asp.net.

Description:
After created the album we will be redirected to upload/add photo page. On this page we will upload the image and uploaded image will be displayed below (in gridview) to enter description and click the save button to save the changes.

Implementation:
Create store procedure to save/insert the uploaded photo and get the id of last inserted record

Monday, December 28, 2015

How to create photo album in asp.net - Part I

Introduction: In this article I am going to explain how to create photo album in asp.net

Description:
This article will cover the concept of creating photo album/albums in asp.net project. User’s will be able to create their own album/albums and can upload/add photos.
To fulfill this requirement I have created two tables Tb_Album and Tb_Photo.


Implementation:
Create store procedure to insert data into database:

Tuesday, December 22, 2015

Asp.net: Open a website in iframe from code behind

In this article I am going to explain how to open a website in iframe from code behind in asp.net using C# and VB.net


Description:
An iframe will always load an entire web page within a web page.   User will enter the website url in textbox and hit the click here button, website will be open iframe.

Saturday, December 19, 2015

Nested Datalist example in asp.net using C# and VB.net

In this article I am going to explain how to build a nested datalist (datalist inside datalist) in asp.net.


Description:
To implement this requirement I am using two datalist controls with expand and collapse functionality. I will bind the parent datalist with category and child datalist with sub-category that will be displayed when the expand icon is clicked .
I have created two tables Tb_Category and Tb_Subcategory.

Friday, December 18, 2015

Asp.net MVC: Autocomplete textbox using jquery

In this article I am going to explain how to create the autocomplete textbox in asp.net MVC using Jquery.


Description:
I have a table Tb_Movie. I want to create autocomplete textbox to filter the records based on movie name. Means when we start typing in textbox, suggestion (matching) should appear.

Dynamic vertical expanding and collapsing menu using jquery in asp.net

In this article I am going to explain how to create dynamic expanding and collapsing vertical menu using Jquery in asp.net.


Description:
Recently I have got a requirement to make the vertical menu with expand and collapse. To implement this functionality I have used the datalist control.

Friday, December 4, 2015

Change the background color of div using Jquery

In this article I am going to explain how to change the background color of div using jquery.


Description:
I want to change the background of a particular area (div).  To fulfill this requirement I am using evol colorpicker Jquery.

Implementation:
I have added textbox and button control to webform.
Add the reference of script and CSS before closing head tag.

Thursday, December 3, 2015

Change the background color of webpage using colorpicker Jquery in asp.net

In this article I am going to explain how to change the background color of webpage using colorpicker jquery in asp.net.


Description:
I want to change the background of webpage.  To fulfill this requirement I am using evol colorpicker Jquery.


Implementation:
I have added textbox and button control to webform.

Sunday, November 29, 2015

Jquery: Open an Image in popup on thumbnail click

In this article I am going to explain how to open image in popup on thumbnail click using Jquery.


Description:
To implement this functionality I am using fancybox Jquery plugin. When user move the cursor to thumbnail/image, preview icon become visible and fade out effect will be applied. When user clicks on preview icon image will be open in a popup.

Implementation:
Add the below given style to CSS file or in web page before closing </head> tag.

Saturday, November 28, 2015

Asp.net: Search and highlight the text In Gridview

In this article I am going to explain how to search the record and highlight in Gridview using Asp.net

In the previous article I have explained Open image in popup using jquery and Imagehover effect using CSS

Description:
I have created a table Tb_movie and displaying the records in gridview data control.

I want to filter the records based on movie name. To implement this functionality I have create two procedure one to bind the data to gridview and another one to filter the record.

Implementation:

Friday, November 27, 2015

Open image in popup using jquery

In this article I am going to explain how to open image in popup using Jquery.


Description:
To implement this functionality I am using fancybox Jquery plugin. When user move the cursor to thumbnail/image, preview icon become visible and fade out effect will be applied. When user clicks on preview icon image will be open in a popup.

Implementation:
Add the below given style to CSS file or in web page before closing </head> tag.

Wednesday, November 25, 2015

Image hover effect using CSS

In this article I am going to explain how to apply hover effect on image using CSS transitions property.


Description:
CSS3 transitions allow elements to change the value over a specified smoothly.

Implementation:
Add the given style to CSS file or before closing the </head> tag.
<style>
.view {
   width: 500px;
   height: 400px;
   margin: 10px;
   float: left;
   border: 5px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
}
.view .mask, .view .content {
   width: 500px;
   height: 400px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view a.info {
   background:url(img/link.png) center no-repeat;
   display: inline-block;
   text-decoration: none;
   padding:0;
   text-indent:-9999px;
   width:20px;
   height:20px;

Monday, November 23, 2015

Image hover effect using Jquery and CSS

In this article I am going to explain how to applying hover effect to image/images using jquery and css.

Description:

To apply image hover effect using Jquery and CSS. On mouse hover its fades the image/images.

Implementation:

Add the below given style to stylesheet or add it before closing </head> tag.
    <style>
        table img {
        width:250px;
        }
        span.roll {
    background:url(images/mag.png) center center no-repeat #000;
    height: 141px;
    position: absolute;
    width: 250px;
    z-index: 10;           
            -webkit-box-shadow: 0px 0px 4px #000;
            -moz-box-shadow: 0px 0px 4px  #000;
            box-shadow: 0px 0px 4px  #000;
}
span.rollover {
            opacity: 1;
            -o-transition-duration: 1s;
            -moz-transition-duration: 1s;
            -webkit-transition: -webkit-transform 1s;
            background:url(images/mag.png) center center no-repeat #000;
            cursor: pointer;
            height: 141px;
            width: 250px;
            position: absolute;
            z-index: 10;
            opacity: 0;
}
span.rollover:hover {
            opacity: .7;
            -o-transition-duration: 1s;
            -moz-transition-duration: 1s;
            -webkit-transition: -webkit-transform 1s;
            -webkit-box-shadow: 0px 0px 4px #000;
            -moz-box-shadow: 0px 0px 4px #000;
            box-shadow: 0px 0px 4px #000;
}
    </style>

Wednesday, November 4, 2015

Generate unique OTP in asp.net using C#, vb.net

In this article I am going to explain how to generate unique OTP (one time password) in asp.net

Description:

OTP stand for one time password. It is a password that is valid for only one login session or transaction. It is widely used by the banks for transactions. It can be numeric as well as alphanumerical.

Implementation:

Method (code) to generate the numeric OTP:
Add a webform to project. Drag and drop the required control from toolbox to webform. Below given html markup consist of button and label control.

Saturday, October 31, 2015

How to find (get) the Last day of Previous, Current and Next month in Sql server

In this article I am going to explain how to find (get) the Last day of Previous, Current and Next month in Sql server


Implementation:
Use/write the below given quires to get the last day.

Find the last day of previous month:
select CONVERT(varchar,dateadd(d,-(day(getdate())),getdate()),106)'Last Day of Previous Month'

Find the last day of current month:
select CONVERT(varchar,dateadd(d,-(day(dateadd(m,1,getdate()))),dateadd(m,1,getdate())),106)'Last Day of Current Month'

Find the last day of next month:
select CONVERT(varchar,dateadd(d,-

Thursday, October 29, 2015

Simple steps to display data point labels outside a pie Chart in asp.net

In this article I am going to explain how to display the data point labels outside a pie Chart in asp.net

Description:

I am displaying the data in chart control. Chart type is pie. I want to display the data labels outside the pie chart because data values got overlap.

Simple steps to display the data point labels outside a pie Chart in asp.net

Implementation:
To display the outside a pie chart follow the below given steps.

Go to properties section of chart control. In properties section look Chart >>Series >> Misc >>


How to display Microsoft Chart data value on mouse (cursor) hover (tooltip) in asp.net

In this article I am going to explain how to display Microsoft Chart data values on mouse (cursor) hover (tooltip) in asp.net

Description:

I am using the Microsoft chart control to display the data. I want to display the data values on mouse (cursor) hover. I have created a table Tb_Population.

Implementation:
To display the data in tooltip write the below given code.

C# Code:


foreach (Series s in Chart1.Series)
            {
                s.ToolTip = "State: #VALX\nPopulation: #VALY\nPercentage: #PERCENT";
            }

VB.net code:
  For Each s As Series In Chart1.Series
                s.ToolTip = "State: #VALX" & vbLf & "Population: #VALY" & vbLf & "Percentage: #PERCENT"
            Next

Tuesday, October 27, 2015

Top 10 commonly asked Sql server queries in interview

In this article I am going discuss the top 10 commonly asked Sql server queries in interview

1  1.     Find the Highest Salary of Employee
Select MAX(salary) from dbo.Tb_Employee

2    2.    Find the nth number highest salary
In this blow given I have find the second highest salary.
Select Top 1 Salary from(Select distinct top 2 salary from dbo.Tb_Employee order by salary desc) a order by salary asc

3  3.     Find the nth number lowest salary
Using below given query I am finding the second lowest salary.
Select Top 1 Salary from(Select distinct top 2 salary from dbo.Tb_Employee order by salary asc) a order by salary desc

4     4.      Find the duplicate record
Here I am finding the duplicate record (name) exist in table.
select name, count(*)  as duplicate from dbo.Tb_Employee group by name



5   5.      Calculate the Running Total
Select name,phone,ems.salary,(select sum(salary) from dbo.Tb_Employee where id <=ems.id) as Running from dbo.Tb_Employee ems