Sharing: ASPX page several trick of JavaScript

Source: Internet
Author: User
Tags split tagname visual studio
Page 1, in general, if you want to add some JavaScript features to the Web Form control on an ASPX page, you can do it with Attributes.Add.
For example, for TextBox txt, you can:
Txt. Attributes.Add ("onclick", "fcn0 ();");
Then, when you click it on a Web page, you call Fcn0 this JavaScript function.

1.1. The exception is the parsing of properties that the IDE cannot recognize.

For example, for a RadioButton rbt,ide cannot recognize the onclick attribute, then, like the above statement,
Rbt. Attributes.Add ("onclick", "fcn1 (this);");
In the. NET Framework 1.1, you will resolve to
<input type=radio id=rbt .....
And in the. NET Framework 1.0, it will be parsed into
<span ><input Type=radio id=rbt>...</span>
Note that in FCN1, the parameter this corresponds to a different object. This is a subtle difference.

2, and for HTML control, need to do a little more things.

When you design an ASPX page, drag a Web Form control from the toolbar, such as a TextBox to a page, two things happen:
One, aspx page one more sentence
<asp:textbox id= "TextBox1" style= "runat=" Server "width=" 102px "height=" 25px "></asp:TextBox>
Second, the code behind one more sentence
protected System.Web.UI.WebControls.TextBox TextBox1;
If HTML control is the first sentence, runat= "server" does not appear, and the second inning is not automatically added.
Therefore, if you want to access HTML control, you need
The runat= "Server" attribute is added to the statement in the ASPX page to become
<input style= "..." type= "text" size= "9" id= "Htxt" runat= "Server" >
Ii. statements shown in code behind
protected System.Web.UI.HtmlControls.HtmlInputText htxt;
Notice that the ID of the first sentence and the variable name of the second sentence are the same.

2.1. Note that the preceding System.Web.UI.WebControls.TextBox corresponds to the HTML Control is System.Web.UI.HtmlControls.HtmlInputText, the corresponding HTML tag is <input type= "text";

Accordingly, the HTML tag <body> corresponding HTML control is
Public System.Web.UI.HtmlControls.HtmlGenericControl Mybody;

2.2, with one exception is the HTML <form> tag corresponding to the onsubmit event. Look at an ASPX page like this

<%@ Page language= "C #" codebehind= "WebForm2.aspx.cs" autoeventwireup= "false" inherits= "Testcs.webform2"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<HEAD>
<title>WebForm2</title>
<meta name= "generator" content= "Microsoft Visual Studio 7.0" >
<meta name= "Code_language" content= "C #" >
<meta name= "vs_defaultClientScript" content= "JavaScript" >
<meta name= "vs_targetschema" content= "http://schemas.microsoft.com/intellisense/ie5" >
<script language= "JavaScript" >
function Fcn1 ()
{
Prompt ("Hi", "fcn1");
}
</script>
</HEAD>
<body ms_positioning= "GridLayout" >
<form id= "WebForm2" method= "POST" runat= "Server" >
<asp:button id= "Button1" style= "z-index:103; left:423px; Position:absolute; TOP:83PX "runat=" Server "width=" 86px "height=" 29px "text=" button "></asp:Button>
<asp:dropdownlist id= "DropDownList1" style= "z-index:104; left:284px; Position:absolute; TOP:163PX "runat=" Server "width=" 188px "height=" 17px "autopostback=" True ">
<asp:listitem value= "a" >a</asp:ListItem>
<asp:listitem value= "B" >b</asp:ListItem>
<asp:listitem value= "C" >c</asp:ListItem>
</asp:DropDownList>
</form>
</body>
</HTML>

The content is very simple, defined a JavaScript function fcn1, put a button Button1 and a AutoPostBack DropDownList DropDownList1, run it, you can see: Click Button1, The FCN1 and postback are executed first, and the DropDownList1 options are selected, and the FCN1 is not triggered except for the postback.

Microsoft Autopostback=true WebControl Implementation of postback, the principle is this:

First, if the ASPX page has a autopostback=true WebControl, a JavaScript function called __doPostBack is defined by writing the following JavaScript statement.

<script language= "JavaScript" >
<!--
function __doPostBack (Eventtarget, eventargument) {
var theform;
if (Window.navigator.appName.toLowerCase (). IndexOf ("Netscape") >-1) {
Theform = document.forms["WebForm2"];
}
else {
Theform = document. WebForm2;
}
Theform.__eventtarget.value = Eventtarget.split ("$"). Join (":");
Theform.__eventargument.value = eventargument;
Theform.submit ();
}
-->
</script>

