【问题标题】:ASP button OnClick not firing in javascript popupASP 按钮 OnClick 未在 javascript 弹出窗口中触发
【发布时间】:2020-09-10 13:44:38
【问题描述】:

我正在尝试从 javascript 弹出窗口中提交表单数据。 弹出窗口可以正常打开并按预期显示所有元素。当我单击 asp:button 时,在输入任何内容之前,它会按预期执行所需的字段验证。所有这些都工作得很好。 我遇到的问题是让 OnClick 工作并提交表单数据。 说我是 javascript/JQuery 的初学者是轻描淡写的,所以要求对这个有一点帮助。提前感谢您的帮助。

<asp:Button ID="submitRes" CssClass="button" runat="server" ClientIDMode="Static" Text="Submit This Form Data" OnClick="Submit_Click" />

$( document ).ready(function() {

    $(document).on("click", ".divPopupAdd", function(event){
        showPopup()
    });

    function showPopup(){
        $("#popup_add").dialog({
            show: { effect: "blind", duration: 200 },
            resizable: false,
            modal: true,
            width: 750,
            height: 450,
            open: function(){
            $('#<%=submitRes.ClientID %>').click();
            }
        });
    }
});

【问题讨论】:

  • 我没有看到这个功能 Submit_Click 并且你的按钮没有类 divPopupAdd
  • divPopupAdd 应用于我页面上的单独图像。它的功能只是简单地“打开”弹出窗口。那工作正常。 Submit_Click 在我后面的 vbscript 代码中,一切正常。我只是想让它从弹出窗口中的按钮触发。在弹出窗口外使用按钮时,一切正常。
  • 您还没有向我们展示 Submit_click 的代码
  • Submit_Click 在我的 vbscript 代码中,并且运行良好。当我将按钮放在弹出窗口中时,我只是想让它触发。在“弹出窗口之外”使用同一个按钮时,一切正常。

标签: javascript jquery asp.net


【解决方案1】:

好的,这就是您回帖的方式 - 单击一个按钮以在后面运行您的代码。

我们将一步一步地进行布局。

我们假设,您单击表单上的一个按钮,它会启动 jQuery 对话框?在这里更重要的是,这“是”实际上是您的这种形式的流程。

因此,我将假设用户单击一个按钮,然后启动对话框。 (并避免该文档准备就绪。请转储它)。

现在显示对话框。在该对话框中,我们假设用户输入数据,执行任何操作,然后单击按钮确定,或者单击按钮取消?

接下来: 您不能在该对话框中执行/使用 asp.net 按钮进行回发。它不会起作用——故事结束!

如果您确实让帖子恢复工作,它会弄乱您当前的页面“dom”,该页面包含当前网页以及对话框。它只是不起作用——不要这样做,好吗? (所以该对话框中没有回帖!!)

但我们仍然可以很高兴地完成这项工作!!!

那么,我们如何在对话框中设置一个按钮?

假设您需要单击对话框内的按钮?

按钮必须是客户端 JavaScript (js)。 该按钮将: 关闭对话框,然后回帖。

所以,我们因此需要这个流程:

单击按钮时显示对话框(客户端 js)。

用户在该对话框中执行任何操作。

用户现在点击一个按钮(说确定,或取消)。

为了发疯,我们可以并且愿意吗?我们将放在表单上并使用标准的 asp.net 按钮。确实没有必要采用 HTML“输入”按钮。 (可以,但这里没有真正需要)。

