asp.net中标准button跟html里面button控件有什么不同_语言综合

aspnet之所以现在开发方便和快捷，关键是它有一组强大的控件库，包括web服务器控件,web用户控件，web自定义控件，html服务器控件和html控件等。这里我主要说说html控件、html服务器控件和web服务器控件的区别。

1、html控件:就是我们通常的说的html语言标记，这些语言标记在已往的静态页面和其他网页里存在,不能在服务器端控制的，只能在客户端通过javascript和vbscript等程序语言来控制。<input type="button" id="btn" value="button"/>

2、html服务器控件:其实就是html控件的基础上加上runat="server"所构成的控件它们的注意区别是运行方式不同，html控件运行在客户端，而html服务器控件是运行在服务器端的。参考其他资料是这样说的: 当ASPNET 网页执行时，会检查标注有无runat 属性，如果标注没有设定，那么Html标注就会被视为符串，并被送到字符串流等待送到客户端，客户端的浏览器会对其进行解释；如果Html标注有设定runat="server" 属性，Page 对象会将该控件放入控制器，服务器端的代码就能对其进行控制，等到控制执行完毕后再将Html服务器控件的执行结果转换成Html标注，然后当成字符串流发送到客户端进行解释<input id="Button" type="button" value="button" runat="server" />

3、web服务器控件:也称aspnet服务器控件，是Web Form编程的基本元素，也是aspnet所特有的。它会按照client的情况产生一个或者多个html控件，而不是直接描述html元素。如： <asp:Button ID="Button2" runat="server" Text="Button"/>那么它和html服务器控件有什么区别呢参照其他网页的资料看法如下：

1)、Aspnet服务器控件提供更加统一的编程接口，如每个Aspnet服务器控件都有Text属性。

2)、隐藏客户端的不同，这样程序员可以把更多的精力放在业务上，而不用去考虑客户端的浏览器是ie还是firefox，或者是移动设备。

3)、Aspnet服务器控件可以保存状态到ViewState里，这样页面在从客户端回传到服务器端或者从服务器端下载到客户端的过程中都可以保存。

4)、事件处理模型不同，Html标注和Html服务器控件的事件处理都是在客户端的页面上，而Aspnet服务器控件则是在服务器上，举例来说：

<input id="Button4" type="button" value="button" runat="server"/>是Html服务器控件，此时我们点击此按钮，页面不会回传到服务器端，原因是我们没有为其定义鼠标点击事件。

<input id="Button4" type="button" value="button" runat="server" onserverclick="test" />我们为Html服务器控件添加了一个onserverclick事件，点击此按钮页面会发回服务器端，并执行test(object sender, EventArgs e)方法。

<asp:Button ID="Button2" runat="server" Text="Button" />是Aspnet服务器控件，并且我们没有为其定义click，但是我们点击时，页面也会发回到服务器端。

由此可见：Html标注和Html服务器控件的事件是由页面来触发的，而Aspnet服务器控件则是由页面把Form发回到服务器端，由服务器来处理。

4、下面我就结合我自己的测试来说明问题：

这段代码是我放在repeat中的模板里的:其中DeleteCheck是一个js脚本函数，注意是用于是否发送到服务器端的，这里就不展示脚本代码了。

<button runat="server" id="button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>

<asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" />

展现出来的html代码如下：

<button id="Data_ctl03_button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>

可以看出以下几点:

1、当控件属性中有runat="server"时，生成的html控件时name和id发生的变化(net Framework)。

2、当asp:button服务器按钮通过生成的页面后转化成类型为submit类型的Client控件。

3、当控件是html控件时通过生成的页面和原来的html代码完全一样(理由上面已经说名)。

另外我还测试了把这段代码直接放到form标记中(不放到其他子标记中)如:

<button runat="server" id="button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>

<asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" OnClick="button5_Click" />

<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>直接放到form标记中生成的html代码

<!--

var theForm = documentforms['form1'];

if (!theForm) {

theForm = documentform1;

}

