Content Delivery Network.

Scott Guthrie has announced last september. This is one of the greatest improvement for who ever using Ajax in their application. Generally when we use Ajax all the library files will be loaded from our own server.

when end user accessing this site it has to travel through wire from few hundred miles to thousand miles.for avoiding these microsoft come up with new network called "Content Delivery Network".
if we use this in our project the performance will increase.

let me explain how it will increase the performance. suppose if you are accessing the site in India.
Content delivery network will find the shortest distance network and then it will load the all library files.
Instead of loading from one place.
Example:
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
instead of mentioning our own path

"String Builder" function in Javascript using Ajax(Enabling Scriptmanager).

I have come across new functionality called "stringbuilder" in javascript using Ajax.

please follow the below steps to enable the Stringbuilder.

Step 1:

Add script manager tag in the aspx page.


Step 2:

Example:

<script type="text/javascript">
function buildAString(title)
{
var headTagStart = "";
var headTagEnd = "";
var titleTagStart = "";
var sb = new Sys.StringBuilder(this._headTagStart);
sb.append(titleTagEnd);
sb.append(title);
sb.append(titleTagEnd);
sb.append(headTagEnd);
// Displays: "The result: "
alert("The result" + sb.toString());
}
var title = "A Title";
buildAString(title);
</script>

Enabling the zoom in and zoom out facility for image using Seadragon control in ajax.

I have come across new control in ajax zooming and zoom out for image. it's quite very
simple to implement this functionality.. it's nice feature thanks to Ajax team.



Step 1:

Create one xml file with the following attributes with tag. these are the attribute and tag will describe the functionality.


<Image TileSize="256" Overlap="1" Format="png" ServerFormat="Default">
<Size Width="1024" Height="768"/>
</Image>

Step 2:


create css class with image.


step 3:


<ajaxToolkit:Seadragon ID="Seadragon"
runat="server"
SourceUrl="sample.xml"> //Step1
CssClass="seadragon" //step 2
<ajaxToolkit:Seadragon>

Fileupload control not working with in updatepanel

I have found the problem, while accessing the fileupload control with in update panel. selected file path get cleared when postback.. i have found one solution for that problem. let me explain the solution with example.

i have used one asp hidden control, using javascript before postback am assigning the path in to hidden control. while accessing server side am getting the path from hidden contrl.

Let's go through the sample.

Aspx Code

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

</asp:ScriptManager>

<asp:UpdatePanel ID="upDate" runat="server">

<ContentTemplate>

<asp:FileUpload ID="fileUpload" runat="server" />

<asp:Button ID="btnSave" runat="server" onclick="btnSave_Click" />

<asp:HiddenField ID="hidFileName" runat="server" />

</ContentTemplate>

</asp:UpdatePanel>

Javascript:

function fileUploads(objGetId, objHidId) {

var objfile = document.getElementById(objGetId);

var objhid = document.getElementById(objHidId);

if (objfile != null) {

objhid.value = objfile.value;

}

}

C# Code

protected void Page_Load(object sender, EventArgs e)

{

btnSave.Attributes.Add("onclick", "javascript:fileUploads('fileUpload','"+hidFileName.ClientID+"')");

// string test = fileUpload.FileName;

}

protected void btnSave_Click(object sender, EventArgs e)

{

string test = hidFileName.Value;

}

ResizableControlExtender in Ajax

Asp.Net Ajax offers a ResizableControlExtender to resize the any element in the webpages. Please follow the below steps to create the Resizablecontrolextender for the panel.

Step 1:
Create Ajax enabled website.

Step 2:

Now go to the solution explorer and add the Ajaxcontroltoolkit.dll in the root directory.

Step 3:

Also add the Ajaxcontroltoolkit.dll in the toolbox to get the control.

Step 4:

Create CSS for HandleCssClass and ResizableCssClass for the control attribute.

<style type="text/css">
.handle
{
width:10px;
height:10px;
background-color:#aaccee;
}
.resizing
{
padding:0px;
border-style:solid;
border-width:1px;
border-color:#aaccee;
cursor:se-resize;
}
</style>



Step 4:

Create one panel with the some paragraph document.

<asp:Panel ID="Panel1" runat="server" Style="width: 300px; height: 200px;">
<asp:Label ID="image1" runat="server" Text="ASP.NET AJAX offers you Resizable Extender Control. ResizableControl is an extender that attaches to any element on a web page and allows the user to resize that control with a handle that attaches to lower-right corner of the control. The resize handle lets the user resize the element as if it were a window.">
</asp:Label>
</asp:Panel>

