Advertisements

Archive

Archive for the ‘Ajax’ Category

How to implement BalloonPopupExtender in ASP.Net/C# OR Ballon Popup Extender Sample in ASP.Net/C#

September 25, 2012 1 comment

                     DOWNLOAD SOURCE CODE FOR BALLOON POPUP EXTENDER EXAMPLE

How to display good POPUP Window in ASP.Net using Ajax?

Most of the ASP.Net application requires showing some POPUP window to user for showing some messages or information. Also in order to create a ToolTips in ASP.Net/C# web application it’s very difficult to achieve for good looking ToolTip. In the newest Ajax Control Toolkit includes an awesome good looking and more functional popup extender called Balloon POPUP Extender. It’s a very light weight and having good look and feel popup, also we can apply custom styles for POPUP. Balloon POPUP Extender can use as ToolTips in ASP.Net application.

Download and Register New AjaxControl Toolkit

For implementing Balloon POPUP Extender in ASP.Net/C# application, we need to download newest Ajax Control Toolkit and register to the Project references. You can download new Ajax Control Toolkit from this link. Right click the ‘References’ under the ASP.Net project from Visual Studio and browse the dll and press OK.

In the ASPX page we need to register this ajax toolkit dll like below mentioned code.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>

How to implement Balloon POPUP Extender in ASP.Net/C# Application?

After adding and register the Ajax Control Toolkit as mentioned above, we can start to implement the Balloon POPUP Extender. We can implement Balloon POPUP Extender while clicking/on mouse over/on focus of any server controls in ASP.Net. Below mentioned is the codes for implementing the same.

<ajax:BalloonPopupExtender ID="PopupControlExtender2" runat="server" 
TargetControlID="txtUserName"
 BalloonPopupControlID="pnlBalloon" Position="BottomRight" 
BalloonStyle="Cloud"
 BalloonSize="Medium" UseShadow="true" ScrollBars="Auto" 
DisplayOnMouseOver="true"
 DisplayOnFocus="false" DisplayOnClick="true" />

Balloon Popup Extender Sample

Balloon Popup Extender Sample

Balloon Popup Extender Sample


There are some properties are available for Balloon POPUP Extender control and we can adjust the size,color,style and controls of POPUP using these properties. Below are the main properties of Balloon POPUP Extender

TargetControlID – The ID of the control to attach to.

BalloonPopupControlID – The ID of the control to display.

Position – Optional setting specifying where the popup should be positioned relative to the target control. (TopRight, TopLeft, BottomRight, BottomLeft, Auto) Default value is Auto.

OffsetX/OffsetY – The number of pixels to offset the Popup from its default position, as specified by Position. Default value is 0.

BalloonStyle – Optional setting specifying the theme of balloon popup. (Cloud, Rectangle, Custom). Default value is Rectangle.

BalloonSize – Optional setting specifying the size of balloon popup. (Small, Medium and Large). Default value is Small.

CustomCssUrl – This is required if user choose BalloonStyle to Custom. This specifies the url of custom css which will display custom theme.

CustomClassName – This is required if user choose BalloonStyle to Custom. This specifies the name of the css class for the custom theme.

UseShadow – Optional setting specifying whether to display shadow of balloon popup or not.

ScrollBars – Optional setting specifying whether to display scrollbar if contents are overflowing. This property contains 5 options – None, Horizontal, Vertical, Both and Auto. Default value is Auto.

DisplayOnMouseOver – Optional setting specifying whether to display balloon popup on the client onMouseOver event. Default value is false.

DisplayOnFocus – Optional setting specifying whether to display balloon popup on the client onFocus event. Default value is false.

DisplayOnClick – Optional setting specifying whether to display balloon popup on the client onClick event. Default value is true.

Animations – Generic animations for the PopupControlExtender.

                     OnShow – The OnShow animation will be played each time the popup is displayed. The popup will be positioned correctly               but hidden. The animation can use <HideAction Visible=”true” /> to display the popup along with any other visual effects.

                     OnHide – The OnHide animation will be played each time the popup is hidden.


A very simple example for Balloon POPUP Extender in ASP.Net/C# using Ajax

Here we are demonstrating a very simple for implementing Ajax Balloon POPUP Extender  with full downloadable source code.

