从HTML按钮控件调用服务器端事件

28

我正在使用ASP.Net创建一个应用程序,在其中一个aspx页面上有一个HTML按钮。

<input type="submit" id="btnSubmit" runat="server" 
   style="background-image:url(App_Themes/default/Images/quiz_class/btn_submit.jpg);
   width:80px; height:29px;" onserverclick="btnSubmit_ServerClick" />

但是当我点击这个按钮时,它并没有调用aspx.cs页面上的btnSubmit_ServerClick事件。

我不想使用asp控件按钮。

请帮忙解决。


1
所以...已经过去3年了。你最后解决了这个问题吗?接受一个答案吧!(即使你必须先创建它) - Cullub
7个回答

44

如果您可以通过指定 runat="server" 将输入按钮转换为服务器端控件,并且正在使用 asp.net,一种选择是使用 HtmlButton.OnServerClick 属性。

<input id="foo "runat="server" type="button" onserverclick="foo_OnClick" />

这应该能够正常运行并在您的服务器端代码中调用foo_OnClick。 还要注意,根据上面链接的 Microsoft 文档,您也应该能够使用 HTML 4.0 的<asp:Button>标签。


1
你如何声明 foo_OnClick - Cullub
明白了:<script language="C#" runat="server"> </script> 你的 C# 代码必须放在这里。 - Cullub

5
在您的aspx页面上,使用通常的属性(如runat、class、title等)定义HTML按钮元素。
如果此元素是数据绑定控件的一部分(例如:网格视图等),您可能需要使用CommandName和可能的CommandArgument作为属性。添加按钮的内容和闭合标签。
<button id="cmdAction" 
    runat="server" onserverclick="cmdAction_Click()" 
    class="Button Styles" 
    title="Does something on the server" 
    <!-- for databound controls -->
    CommandName="cmdname"> 
    CommandArgument="args..."
    >
    <!-- content -->
    <span class="ui-icon ..."></span>
    <span class="push">Click Me</span>
</button>

在代码背后的页面上,元素将调用被定义为该元素ID_Click事件函数的处理程序。
protected void cmdAction_Click(object sender, EventArgs e)
{
: do something.
}

除了使用自定义控件等其他解决方案外,还有其他解决方法。另外请注意,我正在使用VS2K8在项目中实时使用此功能。

希望这能帮到你。 享受吧!


1
最简单的方法是重写RaisePostBackEvent方法。
<input type="button" ID="btnRaisePostBack" runat="server" onclick="raisePostBack();" ... />

在你的 JavaScript 中:

raisePostBack = function(){
    __doPostBack("<%=btnRaisePostBack.ClientID%>", "");
}

在你的代码中:

protected override void RaisePostBackEvent(IPostBackEventHandler source, string eventArgument)
{
    //call the RaisePostBack event 
    base.RaisePostBackEvent(source, eventArgument);

    if (source == btnRaisePostBack)
    {
         //do some logic
    }
}

我尝试了这段代码,触发了一个PostBack,但是protected override void RaisePostBackEvent函数没有执行。如何解决这个问题? - Pranesh Janarthanan

0
您可以按照以下方式使用事件处理程序serverclick:
// cmdAction是HTML按钮的ID,如下所示
<body>
    <form id="form1" runat="server">
        <button type="submit" id="cmdAction" text="Button1" runat="server">
            Button1
        </button>
    </form>
</body>

//cs 代码

public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
                cmdAction.ServerClick += new EventHandler(submit_click);  
        }

        protected void submit_click(object sender, EventArgs e)
        {
            Response.Write("HTML Server Button Control");
        }
    }

0

只需在您的按钮点击事件结束时使用此代码

protected void btnAddButton_Click(object sender, EventArgs e)
{
   ... save data routin 
     Response.Redirect(Request.Url.AbsoluteUri);
}

0

对于尝试处理复选框的人来说,这些解决方案都不起作用,因为你需要它成为HTML输入(而不是HTML按钮)。

SPArcheon的答案在添加type="checkbox"后就不起作用了,这是代码后端中.checked运算符所需的。一旦添加了type="checkbox",HTML输入框中就没有OnServerClickServerClickCheckedChanged。你只有ServerChanged,但它是无用的,因为它需要完整的页面刷新。

实际上,我不得不使用CSS来使HTML按钮类似于复选框,使用Bootstrap的btn-outline-secondary类作为起点。

.btn-checkbox-unchecked {
    padding: .35rem .35rem !important;
    font-size: .875rem !important;
    line-height: .5 !important;
    border-radius: .15rem !important;
    border-width: .20em !important;
}

.btn-checkbox-checked {
    padding: .1rem .1rem !important;
    font-size: .6rem !important;
    line-height: .5 !important;
    border-radius: .15rem !important;
    border-width: .20em !important;
    border-color: #0060df !important;
    background-color: #0060df !important;
}

    .btn-checkbox:hover {
        border-color: #676774 !important;
        background-color: #0250BB !important;
    }

在aspx文件中:

<button class="btn btn-xs btn-outline-secondary" id="btnFakeCheckbox" runat="server" clientidmode="static" autopostback="true" data-bs-toggle="button" autocomplete="off"></button>

然后在您的代码后台,您可以相应地设置属性(类)

当它被选中时:

btnFakeCheckbox.Attributes.Add("class", "btn btn-xs btn-secondary btn-checkbox-checked active")
btnFakeCheckbox.Attributes("aria-pressed") = "true"
btnFakeCheckbox.InnerHtml = "<i class='fas fa-check'></i>"

当它未被选中时:

btnFakeCheckbox.Attributes.Add("class", "btn btn-xs btn-outline-secondary btn-checkbox-unchecked")
btnFakeCheckbox.Attributes("aria-pressed") = "false"
btnFakeCheckbox.InnerHtml = ""

(请注意最后一行的字体Awesome复选框图标,您将需要在您的aspx中包含它)

这是一个非常荒谬的解决方法,用于解决更加荒谬的框架问题。如果有人有一个Bootstrap 5开关切换的解决方案,请告诉我。


0

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接