Navigation
Install the app
How to install the app on iOS
Follow along with the video below to see how to install our site as a web app on your home screen.
Note: This feature may not be available in some browsers.
More options
-
Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.
You should upgrade or use an alternative browser.
Client side ASP.NET + Javascript examples
ASP.NET 101
Client side ASP.NET + Javascript examples
by
Isadore
Posted
(Edited
)
Examples of JavaScript application in ASP.NET pages
Method 1: Indexing objects
For this example the objects involved are located in the following order on the form:
Water Temperature (txtWaterTemp)
pH: textbox (txtpH) (not involved in caculation)
Measured Oxygen: textbox (txtOxy)
% Oxygen saturation: textbox (txtOxygen)
...so the idea here is to (1) enter a Measured Oxygen value, (2) use the Water Temperature and Measured Oxygen to calculate an instant result on the client side using JavaScript, and place this calculated result in the txtOxygen asp:textbox.
The equation (% Oxygen Sat) used here is defined as:
Z = 14.407 + (0.0035 * Tw^2 - 0.3369 * Tw
where Tw is our measured water temperature; and the % Oxygen saturation, which we need to calculate on the Client side, is defined as:
% Sat = [txtOxy]/Z
...so two variables on the form needed for this client side calculation.
In the code behind or vb script area:
txtOxy.attributes.add("OnKeyUp","calculateOxy(this);")
..and in the HTML Javascript section put:
...keeping in mind that the [index] value is the textbox with the added attribute, the other objects having [index-2] or [index+1]; depending on their relative location to the indexed object.
Method 2: Directly identifying objects
Using the javascript call for a value within an object:
...one can obtain immediately the value.
The following example shows how this is done (a calculation of Oxygen Saturation based on Salinity and Water Temperature).
Note how the Javascript variables are multiplied by 1 to assure their numeric typing.
...where Math.exp represents the Natural log (e to the power of) and "y.toDec(2)" is a simple Java statement required to convert the variable to a formatted 2 decimal number.
'********************************************'
The following code uses hidden textboxes to store JavaScript variables (QueryString) to set the stage to pass on the client side to one of two aspx pages.
The form consist of two textboxes and two option button:
Another useful routine is to build a URL within the javascript function by passing variables within textboxes or ViewState.
which is useful to collect client side data and then redirect the aspx page.
The following routine picks up both values and text from a listbox, along with two variables and redirects the user to new page based on an option button selection:
Related Topics:
thread855-1300079 : Capturing Datagrid column,row values.
thread855-1075214 : Using JavaScript in Code behind.
thread855-1094226 : Adding JavaScript to dd & dg On ItemDataBind
thread855-1102869 : Summing Checkboxes in a dg using JS
thread855-296976 : Nice Review of JS in a User Control
thread855-945984 : Excellent discussion on the use of JS & Codebehind
thread216-1149610 : Using Confirm() pop-ups to detect changes on a form handling Postback events
thread855-1050604 : Using Div to hide HTML objects
thread855-884138 : Adding vbScript in dg during databinding
thread855-1153751 : Invoking Server Side Code with Javascript
thread855-763674 : Storing listbox selected values in Javascript
Method 1: Indexing objects
For this example the objects involved are located in the following order on the form:
Water Temperature (txtWaterTemp)
pH: textbox (txtpH) (not involved in caculation)
Measured Oxygen: textbox (txtOxy)
% Oxygen saturation: textbox (txtOxygen)
...so the idea here is to (1) enter a Measured Oxygen value, (2) use the Water Temperature and Measured Oxygen to calculate an instant result on the client side using JavaScript, and place this calculated result in the txtOxygen asp:textbox.
The equation (% Oxygen Sat) used here is defined as:
Z = 14.407 + (0.0035 * Tw^2 - 0.3369 * Tw
where Tw is our measured water temperature; and the % Oxygen saturation, which we need to calculate on the Client side, is defined as:
% Sat = [txtOxy]/Z
...so two variables on the form needed for this client side calculation.
In the code behind or vb script area:
txtOxy.attributes.add("OnKeyUp","calculateOxy(this);")
..and in the HTML Javascript section put:
Code:
<script=javascript>
function calculateOxy(obj){
var i, index;
for(i=0;i<document.forms[0].length;i++){
if(document.forms[0].elements[i ].name==obj.name)
index=i;
}
var tempfactor;
tempfactor = 0.0035 * document.forms[0].elements[index-2].value^2;
var tempBfactor;
tempBfactor = -.3369 * document.forms[0].elements[index-2].value;
var DO;
DO = document.forms[0].elements[index].value;
var Denom;
Denom = 14.407 + tempfactor + tempBfactor;
var calculatedValue;
calculatedValue = (AvgDO/Denom) * 100;
document.forms[0].elements[index+1].value=calculatedValue;
}
</script>...keeping in mind that the [index] value is the textbox with the added attribute, the other objects having [index-2] or [index+1]; depending on their relative location to the indexed object.
Method 2: Directly identifying objects
Using the javascript call for a value within an object:
Code:
...
document.Form1.txtmyText.value
......one can obtain immediately the value.
The following example shows how this is done (a calculation of Oxygen Saturation based on Salinity and Water Temperature).
Note how the Javascript variables are multiplied by 1 to assure their numeric typing.
Code:
function calculateOxyA(obj){
if(document.frmCDE.txtWaterTemp.value*1 < 0.01){
alert('Make a note in the comments that no water temperature reported for this sample');
document.frmCDE.txtWaterTemp.value = -1
}
if(document.frmCDE.txtAvgDO.value*1 < 0.01){
var y = document.frmCDE.txtRep1.value*1
y = y.toDec(2);
document.frmCDE.txtAvgDO.value = y*1;
}
else{
var z = (0.5*((document.frmCDE.txtRep1.value*1)+(document.frmCDE.txtRep2.value*1)));
z = z.toDec(2);
document.frmCDE.txtAvgDO.value = z*1;
}
var AvgDO = document.frmCDE.txtAvgDO.value*1
var T = document.frmCDE.txtWaterTemp.value*1
T = T*1 + 273.15
var x = (157570.1/T)*1
var y = - (66423080/(T*T))*1
var z = (12438000000/(T*T*T))*1
var zz = - (862194900000/(T*T*T*T))*1
var sal = document.frmCDE.txtSalinity.value*1
var sala = 0.017674 - (10.754/T)*1
var salb = (2140.7/(T*T))*1
var salc = sal*1*((sala*1)+(salb*1))
var zzz = Math.exp(-139.34411 + x*1 + y*1 + z*1 + zz*1- salc*1);
var y = (AvgDO*1/zzz*1)*100
y = y.toDec(2); [Note: y.toFixed(2); may be equivalent]
document.frmCDE.txtSat.value = y*1;
}...where Math.exp represents the Natural log (e to the power of) and "y.toDec(2)" is a simple Java statement required to convert the variable to a formatted 2 decimal number.
'********************************************'
The following code uses hidden textboxes to store JavaScript variables (QueryString) to set the stage to pass on the client side to one of two aspx pages.
The form consist of two textboxes and two option button:
Code:
<Script LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function chng(){
if (frmWS.r2.checked){
frmWS.txtA.value="0";
frmWS.r1.checked=false;
frmWS.strURL.value = "Groupsdata.aspx?ChartID=1"
}
else{
frmWS.txtA.value="1";
frmWS.r2.checked=false;
frmWS.strURL.value = "WSDataMap.aspx?ChartID=1"
}
}
-->
</script>
<html>
...
...option buttons...
<p align="center"><i><Font Size="4" color="navy"><input type=radio id="r1" runat="server" onclick="Javascript:chng();">Search by Map
<input type=radio id="r2" runat="server" onclick="Javascript:chng();">Search by DataGrid</Font></i></p>
...
...hiddent input textboxes...
<input type="Text" id="txtA" runat="server" Value="0">
<input type="Text" id="strURL" runat="server" Value="Groupsdata.aspx?ChartID=1">
...
...
</html>Another useful routine is to build a URL within the javascript function by passing variables within textboxes or ViewState.
Code:
function sF(intF){
var url = frmWS.strURL.value;
var index = frmWS.txtV.value;
url += index;
navigate(url + '&WID=' +intF);
}which is useful to collect client side data and then redirect the aspx page.
The following routine picks up both values and text from a listbox, along with two variables and redirects the user to new page based on an option button selection:
Code:
function getStr(str, strC){
var s="";
var r="";
var opt;
var el;
for (var i=0;i<document.Form1.lstCon.length;i++) {
if(document.Form1.lstCon.options[i].selected){
s+=document.Form1.lstCon.options[i].value+((i==document.Form1.lstCon.length-1)?"":",");
r+=document.Form1.lstCon.options[i].text+((i==document.Form1.lstCon.length-1)?"":",");
}
}
document.Form1.alloptions.value=s;
document.Form1.allNoptions.value=r;
document.Form1.dteTime.value = document.Form1.ddhr.options[document.Form1.ddhr.selectedIndex].text + ":" + document.Form1.ddmin.options[document.Form1.ddmin.selectedIndex].text;
if(document.Form1.radchem.checked==true){
el = "ChemDataEntry.aspx?mypage=8&filter=" + document.Form1.txtfilter.value + "&Description=" + str + "&GroupAbbrev=" + strC;
}
if(document.Form1.radbac.checked==true){
el = "BacDataEntry.aspx?mypage=8&filter=" + document.Form1.txtfilter.value + "&Description=" + str + "&GroupAbbrev=" + strC;
}
if(document.Form1.radbio.checked==true){
el = "BioDataEntry.aspx?mypage=8&filter=" + document.Form1.txtfilter.value + "&Description=" + str + "&GroupAbbrev=" + strC;
}
if(document.Form1.radparam.checked==true){
el = "SixParams.aspx?mypage=8&filter=" + document.Form1.txtfilter.value + "&Description=" + str + "&GroupAbbrev=" + strC;
}
navigate(el);
}Related Topics:
thread855-1300079 : Capturing Datagrid column,row values.
thread855-1075214 : Using JavaScript in Code behind.
thread855-1094226 : Adding JavaScript to dd & dg On ItemDataBind
thread855-1102869 : Summing Checkboxes in a dg using JS
thread855-296976 : Nice Review of JS in a User Control
thread855-945984 : Excellent discussion on the use of JS & Codebehind
thread216-1149610 : Using Confirm() pop-ups to detect changes on a form handling Postback events
thread855-1050604 : Using Div to hide HTML objects
thread855-884138 : Adding vbScript in dg during databinding
thread855-1153751 : Invoking Server Side Code with Javascript
thread855-763674 : Storing listbox selected values in Javascript
Please Note: 1 is Bad, 10 is Good :-)
Part and Inventory Search
-
This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
By continuing to use this site, you are consenting to our use of cookies.