Ajax – DOT NET Chapter Wise Interview Questions

Ajax – DOT NET Chapter Wise Interview Questions

Question 1:
What problem does Ajax solve?
Answer:
In order to answer this question first lets understand how does browser and server work when we request any Website. Figure 15.1 depicts pictorially the Web environment. When client sends data to the server it post backs form element data, hidden fields, images, cookie information to the server and server make the page and sends the same information back to the browser. The bad part this happens with every request and response.
Below are the issues with the above model:

• Unnecessary data transfers: In the model as shown in Figure 15.1, unnecessary data is transferred between client and server. For instance, the whole page is posted and refreshed even when we want small data of the page to be refreshed.
• Synchronous processing:
  When a user requests for a page he/she has to wait until the complete round trip happens. In short, the request / response work on a synchronous model as shown in Figure 15.2 rather than asynchronous which makes user experience very difficult. How many times it has happened that you are requesting a page and you see the below screen…frustrating right.

• Unnecessary processing by server: Because we are posting unnecessary information to the server, the server is overloaded with unnecessary processing.

Question 2:
What is Ajax?
Answer:
Ajax is a set of client side technologies that provides asynchronous communication between user interfaces and Web server. So the advantages of using Ajax are asynchronous communication, minimal data transfer and server is not overloaded with unnecessary load.

Question 3:
What is the fundamental behind Ajax?
Answer:
XmlHTTPRequest is the fundamental behind Ajax. This allows the browser to communicate to a back end server asynchronously. XmlHTTPRequest object allows the browser to communicate with server with out posting the whole page and only sending the necessary data asynchronously.

Question 4:
How do we use XMLHTTPRequest object in JavaScript?
Answer:
Below is a code snippet, which shows how to use XMLHTTPRequest object (See Figure 15.3). In this code snippet, we are sending a GET request on the local IIS (Internet Information Services). Below is the explanation of the code snippet according to the numbers specified in the code snippet?
1, 2, 3, 4 – This is like checking which is this browser and create the objects accordingly. XMLHTTPRequest objects have different ways of technical implementation according to different browsers. In Internet Explorer it is an activex object but in other browsers its XMLHTTPRequest. So if windows.XMLHTTPRequest does not return null then we can create XMLHTTPRequest object. If it returns null then we can try creating the activex object Microsoft .xmlhttp object. In case it fails probably then probably we have an older version of XML that is MSXML2. So in the error handling we will try to create the MSXML2 object.

5 – In this snippet, we OPEN the connection to the local host server and specify what type of request we are using. In this case, we are using the GET method.
6 – Finally, we make a request to the server.
7 – Here we get the request sent by the server back to the client browser. This is a blocking call as we need to wait to get the request back from the server. This call is synchronous that means we need to wait for the response from the server.

Question 5:
Can you explain Scriptmanager controi in Ajax?
Answer:
Scriptmanager control is the central heart of Ajax. They manage all the Ajax related objects on the page. Some of the core objectives of scriptmanager control are as follows:

• Helps load core Ajax related script and library.
• Provides access to Web services.
• ASP.NET authentication, role and profile services are loaded by scriptmanager control.
• Provided registration of server controls and behaviors.
• Enable full or partial rendering of a Web page.
• Provide localization features.

In short, any Ajax enable page should have this control.

Question 6:
What is the use of update panel inAjax?
Answer:
Update pane! is a component which enables sections ofASP.NET page to be partially rendered without . a post back (See Figure 15.4).

Question 7:
How do we consume Web service in Ajax?
Answer:
In the script manager tag we need to specify the service reference path of the Web service URL (Uniform Resource Locator).

<asp: ScriptManager ID="ScriptManagerl" runat="server">
<Services>
<asp: ServiceReference Path="Customer.asmx" />
</Services>
</asp: ScriptManager>

We can then call the Customer object in the JavaScript client as shown in the below code snippet.

