tag:blogger.com,1999:blog-78580076528913772302024-08-28T06:06:45.451-07:00Vi$huvishalhttp://www.blogger.com/profile/02063336886358955477noreply@blogger.comBlogger9125tag:blogger.com,1999:blog-7858007652891377230.post-59012367268246214472012-01-31T06:58:00.001-08:002012-01-31T06:58:12.642-08:00ASP.NET Search Records In GridView Footer And Highlight Results<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 class="post-title entry-title">
<br />
</h1>
<div class="post-header-line-1">
<span class="post-author vcard"><br />
<a href="http://www.csharpaspnetarticles.com/2008/12/search-within-records-in-gridview-with.html"><strong></strong></a>
</span>
</div>
<span class="star-ratings">
</span>
<br />
<b>Search Records In GridView Footer And Highlight Results using ajax in asp.net</b><br />
<br />
In this example i am populating gridview without using sqlDataSource but by creating Sqlconnection and SqlCommand.<br />
<br />
I've put a textbox for text to search in footer of gridview using footer
template , and the search results are highlighted using regular
expression, i m using AJAX for partial postback and update progress
template to show search progress<br />
<span class="fullpost"><br />
<div class="codeview1">
<pre class="csharpcode"><span class="asp"><%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %></span>
<span class="kwrd"><!</span><span class="html">DOCTYPE</span> <span class="attr">html</span> <span class="attr">PUBLIC</span> <span class="kwrd">"-//W3C//DTD XHTML 1.1//EN"</span>
<span class="kwrd">"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">html</span> <span class="attr">xmlns</span><span class="kwrd">="http://www.w3.org/1999/xhtml"</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">head</span> <span class="attr">runat</span><span class="kwrd">="server"</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">title</span><span class="kwrd">></span>Search and highlight Results in Grdiview
<span class="kwrd"></</span><span class="html">title</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">style</span> <span class="attr">type</span><span class="kwrd">="text/css"</span><span class="kwrd">></span>
.highlight {text-decoration:none; font-weight:bold;
color:black; background:yellow;}
<span class="kwrd"></</span><span class="html">style</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">head</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">body</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">form</span> <span class="attr">id</span><span class="kwrd">="form1"</span> <span class="attr">runat</span><span class="kwrd">="server"</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">asp:ScriptManager</span> <span class="attr">ID</span><span class="kwrd">="ScriptManager1"</span>
<span class="attr">runat</span><span class="kwrd">="server"</span> <span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">asp:UpdatePanel</span> <span class="attr">ID</span><span class="kwrd">="UpdatePanel1"</span>
<span class="attr">runat</span><span class="kwrd">="server"</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ContentTemplate</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">div</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">asp:GridView</span> <span class="attr">ID</span><span class="kwrd">="grdSearch"</span> <span class="attr">runat</span><span class="kwrd">="server"</span>
<span class="attr">BackColor</span><span class="kwrd">="white"</span> <span class="attr">BorderColor</span><span class="kwrd">="Aqua"</span>
<span class="attr">AutoGenerateColumns</span><span class="kwrd">="false"</span> <span class="attr">ShowFooter</span><span class="kwrd">="true"</span>
<span class="attr">OnRowCommand</span><span class="kwrd">="grdSearch_RowCommand"</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">FooterStyle</span> <span class="attr">BackColor</span><span class="kwrd">="AliceBlue"</span>
<span class="attr">ForeColor</span><span class="kwrd">="AntiqueWhite"</span> <span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">PagerStyle</span> <span class="attr">BackColor</span><span class="kwrd">="#99CCCC"</span>
<span class="attr">ForeColor</span><span class="kwrd">="#003399"</span> <span class="attr">HorizontalAlign</span><span class="kwrd">="Left"</span> <span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">HeaderStyle</span> <span class="attr">BackColor</span><span class="kwrd">="#003399"</span>
<span class="attr">Font-Bold</span><span class="kwrd">="True"</span> <span class="attr">ForeColor</span><span class="kwrd">="#CCCCFF"</span> <span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">Columns</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">asp:TemplateField</span> <span class="attr">HeaderText</span><span class="kwrd">="FirstName"</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ItemTemplate</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">asp:Label</span> <span class="attr">ID</span><span class="kwrd">="lblFIrstName"</span> <span class="attr">runat</span><span class="kwrd">="server"</span>
<span class="attr">Text</span><span class="kwrd">='<%# Highlight(Eval("FirstName").ToString()) %>'</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">asp:Label</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">ItemTemplate</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">FooterTemplate</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">asp:TextBox</span> <span class="attr">ID</span><span class="kwrd">="txtSearch"</span> <span class="attr">runat</span><span class="kwrd">="server"</span>
<span class="attr">Width</span><span class="kwrd">="70px"</span><span class="kwrd">></</span><span class="html">asp:TextBox</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">asp:Button</span> <span class="attr">ID</span><span class="kwrd">="btnSearch"</span>
<span class="attr">CommandName</span><span class="kwrd">="Search"</span>
<span class="attr">runat</span><span class="kwrd">="server"</span> <span class="attr">Text</span><span class="kwrd">="Search"</span>
<span class="attr">Width</span><span class="kwrd">="60px"</span> <span class="kwrd">/></span>
<span class="kwrd"></</span><span class="html">FooterTemplate</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">asp:TemplateField</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">asp:BoundField</span> <span class="attr">DataField</span><span class="kwrd">="LastName"</span>
<span class="attr">HeaderText</span><span class="kwrd">="LastName"</span> <span class="kwrd">/></span>
<span class="kwrd"></</span><span class="html">Columns</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">asp:GridView</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">div</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">ContentTemplate</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">asp:UpdatePanel</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">asp:UpdateProgress</span> <span class="attr">ID</span><span class="kwrd">="UpdateProgress1"</span>
<span class="attr">runat</span><span class="kwrd">="server"</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">ProgressTemplate</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">br</span> <span class="kwrd">/></span>
<span class="kwrd"><</span><span class="html">img</span> <span class="attr">src</span><span class="kwrd">="Images/ajax.gif"</span>
<span class="attr">alt</span><span class="kwrd">="Searchig"</span> <span class="kwrd">/></span>
<span class="kwrd"></</span><span class="html">ProgressTemplate</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">asp:UpdateProgress</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">form</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">body</span><span class="kwrd">></span>
<span class="kwrd"></</span><span class="html">html</span><span class="kwrd">></span>
</pre>
</div>
<br />
And the code behind first of all i m populating the Grid by making
sqlconnection, Sqlcommand and fatching the data from database, than
binding the data to grid view at Page_Load event after checking the page
is not loading firs time by by checking flag of isPostBack<br />
<div class="codeview">
<pre class="csharpcode"><span class="kwrd">using</span> System;
<span class="kwrd">using</span> System.Data;
<span class="kwrd">using</span> System.Configuration;
<span class="kwrd">using</span> System.Web;
<span class="kwrd">using</span> System.Web.Security;
<span class="kwrd">using</span> System.Web.UI;
<span class="kwrd">using</span> System.Web.UI.WebControls;
<span class="kwrd">using</span> System.Web.UI.WebControls.WebParts;
<span class="kwrd">using</span> System.Web.UI.HtmlControls;
<span class="kwrd">using</span> System.Text.RegularExpressions;
<span class="kwrd">using</span> System.Data.SqlClient;
<span class="kwrd">public</span> <span class="kwrd">partial</span> <span class="kwrd">class</span> _Default : System.Web.UI.Page
{
<span class="kwrd">string</span> strConnection =
ConfigurationManager.AppSettings[<span class="str">"ConnectionString"</span>];
<span class="kwrd">protected</span> <span class="kwrd">void</span> Page_Load(<span class="kwrd">object</span> sender, EventArgs e)
{
<span class="kwrd">if</span> (!IsPostBack)
{
BindGrid();
}
}
<span class="kwrd">private</span> DataTable GetRecords()
{
SqlConnection conn = <span class="kwrd">new</span> SqlConnection(strConnection);
conn.Open();
SqlCommand cmd = <span class="kwrd">new</span> SqlCommand();
cmd.Connection = conn;
cmd.CommandType = CommandType.Text;
cmd.CommandText = <span class="str">"Select * from Employees"</span>;
SqlDataAdapter dAdapter = <span class="kwrd">new</span> SqlDataAdapter();
dAdapter.SelectCommand = cmd;
DataSet objDs = <span class="kwrd">new</span> DataSet();
dAdapter.Fill(objDs);
<span class="kwrd">return</span> objDs.Tables[0];
}
<span class="kwrd">private</span> <span class="kwrd">void</span> BindGrid()
{
DataTable dt = GetRecords();
<span class="kwrd">if</span> (dt.Rows.Count > 0)
{
grdSearch.DataSource = dt;
grdSearch.DataBind();
}
}</pre>
</div>
<br />
Now i've written a method to search the text within results of GridView, which user enter in the TextBox to search<br />
<div class="codeview1">
<pre class="csharpcode"><span class="kwrd">private</span> <span class="kwrd">void</span> SearchText(<span class="kwrd">string</span> strSearchText)
{
DataTable dt = GetRecords();
DataView dv = <span class="kwrd">new</span> DataView(dt);
<span class="kwrd">string</span> SearchExpression = <span class="kwrd">null</span>;
<span class="kwrd">if</span> (!String.IsNullOrEmpty(strSearchText))
{
SearchExpression =
<span class="kwrd">string</span>.Format(<span class="str">"{0} '%{1}%'"</span>,
grdSearch.SortExpression, strSearchText);
}
dv.RowFilter = <span class="str">"FirstName like"</span> + SearchExpression;
grdSearch.DataSource = dv;
grdSearch.DataBind();
}
</pre>
</div>
<br />
Next step is to check the command in RowCommand event of grid view,if it
is what u've defined in while creating the button in footer of grid by
assigning the commandname property, if yes than get the text entered by
user in textbox placed in footer of gridview by using findcontrol method
and pass this text to the search method written earlier by making a
call to that method<br />
<div class="codeview1">
<pre class="csharpcode"><span class="kwrd">protected</span> <span class="kwrd">void</span> grdSearch_RowCommand
(<span class="kwrd">object</span> sender, GridViewCommandEventArgs e)
{
System.Threading.Thread.Sleep(2000);
<span class="kwrd">if</span> (e.CommandName == <span class="str">"Search"</span>)
{
TextBox txtGrid =
(TextBox)grdSearch.FooterRow.FindControl(<span class="str">"txtSearch"</span>);
SearchText(txtGrid.Text);
}
}</pre>
</div>
<br />
Now to highlight the search text in results i m using regexp and replacing the the words found with highlighted in yellow color<br />
<div class="codeview">
<pre class="csharpcode"><span class="kwrd">public</span> <span class="kwrd">string</span> Highlight(<span class="kwrd">string</span> InputTxt)
{
GridViewRow gvr = grdSearch.FooterRow;
<span class="kwrd">if</span> (gvr != <span class="kwrd">null</span>)
{
TextBox txtExample =
(TextBox)grdSearch.FooterRow.FindControl(<span class="str">"txtSearch"</span>);
<span class="kwrd">if</span> (txtExample.Text != <span class="kwrd">null</span>)
{
<span class="kwrd">string</span> strSearch = txtExample.Text;
<span class="rem">//string Search_Str = txtGrid.Text.ToString();</span>
<span class="rem">// Setup the regular expression </span>
<span class="rem">//and add the Or operator.</span>
Regex RegExp =
<span class="kwrd">new</span> Regex(strSearch.Replace(<span class="str">" "</span>, <span class="str">"|"</span>).Trim(),
RegexOptions.IgnoreCase);
<span class="rem">//Highlight keywords by calling the delegate </span>
<span class="rem">//each time a keyword is found.</span>
<span class="kwrd">return</span>
RegExp.Replace(InputTxt, <span class="kwrd">new</span> MatchEvaluator(ReplaceKeyWords));
<span class="rem">// Set the RegExp to null.</span>
RegExp = <span class="kwrd">null</span>;
}
<span class="kwrd">else</span>
<span class="kwrd">return</span> InputTxt;
}
<span class="kwrd">else</span>
{
<span class="kwrd">return</span> InputTxt;
}
}
<span class="kwrd">public</span> <span class="kwrd">string</span> ReplaceKeyWords(Match m)
{
<span class="kwrd">return</span> <span class="str">"<span class=highlight>"</span> + m.Value + <span class="str">"</span>"</span>;
}</pre>
</div>
<br />
<br />
<span style="font-weight: bold;">Download the sample code attached </span><br />
<a href="http://www.box.net/shared/at89h0sdmm" target="_blank"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5276726164752557890" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcWoFJ_bUdqMSsHTW2boK_QuOCFdF4PY_PKuq_mV2cdc4PT61UOJCtWsjoXzhbhyphenhyphenT962ZEpXcst2Te13fX_7Os5F17QRwJMSkHtQgXJeyg04z1U9jDvz8hf1cVXOzqGJvLP0v7o5JnpWYC/s400/download.jpg" style="cursor: pointer; height: 72px; width: 75px;" /></a></span></div>vishalhttp://www.blogger.com/profile/02063336886358955477noreply@blogger.com0tag:blogger.com,1999:blog-7858007652891377230.post-88184234070500349692012-01-29T08:38:00.002-08:002012-01-29T08:38:35.175-08:00Hide/Show validator callout control using javascript<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 class="post-title entry-title">
Hide/Show validator callout control using javascript
</h3>
<div class="post-header">
</div>
<div class="post-body entry-content" id="post-body-150078717285977990">
<div align="justify">
In my <a href="http://sandblogaspnet.blogspot.com/2009/04/calling-validator-controls-from.html" target="_blank">previous blog</a>
we saw how to call validation controls from javascripts. This blog we
will see how to show and hide a ASP.NET AJAX’ (AJAXControlToolkit)
ValidatorCalloutExtender control using javascript. Below is an aspx page
with a validator callout control.</div>
<table bgcolor="#ffffff" border="1" style="width: 400px;"><tbody>
<tr> <td> <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <br /><%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="AJAXControls" %> <br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</a>> <br /><html xmlns="<a href="http://www.w3.org/1999/xhtml%22">http://www.w3.org/1999/xhtml"</a>> <br /><head runat="server"> <br /> <title>Untitled Page</title> <br /></head> <br />
<body> <br /> <form id="form1" runat="server"> <br /> <div> <br /> <!--ASP.NET Drop down control--> <br /> <asp:DropDownList ID="status" runat="server" > <br /> <asp:ListItem Selected="True" Text="Select" Value="0" /> <br /> <asp:ListItem Text="One" /> <br /> <asp:ListItem Text="Two" /> <br /> <asp:ListItem Text="Three" /> <br /> </asp:DropDownList> <br /> <!--ASP.NET Required Field Validator to validate the drop down.--> <br />
<asp:RequiredFieldValidator ID="statusValidator" runat="server"
ErrorMessage="Please choose a value other than 'Select'" <br /> ControlToValidate="status" InitialValue="0" Visible="true"> <br /> </asp:RequiredFieldValidator> <br /> <!--Validator callout control--> <br /> <AJAXControls:ValidatorCalloutExtender ID="statusValidator_ValidatorCalloutExtender" <br /> runat="server" TargetControlID="statusValidator"> <br /> </AJAXControls:ValidatorCalloutExtender> <br /> <asp:Button ID="submit" Text="Submit" OnClientClick="javascript:return ValidatePage();" <br /> runat="server" /> <br /> </div> <br /> <asp:ScriptManager ID="ScriptManager1" runat="server"> <br /> </asp:ScriptManager> <br /> </form> <br /></body> <br /></html><br />
</td> </tr>
</tbody></table>
<div align="justify">
The
above code has a dropdown control with an ASP.NET required field
validator control and a validator callout control attached to it. As
soon as you click the submit button and if there is a validation error
the error will be popped out in the validator callout control as shown
below.</div>
<table bgcolor="#ffffff" border="1" style="width: 400px;"><tbody>
<tr> <td><img alt="Error in Validator callout control" border="0" height="54" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP-f-tj6paHWZUXiEqlgbjuJP5UZtKS8dR5d5D_kNyyl_1qHTujakFTcgUe5k4_xjO7bkfoP10F_Fa9BXrdkVYob-Jw7RhLFYwBK3zb8hFPKLZ5diBcIsnWOPHlOoW12GXbxuDs2jTjEjc/?imgmax=800" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Error in Validator callout control" width="274" /></td> </tr>
</tbody></table>
<div align="justify">
Popping
of the error message in a validator callout control happens
automatically. But there may be scenario where you would like to hide or
show the validator control using javascript. The below sample code does
exactly that.</div>
<table bgcolor="#ffffff" border="1" style="width: 400px;"><tbody>
<tr> <td> <script language="javascript" type="text/javascript"> <br />function ValidatePage() <br />{ <br /> //Function which calls the whole validation for the page. <br /> if (Page_ClientValidate()) <br /> { <br /> return true; <br /> } <br /> else <br /> { <br /> hideValidatorCallout(); <br /> return false; <br /> } <br />} <br />//User defined method which hides the AjaxControlToolkit ValidatorCalloutExtender control <br />function hideValidatorCallout() <br />{ <br /> //Below code hides the active AjaxControlToolkit ValidatorCalloutExtender control. <br />AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout.hide(); <br /> setTimeout(showValidatorCallout, 3000); <br />} <br />
function showValidatorCallout() <br />{ <br /> //Gets the AjaxControlToolkit ValidatorCalloutExtender control using the $find method. <br />
AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout =
$find('<% =statusValidator_ValidatorCalloutExtender.ClientID %>');
<br /> //Below code unhides the AjaxControlToolkit ValidatorCalloutExtender control. <br />AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout.show(true); <br />} <br /></script><br />
</td> </tr>
</tbody></table>
<div align="justify">
From
the above code we can see that there is a code something like this
“AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout”. The
_currentCallout property will hold the current validator callout
control. Whenever there is a validation failure and if there is
validator callout control associated with validator control, the
_currentCallout property will be assigned the validator callout control.
To hide the validator callout control you need to use the “hide”
javascript function along with the _currentCallout property as shown
below.</div>
<table bgcolor="#ffffff" border="1" style="width: 400px;"><tbody>
<tr> <td>AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout.hide();</td> </tr>
</tbody></table>
<div align="justify">
At
any given point the _currentCallout property will have only one
validator callout assigned, this is to avoid the confusion or dirtiness
which can arise by showing all the validator callout control. If all the
validator callouts are shown when multiple validation fails then the
screen will be cluttered with all the validator callouts popping here
and there. To avoid this cluttered view this approach of showing only
one validator callout control has been taken.</div>
<div align="justify">
Similarly
to show the validator callout control you can use the “show” javascript
method along with _currentCallout property as shown below.</div>
<table bgcolor="#ffffff" border="1" style="width: 400px;"><tbody>
<tr> <td> //Gets the AjaxControlToolkit ValidatorCalloutExtender control using the $find method. <br />
AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout =
$find('<% =statusValidator_ValidatorCalloutExtender.ClientID %>');
<br /> //Below code unhides the AjaxControlToolkit ValidatorCalloutExtender control. <br /> AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout.show(true);<br />
</td> </tr>
</tbody></table>
<div align="justify">
But the above code if used just like that can throw the following error.</div>
<table bgcolor="#ffffff" border="1" style="width: 400px;"><tbody>
<tr> <td><span style="color: red;">Microsoft JScript runtime error: 'this._popupBehavior' is null or not an object</span></td> </tr>
</tbody></table>
<div align="justify">
The reason why this happens is that we have not called either <a href="http://sandblogaspnet.blogspot.com/2009/04/calling-validator-controls-from.html" target="_blank">ValidatorEnable</a> or <a href="http://sandblogaspnet.blogspot.com/2009/04/calling-validator-controls-from.html" target="_blank">ValidatorValidate</a>
javascript functions. These two functions set the necessary things,
like _popupBehavior property, for the validator control to work
properly. Validator callout controls are not meant to be shown directly
they are actually extender controls which extend the functionality of
the validation control and these controls are shown automatically when a
validator control’ validation condition fails. So if you want to show a
validator callout function just call ValidatorEnable or
ValidatorValidate javascript function. </div>
<div align="justify">
That’
about it, on how to hide and show validator callout controls using
javascript. I know I have not mentioned anything about “$find”
javascript function. We will have a discussion on this in my <a href="http://sandblogaspnet.blogspot.com/2009/06/difference-between-get-and-find.html" target="_blank">subsequent blog</a>. For the time being just understand it as a shortcut method to find a component. In our <a href="http://sandblogaspnet.blogspot.com/2009/04/hideshow-validator-callout-control.html" target="_blank">next blog</a> we will see how to set focus to a particular tab in the AjaxControlToolkit’ tab container control.</div>
<strong><u>Some important methods of ValidatorCallout controls</u></strong><br />
<table bgcolor="#ffffff" border="1" style="width: 407px;"><tbody>
<tr> <td valign="top" width="144"><strong>Methods/Properties</strong></td> <td width="261"><strong>Description</strong></td> </tr>
<tr> <td valign="top" width="144">_getErrorMessage()</td> <td width="261">Gets/returns the error message</td> </tr>
<tr> <td valign="top" width="144">get_closeImageUrl()</td> <td width="261">Gets/returns the close image url at the top rightmost corner of the validator callout control. Default is an x mark.</td> </tr>
<tr> <td valign="top" width="144">get_isOpen()</td> <td width="261">Gets/returns a boolean value indicating whether the validator callout is opened or not.</td> </tr>
<tr> <td valign="top" width="144">get_warningIconImageUrl()</td> <td width="261">Gets/returns the warning icon image’ url. Default is an exclamation mark inside a triangle.</td> </tr>
<tr> <td valign="top" width="144">get_width()</td> <td width="261">Gets/returns the width of the validator callout control.</td> </tr>
<tr> <td valign="top" width="144">hide()</td> <td width="261">Function to hide the validator callout control.</td> </tr>
<tr> <td valign="top" width="144">set_closeImageUrl(imageUrl)</td> <td width="261">Function to set the close image url. One can use this method to change the default X mark.</td> </tr>
<tr> <td valign="top" width="144">set_warningIconImageUrl(imageUrl)</td> <td width="261">Function to set the warning image. One can use this function to change the default exclamation image used for warning.</td> </tr>
<tr> <td valign="top" width="144">set_width(int)</td> <td width="261">Function used to set the width of the validator callout control.</td> </tr>
<tr> <td valign="top" width="144">show()</td> <td width="261">To show the validator callout control.</td> </tr>
<tr> <td valign="top" width="144">_closeImageUrl</td> <td width="261">Property to get/set the close image.</td> </tr>
<tr> <td valign="top" width="144">_warningIconImageUrl</td> <td width="261">Property to get/set the warning image.</td> </tr>
<tr> <td valign="top" width="144">_width</td> <td width="261">Property to get/set the width of the validator callout control</td> </tr>
<tr> <td valign="top" width="144">_popupBehavior</td> <td width="261">Property using which one can work with the pop up behaviour of the validator callout control.</td> </tr>
<tr> <td valign="top" width="144">_errorMessageCell</td> <td width="261">Property using which one can modify the error message.</td> </tr>
</tbody></table>
<strong><u>Some methods of ValidatorCallout._popupBehavior property</u></strong><br />
<div align="justify">
Below
are listed few of the _methods of _popupBehavior property of validator
callout function. These methods are available with only _popupBehavior
property. If one wants use these methods then one has retrieve the
_popupBehavior property from validator callout control by any of the
following two means shown below.</div>
<table bgcolor="#ffffff" border="1" style="width: 405px;"><tbody>
<tr> <td width="403"> //Retrieving the validator callout control using the $find helper method. <br />var valCallout = $find('<%=statusValidator_ValidatorCalloutExtender.ClientID %>'); <br />//Get the _popupBehavior property in a variant object and then <br />//use the required methods. <br />var popUpBehavior = valCallout._popupBehavior; <br />popUpBehavior.set_x(10); <br />popUpBehavior.set_y(20); <br />//Directly use the methods along with the _popupBehavior property as shown below. <br />valCallout._popupBehavior.set_x(20); <br />valCallout._popupBehavior.set_y(30);<br />
</td> </tr>
</tbody></table>
<div align="justify">
After retrieving the _popupBehavior property by any of the above means you can use the following methods.</div>
<table bgcolor="#ffffff" border="1" style="width: 404px;"><tbody>
<tr> <td valign="top" width="116"><strong>Methods/Properties</strong></td> <td width="286"><strong>Description</strong></td> </tr>
<tr> <td valign="top" width="116">get_x()</td> <td width="286">Method to get the X coordinates of the validator callout control</td> </tr>
<tr> <td valign="top" width="116">get_y()</td> <td width="286">Method to get the Y coordinates of the validator callout control.</td> </tr>
<tr> <td valign="top" width="116">get_visible()</td> <td width="286">Methods that returns a boolean value specifying whether the validator callout control is visible or not.</td> </tr>
<tr> <td valign="top" width="116">set_x(x_coordinate)</td> <td width="286">Method to set the X coordinate for the validator callout control. Method takes an integer value as an argument.</td> </tr>
<tr> <td valign="top" width="116">set_y(y_coordinate)</td> <td width="286">Method to set the Y coordinate for the validator callout control. Method takes an integer value as an argument.</td> </tr>
</tbody></table>
<strong><u>Some methods of ValidatorCallout._errorMessageCell property</u></strong><br />
<div align="justify">
Since
_errorMessageCell returns a TD (cell) object there is nothing much new
it has all the methods/properties corresponding to a cell object. One
use of this property is to change the error message of the validator
callout extendor control using javascript. To change the error message
using javascript see the code below.</div>
<table bgcolor="#ffffff" border="1" style="width: 400px;"><tbody>
<tr> <td> //Retrieving the validator callout control using the $find helper method. <br />var valCallout = $find('<%=statusValidator_ValidatorCalloutExtender.ClientID %>'); <br />//Get the error message cell. <br />var messageCell = valCallout._errorMessageCell; <br />//Changing the error message. <br />messageCell.innerHTML = "Changed:)";<br />
</td> </tr>
</tbody></table>
<strong><u>Mail from my blog reader</u></strong><br />
Recently
one of my blog reader mailed me across some problems he was facing with
validator callout control. For the benefit of the readers I am pasting
the mail chain discussion here, with prior permission from the reader
who mailed me.<br />
<table bgcolor="#ffffff" border="1" style="width: 400px;"><tbody>
<tr> <td> Hey Sandeep, how are you? <br />
I've read your amazing article on: <br />
<a href="http://sandblogaspnet.blogspot.com/2009/04/">http://sandblogaspnet.blogspot.com/2009/04/</a> <br />setting-focus-to-particular-tab-in.html <br />
thank you very much, it really help me! <br />
So, I want to call all validators, and them call the specific callout, <br />since we can access Page_Validators[validatorIndex]... <br />
I could execute all the validators, but now I need to know the name of <br />validator to call the callout. <br />
var validator = Page_Validators[validatorIndex]; <br />
do you know how to get the id of the validator? <br />
validator.Id ? validator.ClientId ? <br />
thank you ! <br />
this is my solution for now: <br />
<script language="javascript" type="text/javascript"> <br /> var Page_Callout = new Array("<% <br />=statusValidator_ValidatorCalloutExtender.ClientID %>"); <br />
function ValidatePage() { <br />
if (typeof (Page_Validators) == "undefined") return; <br />
var noOfValidators = Page_Validators.length; <br />
for (var validatorIndex = 0; validatorIndex < noOfValidators; <br />validatorIndex++) <br /> { <br /> var validator = Page_Validators[validatorIndex]; <br />
ValidatorValidate(validator); <br />
if (!validator.isvalid) { <br />
var tabPanel = validator.parentElement.control; <br /> var tabContainer = tabPanel.get_owner(); <br /> tabContainer.set_activeTabIndex(tabPanel.get_tabIndex()); <br />
showValidatorCallout($find(Page_Callout[validatorIndex])); <br />
return false; <br /> } <br /> return true; <br /> } <br /> } <br />
function hideValidatorCallout() { <br /> AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout.hide(); <br /> } <br />
function showValidatorCallout(currrentCallout) { <br /> AjaxControlToolkit.ValidatorCalloutBehavior. <br />_currentCallout =currrentCallout; <br /> AjaxControlToolkit.ValidatorCalloutBehavior. <br />_currentCallout.show(true); <br /> } <br /></script> <br />
<strong><u><span style="color: magenta; font-size: x-small;">-- My reply--</span></u></strong> <br />Hi XYZ, <br />
If
I am not wrong when you are calling the function "showValidatorCallout"
it doesn't show the validator callout in the tab? Am I right? If yes I
have also faced the same problem. I solved this by a dirty hack. So what
I did is something like this. <br />
ValidatorEnable(dropDownValidator); //Calling the validator callout for the first time. Just a dummy call. <br />if (!dropDownValidator.isvalid) <br />{ <br /> setActiveTabIndex(0); //Method which sets the active index. <br /> hideCurrCallout(); //Method which hide the current validator callout <br /> ValidatorEnable(dropDownValidator); //Calling ValidatorEnable method for the second time. <br />} <br />
Hope
this helps. So when you work with tab you have to use the above hack to
display validator callout control. I didn't get much time to find out
the reason behind but will try find out. <br />
<strong><u><span style="color: magenta;">--Response from the reader--</span></u></strong> <br />Hey Sandeep, thanks... <br />
I've another problem with the callout's... Please, take a loot in that <br />image attached.. do you have this problem ? <br />When the field is in the right side... the callout create scrolls and <br />expand the width of the page :( <br />
Do you know how to avoid this ? <br />
<u><span style="color: magenta;"><strong>--My reply-- </strong></span></u>Hope
your previous problem has been solved. This is the auto behaviour of
the browser where if something is dynamically created and it exceeds the
width of the browser it will give you a scroll bar. For this you can
set the X and Y coordinates of the callout control so that they won't
exceed the width of the browser. To set the X and Y coordinates you can
use the following code. <br />
//Retrieving the validator callout control using the $find shortcut method. <br />var valCallout = $find('<%=statusValidator_ValidatorCalloutExtender.ClientID %>'); <br />//Setting the X coordinates <br />valCallout.validatorCallout._popupBehavior.set_x(xCordinates); <br />//Setting the X coordinates <br />valCallout.validatorCallout._popupBehavior.set_y(yCordinates) <br />
or you can use the below code. <br />
AjaxControlToolkit.ValidatorCalloutBehavior. <br />_currentCallout._popupBehavior.set_x(xCordinates); <br />AjaxControlToolkit.ValidatorCalloutBehavior. <br />_currentCallout._popupBehavior.set_y(yCordinates) <br />
Hope this solves your problem. <br />
<strong><u><span style="color: magenta;">--Reader response--</span></u></strong> <br />Hi Sandeep, <br />
Yeah... you solve the problems :) <br />
thank you again. <br />
cheers,<br />
</td> </tr>
</tbody></table>
</div>
<span class="post-author vcard">
</span></div>vishalhttp://www.blogger.com/profile/02063336886358955477noreply@blogger.com0tag:blogger.com,1999:blog-7858007652891377230.post-84123457878973844142012-01-29T08:38:00.000-08:002012-01-29T08:38:02.374-08:00Trim function in javascript<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 class="post-title entry-title">
Trim function in javascript
</h3>
<div class="post-header">
</div>
<div align="justify">
<strong><u>Trim function in javascript</u></strong></div>
<div align="justify">
One
important function which we miss very much while working with string
object in javascript is the trim function. Not anymore. If you are using
ASP.NET you can very well make use of “ValidatorTrim” function to trim
both leading and trailing spaces. E.g. is shown below.</div>
<table bgcolor="#ffffff" border="1" style="width: 400px;"><tbody>
<tr> <td> var testString = ' Test trail text '; <br />//Below code removes spaces before and after the word. <br />testString = ValidatorTrim(testString);<br />
</td> </tr>
</tbody></table>
<div align="justify">
In
the above e.g. ValidatorTrim removes the leading and trailing spaces in
the “ Test text ” string and returns “Test Text” as the string. So
whenever you need to trim spaces in javascript then go ahead and use
“ValidatorTrim” function to trim spaces.</div>
<div align="justify">
If you keep a breakpoint on the ValidatorTrim function and step into the function you can see the following code.</div>
<table bgcolor="#ffffff" border="1" style="width: 400px;"><tbody>
<tr> <td> function ValidatorTrim(s) { <br /> var m = s.match(/^\s*(\S+(\s+\S+)*)\s*$/); <br /> return (m == null) ? "" : m[1]; <br />}<br />
</td> </tr>
</tbody></table>
One
can see from the above code that Regular Expression is used to pick out
the text without the trailing and leading spaces. People who are not
ASP.NET developers can very well implement the same logic and can have
their own javascript trim function. </div>vishalhttp://www.blogger.com/profile/02063336886358955477noreply@blogger.com0tag:blogger.com,1999:blog-7858007652891377230.post-20377747421041549292012-01-29T08:35:00.001-08:002012-01-29T08:35:16.052-08:00Data type validation using validation control<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 class="post-title entry-title">
Data type validation using validation control
</h3>
<div class="post-header">
</div>
<div align="justify">
While developing ASP.NET application you would have
come across scenarios where you would like to validate whether the value
entered is of a particular data type. The options available with an
ASP.NET developer is to write javascript functions to check whether the
entered value complies with a data type or make the page postback and
check the data type in server side. These two options are time
consuming. Is there any simple way of doing this? The answer is to the
question is “YES”. One can make use of compare validator to accomplish
the task very easily. Lets see how.</div>
<div align="justify">
To compare
whether the entered value is of a particular data type one should make
sure that the “Operator” property of compare validator should be
“DataTypeCheck” and the “Type” property should be the data type you want
to check. These two things are the only requirement to validate the
data type. Compare validator supports validation for Currency, Date,
Double, Integer and String data type. Below is a sample code which tries
to check all these data types.</div>
<table bgcolor="#ffffff" border="1" style="width: 410px;"><tbody>
<tr> <td> Enter string: <asp:TextBox ID="txtString" runat="server"></asp:TextBox> <br /><span style="color: green;"><asp:CompareValidator
ID="cmpVldString" runat="server" ErrorMessage="Not a valid string."
ControlToValidate="txtString" <br />Type="String" Operator="DataTypeCheck"> </asp:CompareValidator></span><br /> <br />Enter integer: <asp:TextBox ID="txtInt" runat="server"> </asp:TextBox> <br /><span style="color: green;"><asp:CompareValidator
ID="CompareValidator1" runat="server" ErrorMessage="Not a valid
Integer." ControlToValidate="txtInt" <br /> Type="Integer" Operator="DataTypeCheck"> </asp:CompareValidator></span><br /> <br />Enter double: <asp:TextBox ID="txtDouble" runat="server"> </asp:TextBox> <br /><span style="color: green;"><asp:CompareValidator
ID="CompareValidator2" runat="server" ErrorMessage="Not a valid
double." ControlToValidate="txtDouble" <br /> Type="Double" Operator="DataTypeCheck"> </asp:CompareValidator></span><br /> <br />Enter date: <asp:TextBox ID="txtDate" runat="server"> </asp:TextBox> <br /><span style="color: green;"><asp:CompareValidator
ID="cmpVldDate" runat="server" ErrorMessage="Not a valid date."
ControlToValidate="txtDate" <br /> Type="Date" Operator="DataTypeCheck" > </asp:CompareValidator></span><br /> <br />Enter currency: <asp:TextBox ID="txtCurrency" runat="server"> </asp:TextBox> <br /><span style="color: green;"><asp:CompareValidator
ID="cmpVldCurrency" runat="server" ErrorMessage="Not a valid
currencys." ControlToValidate="txtCurrency" Type="Currency"
Operator="DataTypeCheck" > </asp:CompareValidator></span><br /> <br /><asp:Button ID="Button1" runat="server" Text="Button" /><br />
</td> </tr>
</tbody></table>
<div align="justify">
In
the above code sample you can see that I am checking the datatype for
string, Integer, date, double and finally currency. Isn’t it so easy to
check the data type? </div>
<div align="justify">
Now since we are
validating date you would like to check against a particular format say
“DD/MM/YYYY”. The default date format against which the compare
validator checks the date is “YYYY/MM/DD”. One way specify the date
format is to assign the page’ culture to the required culture which
supports your date format. Say we want to check “DD/MM/YYYY” then we can
set the following in the code behind.</div>
<table bgcolor="#ffffff" border="1" style="width: 410px;"><tbody>
<tr> <td> protected void Page_Load(object sender, EventArgs e) <br />{ <br /> <span style="color: green;">Page.Culture = "hi-IN";</span><br />
</td> </tr>
</tbody></table>
<div align="justify">
In
the above code we are setting the culture for the page as Hindi-India
which will accept the date in “DD/MM'/YYYY” format. Another way
specifying the format in compare validator is to assign culture to the
control which is specified in “ControlToValidate” property of the
compare validator. For e.g. you have date picker assigned to a compare
validator then assigning the culture or date format to the date picker
will do the trick. As such there is no way to specify date format or
culture to a compare validator. </div>
</div>vishalhttp://www.blogger.com/profile/02063336886358955477noreply@blogger.com0tag:blogger.com,1999:blog-7858007652891377230.post-2356992731254818032012-01-29T08:34:00.001-08:002012-01-29T08:34:29.303-08:00Calling web service using javascript<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 class="post-title entry-title">
Calling web service using javascript. Part -3
</h3>
<div class="post-header">
</div>
<div align="justify">
In the <a href="http://sandblogaspnet.blogspot.com/2010/03/calling-web-service-using-javascript.html" target="_blank">part 1</a> of this blog we saw how to invoke web service methods using pure javascript and in <a href="http://sandblogaspnet.blogspot.com/2010/04/calling-web-service-using-javascript.html" target="_blank">part 2</a>
we made use of web service behavior to invoke web methods. The previous
two blogs were not dependent on server technologies used by the user
but this blog will have that constraint because we will have a look at
how to invoke web methods using “ScriptManager”. “ScriptManager” is an
ASP.NET server side control which is key to AJAX functionality in
ASP.NET. Without any further delay let’ see our first web method
invocation using “ScriptManager”. For this blog we will making use of
the same web service as we have used in our previous two blogs. Below is
the code for the first web service method we are going to invoke. </div>
<div id="codeSnippetWrapper" style="border-bottom: silver 1px solid; border-left: silver 1px solid; border-right: silver 1px solid; border-top: silver 1px solid; color: #f4f4f4; cursor: text; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 20px 0px 10px; max-height: 200px; overflow: auto; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4pxfont-family:'Courier New', courier, monospace; text-align: left; width: 97.5%;">
<div id="codeSnippet" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;">
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;"><span style="color: blue;">namespace</span> ScriptManagerService</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;">{</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;"> <span style="color: green;">//The attribute which makes the web service callable from script.</span></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;"> [System.Web.Script.Services.ScriptService]</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;"> <span style="color: blue;">public</span> <span style="color: blue;">class</span> TestService : System.Web.Services.WebService</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;"> {</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;"> [WebMethod]</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;"> <span style="color: blue;">public</span> <span style="color: blue;">string</span> HelloWorld()</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;"> {</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;"> <span style="color: blue;">return</span> <span style="color: #006080;">"Hello World"</span>;</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;"> }</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;"> }</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;">}</pre>
</div>
</div>
<div align="justify">
The
above web service code is pretty straight forward. We have a simple
“HelloWorld” method which returns a string. What makes this web service
special is the “[System.Web.Script.Services.ScriptService]” attribute
added on top of the “TestService” web service class. The attribute makes
the web service callable from JavaScript. Also when the proxy classes
are generated the attribute generates JavaScript object corresponding to
the web service class. Once the web service is created now we need to
create our web page to invoke the web method. Create a new aspx page and
add a “ScriptManager” control to it. Sample aspx page with the
“ScriptManager” tag is added below.</div>
<div color="#f4f4f4" face="'Courier New', courier, monospace" id="codeSnippetWrapper" size="8pt" style="border-bottom: silver 1px solid; border-left: silver 1px solid; border-right: silver 1px solid; border-top: silver 1px solid; cursor: text; direction: ltr; line-height: 12pt; margin: 20px 0px 10px; max-height: 200px; overflow: auto; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; text-align: left; width: 97.5%;">
<div id="codeSnippet" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;">
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;"><body></pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><script language=<span style="color: #006080;">"javascript"</span> type=<span style="color: #006080;">"text/javascript"</span>></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;">function invokeSimpleWebMethod()</pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">{</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;"> ScriptManagerService.TestService.HelloWorld(handleResult); </pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">} </pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;"> </pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">function handleResult(result)</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;">{</pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> alert(result);</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;">}</pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"></script></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;"> <form id=<span style="color: #006080;">"form1"</span> runat=<span style="color: #006080;">"server"</span>></pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <div></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;"> <asp:ScriptManager ID=<span style="color: #006080;">"scrMgr"</span> runat=<span style="color: #006080;">"server"</span>></pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <Services></pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <asp:ServiceReference Path=<span style="color: #006080;">"TestService.asmx"</span> /> </pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> </Services></pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> </asp:ScriptManager></pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <asp:Button ID=<span style="color: #006080;">"btnHW"</span> runat=<span style="color: #006080;">"server"</span> Text=<span style="color: #006080;">"Hello World"</span> OnClientClick=<span style="color: #006080;">"invokeSimpleWebMethod();"</span> /></pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> </div></pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> </form> </pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"></body></pre>
</div>
</div>
<div align="justify">
In
the above code we can see that we have a “ScriptManager” server control
added. And inside the “Services” tag we have added reference to our
local web service using the “ServiceReference” tag. The path attribute
of the “ServiceReference” tag has the url of the web service which needs
to be invoked. You can add multiple web services by adding additional
“ServiceReference” tags. What ASP.NET does here is that it generates
JavaScript proxy classes for each of the web services mentioned in the
“ServiceReference” tag. All the auto generated JavaScript proxy classes
derive from “Sys.Net.WebServiceProxy”.</div>
<div align="justify">
Also we
have an ASP.NET Button server control which calls a
“invokeSimpleWebMethod” javascript method on its “OnClientClick” event.
In the “invokeSimpleWebMethod” javascript method we have made use of the
namespace (in which the web service is defined) followed by the web
service name and finally the method name which needs to be invoked.
Behind the scene ASP.NET has done the extra work of registering the
namespace and creating the proxy classes and also adding the methods
defined inside the web service into a proxy JavaScript class. If you
notice the “HelloWorld” method takes an argument. The argument is
nothing but the name of the JavaScript function which needs to be
invoked when the web service method has been successfully executed and
results are returned to the browser. You can also pass the name of the
function which needs to be invoked when the web service method
invocation request fails. We will see the same shortly. The
“handleResult” JavaScript method gets called when the asynchronous
request is successfully returned. The method gracefully displays the
result in an alert message box.</div>
<div align="justify">
That’ about how to
use the “ScriptManager” server control to invoke a web service methods
i.e. namespace followed by class name followed by the method name. One
thing to note is that “ScriptManager” control can only be used to call
web services in the same domain. Now lets see how to pass parameters to
web methods.</div>
<div align="justify">
<strong><u>Passing parameters to web method</u></strong></div>
<div align="justify">
We will use the following web method to see how we can pass parameters by using “ScriptManager”.</div>
<div color="#f4f4f4" face="'Courier New', courier, monospace" id="codeSnippetWrapper" size="8pt" style="border-bottom: silver 1px solid; border-left: silver 1px solid; border-right: silver 1px solid; border-top: silver 1px solid; cursor: text; direction: ltr; line-height: 12pt; margin: 20px 0px 10px; max-height: 200px; overflow: auto; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; text-align: left; width: 97.5%;">
<div id="codeSnippet" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;">
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">[WebMethod]</pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><span style="color: blue;">public</span> <span style="color: blue;">string</span> CombineName(<span style="color: blue;">string</span> firstName, <span style="color: blue;">string</span> midleName, <span style="color: blue;">string</span> lastName)</pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">{</pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;">return</span> <span style="color: blue;">string</span>.Concat(<span style="color: blue;">string</span>.Concat(firstName, <span style="color: #006080;">" - "</span>, midleName), <span style="color: #006080;">" - "</span>, lastName);</pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">}</pre>
</div>
</div>
<div align="justify">
The above method is pretty straight and it is the same method which I have used in my <a href="http://sandblogaspnet.blogspot.com/2010/04/calling-web-service-using-javascript.html" target="_blank">previous blog</a>.
The method takes three string arguments and concatenates them and
returns them as a single string. Now lets see how we can pass the three
parameters from JavaScript.</div>
<div align="justify">
Below is the JavaScript method which invokes the web method with the three string parameters.</div>
<div class="csharpcode">
<div id="codeSnippetWrapper" style="background-color: #f4f4f4; border-bottom: silver 1px solid; border-left: silver 1px solid; border-right: silver 1px solid; border-top: silver 1px solid; cursor: text; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 20px 0px 10px; max-height: 200px; overflow: auto; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; text-align: left; width: 97.5%;">
<div id="codeSnippet" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;">
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><span style="color: blue;">function</span> webMethodWithParams()</pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">{ </pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> ScriptManagerService.TestService.CombineName(<span style="color: #006080;">"Sandeep"</span>, <span style="color: #006080;">" "</span>, <span style="color: #006080;">"P.R"</span>, handleResult, handleError);</pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">}</pre>
</div>
</div>
</div>
<br />In
the above JavaScript function we are invoking the “CombineName” method
the same way we invoked the “HelloWorld” web method. But the difference
here is that instead of the callback function as the first argument we
are passing the arguments first, followed by the success callback
function name and then the failure callback function. The funda behind
is simple, if your web method accepted three parameters pass them first
in the same order as defined in the web method followed by the callback
methods. Similarly if the web method takes different number of
parameters then make sure that, that many number of parameters are
passed first followed by the success callback function. Success callback
and error callback functions are optional. Our “handleError” javascript
function looks something like this.<br /><div id="codeSnippetWrapper" style="background-color: #f4f4f4; border-bottom: silver 1px solid; border-left: silver 1px solid; border-right: silver 1px solid; border-top: silver 1px solid; cursor: text; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 20px 0px 10px; max-height: 200px; overflow: auto; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; text-align: left; width: 97.5%;">
<div id="codeSnippet" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;">
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><span style="color: blue;">function</span> handleError(error)</pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">{</pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> alert(error.get_message());</pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">}</pre>
</div>
</div>
<div align="justify">
The
above “handleError” javascript function is pretty straight forward. It
takes an error object as one of the argument. The error object passed by
the system has various methods and properties to retrieve the details
of the exception happened on the server side. Some of the methods and
properties are as follows.</div>
<ol>
<li><div align="justify">
get_exceptionType
method or _exceptionType field/property can be used to get the type of
exception raised by the server like “System.Exception”.</div>
</li>
<li><div align="justify">
get_message method or _message field/property can be used to get the error message returned by the server.</div>
</li>
<li><div align="justify">
_stackTrace field/property or get_stackTrace method can be used to get the stack trace of the error from the server.</div>
</li>
<li><div align="justify">
get_statusCode method or _statusCode field/property can be used to retrieve the HTML status code returned from the server.</div>
</li>
</ol>
<div align="justify">
The
error object which is passed to the “handleError” JavaScript function
is of type “Sys.Net.WebServiceError”. “Sys.Net.WebServiceError” is a
simple class with the above explained methods or fields/properties.</div>
<div align="justify">
Now the next step is to pass complex objects from JavaScript to a web method. Lets see how that can be accomplished.</div>
<div align="justify">
<strong><u>Passing complex objects</u></strong></div>
<div align="justify">
Let see the code of the web method which accepts a complex object and processes it.</div>
<div id="codeSnippetWrapper" style="background-color: #f4f4f4; border-bottom: silver 1px solid; border-left: silver 1px solid; border-right: silver 1px solid; border-top: silver 1px solid; cursor: text; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 20px 0px 10px; max-height: 200px; overflow: auto; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; text-align: left; width: 97.5%;">
<div id="codeSnippet" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-size: 8pt; line-height: 12pt; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0pxfont-family:'Courier New', courier, monospace; text-align: left; width: 100%;">
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">[WebMethod]</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><span style="color: blue;">public</span> <span style="color: blue;">string</span> GetCar(Car car)</pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">{</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;">return</span> <span style="color: #006080;">"Model: "</span> + car.Model + <span style="color: #006080;">", Color: "</span> + car.Color; <span style="color: green;">//", Cubic capacity: ";//+ car.CC + </span></pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">}</pre>
</div>
</div>
The
above web method doesn’t have rocket science in it, it just takes a
complex object of type “Car” and concatenates the properties and returns
it as a string. Now lets the “Car” class. Its same as that we have used
in our previous examples.<br />
<div id="codeSnippetWrapper" style="border-bottom: silver 1px solid; border-left: silver 1px solid; border-right: silver 1px solid; border-top: silver 1px solid; color: #f4f4f4; cursor: text; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 20px 0px 10px; max-height: 500px; overflow: auto; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4pxfont-family:'Courier New', courier, monospace; text-align: left; width: 97.5%;">
<div color="black" face="'Courier New', courier, monospace" id="codeSnippet" size="8pt" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><span style="color: blue;">public</span> <span style="color: blue;">class</span> Car</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">{</pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;">public</span> <span style="color: blue;">string</span> Model</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> { get; set; } </pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> </pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;">public</span> <span style="color: blue;">string</span> Color</pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> { get; set; }</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> </pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;">public</span> Engine CarEngine</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> { get; set; }</pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">}</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> </pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><span style="color: blue;">public</span> <span style="color: blue;">class</span> Engine</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">{</pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;">public</span> <span style="color: blue;">int</span> CC</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> { get; set; }</pre>
<pre color="black" face="'Courier New', courier, monospace" size="8pt" style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;">public</span> <span style="color: blue;">int</span> Cylinders</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> { get; set; }</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">}</pre>
</div>
</div>
<div align="justify">
The
“Car” class has three properties namely “Model”, “Color” and
“CarEngine”. “Model” and “Color” are of type string and “CarEngine” is
again a complex object of type “Engine”. The “Engine” class has two
properties of type int namely “CC” and “Cylinders”. The above “Car”
class is the one which we will be passing to the web method from within
JavaScript using ScripManager. The code is pasted below.</div>
<div id="codeSnippetWrapper" style="border-bottom: silver 1px solid; border-left: silver 1px solid; border-right: silver 1px solid; border-top: silver 1px solid; color: #f4f4f4; cursor: text; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 20px 0px 10px; max-height: 500px; overflow: auto; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4pxfont-family:'Courier New', courier, monospace; text-align: left; width: 97.5%;">
<div color="black" face="'Courier New', courier, monospace" id="codeSnippet" size="8pt" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><span style="color: blue;">function</span> sendComplexObject()</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">{</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: green;">//Create a new Object and assign the same properties as those in the Car class.</span></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;">var</span> car = <span style="color: blue;">new</span> Object();</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> car.Model = <span style="color: #006080;">"Ferrari California"</span></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> car.Color = <span style="color: #006080;">"Ferrari Red"</span></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> car.CarEngine = <span style="color: blue;">new</span> Object()</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> car.CarEngine.CC = 4500</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> car.CarEngine.Cylinders = 12</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: green;">//Execute the web method.</span></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> ScriptManagerService.TestService.GetCar(car, handleResult, handleError);</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">}</pre>
</div>
</div>
<div align="justify">
In
the “sendComplexObject” method we are first creating a “Car” object by
creating an object of type “Object”. Then to that object we are adding
all the properties that the “Car” class has. Since JavaScript is a
dynamic language you can add all the properties by just giving the name
and the value. As the “Car” class has another complex object, Engine, as
one of its property named “CarEngine” we are also creating the complex
engine object also the same way. Once we have created the object we are
finally executing the web method in the final line of code. Isn’t simple
to pass complex objects from JavaScript to server. To help us to do
write such a simple code the ScriptManager does the extra work
converting the JavaScript objects to server objects. </div>
<div align="justify">
Below is the JSON way of creating the complex Car object.</div>
<div id="codeSnippetWrapper" style="border-bottom: silver 1px solid; border-left: silver 1px solid; border-right: silver 1px solid; border-top: silver 1px solid; color: #f4f4f4; cursor: text; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 20px 0px 10px; max-height: 500px; overflow: auto; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4pxfont-family:'Courier New', courier, monospace; text-align: left; width: 97.5%;">
<div color="black" face="'Courier New', courier, monospace" id="codeSnippet" size="8pt" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; direction: ltr; line-height: 12pt; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><span style="color: blue;">function</span> sendComplexObject()</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">{</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: green;">//Create an object of type "ScriptManagerService.Car" and pass all the properties </span></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: green;">//as a javascript string array.</span></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;">var</span> car = <span style="color: blue;">new</span> ScriptManagerService.Car({<span style="color: #006080;">"Model"</span> : <span style="color: #006080;">"Ferrari California"</span>, <span style="color: #006080;">"Color"</span> : <span style="color: #006080;">"Ferrari Red"</span>, <span style="color: #006080;">"CarEngine"</span> : {<span style="color: #006080;">"CC"</span> : <span style="color: #006080;">"100"</span>, <span style="color: #006080;">"Cylinders"</span> : <span style="color: #006080;">"5"</span>}})</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: green;">//Invoke the web method.</span></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> ScriptManagerService.TestService.GetCar(car, handleResult, handleError);</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">}</pre>
</div>
</div>
<div align="justify">
In
the above code we are trying to create a “ScriptManagerService.Car”
object. This is possible because the ScriptManager generates the Proxy
classes automatically for us. Now lets see handling a complex type
returned from the server. It also is quite simple.</div>
<div align="justify">
<strong><u>Handling a complex object returned by the server</u></strong></div>
<div align="justify">
Lets see the web service which returns the complex object.</div>
<div id="codeSnippetWrapper" style="border-bottom: silver 1px solid; border-left: silver 1px solid; border-right: silver 1px solid; border-top: silver 1px solid; color: #f4f4f4; cursor: text; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 20px 0px 10px; max-height: 500px; overflow: auto; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4pxfont-family:'Courier New', courier, monospace; text-align: left; width: 97.5%;">
<div id="codeSnippet" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">[WebMethod]</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><span style="color: blue;">public</span> Car GetCarObject()</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">{</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;">return</span> <span style="color: blue;">new</span> Car</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> {</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> Model = <span style="color: #006080;">"Ferrari"</span>,</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> Color = <span style="color: #006080;">"Ferrari Red"</span>,</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> CarEngine = <span style="color: blue;">new</span> Engine { CC = 2500, Cylinders = 8 },</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> test = <span style="color: #006080;">"test"</span></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> };</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">}</pre>
</div>
</div>
<div align="justify">
The
above web method does the hard work of creating a car object and
returning the same. We are going to invoke the above web method using
the ScriptManager and use the very complex object in JavaScript. The
JavaScript code is pasted below.</div>
<div id="codeSnippetWrapper" style="border-bottom: silver 1px solid; border-left: silver 1px solid; border-right: silver 1px solid; border-top: silver 1px solid; color: #f4f4f4; cursor: text; direction: ltr; font-size: 8pt; line-height: 12pt; margin: 20px 0px 10px; max-height: 500px; overflow: auto; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4pxfont-family:'Courier New', courier, monospace; text-align: left; width: 97.5%;">
<div id="codeSnippet" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><span style="color: blue;">function</span> receiveUseComplexObject()</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">{</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: green;">//Invoking the web method that returns complex object.</span></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> ScriptManagerService.TestService.GetCarObject(handleResult, handleError);</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">}</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> </pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><span style="color: green;">//Modified handleResult function</span></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><span style="color: blue;">function</span> handleResult(result)</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">{</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: green;">//Using the complex object returned by the web method in JavaScript.</span></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;">var</span> carDef = <span style="color: #006080;">"Model: "</span> + result.Model + <span style="color: #006080;">", Color: "</span> + result.Color + <span style="color: #006080;">", Engine-CC: "</span> + result.CarEngine.CC;</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> carDef += <span style="color: #006080;">", Engine-Cylinders: "</span> + result.CarEngine.Cylinders;</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> alert(carDef);</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">}</pre>
</div>
</div>
<div align="justify">
In
the “receiveUseComplexObject” we are not doing any drastic than
invoking the “GetCarObject” web method. The main work is done by the
modified “handleResult” function. The web method returns a “Car” object,
the parameter of the “handleResult” also is the JavaScript proxy “Car”
object representing the server object. The ScriptManager does all the
work of converting the returned object as a JSON “Car” object. This is
why we are able to use the properties of the “Car” object as we would do
in a normal OOPS programming language.</div>
<div align="justify">
<strong><u>Calling methods in a page</u></strong></div>
<div align="justify">
Using “ScriptManager” one can access method of a web page as well. One
catch here is that you can execute only static page methods. To call a
page method from JavaScript by making use of “ScriptManger” you need to
add the “WebMethod” attribute to the method you want to call. Lets see
“.cs” file of a web page.</div>
<div color="#f4f4f4" face="'Courier New', courier, monospace" id="codeSnippetWrapper" size="8pt" style="border-bottom: silver 1px solid; border-left: silver 1px solid; border-right: silver 1px solid; border-top: silver 1px solid; cursor: text; direction: ltr; line-height: 12pt; margin: 20px 0px 10px; max-height: 500px; overflow: auto; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; text-align: left; width: 97.5%;">
<div id="codeSnippet" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><span style="color: blue;">public</span> <span style="color: blue;">partial</span> <span style="color: blue;">class</span> TestPage : System.Web.UI.Page</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">{</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;">protected</span> <span style="color: blue;">void</span> Page_Load(<span style="color: blue;">object</span> sender, EventArgs e)</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> { }</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> </pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> [System.Web.Services.WebMethod]</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;">public</span> <span style="color: blue;">static</span> <span style="color: blue;">string</span> HelloWorld()</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> {</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <span style="color: blue;">return</span> <span style="color: #006080;">"Hello world"</span>;</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> } </pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">}</pre>
</div>
</div>
<div align="justify">
As
mentioned above, we have added the “WebMethod” attribute to a static
method and that’ it you need to do to make a page method callable by
“ScriptManager”. In “ScriptManager” you need to set “EnablePageMethods”
property to “true”. What this property does is it generates a
“PageMethods” JavaScript class which has the necessary code to call all
the static page methods which are decorated by the “WebMethod”
attribute. Lets see the ASPX page and the JavaScript.</div>
<div id="codeSnippetWrapper" style="background-color: #f4f4f4; border-bottom: silver 1px solid; border-left: silver 1px solid; border-right: silver 1px solid; border-top: silver 1px solid; cursor: text; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 20px 0px 10px; max-height: 500px; overflow: auto; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; text-align: left; width: 97.5%;">
<div id="codeSnippet" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><%@ Page Language=<span style="color: #006080;">"C#"</span> AutoEventWireup=<span style="color: #006080;">"true"</span> CodeBehind=<span style="color: #006080;">"WebSerCalServiceMngr.aspx.cs"</span> Inherits=<span style="color: #006080;">"WebServiceUsingJS.WebSerCalServiceMngr"</span> %></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> </pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><!DOCTYPE html PUBLIC <span style="color: #006080;">"-//W3C//DTD XHTML 1.0 Transitional//EN"</span> <span style="color: #006080;">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span>></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> </pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><html xmlns=<span style="color: #006080;">"http://www.w3.org/1999/xhtml"</span> ></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><head runat=<span style="color: #006080;">"server"</span>></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <title>Untitled Page</title></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"></head></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><body></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><script language=<span style="color: #006080;">"javascript"</span> type=<span style="color: #006080;">"text/javascript"</span>></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">function callPageMethods()</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">{</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> PageMethods.HelloWorld(handleResult);</pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">}</pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"></script></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> </pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><form id=<span style="color: #006080;">"form1"</span> runat=<span style="color: #006080;">"server"</span>></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <div></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> <asp:ScriptManager ID=<span style="color: #006080;">"scrMgr"</span> runat=<span style="color: #006080;">"server"</span> EnablePageMethods=<span style="color: #006080;">"true"</span>> </pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> </asp:ScriptManager></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><asp:Button ID=<span style="color: #006080;">"Button3"</span> runat=<span style="color: #006080;">"server"</span> Text=<span style="color: #006080;">"Call page method."</span> OnClientClick=<span style="color: #006080;">"callPageMethods();"</span> /></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> </div></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"> </form></pre>
<pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"></body></pre>
<pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"></html></pre>
</div>
</div>
<div align="justify">
In
the above code we have set “EnablePageMethods” property to true and on
the click of a button we are calling “callPageMethods()” JavaScript
function. Inside the “callPageMethods” JavaScript function we are making
use of “PageMethods” proxy class to execute our page method. So with
“ScriptManager” doing all the extra work at the back, as a developer we
are having great time. </div>
<br /><div align="justify">
Try to know more</div>
</div>vishalhttp://www.blogger.com/profile/02063336886358955477noreply@blogger.com0tag:blogger.com,1999:blog-7858007652891377230.post-61815823128379426082012-01-22T08:40:00.001-08:002012-01-22T08:40:25.403-08:00row to column sql server<div dir="ltr" style="text-align: left;" trbidi="on">
CREATE TABLE [dbo].[ashish](<br /> [custID] [int] NULL,<br /> [Question] [varchar](50) NULL,<br /> [answer] [varchar](20) NULL<br />) ON [PRIMARY]<br /><br /><br />INSERT INTO ashish values(1000, 'AAA', '1')<br />INSERT INTO ashish values(1000, 'BBB B', '2')<br />INSERT INTO ashish values(1000, 'CCC', '3')<br />INSERT INTO ashish values(1001, 'AAA', '2')<br />INSERT INTO ashish values(1001, 'BBB B', '3')<br />INSERT INTO ashish values(1001, 'CCC', '3')<br />INSERT INTO ashish values(1000, 'DDD', '6')<br /><br />Declare @t VARCHAR(10)<br />Declare @A VARCHAR(1000)<br />Declare @B VARCHAR(1000)<br />set @A='SELECT CustID'<br />SET @B='('<br />SELECT @A=@A+',['+Question+'] as [' +Question+']',@B=@B+'['+Question+'],' FROM (SELECT DISTINCT QUESTION FROM ashish) cur<br />-- removing last ',' from both <span class="IL_AD" id="IL_AD5">variables</span><br />SET @B=SUBSTRING(@B,1,LEN(@B)-1)<br />SET @A=@A+ + ' FROM (SELECT CustID, Answer, Question FROM ashish) s PIVOT (max(answer) FOR QUESTION IN ' +@B+')) p ORDER BY [CUSTID]; '<br />exec(@A);</div>vishalhttp://www.blogger.com/profile/02063336886358955477noreply@blogger.com0tag:blogger.com,1999:blog-7858007652891377230.post-31995396099293371062012-01-16T01:23:00.001-08:002012-01-16T01:23:16.866-08:00JAVASCRIPT YES NO ALERT<div dir="ltr" style="text-align: left;" trbidi="on">
function PrintAlert() <br /> { <br /> ModalPopups.Confirm("idConfirm1", <br /> "Print Confirmation", <br /> "<div style='padding: 25px;text-align:center;'>Print OK ?</div>", <br /> { <br /> yesButtonText: "Yes", <br /> noButtonText: "No", <br /> onYes: "ModalPopupsConfirmYes()", <br /> onNo: "ModalPopupsConfirmNo()" <br /> } <br /> ); <br /> } <br />function ModalPopupsConfirmYes() { <br /> // alert('You pressed Yes'); <br /> ModalPopups.Close("idConfirm1"); <br /> var printflag = "Y";<br /> var txtSearchClientID="<%=Hiddden_grid_value.ClientID%>";<br /> GetPrint(printflag,document.getElementById(txtSearchClientID).value); <br />} <br />function ModalPopupsConfirmNo() { <br />var printflag = "N"; <br /> // alert('You pressed No'); <br /> ModalPopups.Cancel("idConfirm1"); <br /> var txtSearchClientID="<%=Hiddden_grid_value.ClientID%>";<br /> GetPrint(printflag,document.getElementById(txtSearchClientID).value); <br /> <br />}<br /><br /><br />function GetPrint(print,maxkey)<br /> {<br /> if(print!="")<br /> {<br /> alert(print);<br /> var hfPrintClientID="<%=hfPrint.ClientID%>";<br /> var hfPrint=document.getElementById(hfPrintClientID);<br /> hfPrint.value=print;<br /> var hfmaxkeyClientID="<%=hfmaxkey.ClientID%>";<br /> var hfmaxkey=document.getElementById(hfmaxkeyClientID);<br /> hfmaxkey.value=maxkey;<br /> var btnRefreshViewClientID="<%=btnRefreshView.ClientID %>";<br /> var btnRefreshView=document.getElementById(btnRefreshViewClientID);<br /> btnRefreshView.click();<br /> }<br /> }<br /><br /><br /><script language="javascript" type="text/javascript" src="../Scripts/ModalPopups.js"></script></div>vishalhttp://www.blogger.com/profile/02063336886358955477noreply@blogger.com0tag:blogger.com,1999:blog-7858007652891377230.post-24148985451041561462012-01-16T00:14:00.001-08:002012-01-16T00:14:06.551-08:00Gridview Add Row<div dir="ltr" style="text-align: left;" trbidi="on"> public void newrow()<br />
{<br />
DataTable dt = new DataTable();<br />
DataRow dr = null;<br />
dt.Columns.Add(new DataColumn("Select", typeof(string)));<br />
dt.Columns.Add(new DataColumn("sr_no", typeof(string)));<br />
dt.Columns.Add(new DataColumn("Source", typeof(string)));<br />
dt.Columns.Add(new DataColumn("Destination", typeof(string)));<br />
dt.Columns.Add(new DataColumn("Rate", typeof(string)));<br />
<br />
dr = dt.NewRow();<br />
dr["Select"] = string.Empty;<br />
dr["sr_no"] = string.Empty;<br />
dr["Source"] = string.Empty;<br />
dr["Destination"] = string.Empty;<br />
dr["Rate"] = string.Empty;<br />
<br />
dt.Rows.Add(dr);<br />
gridNEW_REC.DataSource = dt;<br />
gridNEW_REC.DataBind();<br />
<br />
<br />
<br />
}<br />
public void addnewrow()<br />
{<br />
<br />
conn.cn.Open();<br />
DataTable dt = new DataTable();<br />
DataRow dr;<br />
dt.Columns.Add(new DataColumn("Select", typeof(string)));<br />
dt.Columns.Add(new DataColumn("sr_no", typeof(string)));<br />
dt.Columns.Add(new DataColumn("Source", typeof(string)));<br />
dt.Columns.Add(new DataColumn("Destination", typeof(string)));<br />
dt.Columns.Add(new DataColumn("Rate", typeof(string)));<br />
if (gridNEW_REC.Rows.Count > 0)<br />
{<br />
for (int i = 0; i < gridNEW_REC.Rows.Count; i++)<br />
{<br />
dr = dt.NewRow();<br />
<br />
TextBox t1 = (TextBox)gridNEW_REC.Rows[i].Cells[1].FindControl("txtno");<br />
dr[1] = Convert.ToString(t1.Text);<br />
TextBox t2 = (TextBox)gridNEW_REC.Rows[i].Cells[2].FindControl("txtSOURCE_STATION");<br />
dr[2] = Convert.ToString(t2.Text);<br />
TextBox t3 = (TextBox)gridNEW_REC.Rows[i].Cells[4].FindControl("txtDEST_STATION");<br />
dr[3] = Convert.ToString(t3.Text);<br />
TextBox t4 = (TextBox)gridNEW_REC.Rows[i].Cells[6].FindControl("txtRATE");<br />
dr[4] = Convert.ToString(t4.Text);<br />
dt.Rows.Add(dr);<br />
}<br />
dr = dt.NewRow();<br />
dt.Rows.Add(dr);<br />
gridNEW_REC.DataSource = dt;<br />
gridNEW_REC.DataBind();<br />
auto_gen_grid_no();<br />
}<br />
<br />
<br />
}</div>vishalhttp://www.blogger.com/profile/02063336886358955477noreply@blogger.com0tag:blogger.com,1999:blog-7858007652891377230.post-9728731775099634622011-08-22T23:04:00.000-07:002011-08-22T23:05:51.821-07:00<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnOoxJInpywIf1fmPaTA_WsmBDN-oJM3Ya0gV6o7mPVhqSSXM7ccoD0jyO4QkRgABwFKKcoo49iYeJjmpJKHflydvDsIbL0q9xx7eIYixEoZ4p7Yyr8Y65JmzC6R_V3ZhmeSFwQvlypMeR/s1600/Deepika_Pdukone.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnOoxJInpywIf1fmPaTA_WsmBDN-oJM3Ya0gV6o7mPVhqSSXM7ccoD0jyO4QkRgABwFKKcoo49iYeJjmpJKHflydvDsIbL0q9xx7eIYixEoZ4p7Yyr8Y65JmzC6R_V3ZhmeSFwQvlypMeR/s320/Deepika_Pdukone.jpg" width="192" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtHfN_Sv6h82YaWhYx6l_M5PNWlNfssJuYC_EM0FPKVw0rpnUdIkz-LQhsxKDrXqXkzHOKCXSBQuve4QUKt2qVwiiETJ91WLy9BiCCeGZLkQMHIaX0acGvevxUkTIbJ-RGS53dvyuCMRC2/s1600/2948.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtHfN_Sv6h82YaWhYx6l_M5PNWlNfssJuYC_EM0FPKVw0rpnUdIkz-LQhsxKDrXqXkzHOKCXSBQuve4QUKt2qVwiiETJ91WLy9BiCCeGZLkQMHIaX0acGvevxUkTIbJ-RGS53dvyuCMRC2/s320/2948.jpg" width="192" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw6V14U7IWUos-52KEmAUvZX5MhCIryePv3y67f1y9CQ7yGZQ9Usc-M9-pD0OmP1J61bF1-LXl3uU9NmXGY-A20Q9EwCW9xHTzp4wlhzlzIaMY6l9aTzo2X_AmNautX8-taULa9TLfnzCT/s1600/Anjana.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw6V14U7IWUos-52KEmAUvZX5MhCIryePv3y67f1y9CQ7yGZQ9Usc-M9-pD0OmP1J61bF1-LXl3uU9NmXGY-A20Q9EwCW9xHTzp4wlhzlzIaMY6l9aTzo2X_AmNautX8-taULa9TLfnzCT/s320/Anjana.jpg" width="192" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWYhHtmGo_ktbKJHqE20mYHEFicT4VcnZTDhL4-Ep-KHSvpR8nBAKV_rk_rddfBKh1EbLga9a4h33s3uBR8Jn473PyMgtAFGbuoIb0BmWaBP1dm_W_3JjwnRq8TKp7r3d34VzGaB5GqH1U/s1600/Anushka_Sharma.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWYhHtmGo_ktbKJHqE20mYHEFicT4VcnZTDhL4-Ep-KHSvpR8nBAKV_rk_rddfBKh1EbLga9a4h33s3uBR8Jn473PyMgtAFGbuoIb0BmWaBP1dm_W_3JjwnRq8TKp7r3d34VzGaB5GqH1U/s1600/Anushka_Sharma.jpg" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCcyGAYeKI3VBihoyk-UuuHRcwbxzVEiXm4jOn84vf-o_YpFRimXfnBOm8EWgRLf7sm1y9UB1G_9nEfRBpw7Mrcg1KjnMvei0oy9G-kUF75RVXwakI-185rG283vNBgD16Y7lCOY4sKm0h/s1600/Anushka_Sharma%25282%2529.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCcyGAYeKI3VBihoyk-UuuHRcwbxzVEiXm4jOn84vf-o_YpFRimXfnBOm8EWgRLf7sm1y9UB1G_9nEfRBpw7Mrcg1KjnMvei0oy9G-kUF75RVXwakI-185rG283vNBgD16Y7lCOY4sKm0h/s1600/Anushka_Sharma%25282%2529.jpg" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtmPSVCAAtcd313F4juI6IkU5ywRD434av0aOdJA9am515XrzMD87Nvhfkingg91ULD-SBst1Ve8SnA3ADJoaRwq5yKeQGMzEFvQH2LEcC8s3V2ZKvquhrONk_M1UFR6lcizIIE4LUbWPo/s1600/Beautiful_Life.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtmPSVCAAtcd313F4juI6IkU5ywRD434av0aOdJA9am515XrzMD87Nvhfkingg91ULD-SBst1Ve8SnA3ADJoaRwq5yKeQGMzEFvQH2LEcC8s3V2ZKvquhrONk_M1UFR6lcizIIE4LUbWPo/s1600/Beautiful_Life.jpg" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkBGucJ-F37LbXuxRFNqhMHTz-hUt5F81uYXo_krOxSYAk-YetQv9WxQiuICmbTiFUj4JmnIHCCtDAwPc3BkSRuGEzU5e_iXjrMU7PsM3Z2-zZoa2ljp4OSAJiqzrqquiwZumHWK5rK_Tw/s1600/Beauty.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkBGucJ-F37LbXuxRFNqhMHTz-hUt5F81uYXo_krOxSYAk-YetQv9WxQiuICmbTiFUj4JmnIHCCtDAwPc3BkSRuGEzU5e_iXjrMU7PsM3Z2-zZoa2ljp4OSAJiqzrqquiwZumHWK5rK_Tw/s1600/Beauty.jpg" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqqlmAZwK3NdLfBb4Q82pRgWe7ED0-JTV7iTSdTD82ZBNcc_G5m3tAk4OVeXd2cAAtS6hmup21zXRwKEk8Z9CUYJ2Y825qu7tYhBev9C9suZGlHheGypqvR1ebHJitkdKgidP5sIe2cPcI/s1600/Break_The_Rules.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqqlmAZwK3NdLfBb4Q82pRgWe7ED0-JTV7iTSdTD82ZBNcc_G5m3tAk4OVeXd2cAAtS6hmup21zXRwKEk8Z9CUYJ2Y825qu7tYhBev9C9suZGlHheGypqvR1ebHJitkdKgidP5sIe2cPcI/s1600/Break_The_Rules.jpg" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq0KnwEcVVQn2bXaj9sqCxU6DyLEs_oi9Nxu0enW6ZFroNBXTy-VWJBBapbMYwk__zBTEnrfqyKaGmU90CjChvkKDHc-D-7NdXWb7LS8jPH57i3Mb0kHt-BAxUz_g1y3xhC_YFg212SSKM/s1600/Cuite_Girl.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq0KnwEcVVQn2bXaj9sqCxU6DyLEs_oi9Nxu0enW6ZFroNBXTy-VWJBBapbMYwk__zBTEnrfqyKaGmU90CjChvkKDHc-D-7NdXWb7LS8jPH57i3Mb0kHt-BAxUz_g1y3xhC_YFg212SSKM/s320/Cuite_Girl.jpg" width="192" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfVcH4M74Ba3dqm0H1wDiGinupsuSg-zYFvEo48dsZUuUzRBGBZY7dpR-3MEutFCKtwLwM-SLUACLH19AfUAUYbte2Tg_zEfVDzaBb1M13uUh759Vo2f5dxURs7eJXWR20UD0yP3v-64Qi/s1600/Cute_Desi_Girl.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfVcH4M74Ba3dqm0H1wDiGinupsuSg-zYFvEo48dsZUuUzRBGBZY7dpR-3MEutFCKtwLwM-SLUACLH19AfUAUYbte2Tg_zEfVDzaBb1M13uUh759Vo2f5dxURs7eJXWR20UD0yP3v-64Qi/s320/Cute_Desi_Girl.jpg" width="192" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX359wHBOlQpZaJN5OAVOLn5LJzKquPD_5ulz1MEXwTu2Ec8Ph6ft03iiivsDSkzvM-qrELDXOCH9mHY9PdxN90SUUYecokDXjk_fxobybyZ50AMzeIbpamtL3oC46Bo5lKi1Odq7aWRM-/s1600/Cute_Girl.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX359wHBOlQpZaJN5OAVOLn5LJzKquPD_5ulz1MEXwTu2Ec8Ph6ft03iiivsDSkzvM-qrELDXOCH9mHY9PdxN90SUUYecokDXjk_fxobybyZ50AMzeIbpamtL3oC46Bo5lKi1Odq7aWRM-/s1600/Cute_Girl.jpg" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisbBwjE88vvzi_HUkU-uQLokf9o6vyUI6J7Jgz4CmnTung8NPfMUXnft3VxQjPc7ibv_5eMQSI6kI3rH9RmMkwv0jdoMZBK4ynU_fHZfXMJrg31a_kT72U7McJMd4s-k-6NcmUi0ktI9gY/s1600/Cute_Girl_Kriti.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisbBwjE88vvzi_HUkU-uQLokf9o6vyUI6J7Jgz4CmnTung8NPfMUXnft3VxQjPc7ibv_5eMQSI6kI3rH9RmMkwv0jdoMZBK4ynU_fHZfXMJrg31a_kT72U7McJMd4s-k-6NcmUi0ktI9gY/s1600/Cute_Girl_Kriti.jpg" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9uZtrxXspY6LuiIeoUH6RIOK5EOGnwY2yF9jA8mWBbqX00RIgswAVfEuU5zjCmi0yJFF37EFSLWSfg5yUTajmuyDYMAJjylRMjfA_M3Z0yr8fXtSKUnnkhpOG6ODzoaTW-0xeq3w4cP7h/s1600/Cute_Indian_Girl.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9uZtrxXspY6LuiIeoUH6RIOK5EOGnwY2yF9jA8mWBbqX00RIgswAVfEuU5zjCmi0yJFF37EFSLWSfg5yUTajmuyDYMAJjylRMjfA_M3Z0yr8fXtSKUnnkhpOG6ODzoaTW-0xeq3w4cP7h/s320/Cute_Indian_Girl.jpg" width="192" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDVkCKlByo9iCruDCh1pf86KhrW15MHrmZurraINSLxXLNBVtrKOGZRV9y23fNhPaYrKA8uFxLuOA1CRkwQUpI8w_x8e5slloCEm_lZtMNpWnuk6Bz_EkKo8H14W4vLa_7HYfWpPPg_XlB/s1600/Dabangg.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDVkCKlByo9iCruDCh1pf86KhrW15MHrmZurraINSLxXLNBVtrKOGZRV9y23fNhPaYrKA8uFxLuOA1CRkwQUpI8w_x8e5slloCEm_lZtMNpWnuk6Bz_EkKo8H14W4vLa_7HYfWpPPg_XlB/s320/Dabangg.jpg" width="192" /></a></div><br />
</div>vishalhttp://www.blogger.com/profile/02063336886358955477noreply@blogger.com0Kolhapur, Maharashtra, India16.7 74.23329999999998616.6570645 74.18068599999998 16.742935499999998 74.285913999999991