function __doPostBack(eventTarget, eventArgument) {

i f (!theFormonsubmit (theFormonsubmit() != false)) {

theForm__EVENTTARGETvalue = eventTarget;

theForm__EVENTARGUMENTvalue = eventArgument;

theFormsubmit();

}

// -->

</script>

<button id="button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>

<a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')">LinkButton</a>

这里有可以看出几点：

1、当html服务器控件在服务器端添加了服务器事件后生成的代码变为:onclick="_doPostBack()"，实际上是调用脚本把整个窗体提交到服务器(如果没有添件服务器事件而只是添加了runat="server"是不会发送到服务器端的)这里注意如果要在html服务器控件中添加一个客户端事件如上面的 <input runat="server" type="button" id="delete" value="Server button" onserverclick="delete_ServerClick" />变成 <input runat="server" type="button" id="delete" value="Server button" onclick="return DeleteCheck(this)" onserverclick="delete_ServerClick" />那样生成的html代码变成 <input language="javascript" onclick="return DeleteCheck(this) __doPostBack('delete','')" name="delete" type="button" id="delete" value="Server button" />提示有脚本错误原因是onclick事件执行了2个脚本且书写的格式不正确。onclick="return DeleteCheck(this)；_doPostBack()"这样的话就只能执行第一个函数而第二个函数就不能执行了(return)如果用onclick="return DeleteCheck(this)，_doPostback()"是指2个函数同时都要执行没有影响(相当于一条语句)。在我的一个项目中需要对于控件进行区分总结，我在网上找了找加上自己的实际测试总结如下：

2、html服务器控件:其实就是html控件的基础上加上runat="server"所构成的控件它们的注意区别是运行方式不同，html控件运行在客户端，而html服务器控件是运行在服务器端的。参考其他资料是这样说的: 当ASPNET 网页执行时，会检查标注有无runat 属性，如果标注没有设定，那么Html标注就会被视为字符串，并被送到字符串流等待送到客户端，客户端的浏览器会对其进行解释；如果Html标注有设定runat="server" 属性，Page 对象会将该控件放入控制器，服务器端的代码就能对其进行控制，等到控制执行完毕后再将Html服务器控件的执行结果转换成Html标注，然后当成字符串流发送到客户端进行解释<input id="Button" type="button" value="button" runat="server" />

1)、 Aspnet服务器控件提供更加统一的编程接口，如每个Aspnet服务器控件都有Text属性。

2)、隐藏客户端的不同，这样程序员可以把更多的精力放在业务上，而不用去考虑客户端的浏览器是ie还是firefox，或者是移动设备。

3)、 Aspnet服务器控件可以保存状态到ViewState里，这样页面在从客户端回传到服务器端或者从服务器端下载到客户端的过程中都可以保存。

4)、事件处理模型不同，Html标注和Html服务器控件的事件处理都是在客户端的页面上，而Aspnet服务器控件则是在服务器上，举例来说：

<asp:Button ID="Button2" runat="server" Text="Button" />是Aspnet服务器控件，并且我们没有为其定义click，但是我们点击时，页面也会发回到服务器端。

由此可见：Html标注和Html服务器控件的事件是由页面来触发的，而Aspnet服务器控件则是由页面把Form发回到服务器端，由服务器来处理。

4、下面我就结合我自己的测试来说明问题：

这段代码是我放在repeat中的模板里的:其中DeleteCheck是一个js脚本函数，注意是用于是否发送到服务器端的，这里就不展示脚本代码了。

<button runat="server" id="button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>

<asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" />

展现出来的html代码如下：

<button id="Data_ctl03_button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>

可以看出以下几点:

1、当控件属性中有runat="server"时，生成的html控件时name和id发生的变化(net Framework)。

2、当asp:button服务器按钮通过生成的页面后转化成类型为submit类型的Client控件。

3、当控件是html控件时通过生成的页面和原来的html代码完全一样(理由上面已经说名)。

另外我还测试了把这段代码直接放到form标记中(不放到其他子标记中)

如: <input runat="server" type="button" id="delete" value="Server button" onserverclick="delete_ServerClick" />

<button runat="server" id="button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>

<asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" OnClick="button5_Click" />

<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>直接放到form标记中生成的html代码

<!--

var theForm = documentforms['form1'];

if (!theForm) {

theForm = documentform1;

}

