When working with AJAX in .NET environment you may need to at times control UI components at the client side through JavaScript. There are a lot of things you can accomplish on the client side using the provided JavaScript API. Here is a link to the Asp.NET AJAX Client Reference.
I recently used AjaxToolKit in one of my applications. I made heavy use of Tabs. In one of my pages, I needed to make sure that users could not click on the second or the third tab without saving a form that was in the first tab. I needed some sort of a validation to enforce this. I handled this on the client side since JavaScript is required for the application.
Tabs has an attribute called OnClientActiveTabChanged. This attributes allows you to set up a client side function that gets executed when a tab is clicked. Here is how this function looked in my example:
As you probably realize this function takes two parameters. In this case the sender object is the actual tabcontainer object that contains the tab objects. By looking at the reference, I found out that I could call get_activeTabIndex() method on the object. This basically returned the index of the tab. It is 0 based. In the function above looking at the switch statement you can see that when I am on the second and third tabs, I have a logic that checks to see if a question is answered (which is in tab one). If it is not answered, I am setting the active tab index to be 0 by using set_activeTabIndex() method on the sender object. I then alert the user indicating they need to save the questions first before going into tab 2 or tab 3.
I recently used AjaxToolKit in one of my applications. I made heavy use of Tabs. In one of my pages, I needed to make sure that users could not click on the second or the third tab without saving a form that was in the first tab. I needed some sort of a validation to enforce this. I handled this on the client side since JavaScript is required for the application.
Tabs has an attribute called OnClientActiveTabChanged. This attributes allows you to set up a client side function that gets executed when a tab is clicked. Here is how this function looked in my example:
function validateQuestionsAndAnswers(sender, args)
{
var tabIndex = sender.get_activeTabIndex();
switch(tabIndex) {
case 1:
case 2:
var divObj = document.getElementById('questionsAnswered');
var isAnswered = 0;
if(divObj) {
if(!isNaN(divObj.innerHTML)) {
isAnswered = divObj.innerHTML;
}
}
if(isAnswered == 0) {
sender.set_activeTabIndex(0);
alert("You must answer the questions before developing options.");
}
break;
}
return false;
}
As you probably realize this function takes two parameters. In this case the sender object is the actual tabcontainer object that contains the tab objects. By looking at the reference, I found out that I could call get_activeTabIndex() method on the object. This basically returned the index of the tab. It is 0 based. In the function above looking at the switch statement you can see that when I am on the second and third tabs, I have a logic that checks to see if a question is answered (which is in tab one). If it is not answered, I am setting the active tab index to be 0 by using set_activeTabIndex() method on the sender object. I then alert the user indicating they need to save the questions first before going into tab 2 or tab 3.
Comments