SUJOY SANTRA: AJAX

Showing posts with label AJAX. Show all posts

Thursday, 29 May 2014

AlwaysVisible Control Extender

Step1:
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

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

        .staticPanel {
             width: 150px;
             background-color: White;
             border: solid 1px black;
             padding: 10px;
        }

    </style>

Step3:
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>

Step4:
<asp:Panel ID="Panel1" CssClass="staticPanel" runat="server">
        <h2>sujoysantra.blogspot.in</h2>
    </asp:Panel>

    <asp:AlwaysVisibleControlExtender
        ID="AlwaysVisibleControlExtender1"
        TargetControlID="Panel1"
        VerticalSide="Top"
        VerticalOffset="10"
        HorizontalSide="Right"
        HorizontalOffset="10"
        runat="server" />

Thursday, 22 May 2014

How to use Ajax Update Progress

Step 1

Drag and drop the script manager from the ToolBox under the body and the form tag.

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

Step 2

Drag and drop the updatepanel from toolbox

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate
<asp:Button ID="Button1" runat="server" Text="Submit" onclick="Button1_Click"
                        style="height: 26px" />
        </ContentTemplate>
        </asp:UpdatePanel>

Step 3

Drag and drop the update progress from the toolbox. Remember one thing that the update progress is outside the update panel on the same page

   <asp:UpdateProgress ID="UpdateProgress1" runat="server"
        AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="0">
    <ProgressTemplate>
        <div style="background-color: Gray; filter:alpha(opacity=60); opacity:0.60; width: 100%; top: 0px; left: 0px; position: fixed; height: 100%;">
        </div>
          <div style="margin:auto;
              font-family:Trebuchet MS;
              filter: alpha(opacity=100);
              opacity: 1;
              font-size:small;
              vertical-align: middle;
              top: 45%;
              position: fixed;
              right: 45%;
              color: #275721;
              text-align: center;
              background-color: White;
              height: 120px;">
                <table style=" background-color: White; font-family: Sans-Serif; text-align: center; border: solid 1px #275721; color: #275721; width: inherit; height: inherit; padding: 15px;">
                <tr>
                <td style=" text-align: inherit;"><img src="Images/ajax-loader.gif" alt="Loading" /></td>
                </tr>
                </table>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

Step 4

Goto the Code behind the file and write this code. Wait for 2 Second and after that get the Message:

protected void Button1_Click(object sender, EventArgs e)
{

System.Threading.Thread.Sleep(2000); //wait 2 second
Response.Write("Welcome User");
}

AJAX Pie Chart

<@ Page Language="C#" AutoEventWireup="true" CodeBehind="PieChart.aspx.cs" Inherits="PieChart" >

<%@ register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

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

</head>

<body>

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

<asp:PieChart>

</asp:PieChart>

</div>

</form>

</body>

</html>

C# Code:

protected void Page_Load(object sender, EventArgs e)

//for sqlserver authentication connection string-(server,databasename,Windows authentication)

{

string connstr = "server=.\\SQLEXPRESS;database=Employee;integreted security=ture";

//class System.Data.SqlClient.SqlConnection -Represent an open connection to a SQL Server database

//initializes instance of class SqlConnection

SqlConnection conn = new SqlConnection(connstr);

//select query for fetch the data from database table population

string query = "select * from population";

//class System.Data.SqlClient. SqlDataAdapter- //Represent a set of data commands and a databse connection that are used to fill

// the System.Data.Dataset and update a sql server database

//Initializes instance of class SqlDataAdapter

SqlDataAdapter da = new SqlDataAdapter(query, conn);

//Initializes instance of System.Data.Dataset class

DataSet ds = new DataSet();

//adds or refreshes rows in the System.Data.Dataset by Fill() Method

da.Fill(ds);

foreach (DataRow row in ds.Tables[0].Rows)

{

PieChart1.PieChartValues.Add(new AjaxControlToolkit.PieChartValue

{

Category = row["country"].ToString(),

Data = Convert.ToDecimal(row["population"])

});

}

Ajax DropShadowExtender

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

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

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

<title>Ajax :: DropShadowExtender</title>

</head>

<body>

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

</asp:ScriptManager>

<div>

<tr>

<td>

<asp:Panel ID="PanelLoginControl" runat="server" Height="190px" Width="395px" BackColor="#00AEEF">

<div>

<tr>

AJAX: A Good Control To Make Shadow around a panel

</td>

</tr>

</table>

</div>

</asp:Panel>

</td>

</tr>

</table>

</div>

<div>

<ajaxToolkit:DropShadowExtender ID="DSExtender" runat="server" Opacity="0.30" Radius="4"

Rounded="true" TargetControlID="PanelLoginControl">

</ajaxToolkit:DropShadowExtender>

</div>

</form>

</body>

</html>

BalloonPopupExtenderControl in AJAX

BalloonPopupExtender Control

The BalloonPopupExtender control provides support for vertical tabs, and support for keyboard tab navigation. The BalloonPopup extender allows a page to display content to the user in a "Balloon" manner which prevents the user from interacting with the rest of the page. The modal content can be any hierarchy of controls and is displayed above a background that can have a custom style applied to it.
BalloonPopupExtender control properties

TargetControlID : The ID of the control to which this extender is attache
BalloonPopupControlID : The ID of the control in which the content will be displayed, which is a Panel control
BalloonSize : It has three possible values: Large, Medium and Small
BalloonStyle : It has two possible values: Rectangle, Cloud and Custom
UseShadow : Whether we want to drop shadows with the BalloonPopup

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="BaloonTooltipTest.aspx.vb" Inherits="structure_Deed_BaloonTooltipTest" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>

        <asp:Label ID="lblHelp" runat="server" Text="Help"></asp:Label>
        <br />
        <asp:Label ID="lblHelp2" runat="server" Text="Help 2"></asp:Label>

        <asp:Panel ID="Panel1" runat="server">
            <b>I am simple help content with BallonPopup</b>
            <br />
            <b>I am simple help content with BallonPopup</b>
            <b>I am simple help content with BallonPopup</b>
            <b>I am simple help content with BallonPopup</b>
            <b>I am simple help content with BallonPopup</b>
            <b>I am simple help content with BallonPopup</b>
            <b>I am simple help content with BallonPopup</b>
            <b>I am simple help content with BallonPopup</b>
            <b>I am simple help content with BallonPopup</b>
            <b>I am simple help content with BallonPopup</b>
            <b>I am simple help content with BallonPopup</b>
            <b>I am simple help content with BallonPopup</b>
            <b>I am simple help content with BallonPopup</b>
        </asp:Panel>
        <asp:BalloonPopupExtender ID="BalloonPopupExtender1" TargetControlID="lblHelp" BalloonPopupControlID="Panel1" BalloonSize="Large"
            UseShadow="true" runat="server" BalloonStyle ="Rectangle">
        </asp:BalloonPopupExtender>

         <asp:BalloonPopupExtender ID="BalloonPopupExtender2" TargetControlID="lblHelp2" BalloonPopupControlID="Panel1" BalloonSize="Medium"
            UseShadow="true" runat="server" BalloonStyle ="Cloud">
        </asp:BalloonPopupExtender>
    </div>

    </form>
</body>
</html>