There is a common requirement while developing iframe based web application i.e. redirect if the page is not in iframe or redirect main page to login page or any default page if the page is not opened with in iframe.
In such case; if some one tries to open page using URL; we need to check if the page is in iframe or not, if it is not in iframe we have to perform desired action.
We can use following javascript to perform this checking and if the page is not in iframe redirect it to default page.
JavaScript String Replace function only replaces the first occurrence in the string. Replace function takes two simple parameters, The first parameter is the pattern to find and the second parameter is the string to replace the pattern with when found. The javascript function does not Replace All...
str = str.replace(”Pattern”,”ReplaceString”)
To ReplaceAll you have to do it a little differently. To replace all occurrences in the string, use the g modifier like this:
str = str.replace(/Pattern/g,”ReplaceString”)
To display loading image we shall use following JavaScript. There are many ways to display loading, but I feel this is the simple to use and implement. We just need one div tag with position set to absolute, and put loading image inside the div tag. Check out following code.
Loading...
(Make sure you set z-index if required.)
In above I have just used text "Loading...", instead of this you can put loading images.Put this div tag as first element of FORM tag. And after above div tag immediately put following JavaScript
And call function "init()", on "onload" event of body tag.
Done, now as your page loads you can see "Loading..."...
Read more...
Many times to make our site standout, we need to display our logo near address bar. There is very simple JavaScript which takes care of this. We need to put following code in tag HEAD tag.
For each page of the website we need to add above code.
demoico.ico is an icon file which we can use to display near address bar.
We can also manipulate Header Section Dynamically, and change the icon for different pages.
Read more...
Use of complex data types in Ajax programming is a tricky part. In normal scenario we need to communicate between client and server via string manipulation only. (Demo Code)
In this article we will discuss about, Microsoft Ajax and the way we can handle complex data types. We shall use web service for Ajax communication; web service will be exposed to client using Script Manager. Complex data types can be handled using JSON objects, in this article we will discuss only about how to handle complex data types. Script Manager internally uses JSON serialization class for handling complex data types; so will not care about the JSON about in this article.
Let’s assume we have a Public class Employee as below.
In above class the elements which we need to be accessed in JavaScript are public; here we are not considering any function in a class.
Again we are going to expose a web service to Script Manager for this article. So we also have a web service in demo code it is “WebService.asmx”.
Following two namespaces are required to make a web service Ajax Enabled. We will not go into any details of these namespaces.
using System.Web.Script.Services;
using System.Web.Script.Serialization;
Our web service class is as below
Following are the two extra things we have added above the WebService class, this is to indicate that the web service will be called from JavaScript, and is enabled of Creating corrosponding script object of class Employee.
In the Demo, Employee and WebService both classes are added under namespace Demo, and are in the same file “webservice.asmx”.
Our server side code ends here. Now we shall develop only client side code.
Our form tag is as follow
In above code, we have used script manganer and registred our web service and JavaScript file.
Here onwards we are going to deveolp JavaScript
Calling of WebService methods using JavaScript and script manager is very simple, we just need to use the simple namaspace sequence.
e.g. If we want to call getDefaultData function of a webservice we simply needs
Demo.WebService.getDefaultData().
If we want to add a response handler we just need to specify the function name in bracess like Demo.WebService.getDefaultData(OnSucceeded)
For the demo purpose our JavaScript contains mainly three functions
_getDefaultData() – This JavaScript function is used to call a webmethod getDefaultData. This Web Method returns default data Set for the Employee class.
The JS function is as below
_sendDataToServer() – This JavaScript function is used to pass client side input to the server, or to the web method.
The JS function is as below
IN ABOVE FUNCTION CHECK THE WAY WE HAVE CREATED OBJECT OF AN EMPLOYEE CLASS. THIS EMPLOYEE CLASS EXISTS IN C# CODE, BUT USING AJAX.NET WE ARE ABLE TO CREATE INSTANCE ON CLIENT SIDE AS WELL.
OnSucceeded(result,userContext, methodName) – This JavaScript function is used to Handle response from the server. The function is as below
How to get rendered HTML of any control for Ajax operations?
In ajax on client, what exactly we do is the simple manipulation of strings. Mainly we can use HTML strings and put it as innerHTML in desired tag (i.e. div,span,td, etc…).
Assume following sequence of operations
1. Send an Ajax request from client to server.
2. On server side we are binding data table to grid
3. Convert the grid into HTML string and send it back to client side.
4. On client side put that string as an innerHTML of desired tag.
Now to convert grid into HTML is a logical thing to develop, but in ASP.NET following code will generate HTML string of any control… This is a simple rendering of any control…
We will use one of the best feature of Asp.Net i.e. RenderControl.
Using this property of control we are able to get HTML of that control., but for this we will have to use HtmlTextWriter and StringWriter as follows
e.g.
Here result will contain HTML format of the grid control. We will convert grid control to HTML after binding the data.
Read more...
