如何从asp.net中的动态按钮调用javascript？

Posted 2023-03-25

【中文标题】如何从asp.net中的动态按钮调用javascript？

【英文标题】：How to call javascript from dynamic button in asp.net?

【发布时间】：2020-08-23 04:54:18

【问题描述】：

我正在尝试通过 Magnific popup plagin 制作一个弹出菜单/模式框。

     //Dynamic button:
     Button btn1 = new Button
                    
                        Text = "Button1"
                    ;
     btn1.Attributes.Add("onClick", "javascript:return openForm();");

How do you think it is possible to write a script like this:

<script type="text/javascript">
       function openForm() 
             $('.popup-with-form').magnificPopup(
                 type: 'inline',
                 focus: '#name'
             );
            
   </script>

或者如何将动态按钮与此脚本关联？

 <!-- The Modal -->
<div id="form-popup" class="white-popup mfp-hide">
 <div runat="server" action="#">
 <div><input id="name" class="inputbox" type="text" placeholder="Your name" /></div>
 <div><input id="email" class="inputbox" type="email" placeholder="Your e-mail" /></div>
 <div><textarea name="mess" id="mess" class="inputbox" cols="30" rows="10" placeholder="Your message"></textarea></div>
 <div><input type="submit" value="Send"></div>
 </div>
</div>

以及这样做是否会出错，用div替换form：

<form action="#">     ----->   <div runat="server" action="#"> 

【问题讨论】：

这里提供的信息不足以回答。能否请您添加更多详细信息。

尝试用这个 btn1.Attributes.Add("onclick", "openForm()"); 改变按钮事件myBtn 是谁？

Bhasyakarulu Kottakota，我编辑了我的答案，Luciano，我检查了脚本是否通过警报调用并且它有效。

@LUGYAMIR 请检查答案

【参考方案1】：

编辑 1

现场演示：https://stackblitz.com/edit/js-6qdlqt?file=index.html

---

试试这些改变。

弹出窗口：

<div id="form-popup" class="white-popup mfp-hide">
    <div runat="server" action="#">
      <div><input id="name" class="inputbox" type="text" placeholder="Your name" /></div>
      <div><input id="email" class="inputbox" type="email" placeholder="Your e-mail" /></div>
      <div><textarea name="mess" id="mess" class="inputbox" cols="30" rows="10" placeholder="Your message"></textarea></div>
      <div><input type="submit" value="Send"></div>
    </div>
</div>

弹窗样式：

.white-popup 
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;

脚本初始化：

$(function () 
  $('#btnOpenPopup').magnificPopup(
    type:'inline',
    closeBtnInside: true
  );
);

动态按钮：

  Button btn1 = new Button
      
        ID = "btnOpenPopup",
        Text = "Button1"
      ;
  btn1.Attributes.Add("data-mfp-src", "#form-popup");

插件文档：

https://dimsemenov.com/plugins/magnific-popup/documentation.html

【讨论】：

感谢您提供有趣的解决方案，但不幸的是它还没有奏效

通过 F12 DevTools 没有错误，但是当你点击按钮时没有反应。在我看来，脚本可能无法连接。我应该只将脚本连接放在母版页上吗？还是不行？

@LUGYAMIR 是的，对脚本和 css 的引用应该在主 html 中（它可能会因您使用的站点的架构而异）。查看我在答案中添加的现场演示。检查项目中的所有内容是否与演示中的一样。

非常感谢，您解决了。我刚刚将 CssClass = "btnOpenPopup" 添加到动态按钮

是的，当然，我投票了，但我的声望不到 15，所以我无法更改公开显示的帖子分数。