Tag Archives: UpdatePanel

JQuery or Asp .Net Ajax Controls, What is your choice ? Why dont combine them ?

JQuery

JQuery used on client script. It really helps to fasten javascript or client script development.

JQuery also has package to make nice User Interface by using JQuery UI. JQuery UI has many themes that makes it more flexible and usable by developer.

Ajax functionality is one of JQuery strong benefit. Again, easy and fast client Ajax development also platform independent makes JQuery is a favorite and popular Javascript framework.

Asp .Net Ajax Toolkit and ScriptManager

Asp .Net has its own Ajax Controls. There are main components of Asp .Net Ajax controls which are ScriptManager, UpdatePanel, and Triggers. ScriptManager is a must have controls to enable Ajax.

Those controls are server control by attribute runat=”server”. So that Ajax submission will be done with .Net powerfull script and also VS intellisense. Server side script in Asp .Net is easy to manage. Has relatively less lines of code than any technology by help of so many .Net references that available. OOp implements automatically so that developer can make their best practice on OOP design.

Those reasons make general and Ajax Server side script on Asp .Net leads on easiness and fast for application development.

Asp .Net Ajax toolkit has client side script that act like JQuery to handle client development. Also it has many controls for User Interface development. With this Asp .Net functionallities, client development also can be fasten then using plain javascript.
Continue reading

Asp.Net Ajax Web Continuous Pagination Thus Making Endless Scroll

Brief Intro

Nowadays, a web page contains continuous pagination to deal with retrieving lot of data.
This continuous pagination means data views per page doesnt requires to reload a whole page to get next / previous page. It partially reload and attached next data on same page.
So it makes seemingly endless scroll.

This blog post will give you an example on how to do this continuos paging using Asp .Net Ajax capabilities.

Database & Query

I use SQL Server 2008 Northwind Database as sample. Spesifically use Orders, OrderDetails, Products, Employees and Customers tables.

I will make a list of sales transaction along with purchased products, customers and salesman or employees. Total value also being presented.

Tables Design

Below are list of design of tables I used. These list converted into create table statement.
Continue reading

Building Web Chat From Scratch Using Asp .Net Ajax Timer

Asp .Net Ajax Timer is useful control to do a repetitive task like constantly viewing current information, auto save etc.
Its event is tick with time interval. So every period of interval time the tick event will be executed.
This Asp .Net Timer control is much like windows form timer control.

I already have post about this Timer control on my previous post, please refer to this Introduction To Asp .Net Ajax 4 (Timer)

One of advantage using Timer is that we code more on server script instead of Js client script. So that we can use Asp .Net server script feature.
But other developers might be more comfortable using client script and then it is more like a choice. Remember that every server side script that update the UI will use server’s resources.
So it is better to consider your code, traffic and related resources.

However, this Asp .Net Timer control is a good option to go and in this post I give you an example to make web chat from scratch using it.

Web Chat

Chat user sees their friend messages by constantly refresh a message board, checking whether there are any new incoming messages or not. Timer is used to do this.
Continue reading

Introduction To Asp .Net Ajax 4 (Timer)

Timer is a Asp .Net Ajax Control to do a repetitive task. It is similar with Windows Form Timer Control or in Javascript point of view is windows.setInterval method.

Timer Event is Tick. It has interval properties in miliseconds. Interval is a time between tick event triggers itself. So this tick event runs on specific interval of time.

If you want to have a repeated automatic refresh to view current information or action like auto save then you can use Timer Control.
Since it is an ajax process then page will reload partially or process will run asynchronously.

Example

I have a Timer Example just to view clock in a panel. Every second, clock in panel will be refreshed and show current hour, minute and second.
The source code I give you is a block code because other lines are auto-generated by Visual Studio. Here is an .aspx block code:
Continue reading

Open an Url on Asp.Net ModalPopupExtender Ajax Toolkit And Alternative Approaches


Traditional javascript using window.open(url) function to open an Url on new browser window.
Developers can post a form to new window or build a data entry page. window.open(url) function is simple but if it opens new browser several times then overall application could become overwhelming.

We can use ModalPopupExtender instead of window.open function. ModalPopupExtender is an Ajax Control Toolkit to create a modal popup. Modal popup is a dialog box that always on top of a page. You cannot access parent page if modal popup still appear so you need to close it first.
I already have a blog post explaining and showing example about ModalPopupExtender, please follow this Create a PopUp Dialog with ModalPopupExtender AjaxControlToolkit

ModalPopupExtender usually has a Panel Control and inside this Panel we can have any control like label, textbox, button etc. ModalPopupExtender usually has an OK and Cancel button inside Panel.
Those OK and Cancel buttons actually close the modal popup.

The question is how can we open an Url and show it inside Modal Popup? We can just fill in the Url’s HTML source code string into Panel inside the Modal Popup.
So that we can have dynamic content on that modal popup

One way to get Url’s HTML source code is using WebRequest Class. This WebRequest Class can get the response stream of Url and we convert it to string using StreamReader Class.

Continue reading

Cascading DropDownList with Asp .Net Ajax

Populating list to DropDownList Control is one of most common process in web application. Web page reload every time to populate with data.
Images, textboxes and other components will reload and it increases load between client and server.

Asp .Net Ajax makes web page not entirely reload. Populating process will only affect to related DropDownList Controls. Other controls will not reload everytime.

The Example use SQL Server AdventureWorks Database. It will have Department DropDownList and when selection changed second DropDownList will populate related Employee.
Third DropDownList contains Sales Order Number to chosen Employee. Show Sales Data Button will provide brief information based on chosen sales order number.
Continue reading

Introduction to Asp .Net Ajax – 2 (UpdateProgress)

Ajax makes rich web application. Users don’t have to reload page in order to get response from server. Asynchronous proccess is a key to Ajax.
With Asp .Net Ajax building ajax enabled web app become easier. Built in controls like ScriptManager, UpdatePanel, ContentTemplate, Triggers, and UpdateProgress
In earlier post (Introduction to Asp .Net-1) I have given an example on how to use Built in Asp .Net Controls. In this post I will give example of UpdateProgress Control.

UpdateProgress Control
When we run on long query process or file upload/download operation or some complex calculation, we need to inform users about progress status since the page is not reloading.
Asp .Net Built in UpdateProgress Control informs progress to users asynchronously. It has ProgressTemplate Tag inside Control’s Tag. We can write progress information inside ProgressTemplate Tag. Continue reading