我将在该对话框中使用内置的 jQuery 按钮和两个标准按钮(原因很多,但这样你可以选择任何一种方式,然后学习这个。(男孩,我和某人一起布置过吗?这对我有什么用!!!)。所以,我要在这里为你省去很多痛苦。

所以,让我们从顶部开始: 弹出对话框的按钮代码。

asp 按钮是这样的:

<asp:Button ID="showdialog" runat="server" Text="Show the dialog" 
        OnClientClick="showpop();return false;"/>

注意在上面!!!! 我们使用 OnClientClick=showpop();return false。 因此,这将运行 js 代码,而不是回发。 return = false 在这里非常重要,因为如果你忽略它,那么标准的 asp 按钮将像“正常”一样返回。我们打破了我们的新规则!! – 对话框内没有回帖!!。

好的,这就是启动对话框的按钮。

启动弹窗的js代码和你的类似。

例如:

  function showpop() {
        var mydiv = $('#popdialog');
        mydiv.dialog({
            autoOpen: false, modal: true, title: 'My cool dialog, width: '30%'
        });
        // Open the dialog
        mydiv.dialog('open');
    }

现在,对于这个示例,我们假设您在该对话框中放置了一些标准的 asp 按钮。但是,您经常想使用内置的对话框按钮。所以让我们为这个例子做两个。

所以,上面的代码就变成了这样:

    function showpop() {
        var mydiv = $('#popdialog');
        mydiv.dialog({
            autoOpen: false, modal: true, title: 'My cool other page', width: '30%',
            position: { my: 'top', at: 'top+150' },
            buttons: {
                'ok': mycustomok,
                'cancel': mycustomcancel
                }
            
        });
        // Open the dialog
        mydiv.dialog('open');
    }

注意我们添加的两个内置按钮。 (好的,然后取消)。 请注意我是如何打破“设置”的,然后是弹出对话框的那一行。

在我们的弹出 div 中,我们还有两个自定义按钮。如前所述,我包括自定义和内置对话框。这将花费你“几个小时”来获得很好的例子,现在你可以选择任何一条道路。

所以,我们的 div 有一些文本、两个自定义按钮和一个简单的文本框。

div 看起来像这样:

<div id="popdialog" runat="server" style="display:none">
    <h2>My cool pop dialog</h2>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <br />

    <asp:Button ID="MyOk" runat="server" Text="My custom ok" 
        OnClientClick="mycustomok();return false;"/>
    <br />

    <asp:Button ID="MyCancel" runat="server" Text="My custom cancel" 
        OnClientClick="mycustomcancel();return false;"/>

</div>

上面唯一需要注意的是整个“div”的 style=”display:none”。因此,这将隐藏 div,并且在页面加载时不会显示。

所以,当我们点击按钮时,它会显示对话框。你会看到这个:

所以,我们有两个自定义按钮,还有两个 jQuery 按钮。如果您不想要内置的,请使用我的第一个示例代码。正如我所说,您可以选择您想要、喜欢或感觉要在此处使用的按钮。重点是两组按钮的作用相同。

因此,对于此示例,您单击“确定”或“我的自定义确定”。 无论哪种方式?我们希望我们的帖子能够支持该选择。

对于我的自定义取消或内置取消,我们希望后面的代码(服务器代码)针对该取消选择运行。请记住,您通常不需要任何代码 - 只需关闭并取消对话框,什么也不做。

因此,我们为此拥有的两个 js 存根是:

    function mycustomok() {
        // first, close the dialog
        $('#popdialog').dialog('close');
        #('#HiddenOk').click();
    }

    function mycustomcancel() {
        // first, close the dialog
        $('#popdialog').dialog('close');
        $('#HiddenCancel').click();
    }

如前所述,如果您对对话框使用 BUILT IN 按钮,那么您不需要我上面提到的对话框的“关闭”。但是您使用(我们假设)自定义按钮,而不是内置的 jQuery 按钮。

如上所述,根据任一选择,我们将进行回发并在后面运行代码。正如我所说,最简单的方法是在表单上放置两个隐藏按钮,它们看起来像这样,当然我们在上面的 div 之外

    <asp:Button ID="HiddenOk" runat="server" Text="hidden ok"
        style="display:normal"/>

    <asp:Button ID="HiddenCancel" runat="server" Text="hidden cancel" 
        style="display:normal"/>

注意小心(注意这里的BEYOND小心)。 我有两个按钮的 display = normal 。原因是您可以使用设计器双击按钮,然后在后面编写代码。当您完成并编写了存根后面的代码后,将上面的 display:normal 更改为 display:none 以隐藏它们。所以我们让按钮可见以便于开发。一旦你连接了后面的代码(只需双击设计器中的按钮),你就会跳转到编辑器后面的代码,并且可以编写该代码。

我现在有这个:

Protected Sub HiddenOk_Click(sender As Object, e As EventArgs) Handles HiddenOk.Click
    Debug.Print("dialog ok code run")
End Sub

Protected Sub HiddenCancel_Click(sender As Object, e As EventArgs) Handles HiddenCancel.Click
    Debug.Print("dialgo cancel code")
End Sub

当然,你可以写任何你需要的东西。如前所述,您可能不需要任何取消按钮的代码——如果您愿意,您可以将其排除在此设计之外。 因此,为您自动连接了两个代码子(这就是我们都喜欢 asp.net 表单的原因,对吗???)。

上面提到的“点击”按钮技巧相当不错。它解决了一长串问题,而且非常轻松。 您会收到所需的帖子。 你可以在后面运行你自己可爱的小代码存根。 您不必编写 ajax 调用来执行此操作!!!

因此,这遵循了整个 asp.net 设计模式,您将按钮放在表单上,​​单击它们,然后您就可以在存根后面运行那个漂亮的小短代码。一切都会自动为您连接起来。

总结如下: 不要在对话框中尝试 + 尝试回帖——你真的不能这样做。 而且你发现它们无论如何都不起作用!所以该对话框上的按钮将运行“js”代码。 如果需要,您可以使用 asp 按钮,只需记住额外的 return=false 部分。

如果您必须在关闭之前在该对话框中设置/发送一些信息到服务器?嗯,这是一个不同的问题和答案。但是jQuery“ajax”方法真的很好用,你可以直接在你现有的网页代码后面调用函数,而且不费吹灰之力。您甚至不必知道如何设置 Web 方法 - asp.net 将完成所有繁琐的工作。但让我们再举个例子吧。

试试上面的想法 - js 中的“点击”按钮技巧确实是让这一切变得非常容易编写和设置的神奇关键。

【讨论】:

  • 谢谢...您超出了我的预期。让我走上正轨,开辟更多可能性。太棒了!!!
【解决方案2】:

如果您希望从后端调用 JavaScript 弹出窗口,您可以使用 ClientScript.RegisterStartupScript

语法:

ClientScript.RegisterStartupScript(Type type, string key, string script, bool addScriptTags)

参数

Type:要注册的启动脚本的类型。这是“类型”的类型

key:要注册的启动脚本的key。这是String的类型

script:要注册的启动脚本文字。这是String的类型

addScriptTags:一个布尔值,指示是否添加脚本标签。这是bool 类型 - 真或假。

你可以这样写:

protected void Button_clilck(Object sender, EventArgs e){
  ClientScript.RegisterStartupScript(GetType(), "Key","showPopUp(),true);

}

如果你想从前端调用你的弹出方法,你可以简单地在 asp:button 中调用 JS 方法,写 OnClientClick

<asp:Button ID="submitRes" CssClass="button" runat="server" ClientIDMode="Static" Text="Submit This Form Data" OnClick="Submit_Click" OnClientClick="showPopup" />

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-06-02
    • 1970-01-01
    • 2015-09-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-10-16
    相关资源
    最近更新 更多