ASPX Page

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" 
AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="BaloonPopup._Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" 
TagPrefix="ajax" %>
<asp:Content ID="HeaderContent" runat="server" 
ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" 
ContentPlaceHolderID="MainContent">
<h2>
Welcome to Baloon Popup Extender Sample
</h2>
<p>
For Website/WebApplication creation <a href="http://www.tuvian.com" 
title="aps.net">www.tuvian.com</a>.
</p>
<div>
<ajax:ToolkitScriptManager ID="Scriptmanager1" runat="server">
</ajax:ToolkitScriptManager>
<div style="border: 1px solid gray; padding: 10px; margin: 10px;">
<h3>
Cloud Style Baloon Popup Example</h3>
<br />
<br />
<ajax:BalloonPopupExtender ID="PopupControlExtender2" runat="server" 
TargetControlID="txtUserName"
BalloonPopupControlID="pnlBalloon" Position="BottomRight" BalloonStyle="Cloud"
BalloonSize="Medium" UseShadow="true" ScrollBars="Auto" DisplayOnMouseOver="true"
DisplayOnFocus="false" DisplayOnClick="true" />
UserName :
<asp:TextBox runat="server" ID="txtUserName" />
<asp:Panel runat="server" ID="pnlBalloon">
This is the Cloud Style Ballon Popup</asp:Panel>
</div>
<div style="border: 1px solid gray; padding: 10px; margin: 10px;">
<h3>
Rectangular Baloon Popup Example</h3>
<br />
<br />
<ajax:BalloonPopupExtender ID="Balloonpopupextender1" runat="server" 
TargetControlID="lblShow"
BalloonPopupControlID="pnlRectangularBallon" Position="TopRight" 
BalloonStyle="Rectangle"
BalloonSize="Medium" UseShadow="true" ScrollBars="Auto" 
DisplayOnMouseOver="false"
DisplayOnFocus="false" DisplayOnClick="true" />
<asp:Label runat="server" ID="lblShow" 
Text="Click Here to Show the Rectangular Balloon Popup" />
<asp:Panel runat="server" ID="pnlRectangularBallon">
This is the rectangular ballon popup</asp:Panel>
</div>
<div style="border: 1px solid gray; padding: 10px; margin: 10px;">
<h3>
Custom Style Baloon Popup Example</h3>
<br />
<br />
<ajax:BalloonPopupExtender ID="Balloonpopupextender2" runat="server" 
TargetControlID="txtCustomBallonPopup"
BalloonPopupControlID="pnlCustomBallon" Position="BottomRight" 
BalloonStyle="Custom"
BalloonSize="Medium" UseShadow="true" ScrollBars="Auto" 
DisplayOnMouseOver="true"
CustomCssUrl="Styles/BalloonPopupOvalStyle.css" 
CustomClassName="oval" DisplayOnFocus="false"
DisplayOnClick="true" />
<asp:TextBox runat="server" ID="txtCustomBallonPopup" />
<asp:Panel runat="server" ID="pnlCustomBallon">
This is the Custom Style ballon popup</asp:Panel>
</div>
</div>
</asp:Content>
--------------

                  DOWNLOAD SOURCE CODE FOR BALLOON POPUP EXTENDER EXAMPLE
Advertisements

How to create always visible div using Ajax/ Always visible div in ASP.Net using Ajax

September 22, 2012 1 comment

                                  DOWNLOAD SOURCE CODE FOR ALWAYS VISIBLE DIV

Create very simple always visible div using ajax in ASP.Net

Here we are demonstrating how to create a very simple always visible div using Ajax in ASP.Net/C#. Some of the WebPages we may need to show some information always visible to user even they are scrolling down and up.   In this situation we can achieved it by different method. In our previous post we already posted how to create a always visible div using CSS. Here we are going to implement the always visible div using Ajax in ASP.Net/C#.

Register Ajax Control Toolkit

In order to implement always visible div using Ajax, we need to download and refer ajax control toolkit to our project. First of all download ajaxtoolkit dll from here and right click the ‘References’ under the ASP.Net project from Visual Studio and browse the dll and press OK.

In the ASPX page we need to register this ajax toolkit dll like below mentioned code.

<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”ajax” %>

How to implement AlwaysVisibleControlExtender in AJAX Controls?

Always vissible Control Extender in Ajax control tool kit is using to implement always vissible div or any controls in ASP.Net/C#.

After registering the ajax control tool kit we can implement alwaysvisibleextender as below mentioned code.

<ajax:alwaysvisiblecontrolextender id="ace" runat="server" targetcontrolid="pnlTimer"
 verticalside="Top" verticaloffset="10" horizontalside="Right" horizontaloffset="10"
 scrolleffectduration=".1" />

We are having some properties in the alwaysvisiblecontrolextender and we can adjust the postion and controls for always visible extender. Below are the main properties of alwaysvissibleextender in ajax.

TargetControlID – ID of control for this extender to always make visible

