Context Menu on Right click on webpage or create Right Click Context menu example using javascript

Description

Here I will explain that how to create custom right click context menu or custom right click menu when user perform right click on a webpage using javascript.

What is a Context Menu?

A context menu is a menu in a graphical user interface (GUI) that appears on user interaction, such as a right-click mouse operation on a webpage. Context Menu are also called a Pop-up Menu or Contextual menu.

Here main step first we have to perform is the disable the Default Right click menu of the browser by using following one line code.

Here we use the javascript to create a custom right click menu like

function ShowMenu(control, e) {

            var posx = e.clientX + 'px';

            var posy = e.clientY + 'px';

            document.getElementById(control).style.position = 'absolute';

            document.getElementById(control).style.display = 'inline';

            document.getElementById(control).style.left = posx;

            document.getElementById(control).style.top = posy;

            var jqContext = '#' + control;

                                                                                                                                         

        }

        function HideMenu(control) {

            document.getElementById(control).style.display = 'none';

        }

In above code you can show that we define two function showmenu() for display custom right click menu on a webpage and second is the hidemenu() to hide the custom right click menu.

Main point is that the menuitem must appeared in same position where user is perform right click and so far to do this we have set the style of the menu with Left and Top so user can click anywhere in the webpage the custom menu will also displayed on the same position as user click.

Here we pass the control in the Showmenu() function that describes that the id of the context menu that user want to displayed at a time when user perform right click on a webpage.

To show Example of How to Upload Multiple File in MVC Application then click here upload multiple File in MVC

To Show Example of How to Upload File in MVC Application then click here upload Image and bind to Gridview in MVC

How to upload File and Fetch file from SqlServer and bind to Gridview fetch file from Sqlserver and bind to Gridview

Send Text or bulk SMS in ASP.Net using C# and VB.Net

Description:-

            In previous Example I already Explain that how to send sms to any user from our asp.net Application using way2sms or Fullonsms services. But now this service is not working because ithis service is now not available so behind this result I found the other services to send sms to any user from our Application. so to send the sms first you have to perform the following the steps are follows

Using This service allowed multiple site like Way2sms, FullOnSMS, 160by2, Ultoo.com, SmsSpark.com SMSFI.com Freesms8, Site2SMS, IndyaRocks.com SMSAbc.com , Sms440, BhokaliSMS, etc.

In order to send sms you have to follow this three steps

1. Register at Site2SMS and get Username and Password.

2. Register at Mashape.com and generate key.

3. Download the .DLL file from ASPSnippets.SmsAPI.dll click   here and add it in your project bin folder

to show example of upload multiple file in MVC upload multiple file in database in mvc

Example of auto complete Textbox search Autocomplete Search in Ajax

we already add .dll file in a project to download this 

to download complete example click here 

jQuery to enlarge thumbnail image in slider on mouse over in asp.net

Description:

In this Example  I am  explain that How to load and display large version of the thumbnails images on mouse hover using jQuery in asp.net or How to enlarge image on mouseover in asp.net using jquery

in which we create a one Images Folder and  All the images are contained in Images folder will display in thumbnail form and when we move the mouse over any thumbnail image then the large version of that image will show in the specified area in predefined size as shown in above Image . So basically it can work as a image slider with thumbnails of the image.

In this example we display the thumbnails image in a Layerbox and we create a Layerbox using CSS like

<style type="text/css">

        .thumbnailimage {

            height: 70px;

            width: 70px;

        }

        .imagebox {

            height: 340px;

            width: 340px;

            background-color: #FFF;

            margin: 1px auto;

            padding: 10px;

            border: solid 1px #D3CFCB;

        }

    </style>

And used Jquery to create a Fancy Image slider of the thumbnails of the images like

<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("img.thumbnailimage").hover(function (e) {

                var largeImg = '<img src=' + $(this).attr("src") + '></img>';

                $('#layerbox')

                   .html($(largeImg)

                   .animate({ height: '250', width: '325' }, 1500));

            });

        });

    </script>

When you move or take the mouse to a particular thumbnails image then it’s large image will be displayed in hover format on the Layerbox of the css. You can just put your images in Iamges folder that you want to show or displayed in Layerbox and add Iamge tag for each and every Images.

Insert,Update,Delete in Gridview without postback CRUD operation without refresh the page

Bind data in Accordion Control from database bind Dynamic data in Accordion Control

inner zoom effect of image bind into gridview from database Display Inner zoom Effect of the image in Gridview

Uploading Multiple Files by Dynamically generated FileUpload Control in c#.Net using javascript

In this example I am explain that how to upload multiple files by dynamically adding FileUpload controls using JavaScript. In web application or any other  application we generally need to upload or browse multiple files at a time same like Gmail facility.due to this reason in this example we will dynamically  generate FileUpload Control to browse number of files we need to upload on server in asp.net with c#.

Here I will explain how one can create a multiple file uploading controls in a very simple manner and very less amount of code using javascript. To do this Add FileUpload Controls dynamically using JavaScript and  Remove FileUpload Controls dynamically using JavaScript without any postback.

I also put the validation for Dynamically generated File upload like Empty file check,Maximum size of fileupload and type or extention of the file.

Adding and Removing FileUpload Controls using JavaScript

As you can see I have added a HTML Link button  to add new FileUpload Controls and provide Remove html linkbutton to remove the File Upload.

Main point to note that is  you have to set  enctype="multipart/form-data to the form in order to allow the multiple uploading of files through dynamic FileUpload controls.

How to Send Forgot Password to user Email Send Forgot Password to user email

Rotate the Ads witout Refreshing the webpage Rotate the Advertisement in Asp.Net

Export Gridview Data to PDF file Export Grid data to PDF File

How to Create or Display multiple Header coloumn or multiple Header row and merge it with other columns in GridView in Asp.Net

Description:-

            In this Example we explain that how to Add or Display two Header Template or two Header row in Gridview in Asp.Net.generally gridview contain only one header and one footer row but sometime we need two display data with a two header.

For example:-

            Suppose we have display main two header like Employees data and office data and then in which there are four sub-header like Id and Name for Employees data and Salary and Year is the office data so at that time we must have to create a two header for grid view to separate the data in a meaning-full ways so end user can easily understand that when he/she show the data in gridview.   

To Show Example of How to Upload File in MVC Application then click here upload Image and bind to Gridview in MVC

To show Example of How to Upload Multiple File in MVC Application then click here upload multiple File in MVC

How to upload File and Fetch file from SqlServer and bind to Gridview fetch file from Sqlserver and bind to Gridview

Bind Directory and sub-directory in DropDownList With Hierarchy format in asp.net

Description:-

            In previous example we explain that how to bind Directory and sub Directory in Hierchical format in Treeview control in asp.net.but now in this example we explain that how to Bind directory and sub-directory in DropdownList with Hierchy format like display in treeview in asp.net or display hierchical of directory in dropdownlist.

Suppose you have one table in which country and state are dtored so that in dropdownlist you have to bind country with it’s state in hierchical format like so above image.

for binding hierchy of data in dropdown first you have to create a one table Folder_Master like below

Sorting Row data in gridview Gridview Sorting 

How to handle Concurrency in Linq to Sql Concurrency Example