Balas Blog..: May 2009

Tuesday, May 19, 2009

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" />

Monday, May 18, 2009

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]
}
}

Access a control on the Content Page from a MasterPage using JavaScript

If you have a control on the control page, which has to be accessed in the master page using JavaScript, then here how to do so.

on the content page. create a text box has given below.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:Panel ID="panelContent" GroupingText="ContentPage Controls" runat="server">
<asp:TextBox ID="txtContent" runat="server"></asp:TextBox>
</asp:Panel>
</asp:Content>

Now access and control the page text box "txtContent" from the master pages.

<head runat="server">
<title></title>
<script type="text/javascript">
function accessControlContentPage() {
var txtCont = document.getElementById('<%= Page.Master.FindControl("ContentPlaceHolder1").FindControl("txtContent").ClientID %>');
txtCont.value = "I got populated using Master Page";
}
</script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>

Thursday, May 14, 2009

Calling Webservice through Ajax with javascript

In modern way of calling the web service through the JavaScript.

Aspx page

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script type="text/javascript">
function OnLookup()
{
var stb = document.getElementById("txt1");
Xmlhttp.call.HelloWorld1(stb.value, OnLookupComplete);
}
function OnLookupComplete(result)
{
var res = document.getElementById("txtHint");
res.innerHTML = "<b>" + result + "</b>";
}
</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="script" runat="server">
<Services>
<asp:ServiceReference Path="~/call.asmx" />
</Services>
</asp:ScriptManager>
First Name:<input type="text" id="txt1" onkeyup="OnLookup();">
<span id="txtHint"></span>
</div>
</form>
</body>
</html>

webservice
namespace Xmlhttp
{
///

/// Summary description for call
///

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class call : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
string value = "1";// HttpContext.Current.Request.QueryString["value"];
Dictionary objDictionary = new Dictionary();
if (HttpRuntime.Cache["out"] != null)
{
objDictionary = (Dictionary)HttpRuntime.Cache["out"];
if (!objDictionary.ContainsKey(value))
{
objDictionary.Add(value, value + "out");
}
}
else
{
objDictionary.Add(value, value + "out");
}
HttpRuntime.Cache["out"] = objDictionary;
return objDictionary[value];
}
[WebMethod]
public string HelloWorld1(string value)
{
return value;
}
}
}

Accessing webservice from javascript using XML HTTp Activex

Define:

XML http is a active X object to enable the browser to sending the request and receiving the response asynchronously.

Example:

Aspx Section

<html>
<head>
<script type="text/javascript">
var xmlHttp=null;
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
try
{// Firefox, Opera 8.0+, Safari, IE7
xmlHttp=new XMLHttpRequest();
}
catch(e)
{// Old IE
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert ("Your browser does not support XMLHTTP!");
return;
}
}
var url = "http://localhost:2735/call.asmx?op=HelloWorld";
//var getValue = document.getElementById("txt1");
//url = url + "&value='" + getValue.value + "'";

xmlHttp.onreadystatechange = output;
xmlHttp.open("GET",url,true);
xmlHttp.send();
function output() {
if (xmlHttp.readyState == 4)
{
xmlHttp.open("POST", "http://localhost:2735/call.asmx/HelloWorld", false);
xmlHttp.send();
document.getElementById("txtHint").innerHTML = xmlHttp.responseText;
}
}
}
</script>
</head>
<body>
<form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form><p>Suggestions: <span id="txtHint"></span></p> </body>
</html>

Webservice Section

namespace Xmlhttp
{
///