HorizontalOffset – Distance to the HorizontalSide edge of the browser in pixels from the same side of the target control. The default is 0 pixels.

HorizontalSide – Horizontal edge of the browser (either Left, Center, or Right) used to anchor the target control. The default is Left.

VerticalOffset – Distance to the VerticalSide edge of the browser in pixels from the same side of the target control. The default is 0 pixels.

VerticalSide – Vertical edge of the browser (either Top, Middle, or Bottom) used to anchor the target control. The default is Top.

ScrollEffectDuration – Length in seconds of the scrolling effect to last when the target control is repositioned. The default is .1 second.

 ASPX Page

<%@ Page Language="C#" AutoEventWireup="true" 
CodeBehind="AjaxControls.aspx.cs" 
Inherits="ExperimentLab.AjaxControls" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" 
TagPrefix="ajax" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title></title>
</head>
<body>
 <form id="form1" runat="server">
 <ajax:ToolkitScriptManager ID="Scriptmanager1" runat="server">
 </ajax:ToolkitScriptManager>
 <div>
<ajax:AlwaysVisibleControlExtender id="ace" runat="server" 
targetcontrolid="pnlTimer"
 verticalside="Top" verticaloffset="10" horizontalside="Right" 
horizontaloffset="10"
 scrolleffectduration=".1" />
<div runat="server" id="pnlTimer" style="border: 2px solid green; 
height: 100px;
 width: 200px; text-align: center; padding-top: 50px; 
font-weight: bold;">
 This div is always visible to user
</div>
 <br />
 <br />
 Scroll down .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 Scroll down
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 Scroll down
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 .
 <br />
 Still 'Always visible div' is available ...!
 </div>
 </form>
</body>
</html>

------

                                                        DOWNLOAD SOURCE CODE FOR ALWAYS VISIBLE DIV


How to create asynchronous file up loader using ajax in ASP.Net


Ajax files uploader in ASP.Net/C# to upload files to Server as asynchronous 

In most of the web applications, there might be have an option to upload files to server. If we are using ASP.Net file uplaoder option to upload files, will have postback after every server request. It may be very disturbance to the user. In order to avoid postback while uploading files into server in ASP.Net/C#, we can implement AJAX mechanism.

Include AjaxControlToolkit reference to the Project

First of all we need to refer ajax tool kit to our project. In order to do this, right click the project and add reference and select the folder that included the ajaxtoolkit file. Once we added, in the aspx page below line will be displayed

<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>

After that we can incuded ajax  uploader into the ASPX page like this.

<ajax:AsyncFileUpload ID="fileUpload1" OnClientUploadComplete="uploadComplete"OnClientUploadError="uploadError" 
CompleteBackColor="White" Width="350px" runat="server" UploaderStyle="Modern"UploadingBackColor="#CCFFFF" 
ThrobberID="imgLoad" OnUploadedComplete="fileUploadComplete" />

There are some special kind if events are available in the control like onUploadComplete, OnClineUploadError ..

OnClientUploadError – This property is used to execute the client side JavaScript function if file uploading failed.

OnClientUploadStarted – This property is used to execute the client side JavaScript function whenver file uploading start.

OnClientUploadComplete – This property is used to execute the client side JavaScript function after file successfully uploaded.

CompleteBackColor – This property is used to set fileupload control background after file upload complete its default value ‘Lime’.

ErrorBackColor – This property is used to set fileupload control background if file upload failed its default value ‘Red’.

UploadingBackColor – This property is the id of the control which is seen during upload file.

UploaderStyle – This property is used to set fileupload control appearance style either Modern orTraditional. By default its value “Traditional”.

ThrobberID – ID of control that is shown while the file is uploading.

 