Step 5:

Create the ResizableControlExtender and link the panel.

<cc1:resizablecontrolextender ID="ResizableControlExtender1"
runat="server" TargetControlID="Panel1" HandleCssClass="handle" ResizableCssClass="resizing" MaximumHeight="400" MaximumWidth="500"
MinimumHeight="100" MinimumWidth="100" HandleOffsetX="5" HandleOffsetY="5" />

calling WCF Service method from javascript

here am speaking about the how wcf service method will call in the clientside using javascript. please find the below examples.

Before starting the code please select the template called Ajax enabled wcf service.

then call the method in the javascript.


ASPX with javascript.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript">
function getValue()
{
AjaxWCF.DoWork(onSucess,onFailure)
}
function onSucess(result)
{
alert(result);
}
function onFailure(result)
{
alert(result);
}
</script>
</head>
<body onload="getValue();">
<form id="form1" runat="server">
<asp:ScriptManager ID="script" runat="server">
<Services>
<asp:ServiceReference Path="~/AjaxWCF.svc" />
</Services>
</asp:ScriptManager>
</form>
</body>
</html>

AjaxWCF.svc File


using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;

namespace Xmlhttp
{
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class AjaxWCF
{
// Add [WebGet] attribute to use HTTP GET
[OperationContract]
public string DoWork()
{
// Add your operation implementation here
return "Hi bala";
}
// Add more operations here and mark them with [OperationContract]
}
}

Accessing server side event using Ajax 3.5 with Visual Studio 2008

Accessing server side event using Ajax 3.5 in visual studio 2008.

when we compare with earlier method,This may easy to write the code for developer.

step1 :

Include in your application system.web.extensions 3.5

Step 2:

In the script manager tag EnablePageMethods attribute make it true. it will help you to create method in the pagemethod class. Then only you can access the server event in the client side.

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

Step 3:

We should include the namespace over the server side method.[System.Web.Services.WebMethod].

Earlier we have used [Ajax.Ajaxmethod].

Example
[System.Web.Services.WebMethod]
public static string Message(string one,string two)
{
return one + two;
}

Step 4:
Client side. while calling the server side method. it will create two default methods. if it is succeed it will call OnGetMessageSuccess, and fails it will call OnGetMessageFailure.
Example

function GetCall()
{
PageMethods.Message("122","122",OnGetMessageSuccess, OnGetMessageFailure);
}
function OnGetMessageSuccess(result,userContext,methodName)
{
alert(result);
alert(userContext);
}
function OnGetMessageFailure(error,userContext,methodName)
{
alert(error.get_message());
}

Accordin Control using Dotnet

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
</asp:ScriptManager>
<asp:UpdatePanel ID="updatepanel1" runat="Server">
<ContentTemplate>
<table>
<tr>
<td>dsfsd</td>
</tr>
<tr>
<td>
<cc1:Accordion ID="accordin1" runat="server" RequireOpenedPane="false">
<Panes>
<cc1:AccordionPane id="accordinpane1" runat="server">
<Header>
<asp:Label ID="lbltext" runat="server" Text="bala"></asp:Label>
</Header>
<Content>
<asp:Label ID="Label1" runat="server" Text="bala1"></asp:Label>
<cc1:Accordion ID="accordin2" runat="server" RequireOpenedPane="false">
<Panes>
<cc1:AccordionPane ID="test" runat="server">
<header>
<asp:Label ID="lbltest1" runat="server" Text="testsdfsd"></asp:Label>
</header>
<Content>
<asp:Label ID="lbltest" runat="server" Text="test"></asp:Label>
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
</Content>

</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>

Accessing server event using Ajax

Step:1

Install system.web.extension and ajax tools
Install ajax.dll in your system all add in reference of the project.

step:2
<httpHandlers>
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
</httpHandlers>

step:3
Write javascript

<script language="javascript" type="text/javascript">
function Getconfirm()
{
var con=confirm("Are sure want to delete this");
var test;
if(con==false)
{
alert(Bala.Getvalue().value);
}
else
{
alert(Bala.Getvalue1().value);
}
}
</script>

step 4:
in c# page


public partial class Bala : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(Bala));
//btnsubmit.Attributes.Add("onclick", "Getconfirm();");
}
[Ajax.AjaxMethod()]
public string Getvalue()
{
return "bala";

}
[Ajax.AjaxMethod()]
public string Getvalue1()
{
return "bala1";

}
}