如何在ASP.NET按钮的单击事件中调用JavaScript函数

Question

如何在ASP.NET按钮的单击事件中调用JavaScript函数

5

我该如何在ASP.NET按钮点击事件中调用showDialog？我的页面是一个与主页面相关联的内容页。

我尝试了以下方法：

<asp:Button ID="ButtonAdd" runat="server" Text="Add" 
                            OnClientClick="showDialog('#addPerson');" />
  <asp:Button ID="ButtonAdd" runat="server" Text="Add" 
                            OnClientClick="showDialog(#<%=addPerson.ClientID %>);" />

我还需要从gridview模板按钮调用同样的函数以便在对话框中修改记录。

<script type="text/javascript">


    // Used the following example to open the dialog withJquery 
        var dl;
        $(document).ready(function () {

            //Adding the event of opening the dialog from the asp.net add button.
            //setup edit person dialog             
            $('#addPerson').dialog({
                //Setting up the dialog properties.
                show: "blind",
                hide: "fold",
                resizable: false,
                modal: true,
                height: 400,
                width: 700,
                title: "Add New Member",
                open: function (type, data) {
                    $(this).parent().appendTo("form:first");
                }
            });

            //setup edit person dialog             
            $('#editPerson').dialog({
                //Setting up the dialog properties.
                show: "blind",
                hide: "fold",
                resizable: false,
                modal: true,
                height: 400,
                width: 700,
                title: "Modify Member",
                open: function (type, data) {
                    $(this).parent().appendTo("form");
                }             
            });



            function showDialog(id) {
                $('#' + id).dialog("open"); 
            } 



    //        function closeDialog(id) {
    //            $('#' + id).dialog("close"); 
    //        } 

            //Adding a event handler for the close button that will close the dialog 
            $("a[id*=ButtonCloseDlg]").click(function (e) {
                $("#divDlg").dialog("close");
                return false;
            });
        });

       </script>

尝试从gridview的编辑按钮调用jquery对话框，但出现相同的错误“对象不支持此属性或方法”？

<input type="submit" name="ctl00$ContentPlaceHolder1$GridViewMembers$ctl02$Button1" value="Edit" onclick="showDialog(&#39;addPerson&#39;);" id="ContentPlaceHolder1_GridViewMembers_Button1_0" />

- Spafa9

3

你尝试过使用 OnClientClick="showDialog('#<%=addPerson.ClientID %>');" 吗？ - Bala R

2个回答

3

您已经在showDialog()函数中添加了井号，但是您的第二段代码片段中缺少单引号。您还应该从处理程序中返回false，以防止发生回发。尝试：

<asp:Button ID="ButtonAdd" runat="server" Text="Add"
    OnClientClick="showDialog('<%=addPerson.ClientID %>'); return false;" />

- Frédéric Hamidi

<input type="submit" name="ctl00$ContentPlaceHolder1$ButtonAdd" value="Add" onclick="showDialog('<%=addPerson.ClientID %>');WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$ButtonAdd", "", true, "", "", false, false))" id="ContentPlaceHolder1_ButtonAdd" /> - Spafa9

@Spafa9，看起来是作用域问题。尝试将showDialog()函数声明在document.ready()块之外。 - Frédéric Hamidi

我们有必要将 JavaScript 的字符串直接硬编码到 ASP 控件中吗？难道我们不能使用非侵入式的 JavaScript 吗？ - Raynos

@Raynos，你的意思是在客户端注册一个click处理程序而不是使用ClientClick事件吗？这可能是更好的设计，但我不认为提问者在询问那个 :) - Frédéric Hamidi

这让我想起了<div onclick="doSomeMagic();">和<a href="javascript: void HackYou();">，让我感到非常不舒服。但实用主义是可以的。 - Raynos

@Raynos，您能展示一下您所说的内容的示例吗？我试图让它从GridView按钮中运行。我已经简化了JavaScript代码以尝试让其正常工作。但是它一直在显示对象不支持属性'function fname() { alert('I am here'); }'的错误信息。 - Spafa9

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tejs · Accepted Answer

如果您按下此按钮时不需要发起后台请求，那么创建一个服务器控件的开销就是不必要的。

<input id="addButton" type="button" value="Add" />

<script type="text/javascript" language="javascript">
     $(document).ready(function()
     {
         $('#addButton').click(function() 
         { 
             showDialog('#addPerson'); 
         });
     });
</script>

如果您仍然需要进行后台提交，您可以使用稍微不同的代码有条件地停止按钮的其余操作：

<asp:Button ID="buttonAdd" runat="server" Text="Add" />

<script type="text/javascript" language="javascript">
     $(document).ready(function()
     {
         $('#<%= buttonAdd.ClientID %>').click(function(e) 
         { 
             showDialog('#addPerson');

             if(/*Some Condition Is Not Met*/) 
                return false;
         });
     });
</script>