Skip to main content

Related Articles

Loading...

AJAX Extensions on Microsoft Visual Studio 2008

AJAX is a new trend in web development where it gives very smooth functionality for your website. In simple term we can use AJAX technology to refresh individual parts of the web page without refreshing whole page. This feature will increase the efficiency of your web page, smooth operation and enable more description web page design.

What is AJAX?
AJAX = Asynchronous JavaScript and XML.
AJAX is not a new programming language, but a new way to use existing standards.
AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page.
Microsoft Visual Studio 2008 is coming with rich collection of AJAX controllers built in. AJAX is based on Java and JavaScript so it is nothing to do with .NET or Visual Studio. But most importantly we can easily use AJAX with most of the web development project. With AJAX Extensions of Visual Studio 2008 we can use AJAX with the visual studio development environment. This is really easy and fun. Let do it with a small project, so that you can easily understand the concept.

In this project I will show you how to develop a web page that will display current server time stamp without refreshing web page again and again. To get server time web page should send request, get response and display it. In this basic example I am using ScriptManager and UpdatePanel controllers. ScriptManager is a highlevel controller define with respect to the web page. But you can have one or more UpdatePanel for a given web page. Those UpdatePanel s can be individually update based on deferent events. So you should understand that we can perform several functions on the web page at a given time synchronously using multiple UpdatePanel s.

Fig 1: AJAX Extensions Toolbox

AJAX toolbox contains ScriptManager, ScriptManagerProxy, Timer, UpdatePanel and UpdateProgress controllers. More frequently we use ScriptManger and UpdatePanel. Update panel we use to place controllers that need to get update with the page events, but without page refresh. In this example you can see I have add ScriptManger and UpdatePanel. Within UpdatePanel there is ContentTemplete, inside that you can I have placed two buttons and one label. Once you click on one button it will display the current server time on the label and click on other button will execute javascript method "test".

Fig 2: How to use AJAX ScriptManger





Fig 3: How to use AJAX UpdatePanel





The final step is to write code for server side operations. Write respective server side code inside the particular controllers' (Eg: button, menu...) event handling methods same as you do in normally applications. But here different is this server side code will execute on server and send results to corresponding controller but no page refresh.

Fig 4: How to write server side coding in AJAX

Comments

Post a Comment

Popular posts from this blog

The Power of ChatGPT and Whisper Models

A Deep Dive into Natural Language Processing Natural Language Processing (NLP) has seen a significant boost in recent years due to advancements in artificial intelligence and machine learning. Two models that have shown remarkable success in NLP are ChatGPT and Whisper. In this article, we will delve into the power of these models and their applications in the field of NLP. ChatGPT is a transformer-based language model developed by OpenAI that uses unsupervised learning to predict the next word in a sentence based on the context of previous words. ChatGPT is a generative model that is trained on large datasets of text, such as books and articles, and can be fine-tuned for specific tasks, such as question-answering or dialogue generation. ChatGPT is known for its ability to produce human-like text, making it an ideal tool for applications such as chatbots, content creation, and language translation. Whisper, on the other hand, is a paraphrasing model developed by Google that is based on
Post a Comment
Read more

Angular PrimeNG checkboxes styling and events handling

  Getting Started With PrimeNG Styling in Angular App This chapter I am planning to show how you can handle events of the checkboxes. For that I will use checkbox for every card to place the order.  To use PrimeNG checkboxes you have to import checkbox module in app.module.ts file. import {CheckboxModule} from 'primeng/checkbox'; import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { LandingComponent } from './modules/landing/landing.component'; import { HomeComponent } from './modules/home/home.component'; import { CardModule } from 'primeng/card'; import {CheckboxModule} from 'primeng/checkbox'; @NgModule({ declarations: [ AppComponent, LandingComponent, HomeComponent ], imports: [ BrowserModule, AppRoutingModule, CardModu
Post a Comment
Read more

Angular NgFor directive and trackby

Today we will learn about NgFor one of the core directive of angular. NgFor helps to build list and tables in Angular   Let us see the example in our flower store app. In the landing page I am going to print list of flowers that are available in the store. Later we will add images and show them in a carousel to rotate automatically. First we will create the domain class called flower.ts and you can copy paste below code.  export class flower{ constructor() { } name:string=''; price:number = 0; availableQuantity:number = 0 } To use this domain class inside another component you must specify export keyword along with the class keyword. Flower domain has 3 attributes to store name of the flower then price and the available quantity. Now we can create the array from the flower type as below inside the landing.component.ts file. myFlowerList:flower[]=[]; I will call a method inside ngOnInit to add values to the array as below. ngOnInit is one of t
Post a Comment
Read more