Two, for example is the above DropDownList, will render into:
<select name= "DropDownList1" language= "javascript id=" DropDownList1 "style=" ... ">
<option value= "a" >a</option>
<option value= "B" >b</option>
<option value= "C" >c</option>
</select>

In this way, the Theform.submit () is invoked via Javscript to submit the Form,postback, but Theform.submit will not trigger the OnSubmit event of the form!

This is a bug in Microsoft.

The solution can be seen here: Http://www.devhawk.net/art_ SUBMITFIREFIXUP.ASHX, this provides a DLL and source code that, when used, joins the DLL in project reference, and then adds a section of the web.config
<add type= "Devhawk.web.submitfirefixupmodule,submitfirefixupmodule" name= "Submitfirefixupmodule"/>
It's OK.

3, an application.

Often hear complaints that if a <select> element is altered with JavaScript on the browser side, then its corresponding server-side DropDownList is not aware of the update.

This may occur in the DropDownList of "cascading", such as the first DropDownList is a province, the second is a city, or it may be that the first DropDownList select some items to add to the second DropDownList.

For this use of the above technology, I have made a solution like this (similar to the ViewState method):

I defined a textbox txtwrap with a width of 0, and DropDownList all I want to handle with the athososw= "True" property, ready to be processed.
Second, referring to the contents of the above 2.2, I joined the Submitfirefixupmodule, to ensure that the trigger form of the onsubmit event.
The onsubmit event of the form will execute the JavaScript function fcnathosonsubmitwrap, which will traverse the DropDownList of the Athososw property to True, write down the data, and finally merge it into the Txtwrap, In fact, this is a serialization process. The code is as follows:
function Fcnathosonsubmitwrap ()
{
Txtwrap = document.all["Txtwrap"];

var i;
var strwrap = ';
for (i=0;i<document.all.length;i++)
{
CTRL = Document.all[i];
if (ctrl.tagName.toUpperCase () = = ' SELECT ' && typeof (ctrl. ATHOSOSW)!= ' undefined ')
{
if (ctrl. Athososw.touppercase () = = ' TRUE ')
{
Strwrap + = Fcnathoswrapselect (ctrl) + ' &&& ';
}
}
}

if (strwrap.length>3)
Txtwrap.value = strwrap.substring (0, strwrap.length-3);
};

Athososw
function Fcnathoswrapselect (ctrlselect)
{
var i;
var strwrapselect = ctrlselect.id + ' & ' + ctrlselect.tagname;
var strvalue= ';
var strtext= ';
for (i=0;  i<ctrlselect.options.length; i++)
{
strvalue = Ctrlselect.options[i].value;
StrText = Ctrlselect.options[i].text;
Strwrapselect + = ' && ' + i + ' & ' + strvalue.replace (/&/g, '%26 ') + ' & ' + strtext.replace (/&/g, '%26 ');
};
return strwrapselect;
};


The Clscommon.unwrapcontrol (this, txtwrap.text) is called in the form's Page_Load, and is deserialized. Clscommon is my tool class, the Unwrapcontrol method code is as follows:

static public void Unwrapcontrol (System.Web.UI.Page pgunwrap, String strunwrap)
{
Regex r3 = new Regex ("(&&&)"); Split on hyphens.
Regex r2 = new Regex ("(&&)"); Split on hyphens.
Regex r1 = new Regex ("(&)"); Split on hyphens.
String[] SA3, SA2, SA1;
String S3, S2, S1;
int i3, i2, I1;
String Strid, Strtagname;
System.Web.UI.Control Ctrlunwrap;
DropDownList Ddlunwrap;
ListItem Liadd;

s3 = Strunwrap;
SA3 = R3. Split (S3);

For (i3=0;i3< (SA3). length+1)/2;i3++)
{
s2 = sa3[i3*2];
if (S2. LENGTH&GT;0)
{
SA2 = R2. Split (S2);
if (SA2. LENGTH&GT;1)
{
S1 = sa2[0];
SA1 = R1. Split (S1);
if (SA1. LENGTH==3)
{
Strid = sa1[0];
Strtagname = sa1[2];

Ctrlunwrap = Pgunwrap.findcontrol (Strid);
if (Ctrlunwrap!=null)
{
if (Strtagname = = "Select")
{
Ddlunwrap = (DropDownList) ctrlunwrap;
DdlUnwrap.Items.Clear ();

for (I2=1 I2 < (SA2). length+1)/2;i2++)
{
S1 = sa2[i2*2];
SA1 = R1. Split (S1);
Liadd = new System.Web.UI.WebControls.ListItem (sa1[4],sa1[2]);
DDLUNWRAP.ITEMS.ADD (Liadd);
}
}
}
}
}
}
}
}


ATHOSSMTH All rights reserved, reprint please specify.


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.