function LoadAll()
{
Customer.LoadCustomers(LoadCustomerToSelectOption, ErrorHandler, 
TimeOutHandler);
}

Question 8:
Can you explain the concept of triggers in ‘UpdatePanel’ control?
Answer:
Triggers are child tags for ‘ UpdatePanel’ tag. Many times we would like to update the panel when some event occurs or a value change on a control. This can be achieved by using triggers. There are two types of triggers ‘ ControlEven* Trigger’ and ’ ControlValueTrigger ‘. So let’s first understand ‘ControlEventTrigger’. Using ‘ControlEventTrigger’ we define on which control and at which event the update panel should refresh. Below is a simple code snippet for ‘ControlEventTrigger’. ‘ControlEventTrigger’ are defined using ‘<atlas: ControlEventTrigger>’ tag. We have numbered the code snippet below so let’s understand the same with numbers:

• We need to define ‘ControlEventTrigger’ using ‘<atlas: ControlEventTrigger>’ tag.
• In this sample we will link trigger in ‘UpdatePanell’ with the click event of ‘Button1.
• In the ‘<atlas : ControlEventTrigger>’ tag we need to define the control and event using ‘Controlld’ and ‘EventName’ properties, respectively.

So now when the button click event happens ‘UpdatePanell’ is refreshed.

Using ‘ControlValueTrigger’ we can update a panel when an external control has reached some value (See Figure 15.6). So again we need to define the same in a ‘ Triggers’ tag. We need to put the ‘ControlvalueTrigger’ tag with control and property defined using the ‘Controller property. So according to below code snippet when the value of ‘ Textboxl’ changes we need to update the top panel.

Question 9:
Can you explain the ‘UpdateProgress’ component?
Answer:
Some times we have huge task at the back end for processing and we would like to show a user friendly message until the processing finishes. That’s where the ‘UpdateProgress’ control comes into picture.
To use ‘UpdateProgress’ control we need to use ‘UpdatePanel’ tag. ‘UpdateProgress’ forms the child tag of ‘ UpdatePanel’ control. Until the server processing finishes we can display a message which can be defined in the ‘ ProgressTemplate’ tag which is the child tag of ‘UpdateProgress’ tag (See Figure 15.7).

Question 10:
How can you do validations in Ajax?
Answer:
We can perform all the necessary validation like required field, type checking, range checking etc using Ajax. Below is a small snippet which shows how to use a required field validator. We have numbered the code snippet to understand the code more proper.

• We have defined a text box ‘TextBoxI’ which will be validated for required field.
• We have defined a simple ‘ <span>’ HTML tag which will display the error message.

3, 4 and 5 -> We use the XML declarative Ajax script to define that ‘ TextBoxI’ has validators and it’s a required field validator. To define the required field validator we need the ‘ RequiredFieldValidator’ controls inside the validators.
6 -> We then define where the error should be displayed using the ‘ ValidationErrorLabel’. In this case we will be displaying error in the span ‘ validatorl’ which was defined previously.

Note: The above sample shows a sample for ‘requiredFieldValidator’, but we carl also use other validators like rangeValidator, typeValidator, rangeValidator and regexValidator.

Question 11:
How do we do exception handling in Ajax?
Answer:
Exception handling in Ajax is done using the ‘ ErrorTemplate’ which forms the child tag of ‘ scriptManager’. There are three steps to achieve error handling in Ajax. Figure 15.9 in Ajax shows the three steps in a pictorial fashion.

Step 1 -> Right click on the script manager and click ‘Create Error Template’.
Step 2 -> Once done click on ‘Edit Templates’.
Step 3 -> Enter which error message you want to display when there is a error and then finally click ‘End Template Editing’.
Just click back on the HTML view to see what we have in the HTML. You can see the ‘ ErrorTemplate’ tag is the fundamental driver for handling errors.

Question 12:
Can we have multiple “ScriptManager” control on a single page?
Answer:
No, we cannot have a multiple script manager control on a single page. Single script manager control can have multiple update panels to define partial sections of the page.