Tag Archives: ASP.NET AJAX

Using Asp .Net TabContainer To Create Professional Entry Form/View


Asp .Net TabContainer is useful for multi view purpose via clicking its Tab Panels.
The idea is using two TabPanels as containers for Entry form and list view. The first Tab Panel contains Entry Form and second for List View as we can see at above screen shots.

I use simple Northwind Database and Products Table to create Entry and View to this table.

Asp .Net TabContainer Basic

We must add reference to Asp .Net Ajax Control Toolkit since TabContainer Control is inside it.

  • Add ToolkitScriptManager Control inside form tag
  • Add TabContainer Control after ToolkitScriptManager.
     <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    	</asp:ToolkitScriptManager>   
    	<asp:TabContainer ID="TabContainer1" runat="server" >
    		 <asp:TabPanel ID="tabpanel1" runat="server" HeaderText="Entry">
    		 </asp:TabPanel>
    		 <asp:TabPanel ID="tabpanel2" runat="server" HeaderText="View">
    		 </asp:TabPanel>
    	</asp:TabContainer>
    

Basic TabContainer is already created with simple above Asp .Net Script. You can switch between TabPanels but these still contains nothing.
Continue reading

Making Flexible User Input With Asp.Net Ajax PopUp & Calendar Extender Toolkit Controls


Complex user input design occurs oftenly in web app. Some of requirements need multiple inputs.
Using standard textbox, radio button, check box, combo box will resulting long and a lot of form elements with so many page refresh thus this is not good enough.
Application User Easiness of use requires simple process so we need to shorten & tidy up the look & feel of UI interface.

We need more sophisticated controls to accomplish that requirement. Fortunately, Asp.Net have Ajax PopUp Extender Control.
We can create several/combined inputs inside PopUp Extender and user see it as one control. Since this control is ajax enabled then when PopUp process is happening, page will only reload partially.

Other example I want to share in this blog post is Calendar Extender Toolkit. This is basically Ajax DatePicker.

Generally, we need a textbox, PopUp panel and PopupControlExtender to form a PopUp. This textbox act as trigger also target control, PopUp panel as the popup it self and PopupControlExtender is a controller that connect popup panel with target textbox.
Continue reading

Asp.Net Ajax Client Network Calls Techniques With WebRequest & WebRequestManager

Ajax Network Calls is almost being most extensively used on web application. Client calls a page on Url via javascript and the Url’s content is being stored in a variable as a string.
This variable can be written on html element like div element. Traditional ajax is basically a network call.

We can use ajax network call technique to populate combo box or select element from database, Auto complete function, search records, update, insert record etc.

I’ll give examples of ajax network calls techniques using client script Sys.Net.WebRequest class. We will use this client side class in javascript.
Remember that we have to put ScriptManager control in aspx page to enable Asp.Net ajax extension.

Web Request Example

I have two textboxes which their ids are txname and txage. After user enters his/her name, age and clicks “Go” button, current date and time will be displayed in div element along with entered values in each textboxes.

Continue reading

Traditional Ajax With Asp .Net And Modern PageMethods Approach

Traditional Ajax Method With Asp.Net

Basicaly, we use XMLHttpRequest client side class to use ajax functionality. The use of bare XMLHttpRequest is a traditional way to accomplish asynchronous process.

This XMLHttpRequest class implementation is written in JScript or VbScript client script and usually it is being used by Asp Classic but Asp .Net can use it and so other open source code language.
To make an async process using XMLHttpRequest we can use client side development only.

Although the traditional way is not die and still a good option rather than not to use the asynx process but when we are using Asp .Net to do ajax it is recomended to use a modern approaches.
This modern approach is using Asp.Net Ajax Extension. It includes both server and client side development. I use PageMethods in this post to be specific. In fact, a lot of option of using Asp.Net Ajax.
However we need to know how to implement or code with XMLHttpRequest and so we can compare it with modern (Asp.Net Ajax) method.

XMLHttpRequest Example

I use Asp.Net file to show you how to use traditional ajax.

.aspx file:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
         
        function httprequest() {
            
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var response = xmlhttp.responseText;
                    document.getElementById("response").innerHTML = response;

                }
            }
            xmlhttp.open("GET", "somehtml.htm", true);
            document.getElementById("response").innerHTML = "Loading..";
            window.setTimeout("xmlhttp.send()", 1000);
        }
    </script>
</head>
<body onload="httprequest()">
    <form id="form1" runat="server">
    <div id="response"></div>
    </form>
</body>
</html>

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

Introduction To Asp .Net Ajax 3 (ScriptManagerProxy)


“ScriptManagerProxy Class enables nested components such as content pages and user controls to add script and service references to pages when a ScriptManager control is already defined in a parent element.”
Source: http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanagerproxy.aspx

As you may know by now the ScriptManager manages all resource of Asp .Net Ajax. ScriptManager is a must have control to enable Ajax functionality.
We can include service and Javascript reference inside ScriptManager.

However Asp .Net enables only one ScriptManager component at a page. If you need to add another reference then use ScriptManagerProxy instead.
This is useful when you put ScriptManager at MasterPage and then you can extend custom functionallity using ScriptManagerProxy i.e to add Ajax Client Js File in your content page.
You can have reference to common Ajax Js script or web service at MasterPage and then you add custom Js script inside your specific custom page.
Also this ScriptManagerProxy avoid wasteful resource by referencing only a web service or script that needed by a page. Not all reference is included in ScriptManagerProxy, we have only common reference in Parent ScriptManager.

I give you an example of making above scenario using ScriptManagerProxy in this post. I create a master page containing ScriptManager component that reference to a web service.
This web service will return a product stock qty balance. Also I have a content page that shows product stock using ScriptManagerProxy that reference to Js script to access the web service method.

Example

Continue reading