zoukankan      html  css  js  c++  java
  • ASP.NET 多个提交按钮页面,ENTER指定执行某一按钮

    在WEB页面上,通常SUBMIT类型的按钮会被默认指派为所在FORM表单的提交按钮

    我们在做ASP.net WEB应用的时候,常常遇到会在同一个页面里添加多个按钮,而每个按钮肯定都会触发页面回送事件。

    在ASP.NET中,只能指定一个带有RUNAT=SERVER的FORM表单,因此,这个表单会指派哪个按钮为默认提交按钮呢?

    不做任何处理的情况下是很难控制的,例如在同一个页面里做了N个搜索框,设计上理想的思路是在某一输入框输入关键字后,用户按ENTER键,执行当前输入的输入框对应的提交按钮,但是,实际上往往事与愿违。无论怎么提交,总是会只执行某一个按钮事件。

    网上很多方法都是使用JAVASCRIPT来进行判断,在输入框中加入KEYPRESS之类的事件,然后检查eventCode,如果是回车键,那么就指定执行某一个按钮。

    这个方法不是不行,但是,并不好维护,而且在处理复杂的逻辑时,往往不好控制。

    其实,ASP.NET给出了很好的解决方案,只是通常不被人注意。

    首先,屏蔽浏览器提交模式,也就是说,FORM不再默认指定一个ENTER提交的按钮

    方法是将BUTTON的UseSubmitBehavior设置为false,这样这个按钮就不会接受回车提交,这样就不会出现用户焦点在页面某处聚焦时按回车提交的情况。

    为什么会这样呢?查看页面源文件我们会发现本来ASP.NET的BUTTON服务器控件在发送到客户端后type="submit",但这时UseSubmitBehavior设置为false后,type="button" ,而且多了一个onclick事件,内容是"javascript:__doPostBack('Button1','')" id="Button1",这样,就说明,这个按钮不再是FORM的提交按钮了,而只是一个普通按钮,要提交页面必须执行click事件,所以怎么点回车,也不会执行这个按钮的提交事件。

    刚才只是第一步,阻止了默认的提交。但是,我们要的效果是回车可以提交啊。只是设置这一个属性当然无法达到我们想要的效果。

    接下来,我们要了解Panel控件。

    其实Panel控件是非常有用的,他是一个容器,在ASP.NET的Panel控件中有一个属性 DefaultButton 这个属性在ASP.NET的FROM控件中也有。

    Panel是一个特殊的控件 MSDN上的说明是:使用Panel 控件来组织 Form、另一 Panel 或模板中的内容和控件。

    也就是说Panel是ASP.NET对FORM的一个补充,可以给表单分区域的控件,这也是为什么ASP.NET AJAX容器使用该控件的原因。

    我们都知道,ASPX只能有一个runat=“server”的FORM表单,那么要进行细致,具体的FORM操作怎么办,那么就得靠Panel控件

    这里,我们就会用到Panel的这个功能

    将一组输入框和按钮放在一个Panel中,指定该Panel的DefaultButton属性为按钮ID,这样,当用户焦点处于这个Panel内的某一控件时,点击回车就会执行这个Panel的DefaultButton所指定的按钮。

    Panel是Form的补充控制,可以通过使用Panel对表单进行更多的操作,这样,ASP.NET只能拥有一个Form所引起的一些困难都可以迎刃而解。

    实例代码就不具体写了,毕竟只是设置一下控件属性,并不困难,只是大部分人没有注意到这个问题。

     

    <asp:Panel ID="SearchPanel" DefaultButton="SearchSubmit" runat="server">

        

        <asp:TextBox ID="Key" MaxLength="30" Width="300px" runat="server"></asp:TextBox>

                   

        <asp:Button ID="SearchSubmit" CssClass="btn" runat="server" Text="  搜索  " CausesValidation="False" onclick="SearchSubmit_Click" UseSubmitBehavior="false"/>

     

    </asp:Panel>

  • 相关阅读:
    hadoop中namenode发生故障的处理方法
    开启虚拟机所报的错误:VMware Workstation cannot connect to the virtual machine. Make sure you have rights to run the program, access all directories the program uses, and access all directories for temporary fil
    Hbase的安装与部署(集群版)
    分别用反射、编程接口的方式创建DataFrame
    用Mapreduce求共同好友
    SparkSteaming中直连与receiver两种方式的区别
    privot函数使用
    Ajax无刷新显示
    使用ScriptManager服务器控件前后台数据交互
    数据库知识
  • 原文地址:https://www.cnblogs.com/ZetaChow/p/2237340.html
Copyright © 2011-2022 走看看