ASPX PAGE

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
<title>Untitled Page</title> 
<script type="text/javascript"> 
// This function will execute after file uploaded successfully 
function uploadComplete() { 
document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "File Uploaded Successfully"; 
} 
// This function will execute if file upload fails 
function uploadError() { 
document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "File upload Failed."; 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<ajax:ToolkitScriptManager ID="scriptManager1" runat="server"/> 
<div> 
<ajax:AsyncFileUpload ID="fileUpload1" OnClientUploadComplete="uploadComplete"OnClientUploadError="uploadError"
 CompleteBackColor="White" Width="350px" runat="server" UploaderStyle="Modern"UploadingBackColor="#CCFFFF"
 ThrobberID="imgLoad" OnUploadedComplete="fileUploadComplete" /><br />
 <asp:Image ID="imgLoad" runat="server" ImageUrl="loading.gif" />
 <br />
 <asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>
 </div>
 </form>
 </body>
 </html>

CODE BEHIND

using System;
using System.Web.UI;
using AjaxControlToolkit;

protected void fileUploadComplete(object sender, AsyncFileUploadEventArgs e)
{
string filename = System.IO.Path.GetFileName(fileUpload1.FileName);
fileUpload1.SaveAs(Server.MapPath("Files/") + filename);
}

 

How to create a simple Ajax Collapsible Panel Extender in asp.net

May 17, 2011 14 comments

The collapsiblePanel is used to collapse and expand any web page content or controls inside asp.net panel control. Panel control will expand and collapse by using label control or linkbutton control. For clean collapse and expand use Label Control to target collapse and expand panel control.

Properties of CollapsiblePanelExtender

TargetControlID – the Panel to operate expand and collapse. Use Panel control as TargetControlID

Collapsed – It specifies that the object should initially be collapsed or expanded.

AutoCollapse – when it is property is True to automatically collapse when the mouse is moved off the panel. It is better to keep false for clean collapse

AutoExpand – when it is property is True to automatically expand when the mouse is moved over the panel. It is better to keep false for clean collapse

ScrollContents – True to add a scrollbar if the contents are larger than the panel itself. False to just clip the contents.

ExpandControlID/CollapseControlID – The controls that will expand or collapse the panel on a click, respectively. If these values are the same, the panel will automatically toggle its state on each click. ExpandControlID or CollapseControl ID use label control

CollapsedImage – It views the image assigned by image path of the ImageControlID when the panel is Collapsed

ExpandedImage – It views the image assigned by image path of the ImageControlID when the panel is expanded

ExpandDirection – It can be “Vertical” or “Horizontal” to determine whether the panel expands or collapse top-to-bottom or left-to-right.

Step by step process to create a simple ajax collapsible panel extender

Step1: Drag Script Manager from Toolbox Ajax Extensions first then drag Label control its id is lblRegister

<asp:Label ID="lblRegister" runat="server" Font-Names="Verdana" 
Font-Size="9pt" Text="Register"></asp:Label>

Step2: Drag Panel control inside panel control Design Register form with TextBoxs and button control.

<asp:Panel ID="PnlRegister" runat="server" BackColor="#999999? 
Font-Names="Verdana" Font-Size="9pt" Width="300px">
<table>
<tr>
<td>Name</td>
<td><asp:TextBox ID="txtName? runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Email</td>
<td><asp:TextBox ID="txtEmailID? runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><asp:Button ID="btnRegister? runat="server" Text="Register" /></td>
</tr>
</table>
</asp:Panel>

Step3: Drag CollapsiblePanelExtender from Ajax control toolkit

<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1? runat="server">
</cc1:CollapsiblePanelExtender>
Explanation: The collapsiblePanelExtender will take action when 
user click Label (lblRegister) control then the register panel 
will collapse and to  expand also click label (lblRegister)
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1? 
runat="server"
CollapseControlID="lblRegister"
ExpandControlID="lblRegister"
TargetControlID="PnlRegister"
Collapsed="True" >
</cc1:CollapsiblePanelExtender>

Remember: Target controls ID must be always Panel control. For Expand and Collapse ID is Label or LinkButton control

Complete code for CollapsiblePanelExtender Example

<asp:ScriptManager ID="ScriptManager1? runat="server"> </asp:ScriptManager>
<div style="width: 300px">
<asp:Label ID="lblRegister" runat="server" Font-Names="Verdana" Font-Size="9pt"
Text="Register" BackColor="#FFCC66?></asp:Label>
<br />
<asp:Panel ID="PnlRegister" runat="server" BackColor="#999999? 
Font-Names="Verdana" Font-Size="9pt" Width="300px">
<table>
<tr>
<td>Name</td>
<td><asp:TextBox ID="txtName? runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>EmailID</td>
<td><asp:TextBox ID="txtEmail? runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><asp:Button ID="btnRegister? runat="server" Text="Register" /></td>
</tr>
</table>
</asp:Panel>
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1? runat="server"
CollapseControlID="lblRegister"
ExpandControlID="lblRegister"
TargetControlID="PnlRegister"
Collapsed="True" >
</cc1:CollapsiblePanelExtender>
<br />
</div>

Step4: Now Run the application you will observe Register (label control) by clicking this control User Registration form(Panel control) will collaspe to expand click same label control(Register).

To Remove ajax collapsiblepanel flicker

keep properties of

AutoCollapse = false
AutoExpand = false

in CollapsiblePanelExtender

Categories: Ajax Tags:
%d bloggers like this: