Dot Net Thoughts

Microsoft Ajax.net introduced a brand new concept of Page Methods, the problem with Page methods are we can’t use page methods in Master Pages or in Usercontrols. From an OOP presepective, it is not good to write the code every page, so the work around is using the Ajax enabled webservices. There is not big difference between common webservices and Ajax enabled webservice, which allows javascript to access web methods. To make a web service as Ajax enabled, you need to give some [System.Web.Script.Services.ScriptService] attribute to the class name, and the Master Page you need to refer this service using the ASP.Net script manager

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" EnablePartialRendering="true">
<services>
<asp:ServiceReference Path="~/MyService.asmx" />
</services>
</asp:ScriptManager>

Then you can call the web method in the webservice using MyService.MethodName() syntax.

Webservice code.

[System.Web.Script.Services.ScriptService]
public class MyService: System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
return ("Hello World, this is from a webservice method");
}
}

And refer the service in the Page using script manager.

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" EnablePartialRendering="true">
<services>
<asp:ServiceReference Path="~/MyService.asmx" />
</services>
</asp:ScriptManager>

And in the javascript

function InvokeWebMethod()
{
MyService.HelloWorld(Callback);
}
function Callback(result)
{
alert(result);
}

The InvokeWebMethod function will call the webservice webmethod, and after executing the call, it returns the result to the function “Callback”. In this function, it alerts the results, which gets as the input parameter. You can get custom collections and objects on the client side using this method. You also need some modifications in the web.config file, but by default VS 2008, does this configuration for you.

You can get more information about exposing and calling webservice using javascript from MSDN.

In my previous post I mentioned about accessing server side controls in Java script using ASP.Net Ajax API. That functionality is can be combine with the Page methods feature, for simple Ajax calls without update panel control. You can create a Page method by adding a [WebMethod] attribute in the declaration. For this you need to import System.Web.Servicesnamespace. The function should be public static, otherwise it will not work.
C# Code

[System.Web.Services.WebMethod()]
public static string HelloWorld()
{
return ("Hello World");
}

And in the script manager control, you need to set the EnablePageMethodsproperty to True. Thats it you created a Page Method. You can access it in the Javascript like

Javascript code

function invokeHelloWorld()
{
PageMethods.HelloWorld(HelloWorldCallback); //Invoking the Page method, with callback function as the parameter.
}
function HelloWorldCallback(res)
{
alert(res);
}

You need to pass the Callback function as the last parameter, when you call the Page methods. You can pass the other parameters before the callback function. In the callback function you will the results from the specific operation.

Note: Page methods is Public static so we will not able to access the Page and Control objects from the function.

This is my 100th post Thanks for you support , cooperation, and the valuable comments.

With ASP.Net Ajax, you can get the server side controls from Javascript using ASP.Net Ajax javascript API. With this feature will be helpful for developers, whom wish to play around Page methods in ASP.Net Ajax.

function getValueInText()
{
var myText = $get("MyText");
alert(myText.value);
//You can also set the value of the Textbox using the same method.
myText.value = "This is updated";
}

In the above code, MyText is a server side asp.net textbox.
You can get more information about all this from ASP.Net Ajax official site.

Last few days I was on vacation, last day I joined back in my company @ Kerala, and now I am assigned to a ASP.Net application. In the current application, I have to create a web custom control, and in that I need to write some javascript code, and I planned to write the script in the RenderContentsmethod. But when the size of the script was increased, I need to each and every line of javascript using WriteLine method, and it is visible to the user via View Sourceoption of browsers. But I don’t have any other option, but when I checked the view source option of Update Panel control from Microsoft, or Calendar control code from DayPilot, I am not able to get the actual source. So there are some option available where I can disable users to view the script. Then after some google-ing I got a solution, Embedding a JavaScript File as a Resource in the web control assembly. You can get more information about this in the ASP.Net Ajax official site.

Here is the steps to embed script file.

1. Right click on the properties of the script file, change the Build Action to EmbeddedResource
2. Create a new webresource attribute in AssemblyInfo file.

   [Assembly: System.Web.UI.WebResource("MonthView.DragDrop.js", "application/x-javascript")]
   

   You can put this into the same file also, where MonthView is the namespace, DragDrop.js is the script file, and second argument is the resource file type.

3. Accessing the script file
   You can access the embed file using two ways.
   1. Using ASP:ScriptReference control

      <scripts>
      <asp:ScriptReference Assembly="SampleControl" Name="SampleControl.UpdatePanelAnimation.js" />
      </scripts>
      

   2. Using Page.RegisterScript

      Page.ClientScript.RegisterClientScriptResource(typeof(MonthView), "MonthView.DragDrop.js");
      

   Both will come in the script tags and you can call the functions and methods of the file directly from the page

And the page source you will get some WebResource.axd?some value, as the value of src attribute.

Google.com introduced a new API for charting purposes. You can get more information about the Google Chart API on this site. It is very simple and powerful charting api. And you can pass the parameters as query strings and the api will return images, so that you can use that in <IMG> tags

If you are developing something in Web, and want to use charts, then Google API is nice choice.

While uploading large files, it is nice to have a “Please wait…” text displaying on the button. You can simple achive this using ClientScript.GetPostBackEventReference method.

this.uxUpload.Attributes.Add("onclick", "this.value='Uploading... please wait'; this.disabled=true;" + ClientScript.GetPostBackEventReference(this.uxUpload,""));

The GetPostBackEventReference injects the __doPostBack method and also the hidden fields that hold the event target and event arguments.

This is a useful technique when uploading large files and during the process disabling the button control. 

MSDN : ClientScriptManager.GetPostBackEventReference Method