function __doPostBack(eventTarget, eventArgument) {

if (!theFormonsubmit (theFormonsubmit() != false)) {

theForm__EVENTTARGETvalue = eventTarget;

theForm__EVENTARGUMENTvalue = eventArgument;

theFormsubmit();

}

// -->

</script>

<button id="button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>

<a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')">LinkButton</a>

这里有可以看出几点：

变成 <input runat="server" type="button" id="delete" value="Server button" onclick="return DeleteCheck(this)" onserverclick="delete_ServerClick" />

那样生成的html代码变成 <input language="javascript" onclick="return DeleteCheck(this) __doPostBack('delete','')" name="delete" type="button" id="delete" value="Server button" />提示有脚本错误原因是onclick事件执行了2个脚本且书写的格式不正确。onclick="return DeleteCheck(this)；_doPostBack()"这样的话就只能执行第一个函数而第二个函数就不能执行了(return)如果用onclick="return DeleteCheck(this)，_doPostback()"是指2个函数同时都要执行没有影响(相当于一条语句)。

2、asp:button中的onclientclick事件生成后就变成了onclick事件了,类型变成了type="submit"然而服务器事件的onclick我想是通过发送到服务器端执行的。

3、LinkButton不定义onclick事件，它会自动的生成下面代码发送到服务器端。 href="javascript:__doPostBack('LinkButton1',' ')"

4、asp:button中的onclientclick事件生成后就变成了onclick事件了,类型变成了type="submit"然而服务器事件的onclick我想是通过发送到服务器端执行的。

首先最好把input换成asp:button控件，这样可以同时使用onclick（服务器端事件）和onclientclick（客户端事件）

<asp:Button ID="btnDelete" runat="server" Text="删除" onclick="btnDelete_Click" OnClientClick="return confirm('确认要删除？')"/>

javaScript函数中执行C#代码中的函数：

方法一：1、首先建立一个按钮，在后台将调用或处理的内容写入button_click中;

2、在前台写一个js函数，内容为documentgetElementById("btn1")click();

3、在前台或后台调用js函数，激发click事件，等于访问后台c#函数；

方法二：1、函数声明为public

后台代码(把public改成protected也可以)

public string ss()

{

return("a");

}

2、在html里用＜%=fucntion()%＞可以调用

前台脚本

＜script language=javascript＞

var a = "＜%=ss()%＞";

alert(a);

＜/script＞

方法三：1、＜script language="javascript"＞

＜!--

function __doPostBack(eventTarget, eventArgument)

{

var theForm = documentForm1; //指runat=server的form

theForm__EVENTTARGETvalue = eventTarget;

theFrom__EVENTARGUMENTvalue = eventArgument;

theFormsubmit();

}

--＞

＜/script＞

＜input id="Button1" type="button" name="Button1" value="按钮" onclick="javascript:__doPostBack('Button1','')"＞

方法四：＜script language="javascript"＞

function SubmitKeyClick()

{

if (eventkeyCode == 13)

{

eventcancelBubble = true;

eventreturnValue = false;

documentallFunNamevalue="你要调用的函数名"；

documentform[0]submit();

}

＜/script＞

＜INPUT onkeypress="SubmitKeyClick()" id="aaa" type="text"＞

＜input type="hidden" name="FunName"＞〈！--用来存储你要调用的函数 --〉

在CS里有：

public Page_OnLoad()

{

if (!PageIsPost())

{

string strFunName=RequestForm["FunName"]!=nullRequestForm["FunName"]:"";

//根据传回来的值决定调用哪个函数

switch(strFunName)

{

case "enter()":

enter() ; //调用该函数

break;

case "其他":

//调用其他函数

break;

default:

//调用默认函数

break;

}

public void enter()

{

//……比如计算某值

}

javaScript函数中执行C#代码中的函数：方法一：1、首先建立一个按钮，在后台将调用或处理的内容写入button_click中; 2、在前台写一个js函数，内容为documentgetElementById("btn1")click(); 3、在前台或后台调用js函数，激发click事件，等于访问后台c#函数；方法二：1、函数声明为public 后台代码(把public改成protected也可以) public string ss() { return("a"); } 2、在html里用＜%=fucntion()%＞可以调用前台脚本＜script language=javascript＞ var a = "＜%=ss()%＞"; alert(a); ＜/script＞方法三：1、＜script language="javascript"＞＜!-- function __doPostBack(eventTarget, eventArgument) { var theForm = documentForm1; //指runat=server的form theForm__EVENTTARGETvalue = eventTarget; theFrom__EVENTARGUMENTvalue = eventArgument; theFormsubmit(); } --＞＜/script＞＜input id="Button1" type="button" name="Button1" value="按钮" onclick="javascript:__doPostBack('Button1','')"＞方法四：＜script language="javascript"＞ function SubmitKeyClick() { if (eventkeyCode == 13) { eventcancelBubble = true; eventreturnValue = false; documentallFunNamevalue="你要调用的函数名"； documentform[0]submit(); } } ＜/script＞＜INPUT onkeypress="SubmitKeyClick()" id="aaa" type="text"＞＜input type="hidden" name="FunName"＞〈！--用来存储你要调用的函数 --〉在CS里有： public Page_OnLoad() { if (!PageIsPost()) { string strFunName=RequestForm["FunName"]!=nullRequestForm["FunName"]:""; //根据传回来的值决定调用哪个函数 switch(strFunName) { case "enter()": enter() ; //调用该函数 break; case "其他": //调用其他函数 break; default: //调用默认函数 break; } } } public void enter() { //……比如计算某值 }

C#代码与javaScript函数的相互调用

问：

1如何在JavaScript访问C#函数

2如何在JavaScript访问C#变量

3如何在C#中访问JavaScript的已有变量

4如何在C#中访问JavaScript函数

问题1答案如下：

javaScript函数中执行C#代码中的函数：

方法一：1、首先建立一个按钮，在后台将调用或处理的内容写入button_click中;

2、在前台写一个js函数，内容为documentgetElementById("btn1")click();

3、在前台或后台调用js函数，激发click事件，等于访问后台c#函数；

方法二：1、函数声明为public

后台代码(把public改成protected也可以)

public string ss()

{

return("a");

}

2、在html里用<%=fucntion()%>可以调用

前台脚本

var a = "<%=ss()%>";

alert(a);

</script>

方法三：1、<script language="javascript">

<!--

function __doPostBack(eventTarget, eventArgument)

{

var theForm = documentForm1; //指runat=server的form

theForm__EVENTTARGETvalue = eventTarget;

theFrom__EVENTARGUMENTvalue = eventArgument;

theFormsubmit();

}

-->

</script>

ASPX页面有包含asp:LinkButton或者带有AutoPostBack属性且其值为true的服务器控件时，ASPNET会自动为页面生成下面的脚本：

这两个参数分别由隐藏的两个表单域__ EVENTTARGET和__ EVENTARGUMENT保存。

这两个隐藏的表单可以查找引起页面回送的控件ID和回送时的参数：

string target = RequestParams["__EVENTTARGET"];

string args = RequestParams["__EVENTARGUMENT"];

asp:Button和asp:ImageButton不是使用__doPostBack回送页面，所以使用这两个控件回送页面时，上面的代码是无效的。

方法四：<script language="javascript">

function SubmitKeyClick()

{

if (eventkeyCode == 13)

{

eventcancelBubble = true;

eventreturnValue = false;

documentallFunNamevalue="你要调用的函数名"；

documentform[0]submit();

}

</script>

<input type="hidden" name="FunName"> 〈！--用来存储你要调用的函数 --〉

在CS里有：

public Page_OnLoad()

{

if (!PageIsPost())

{

string strFunName=RequestForm["FunName"]!=nullRequestForm["FunName"]:"";

//根据传回来的值决定调用哪个函数

switch(strFunName)

{

case "enter()":

enter() ; //调用该函数

break;

case "其他":

//调用其他函数

break;

default:

//调用默认函数

break;

}

public void enter()

{

//……比如计算某值

}

问题2如何在JavaScript访问C#变量

答案如下：

方法一：1、通过页面上隐藏域访问<input id="xx" type="hidden" runat="server">

方法二：1、如后台定义了PUBLIC STRING N;前台js中引用该变量的格式为'<%=n%>'或"+<%=n%>+"

方法三：1、或者你可以在服务器端变量赋值后在页面注册一段脚本

"<script language='javascript'>var temp=" + tmp + "</script>"

tmp是后台变量，然后js中可以直接访问temp获得值。

3如何在C#中访问JavaScript的已有变量

答案如下：

方法一：1、前台使用静态文本控件隐藏域，将js变量值写入其中；

2、后台用request["id"]来获取值；

方法二：可以用cookie或session

4如何在C#中访问JavaScript函数

答案如下：

c#代码中执行javaScript函数：

方法一：1、PageRegisterStartupScript("ggg","<script>SetVisible(1);</script>");

方法二：使用Literal类，然后

private void Button2_Click(object sender, SystemEventArgs e)

{

string str;

str="<script language='javascript'>";

str+="selectRange()";

str+="</script>";

//Literal1Visible=true;

Literal1Text=str;

}

　下面总结一些常见的ASP NET中的javascript *** 作

　．为button控件添加确认功能

　要想为服务器控件添加客户端的事件需要用到Attributes属性 Attributes属性是所有的服务器控件都有的一个属性它用来为最终生成的HTML添加自定义的一些标记假设Web Form上有一个保存按钮btnSave 希望在用户点此按钮时提示用户是否确实要保存(比如一旦保存就无法恢复等) 则应在Page_Load事件中添加如下代码

btnSave Attributes Add( onclick javascript:return confirm( Are you sure to save ); )

　要注意的是 return 这是不可省的否则即使用户点了取消数据仍然会保存

　．为Datagrid中的每一行添加Javascript事件

　Datagrid中的子控件是没办法直接访问的要实现上面的那种效果我们需要用到Datagrid的OnItemDataBound事件 OnItemDataBound事件发生在Datagrid的每一行数据绑定到Datagrid之后（即一行激发一次）首先在Datagrid的声明中添加OnItemDataBound属性如下

　此处说明OnItemDataBound事件发生时调用ItemDataBound方法在代码后置文件中添加此方法的定义

private void OnItemDataBound(object sender System Web UI WebControls DataGridItemEventArgs e) { if(e Item ItemType != ListItemType Header && e Item ItemType != ListItemType Footer ) { LinkButton btnSave = (LinkButton)e Item Cells[ ] Controls[ ]; string strClientID = btnSave ClientID; //得到该控件的客户端ID 可供JavaScript调用 btnSave Attributes Add( onclick javascript:return confirm( Are you sure to save ); ); } }

　由于Datagrid的标题行和脚注行也会激发此事件所以首先判断激发此事件的行不是标题行和脚注行这里假设btnSave按钮位于Datagrid的第列（第一列是）

　．在Javascript中触发服务器端控件事件

　让我们再来考虑第一个实例我们为保存按钮增加了确认功能只有在用户确认后才会执行保存 *** 作用户不确认的话就不执行如果我们想要用户按下取消时执行另外的 *** 作怎么办呢？这就要需要用JS来回调(PostBack)服务器端控件完成 *** 作

　当前页面中有一个DropDownList控件ddlTest Button按钮btnSave 当选择ddlTest时触发onchange事件保存当前的选择值在保存前会让 *** 作者先确认用户确认则保存否则转向default aspx页

　在Page_Load事件中添加如下代码

string strCMD = Page GetPostBackClientHyperlink( btnSave ); string script = @ javascript:ConfirmUpdate( EVAL_MESSAGE ); ; script = script Replace( EVAL_MESSAGE strCMD ); ddlTest Attributes Add( onchange script);

　这段代码执行后生成的select控件将是这样

〈select name= ddlTest id= ddlTest onchange= javascript:ConfirmUpdate( javascript:__doPostBack( btnSave ) ); 〉 ConfirmUpdate函数如下〈SCRIPT language=javascript〉 function ConfirmUpdate(cmd){ if(confirm( Are you sure to update )) { eval(cmd); } else { window location } } 〈/SCRIPT〉

　这里利用了Javascript eval函数来调用一个字符串中包含的命令需注意的是包含命令的字符串不能用单引号括起来因为自动生成的脚本中包括单引号

　所以这里用两个双引号表示字符串本身的双引号

　下面是一些简单的ASP NET中的javascript *** 作

　打开新窗口

　这个简单:Response Write(@ < script

　language= javascript >window open( url );< /script> );

　关闭窗口

　//关闭当前窗口并提示用户时候关闭 yes关闭 no退出

　Response Write(@ < script language= javascript >window close();< /script> );

　//延迟关闭窗口(下面代码表示秒后关闭无需确认)

　Response Write(@ < script

　language= javascript >setTimeout( self close() );< /script> );

　延迟时间

　这个和上面的没有多少区别我用到的情况是在用户 *** 作完毕给出提示 n秒后页面

　转向之类的只需去掉重的Self close()即可

　Response Write(@ < script

　language= javascript >setTimeout( );< /script> );

　 d出提示或警告窗口

　Response Write(@ < script language= javascript >alert( 添加成功秒钟后页面

　将自动跳 );< /script> );

　刷新其他页面

　这个用到的情况还是不少比如在B页面对数据更新和修改另一页面A要保持最新数据

　给客户这是就要在对B *** 作完毕的情况下对A进行刷新:

　Response Write(@ < script language= javascript >window opener location

　< /script> ) ;

　页面跳转

　有时候在学要给出提示的情况下进行页面跳转不能使用Response Redirect( url );

　比如当客户 *** 作完毕单击按钮提交 d出提示框(使用上面和 ) 如果使用了

　Response Redirect( url );

　那么页面将不给出提示页就是和没有起作用就直接转向了

　如果你是下面的 *** 作过程:

　 ) Response Write(@ < script language= javascript >alert( 添加成功秒钟后页

　面将自动跳 );< /script> );

　 ) Response Write(@ < script

　language= javascript >setTimeout( );< /script> );

　 ) 页面转向:

　Response Write( < meta equiv= refresh

　content= ;URL= /default aspx > );

　//这个我不知道用javascript怎么实现熟悉的轻补充一下

lishixinzhi/Article/program/net/201311/12095

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/langs/11672024.html

asp.net中标准button跟html里面button控件有什么不同

发表评论

评论列表（0条）